Google Calendar Integration

Last modified on 2022/05/28 10:50

About this integration

SAS_IntegrationNotRESTIntroduction

You can integrate third-party systems with Service Apps in many ways. The method you select will depend on business requirements, architectural and security constraints as well as the characteristics specific to each third-party application or service. You can use the REST, CSV, Online CSV data sources and the HTML Script widget.

This document describes a standard integration process that has already been implemented in a customer context.

To find out more about this integration, please do not hesitate to contact your EasyVista contact, or your service provider and integrator.

Integration Summary

In a given Product name - ev sas.png 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.
     
Integration Data Feed (direction) Authentication Type Integration Connector Options

Product name - ev sas - big.png

Up arrow.png

Logo - Google Agenda.png

N/A

HTML Script widget   Apps - Widget - Html icon.png

Secured HTML widget   Apps - Widget - Secured Html icon.png

SaaS Version of Third-Party Product

On-premise Version of Third-Party Product

Check icon.png

Not check icon.png

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

          Open url.png  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 Product name - ev sas.png app.

  • Click Customize icon.png 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).
             Google Calendar (0).png
  • 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.
             Google Calendar (1).png

2. Open Product name - ev sas.png 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 Apps - Add widget icon.png 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.

Best Practice icon.png  By default, the width of the widget is 800 pixels. In the HTML code, specify width=100% so that the calendar will occupy the entire width of the widget.

3. In your Product name - ev sas.png app, check that the Google calendar is correctly displayed.

  • Click EVApps - GUI - Execute icon.png 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).
              Google Calendar - More info.png

How to embed several Google calendars within a given widget

          Open url.png  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 Customize icon.png 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.
             Open url.png  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.
             Google Calendar - Include calendars.png

3. Open Product name - ev sas.png 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 Apps - Add widget icon.png 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 Product name - ev sas.png app, check that the Google calendars are correctly displayed.

  • Click EVApps - GUI - Execute icon.png to switch to preview mode.
  • Check that you can select the calendars to be displayed from the Calendar drop-down list (3).
             Google Calendar - Include calendars Example.png

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.
             EditEntryCalendar.png
  • 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 Google Calendar icon.png at the bottom right of the calendar embedded in the widget. Alternatively, you can select an event, click the More details link and click Back icon.png to display the calendar of the logged-in account.
    • In the Other calendars list, click Arrow icon.png to add an event to the calendar you want. Select Create event on this calendar from the contextual menu.
               OtherCalendars.png

Note: If you want the Create event on this calendar option to be visible, you must share the calendar using the Make changes to events or Make changes AND manage sharing option.

  • 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 Save button.png.
             CopyEntryCalendar.png
Tags:
Powered by XWiki © EasyVista 2022