Smart.Scheduler Google Calendar Integration

Smart.Scheduler Import/Export Events to Google Calendar

Smart.Scheduler events can be exported and imported in Google Calendar and vice versa. This is possible thanks to the ical export funcitonality of Smart.Scheduler.

Exporting to ical is done via the exportData method by passing 'ical' as an argument. The result is a ics file with the events of the Scheduler.

Export events from Smart.Scheduler and Import to Google Calendar

Smart.Scheduler Events can be Exported as an iCalendar file and Imported to Google Calendar. The process is easy and only takes a few steps:

  1. Load events to the Scheduler - the first step is initializing a Smart.Scheduler component with events so we can export them later. Events can be defined via the dataSource property or added dynamically via the insertResource method.

    Let's take a look at the following example:

    const today = new Date(), 
    currentDate = today.getDate(), 
    currentYear = today.getFullYear(), 
    currentMonth = today.getMonth(), 
    data = [
        {
            label: 'Website Re-Design Plan',
            dateStart: new Date(currentYear, currentMonth, currentDate, 9, 30),
            dateEnd: new Date(currentYear, currentMonth, currentDate, 11, 30)
        }, {
            label: 'Book Flights to San Fran for Sales Trip',
            priorityId: 1,
            dateStart: new Date(currentYear, currentMonth, currentDate + 3, today.getHours() + 1, 0),
            dateEnd: new Date(currentYear, currentMonth, currentDate + 3, today.getHours() + 3, 0),
            notifications: [
                {
                    interval: 0,
                    type: 'days',
                    time: [today.getHours(), today.getMinutes() + 4],
                    message: 'Book Flights to San Fran for Sales Trip Early'
                },
                {
                    interval: 0,
                    type: 'weeks',
                    time: [today.getHours(), today.getMinutes() + 5],
                    message: 'Book Flights to San Fran for Sales Trip Late'
                }
            ]
        }, {
            label: 'Install New Router in Dev Room',
            priorityId: 1,
            dateStart: new Date(currentYear, currentMonth, currentDate, 13),
            dateEnd: new Date(currentYear, currentMonth, currentDate, 15, 30),
            repeat: {
                repeatFreq: 'monthly',
                repeatInterval: 1,
                repeatOn: today.getDate()
            }
        }, {
            label: 'Google AdWords Strategy',
            dateStart: new Date(currentYear, currentMonth, 10),
            dateEnd: new Date(currentYear, currentMonth, 11),
            allDay: true,
            backgroundColor: '#F57F17',
            repeat: {
                repeatFreq: 'weekly',
                repeatInterval: 5,
                repeatOn: [0, 2, 5],
                repeatEnd: new Date(currentYear, currentMonth + 2, 24),
                exceptions: [
                    {
                        date: new Date(currentYear, currentMonth, 13),
                        dateStart: new Date(currentYear, currentMonth, 14),
                        label: 'Google AdWords Strategy',
                        backgroundColor: '#F57F17'
                    }
                ]
            }
        },
        {
            label: 'Approve Personal Computer Upgrade Plan',
            priorityId: 2,
            dateStart: new Date(currentYear, currentMonth, currentDate + 1, 10, 0),
            dateEnd: new Date(currentYear, currentMonth, currentDate + 1, 11, 0)
        }, {
            label: 'Final Budget Review',
            priorityId: 2,
            dateStart: new Date(currentYear, currentMonth, currentDate + 1, 12, 0),
            dateEnd: new Date(currentYear, currentMonth, currentDate + 1, 13, 35)
        }, {
            label: 'New Brochures',
            priorityId: 2,
            dateStart: new Date(currentYear, currentMonth, currentDate, 13, 0),
            dateEnd: new Date(currentYear, currentMonth, currentDate, 15, 15)
        }, {
            label: 'Install New Database',
            priorityId: 1,
            dateStart: new Date(currentYear, currentMonth, currentDate + 1, 9),
            dateEnd: new Date(currentYear, currentMonth, currentDate + 1, 12, 15)
        }, {
            label: 'Approve New Online Marketing Strategy',
            priorityId: 2,
            dateStart: new Date(currentYear, currentMonth, currentDate + 2, 12, 0),
            dateEnd: new Date(currentYear, currentMonth, currentDate + 2, 14, 0)
        }, {
            label: 'Upgrade Personal Computers',
            priorityId: 1,
            dateStart: new Date(currentYear, currentMonth, currentDate, 9),
            dateEnd: new Date(currentYear, currentMonth, currentDate, 11, 30)
        }
];

window.Smart('#scheduler', class {
    get properties() {
        return {
            //Properties
            view: 'week',
            dataSource: data,
            views: ['day', 'week', 'month', 'timelineDay', 'timelineWeek', 'timelineMonth', 'agenda'],
            hourStart: 7,
            hourEnd: 19,
            firstDayOfWeek: 1,
            resources: [
                {
                    label: 'Priority',
                    value: 'priorityId',
                    dataSource: [
                    {
                        label: 'Low Priority',
                        id: 1,
                        backgroundColor: '#1e90ff'
                    }, {
                        label: 'Medium Priority',
                        id: 2,
                        backgroundColor: '#ff9747'
                    }
                ]
                }
            ]
        };
    }
});

window.onload = function () {
    const scheduler = document.querySelector('smart-scheduler');

    document.getElementById('exportToICal').addEventListener('click', () => scheduler.exportData('iCal'));
};

    Here we have a Smart.Scheduler with several events loaded to the element some of which are repeating and other have notifications set. The 'Google AdWords Strategy' event repeats every 5 weeks on Sundays, Tuesdays and Fridays until two months from now on 24th.

    The 'Install New Router in Dev Room' event repeats every month on today's date.

    The 'Book Flights to San Fran for Sales Trip' event has two notifications which occure on the day of the event. When the interval property of the notificaiton is 0 it doesn't matter what the type is because 0 means it will notify on the date of the event. However we are setting different notification types just for demonstration purposes.

    Some of the events have resources assigned. Those will be parsed as iCalendar categories.

  2. After changing the view to 'month' and pressing the 'EXPORT TO ICAL' button which calls the exportData('ical') method the events of the Scheduler will be automatically downloaded by the browser to a new file with an ics extension.

    Demo

  3. In the next step we will have to go to the Google Calendar Web App from our favorite browser and log in via a Gmail account. After that we can import the ical file that we just download from the Smart.Scheduler.

    In order to Import events from 'ical' file we have to go to Settings

    From Settings go to the Import & Export section and select the previously downloaded ics file from your computer. Then press Import

    As a result the Events will be loaded to the Google Calendar

  4. Exit the Google Calendar Settings menu to view the events.

    Demo

    Notice that the original repeating event is present in the Google Calendar unlike in the Smart.Scheduler. This is specific for the Google Calendar. In the Smart.Scheduler only the repeating series of a repeating event is shown.

In order to verify that the notificaitons of the 'Book Flights to San Fran for Sales Trip' event are also imported simply click on the event inside the Google Calendar:

Demo

As you can see the two notifications are properly added to the event.

Export events from Google Calendar and Import to Smart.Scheduler

Exporting events from Google Calendar can be done from the same menu as Importing just press the Export button instead. As a result an ics file with the Google events will be downloaded to your computer.

The Smart.Scheduler accepts a Smart.DataAdapter instance passed to the dataSource property. This allows the element to import events from external files such as the previously downloaded ics file.

Here's the demo setup in order to load the file to the Smart.Scheduler:

const dataSource = new window.Smart.DataAdapter({
    dataSource: './icalendar.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' }
    ]
});
window.Smart('#scheduler', class {
    get properties() {
        return {
            //Properties
            firstDayOfWeek: 1,
            view: 'month',
            dataSource: dataSource,
            views: ['day', 'week', 'month'],
            timelineDayScale: 'halfHour'
        };
    }
});

Mapping the required iCal properties to their respective Smart.Scheduler equivalents is an important step in order to create a valid data source.

The dataSource property of the Smart.DataAdapter should contain the correct path to the ics file containing the events.

Here's the result of the Importing operation when the Smart.Sheduler is finished loading the events:

Demo

Google Calednar handles resources differently and they are not included in the exported ics file as 'Categories'.