Digital Signage: Connect to a Google Calendar

Important New Google Calendar APIs cannot be created until U-M and Google complete a contract negotiation. Existing calendar APIs will be unaffected.

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.

   

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

   

3. Click the Share this Calendar tab.

   

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.

   

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

   

6. Click Enable.

   

7. Click Create Credentials.

   

8. Click the API key link.

   

9. Enter a Name for the key.

   Note Accept the default value of None under Key restriction.

   

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

    Note Do not restrict the key.

    

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.

   

4. Click the Dynamic URL 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.

   

6. Click Add row 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	startTime
   maxResults	text	50
   timeMin	Date/Time	yyyy'-'MM'-'dd'T'HH':'mm':'ss.fffffffK
   key	text	API key

8. Select Don’t copy this resource - use the network location. from the Deployment behavior drop-down list.
9. Use the Test button to verify that the URL is functioning.
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.

    

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 Source Content 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, formatted, and set as date/time to be displayed as desired:

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:

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 enables future editing of the field names.