Integrating to External Calendar Systems Integrating to External Calendar Systems

Integrating to External Calendar Systems

Ismaen Aboubakare Ismaen Aboubakare

In an Airkit application, there's the ability to take the selected DateTime from a scheduler web control and pass that to an external scheduling system. This section will cover the following:

  1. Capturing the selected time slot
  2. Create a Google Calendar Event from the scheduler control
  3. Create an .ics file

Capturing the selected time slot

To capture a selected time slot from a scheduler web control, the selected value has to be passed to a variable. From there, the selected datetime object can be used throughout a journey. This section will go over how to capture the selected time slot to a variable. 

  1. Create a DateTime variable on the webpage by selecting your webpage and in the inspector, add a variable. Set the variable name to “time_slot”.
    timeslot.png
  2. Select the scheduler control and click on Actions in the inspector. Then add the Set Variable action on value change. This is where the outputs of the scheduler control is bound to the variable. The example below shows the start time of the selected value being stored to time_slot
    actions_slot.png

    The outputs of the selected time slot can be retrieved through:
    event.value
    Event.value will include the start time and end time, calendar_event_id, calendar_id, and the recurrence value. A sample output of event.value is:
    {
    "start_time":{
    "date":{
    "year":2021,
    "month":3,
    "day":30
    },
    "time":{
    "hour":20,
    "minute":0,
    "second":0,
    "millisecond":0
    },
    "timeZone":"UTC"
    },
    "end_time":{
    "date":{
    "year":2021,
    "month":3,
    "day":30
    },
    "time":{
    "hour":21,
    "minute":0,
    "second":0,
    "millisecond":0
    },
    "timeZone":"UTC"
    },
    "calendar_event_id":"",
    "calendar_id":"",
    "recurrence":364
    }

Create a Google Calendar event from the scheduler control

This guide will walk through the steps on how to take the selected DateTime and insert that as an event to a Google calendar. 

Pre-requisites:

After configuring the Google integration in the application, the next step is to add a Data Flow to receive inputs of the selected event start time and event end time, and then send an HTTP request to write back to a Google Calendar. 

  1. Add a Data Flow that takes two text inputs: start_time and end_time. (Note: The outputs of the scheduler web control are DateTime objects, but this example will be formatting the DateTime objects to RFC3339 before passing it to the Data Flow.)

    googleintegration.png

  2. Add a HTTP request data operation and select the Google service created in the pre requisite step. Change the method to POST and change the URL to:
    https://www.googleapis.com/calendar/v3/calendars/{{calendarID}}/events

    googlehttp.png
  3. Add the request body to the HTTP Request. This example will insert an event with the start time and end time from the scheduler control and with a Title of "Scheduled Event". For more information on the Google Calendar Events api, see here

    {
    "end":
    { "dateTime": end_time, "timeZone": "America/Chicago" },
    "start":
    { "dateTime": start_time, "timeZone": "America/Chicago" },
    "summary": "Scheduled Event"
    }
  4. Now that the Data Flow is completed, the start time and end time of a selected time slot can now be passed as an input to the Data Flow. Add a Data Flow by clicking on the '+' icon under Actions in the inspector of the scheduler control. 
    schedulerdataop.png

  5. Then select the Data Flow previously created. This will expect two inputs: start_time and end_time. In the inputs, provide the following:

    start_time:
    FORMAT_DATETIME(event.value.start_time)

    end_time:
    FORMAT_DATETIME(event.value.end_time)

    The Format_DateTime function provides the ability to format the datetime object to RFC3339 format so that the Google Calendar API can read it.

Create an .ics file

Creating an .ics file is useful in situations where a journey requires the ability download and import event details into a calendar. This section will walk through creating a downloadable .ics file that contains the content of the selected time slot using the scheduler control and Data Flows. 

  1. After adding a scheduler control to the webpage and configuring the calendars, add a Data Flow with two text inputs: start_time and end_time. (Note: The outputs of the scheduler web control are DateTime objects, but this example will be formatting the DateTime objects to RFC3339 before passing it to the Data Flow.)
    ics_startend.png
  2. Add a Create File data operation and configure the following properties:
    Filename: "invite.ics"
    Content
    "BEGIN:VCALENDAR
    VERSION:2.0
    BEGIN:VEVENT
    CLASS:PUBLIC
    DESCRIPTION:Check out this event!
    DTSTART:{{start_time}}
    DTEND:{{end_time}}
    LOCATION:Home
    SUMMARY;LANGUAGE=en-us:Scheduled Time
    END:VEVENT
    END:VCALENDAR"
    Scope: App
    Visibility:
    Private
    Download Url Expiration: 1 Hour
    The content that is being passed is merely a template and can be edited and modified. For more information on .ics extension type, check out iCalendar.org. Also, {{start_time}} and {{end_time}} are the input variables passed as a string. For more information on this syntax, check out The Text Variable Data Type

  3. Pass the file variable as the return value so that it can be bound to a variable within the application. 
    assetoutput.png
  4. Go back to App Builder and create a web page text variable and call it download_ics. This is going to be used to store the outputs of the Data Flow. 
    downloadics.png
  5. Add a Data Flow by clicking on the '+' icon under Actions in the inspector of the scheduler control. 
    rundataop_ics.png
  6. Then select the Data Flow previously created. This will expect two inputs: start_time and end_time. In the inputs, provide the following:

    start_time:
    FORMAT_DATETIME(event.value.start_time)

    end_time:
    FORMAT_DATETIME(event.value.end_time)

    For the Output Binding:
    download_ics
    The Format_DateTime function provides the ability to format the datetime object to RFC3339 format so that the it is properly formatted for the .ics file.

  7. Once the Data Flow is configured, add a Hyperlink control to the webpage to provide a place to trigger the download. On the href property of the Hyperlink control, enter download_ics.downloadUrl, which will pass the download url as the reference link, and change the Text property to "Download .ics file". Now the HyperLink control will download the .ics file of the selected time slot when clicked!
    download_icsdownloadurl.png

Further Reading

For additional reference and information, below are some additional topics to dive deeper and may be useful when leveraging scheduling capabilities within Airkit.