Smart.Scheduler Google Calendar Sync

Smart.Scheduler Google Calendar Events Sync

Google Calendar events can be loaded directly to the Smart.Scheduler via url. By doing so the events between Google Calendar and Smart.Scheduler are in sync. This means that making changes to the events in Google Calendar will automatically reflect to the events in the Smart.Scheduler when the page is reloaded.

This feature is achieved thanks to the Smart.DataAdapter Utilitiy and Google Calendars abbility to reference calendars via url.

In order to sync events beetween both elements first we need to create appointments in the Google Calendar and get the url to the calendar with the appointments. In order to do so the user has to take the following steps:

  • Create appointments in Google Calendar:

  • Go to the Settings tab of Google Calendar and select the calendar that will be used for the demo:

  • Copy the calendar Secret url address that is displayed in the image above. If the calednar is public it is possible to use the public address instead.

In order to bind the dataSource of the Smart.Scheduler to a Google Calendar url the user has to make the following setup:

  • index.html 
    <html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

    <link rel="stylesheet" type="text/css" href="../../../source/styles/smart.default.css" />

    <script type="text/javascript" src="../../../source/webcomponents-lite.js"></script>
</head>

<body class="viewport">
    <smart-scheduler id="scheduler"></smart-scheduler>

    <!-- scripts -->
    <script type="module" src="../../../source/modules/smartscheduler.js"></script>
    <script type="module" src="index.js"></script>
</body>
</html>
  • index.js 
    window.Smart('#scheduler', class {
    get properties() {
        return {
            //Properties
            view: 'month',
            dateCurrent: new Date(2021, 0, 20),
            dataSource: new window.Smart.DataAdapter({
                dataSource: 'https://calendar.google.com/calendar/ical/jqwidgetstest%40gmail.com/private-d980817fc2fd252df41420619aeeddbb/basic.ics',
                dataSourceType: 'ics',
                dataFields: [
                    { name: 'dateStart', map: 'DTSTART', dataType: 'date' },
                    { name: 'dateEnd', map: 'DTEND', dataType: 'date' },
                    { name: 'label', map: 'SUMMARY', dataType: 'string' },
                    { name: 'location', map: 'LOCATION', dataType: 'string' },
                    { name: 'description', map: 'DESCRIPTION', dataType: 'string' },
                    { name: 'rrule', map: 'RRULE', dataType: 'string' },
                    { name: 'extdate', map: 'EXDATE', dataType: 'string' },
                    { name: 'status', map: 'STATUS', dataType: 'string' },
                    { name: 'reccurenceId', map: 'RECURRENCEID', dataType: 'string' },
                    { name: 'uid', map: 'UID', dataType: 'string' },
                    { name: 'categories', map: 'CATEGORIES', dataType: 'string' },
                    { name: 'alarm', map: 'ALARM', dataType: 'any' }
                ]
            }),
            views: ['day', 'week', 'month', 'agenda']
        };
    }
});

Notice that we pasted the previously copied Google calendar url address to the dataSource attribute of the Smart.DataAdapter.

The dataFields property allows to define the expected properties of the ics file that is references from the url in order to load the appointments.

As a result, when the page is loaded the events from Google Calendar will be loaded to the Smart.Scheduler

Demo