Integrating to External Calendars

Airkit provides the ability to take a selected appointment window from a Scheduler Web Control and pass that to an external scheduling system.

Capturing the selected time slot

To capture a selected appointment window from Scheduler Web Control, the selected time (in the form of a DateTime) has to be passed to a variable. From there, the selected DateTime can be used throughout a Journey. This section will go over how to capture the selected appointment time to a variable.

Create a DateTime variable on the Web Page by selecting your Web Page and in the Inspector and add a variable. Set the variable name to “time_slot”.

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.

The outputs of the selected time slot can be retrieved through:

event.value

Event.value will contain a Schedule Object. 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:

Set up application for Google Calendar API
Configure Google integration within Airkit

After configuring the Google integration in the application, the next step is to add a [Data Flow]

(https://support.airkit.com/docs/data-flows) 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.

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.)

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

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"  
}

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.

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.

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.)

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: PrivateDownload 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.

Pass the file variable as the return value so that it can be bound to a variable within the application.

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.

Add a Data Flow by clicking on the '+' icon under Actions in the inspector of the scheduler control.
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.

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!