# Integrating to External Calendars

Airkit provides the ability to take a selected appointment window from a [Scheduler Web Control](../../web-controls/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](../../variable-data-types/the-datetime-variable-data-type) can be used throughout a [Journey](../../concepts/journeys). This section will go over how to capture the selected appointment time to a variable.&#x20;

1. Create a [DateTime variable](../../variable-data-types/the-datetime-variable-data-type) on the Web Page by selecting your [Web Page](../../studio/web-flows) and in the Inspector and add a variable. Set the variable name to “time\_slot”.

![organizing info](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-0d5af0e4ac216501c438d052ae1fcdb66452e5ef%2Fintegrating-to-external-calendars-v181-0.png?alt=media)

2. Select the scheduler control and click on **Actions** in the inspector. Then add the [Set Variable action](../../actions/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**.&#x20;

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-022227e823078e14c7e3af882379af71220b5734%2Fintegrating-to-external-calendars-v181-1.png?alt=media)

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

```javascript
event.value
```

Event.value will contain a [Schedule Object](../../data-and-integrations/airdata/schedule-objects). A sample output of event.value is:

```json
{  
"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.&#x20;

Pre-requisites:

* Set up application for [Google Calendar API](https://developers.google.com/calendar/auth)
* Configure [Google integration within Airkit](../../data-and-integrations/connecting-to-external-systems/setting-up-integrations)

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

(data-flows.md) to receive inputs of the selected event start time and event end time, and then send an [HTTP request](../../data-operations/http-request-data-operation) to write back to a Google Calendar.&#x20;

1. Add a Data Flow that takes two [text](../../variable-data-types/the-text-variable-data-type) inputs: **start\_time** and **end\_time**. (**Note**: The outputs of the scheduler web control are [DateTime objects](https://docs.airkit.ai/?q=working-with-date,-time-and-datetime-in-airscript), but this example will be formatting the DateTime objects to [RFC3339](https://tools.ietf.org/html/rfc3339) before passing it to the Data Flow.)

![organizing info](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-296ddc9f43bd14da63eb9c4bb904ba218eb5a58f%2Fintegrating-to-external-calendars-v181-2.png?alt=media)

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
```

![](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-2ce35924236d8dad9dbb75008e515b8181604953%2Fintegrating-to-external-calendars-v181-3.png?alt=media)

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](https://developers.google.com/calendar/v3/reference/events/insert).&#x20;

```javascript
{  
"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.&#x20;

![organizing info](https://a01-support.airkit.com/integrating-to-external-calendar-systems/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:`

```javascript
FORMAT_DATETIME(event.value.start_time)
```

**end\_time:**

```javascript
FORMAT_DATETIME(event.value.end_time)
```

The [Format\_DateTime](../../airscript-expressions/datetime-functions/format_datetime) function provides the ability to format the datetime object to [RFC3339](https://tools.ietf.org/html/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.&#x20;

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](https://docs.airkit.ai/?q=working-with-date,-time-and-datetime-in-airscript), but this example will be formatting the DateTime objects to [RFC3339](https://tools.ietf.org/html/rfc3339) before passing it to the Data Flow.)

![organizing info](https://a01-support.airkit.com/integrating-to-external-calendar-systems/ics_startend.png)

2. Add a [Create File](../../data-operations/the-create-file-data-operation) data operation and configure the following properties:\
   **Filename**: "invite.ics"\
   **Content**:&#x20;

```
"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](https://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](../../variable-data-types/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.&#x20;

![organizing info](https://a01-support.airkit.com/integrating-to-external-calendar-systems/assetoutput.png)

4. Go back to [App Builder](https://github.com/airkit/airkit-docs/blob/master/docs/v18-1/web-flows.md-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.&#x20;

![organizing info](https://a01-support.airkit.com/integrating-to-external-calendar-systems/downloadics.png)

5. Add a Data Flow by clicking on the '+' icon under Actions in the inspector of the scheduler control.&#x20;
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:**

```javascript
FORMAT_DATETIME(event.value.start_time)
```

**end\_time:**

```javascript
FORMAT_DATETIME(event.value.end_time)
```

For the Output Binding:

```javascript
download_ics
```

The [Format\_DateTime](../../airscript-expressions/datetime-functions/format_datetime) function provides the ability to format the datetime object to [RFC3339](https://tools.ietf.org/html/rfc3339) format so that the it is properly formatted for the .ics file.

7. Once the Data Flow is configured, add a [Hyperlink control](../../web-controls/hyperlink-web-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!

![organizing info](https://4185914948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSItjRhbHaLQ4ar3DUljt%2Fuploads%2Fgit-blob-663324573aa102b652a77d272768852aeaf78593%2Fintegrating-to-external-calendars-v181-4.png?alt=media)
