Google Calendar

A cloud-based calendar service, Google Calendar integrates with a variety of other products in the G Suite. And with the Google Calendar data source type, it is possible to use that calendar data in Skuid pages.

Configuration

As with any Google data source type, you must first create a Google project within the Google API Manager to receive a client ID and client secret, as shown above. Once you’ve created a Google project, you’ll then need to enable the Google Calendar API in that project.

After doing so, you’ll need to configure a Skuid data source to use your newly enable API in Skuid.

Create the Google Calendar data source

  1. Within Skuid, navigate to Configure > Data Sources > Data Sources.
  2. Click New Data Source.
  3. Click the GoogleCalendar data source type.
  4. Enter a unique name for your data source, such as GoogleCalendar.
  5. Click Next Step.
  6. Select the authentication provider you created in the previous section.
  7. Click Save new Data Source.
  8. If Skuid asks to create a Remote Site Setting, click OK.

You can now use the Google Calendar data source type.

Usage

You will be using two different model entities.

  • Calendar: This entity will return a list of calendars and IDs
    • Fields include:
      • Id: (Default) The alphanumeric ID of the individual calendar.
      • Title: (Default) The user-friendly “name” of the calendar, often an email address.
      • Background Color: The Hex code for the color used as each event’s background in the Google Calendar UI.
      • Foreground Color: The Hex code for the color of the text on each event’s summary in the Google Calendar UI.
  • Event: this entity will return a list of specific calendar events.
    • Fields include:
      • Id: (Default) The alphanumeric ID of the individual event.
      • Summary: (Default) The user-friendly “name” of the event. This field is equivalent to the Google Calendar Event subject line.

This entity also has conditions.

  • Default conditions include:
    • calendarId: The alphanumeric ID of a Google calendar to pull events from. By default, this condition is set to the primary calendar for the Google account.
    • timeMin: Determines the oldest events to pull. By default, the model will pull events from the preceding five weeks.
    • timeMax: Determines the newest events to pull. By default, the model will pull events from the next five weeks.

Set the timeMin and timeMax condition with Strings [[]]

The event entity’s timeMin and timeMax conditions can be set using a variety of strings.

  • NOW
  • YESTERDAY
  • TODAY
  • TOMORROW
  • LAST_90_DAYS
  • NEXT_90_DAYS
  • LAST_N_DAYS: [Insert any positive number here]
  • NEXT_N_DAYS: [Insert any positive number here]
  • N_DAYS_AGO: [Insert any positive number here]
  • LAST_WEEK
  • THIS_WEEK
  • NEXT_WEEK
  • LAST_N_WEEKS: [Insert any positive number here]
  • NEXT_N_WEEKS: [Insert any positive number here]
  • N_WEEKS_AGO: [Insert any positive number here]
  • LAST_MONTH
  • THIS_MONTH
  • NEXT_MONTH
  • LAST_N_MONTHS: [Insert any positive number here]
  • NEXT_N_MONTHS: [Insert any positive number here]
  • N_MONTHS_AGO: [Insert any positive number here]
  • LAST_QUARTER
  • THIS_QUARTER
  • NEXT_QUARTER
  • LAST_N_QUARTERS: [Insert any positive number here]
  • NEXT_N_QUARTERS: [Insert any positive number here]
  • N_QUARTERS_AGO: [Insert any positive number here]
  • LAST_YEAR
  • THIS_YEAR
  • NEXT_YEAR
  • LAST_N_YEARS: [Insert any positive number here]
  • NEXT_N_YEARS: [Insert any positive number here]
  • N_YEARS_AGO: [Insert any positive number here]

Note

Strings used to set a date or datetime value for future dates, such as NEXT_N_DAYS or NEXT_N_WEEKS, return a range of dates that match the query. Because these functions return a range of values—not a single value—only the first value will be used.

For example: If you set NEXT_N_DAYS to 5, it will return a range consisting of Next Day 1 - Day 5. Skuid will use the Day 1 value since it is the first value in that range.

Event

The event is where the heart of your calendar experience lies. Some fields you’ll want to add to use this model as a calendar event source include:

  • Start Date Time: The starting time for an event as a datetime field. (Editable by event creator.)
  • End Date Time: The ending time for an event as a datetime field. (Editable by event creator.)
  • Description: The full-length description of a calendar event. (Editable by event creator.)
  • Attendees: A semicolon-separated list of email for attendees of the event.
  • Attendees Details: This field is associated with multiple Google-specific sub-fields (selectable by clicking fa-arrow-circle-o-right) including Email, Response Status, Additional Guests, and Comment. (Not editable by event creator.)
  • Location: Displays the location of the event. (Editable by event creator.)
  • Guests Can Invite Others: A checkbox that allows the event creator to select whether guests can invite others to the event. (Editable by event creator.)
  • Status: A picklist that displays standard Google status options for the event (Confirmed, Tentative, Cancelled). Event creators can set—and update—the event’s status. (Editable by event creator.)

For more information about the available fields you can access, see Google’s documentation on the events entity.

Example Use Case

Like the Google calendar interface, most Skuid pages that utilize Google calendar will need:

  1. A way to select which calendar is being used
  2. A way to display the events in the selected calendar.

As such, a common page setup when working with Google Calendar involves two main components:

  1. A queue that uses the calendar model to list all available calendars, using the following properties:
    • Item Display: Set the queue to display user-friendly calendar names.
      • Item Renderer Type: Template
      • Render Template: {{summary}}
    • Interactions: Set the queue to update the event calendarId condition when a calendar queue item is clicked.
      • Click
        • Activate and Set Model Condition
          • Model: event
          • Condition: calendarId
          • Value: {{id}}
        • Query Model
          • Model: event
          • Query Behavior: Standard - Completely Replace Data
  2. A calendar that uses your event model as an event source. When you select a calendar from the Calendar queue (above), the selected calendar displays all events and allows you to create, edit, and delete events.
    • Click Add Event Source
    • Click the New Event Source and use the following settings:
      • Basic
        • Source Name: Google Calendar
        • Model: event
        • Name Field: summary
        • Start Field: startDateTime
        • End Field: endDateTime
        • Grouping Field: Leave this field blank.

From here you can set up your queue and calendar based on your needs, as they are now properly configured to work with your Google calendar data.

Troubleshooting

  • Request to data source “<Your data source name>” failed: Access Not Configured. Drive/Calendar API has not been used in project: You may not have enabled the Drive or Calendar API in your Google project. You can visit the link noted in the error message to quickly enable the API, or you can visit Google’s API Manager to do so. If you have enabled your API, note that it will take several minutes for your changes to propagate Google’s systems.
  • 401 error: Error: deleted_client: If you see this error in your authentication popup, that means the OAuth credentials you created in your Google Project have been deleted. Return to the API Console to create a set, and then update your authentication provider to match.
  • If your page is stuck on the “Loading…” message: This may mean the scope is not provided when authenticating. While Skuid will often fill in your default scopes, you can try adding scopes in the Default Scopes field in your authentication provider. To do so, insert https://www.googleapis.com/auth/calendar and https://www.googleapis.com/auth/drive in the Default Scopes field, separated by a space.