Digital Signage: Connect to a Google Calendar

Overview

This document outlines the process for using a Google calendar API (Application Program Interface) to customize how a calendar displays on digital signage.

Note A Google calendar can also be added to digital signage simply as a website (live data content item). However, this method will display the calendar exactly as it appears in a web browser.

Make the Google Calendar Public

Note Carefully consider whether it is appropriate to make the calendar public.

  1. In Google Calendar, select Calendar settings from the calendar's drop-down menu.

    google calendar drop-down menu

  2. Note the Calendar ID located on the Calendar Address row. You will use it later on in this process.

    google calendar calendar address

  3. Click the Share this Calendar tab.

    calendar sharing window

  4. Check the Share this calendar with others and Make this calendar public boxes.
  5. Select See all event details from the drop-down list next to Make this calendar public.
  6. Click Save.

Configure the Google Calendar API

  1. Go to the Google Developers Console.

    Note You may need to create a developer account. Refer to the Developers Console help page.

  2. Select Create project from the Project drop-down menu.

    project menu

  3. Enter a Project name and select applicable options.
  4. Click Create.
  5. Click Calendar API under Google Apps APIs.

    google apps APIs list

  6. Click Enable.

    google calendar API

  7. Click Create Credentials.

    create credentials button

  8. Click the API key link.

    credentials page

  9. Enter a Name for the key.

    Note Accept the default value of None under Key restriction.

    credentials page

  10. Click Create.
  11. Copy Your API key and store it somewhere (i.e., Notepad) for later use.

    Note Do not restrict the key.

    API Key created window

  12. Click Close.

Add the Calendar as a Live Data Content Item in Content Manager

  1. Open Content Manager software.
  2. Right click on your content folder, choose create new content in category and then select Live Data.
  3. Enter a Name for the live data item.

    live data properties window

  4. Click the Dynamic URL dynamnic URL button button.
  5. Enter the Path as follows: https://www.googleapis.com/calendar/v3/calendars/calendar id/events

    Note The Calendar ID was gathered earlier in this process, but can be found again by going to calendar settings in Google.

    dynamic URL window

  6. Click Add row add row button five times.
  7. Enter the following data exactly as it appears below into the fields, with the exception of the API key. Enter your previously recorded API key into this field.
    singleEvents text true
    orderBy text Star
    maxResults text 50
    timeMin Date/Time yyyy'-'MM'-'dd'T'HH':'mm':'ss.fffffffK
    API key text  
  8. Use the Test button to verify that the URL is functioning.
  9. Select Don’t copy this resource - use the network location. from the Deployment behavior drop-down list.
  10. Click OK.
  11. Select JSON... from the Data format drop-down list.
  12. Accept the default value of SelectToken in the JSON Properties window.

    JSON properties window

  13. Enter items in the empty field.
  14. Click OK.
  15. Click OK to complete the live data object.
  16. Drag-and-drop the live data object onto the applicable region of your sign.
  17. Right click the live data object once it is in the template and choose edit layout.

Manage the Data

The data returned from the Google Calendar looks like this:

  • summary: Special Event
  • start: { "dateTime": "2015-03-31T10:00:00-04:00”
  • end: { "dateTime": "2015-03-31T16:00:00-04:00”

Sorting will still function on the start and end time correctly, but the formatting causes problems with displaying the dates and times separately. However, we extract the information we need from that string.

To pull the data out, we need to pinpoint what we need and eliminate the remainder of the string. For the date, that means the 10 characters after character 18.

  • [ 18 | 10 ]
  • { "dateTime": "2015-03-31T10:00:00-04:00”

In the layout of the live data object, we use a markup text field to pull out this data. Drag down a markup text field and type {start|_mid(18,10)}

Note You can also drag down other fields, such as description and location.

Essentially, this markup text says - bring in the data from the start field and only display the 10 characters after character 18. The result is 2015-03-31:

This result is a date and time. The field can now be right clicked on, formatter, and set as date/time to be displayed as desired:

formatting window

We can do the same thing with time:

{start|_mid(29,8)}

We'll pull out the 10:00:00, which can be displayed as 10:00 AM using the same steps as above. The end field can be treated the same way. The result is a layout with a title, date, start time, and end time. An example of this is shown here in yellow text:

example

You can use other fields to add additional information, such as Description (shown bove in white text), Creator, and Organizer.

Note It is recommended that you use Markup Text to add new data fields to the layout. This enable future editing of the field names.