About this integration

Integration Summary

In a given  app, you can embed one or more professional, personal or group Google calendars. These calendars can be shared by a project team or department. You do so by copying an iFrame code generated by Google Calendar and pasting it in the HTML Script or Secured HTML widget.

Once this is embedded, app users will, within a given widget, be able to:

• Consult one or more calendars belonging to a Google account (including shared calendars) if these calendars have been shared using the logged-in Google account in the Web browser instance.
• Edit and add events to these shared calendars and enjoy quick access to your Google calendar from within the app.

For example, you can:

• Insert several widgets each displaying events from a single calendar belonging to a different Google account.
• Insert several widgets each displaying events from different calendars belonging to the same Google account.
• Insert several widgets each displaying consolidated events from several calendars belonging to a different Google account.
   

Use case

You want app users to be able to reserve time slots for meeting rooms in one or more buildings or sites.

To do so:

• You can create one calendar per meeting room, using for example:
  • Different Google accounts for different meeting room managers so that they can manage user access rights to the calendars of these meetings rooms separately and autonomously.
  • Several calendars belonging to a given Google account for meeting rooms managed by the same managers.
• You can share the meeting room calendars belonging to the Google accounts with users who are authorized to access them and make reservations. You must select the Make changes to events or Make changes AND manage sharing option.
• Users will be able to display the calendar events of the meeting rooms they want in the app. Once they have identified an available time slot, users can easily add a meeting by creating a new event in the calendar of the relevant meeting room. They can then invite the participants they want.

Notes

• Embedded Google calendars work correctly with the following Web browsers: Internet Explorer 11, Firefox 46 and Chrome 50. However, if you encounter display problems with Internet Explorer and Firefox, you should use Chrome.

• You must have a Google account and log in using a Web browser before you can access Google Calendar to copy the iFrame code to the HTML Script or Secured HTML widget.
• Remember to empty the cache of your Web browser so that modifications made to the Google Calendar iFrame code embedded in the HTML Script or Secured HTML widget are taken into account when your app is displayed.
• You must log in to a Google account in the Web browser instance so that events from calendars configured in the widget's HTML code can appear in the app widget.
  • If you do not log in to any Google account, then nothing will appear in the widget.
  • If you log in to a Google account that is not authorized to access all calendars configured in the widget's HTML code, the following message will appear: Events from one or more calendars could not be shown here because you do not have the permission to view them.
• A Google calendar can be shared via four types of access rights: See only free/busy (hide details), See all event details, Make changes to events, Make changes AND manage sharing.

Procedures

How to embed a Google calendar

            To find out more, you can consult the Google Calendar help page called Add a Google calendar to your website.

1. Log in to the relevant Google account. Open Google Calendar to select and configure the calendar you want to embed within your  app.

• Click  found at the top right of the screen and select the Settings option from the menu.
• Select the Calendars tab (1) and click the name of the calendar you want to embed (2).
           
• You can modify the layout of the calendar.
  • In the Embed This Calendar section, click the Customize the color, size and other options link (3).
  • Make your modifications in the window that will appear. The iFrame code will automatically be refreshed.
• Copy the iFrame code displayed in the Embed This Calendar section (4). Note: If you modified the formatting, copy the iFrame code from the Google Calendar customization page.
           

2. Open  to embed the Google calendar in an app.

• Open the app you want.
• Display the calendar using the HTML Script or Secured HTML widget:
  • Click  in the Objects pane. Open the Basic category and click and drag the HTML Script or Secured HTML widget to the Design pane.
  • Rename the widget so you can easily identify it.
  • Paste the iFrame code in the HTML Code field of the widget.

3. In your  app, check that the Google calendar is correctly displayed.

• Click  to switch to preview mode and check the calendar displayed.
• You can:
  • Change the display mode using the Week or Month tabs (5).
  • Access and modify a calendar event directly in a new Web browser window when you click the More details link (6).
            

How to embed several Google calendars within a given widget

            To find out more, you can consult the Google Calendar help page called Add a Google calendar to your website.

You can embed a Google calendar comprising several calendars within one HTML Script or Secured HTML widget. Events from the different calendars will be consolidated. These shared calendars belonging to the same Google account can be public (e.g. public holidays or school holidays), personal or professional calendars.

1. Log in to the primary Google account, not one of the shared calendar accounts. Open Google Calendar.

• Click  found at the top right of the screen and select the Settings option from the menu.
• Select the Calendars tab and click the name of the calendar you want to embed. In most cases, users select the primary calendar associated with their logged-in Google account. The primary calendar is found at the top of the list of calendars.
             See the screen in the procedure entitled How to embed a Google calendar > step 1

2. Click the Customize the color, size and other options link to access the Google Calendar customization page.

• Select the calendars you want to include from the left pane (1).
• Define the formatting as required, e.g. calendar title, first day of the week, etc.
• Copy the iFrame code (2) which is automatically refreshed with each modification.
           

3. Open  to embed the Google calendars in an app.

• Open the app you want.
• Display the calendars using the HTML Script or Secured HTML widget:
  • Click  in the Objects pane. Open the Basic category and click and drag the HTML Script or Secured HTML widget to the Design pane.
  • Rename the widget so you can easily identify it.
  • Paste the iFrame code in the HTML Code field of the widget.

4. In your  app, check that the Google calendars are correctly displayed.

• Click  to switch to preview mode.
• Check that you can select the calendars to be displayed from the Calendar drop-down list (3).
           

How to edit and add events to a Google calendar

• To edit a calendar event in a widget, you should select its name in the calendar and click the More details link. You will then be redirected to a window for editing the event.
  Note: The calendar must be shared using the Make changes to events or Make changes AND manage sharing option.
           

• You cannot add a calendar event by clicking an available time slot directly in the calendar embedded in the widget. This functionality is not supported by the Google Calendar iFrame code.
  To add an event, you should:
  • Open the calendar belonging to the logged-in Google account. You can then click  at the bottom right of the calendar embedded in the widget. Alternatively, you can select an event, click the More details link and click  to display the calendar of the logged-in account.
  • In the Other calendars list, click  to add an event to the calendar you want. Select Create event on this calendar from the contextual menu.
             

• Users can copy a shared calendar event displayed in a widget to their own calendar. To do so, click the event name and select the copy to my calendar link. Make modifications if required and click .