# Scheduler

![](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-1d94357db931e4b8199920e666a23bc87555aa50%2Fscheduler-web-control-v180-0.png?alt=media)

The Scheduler Web Control allows users to schedule appointments by selecting blocks of time from pre-specified options defined from [Schedules Builder](../studio/builder-bar/schedules-builder).

## General

### Control Properties

#### Calendar Restriction

Expects type `text`.

A [string](../variable-data-types/the-text-variable-data-type) corresponding to a key tied to an Availability Schedule (created in Schedules Builder). To be correctly parsed, this key must be written with quotation marks around it.

Defining a value for Calendar Restriction is optional, but if a value is defined, the designated Availability Schedule serves to restrict what blocks of time can be selected within a Scheduler. Only blocks of time encompassed by the Availability Schedule specified in Calendar Restriction will be available for users to select.

#### Minimum Days Out

Expects type `number`.

A [Number](../variable-data-types/the-number-variable-data-type) defining the earliest day a user can select a time block in relation to the day they are accessing the scheduler.

For example, if Minimum Days Out is defined as 0, a user might select a time block on that very day, whereas if Minimum Days Out is defined as 3, the earliest a user might be able to select a time is three days in the future.

#### Maximum Days Out

Expects type `number`.

A Number defining the earliest day a user can select a time block in relation to the day they are accessing the scheduler.

For example, if Maximum Days Out is defined as 3, the latest a user might be able to select a time is three days in the future. It is not recommended but technically possible to define Maximum Days Outso that its numerical value is less than the numerical value of Minimum Days Out; in such a case, users will be barred from making any appointments at all.

#### Aria Label

Expects type `text`.

Defines a value to the aria-label of the control for accessibility. For more information see [here](https://www.w3.org/TR/WCAG20-TECHS/ARIA14.html).

### Schedule

#### Calendar

Set the Availability Schedule that will define the blocks of time available for users to select. See the [Schedules Builder](../studio/builder-bar/schedules-builder) for a deeper diving into how to create an Availability Schedule that serves your needs.

#### Schedule Data Object

Set the [Schedule Object](../data-and-integrations/airdata/schedule-objects) that will store the information your Scheduler Web Control collects from users. If you have not yet made a Schedule Object, you will need to define one in [AirData Builder](../studio/builder-bar/airdata-builder) in order for information collected from users by the scheduler to be automatically saved. It is possible but not recommended to forgo associating a Scheduler Web Control with a Scheduler Object; in such cases, information entered by users will be lost unless explicitly saved elsewhere. See [Actions](#h_01F5ED926NC4H7ZVJB4BGAJ9NM) section for more on how this might be done.

#### Placeholder

Defines the placeholder text that will be displayed if a user selects a day in which there are no blocks of time available. By default, the placeholder will display as "No Available Times".

#### Layout

Defines the layout of the calendar portion of the Scheduler Web Control. Options are:

* **1 week**- Displays seven days at a time.
* **2 weeks** - Displays fourteen days at a time.
* **1 month** - Displays the entire month.

### Style and Layout

The Scheduler Web Control is a compound web control; styling requires making changes to individual components. Check [Common style properties of web controls](web-controls-overview/common-style-properties-of-web-controls) for details on how to this Web Control.

## Actions

### Value Changed

This Event is run each time the an available time slot is selected.

#### Event Value

The value associated with this Event takes the form of a [Schedule Object](../data-and-integrations/airdata/schedule-objects) that describes the selected appointment window. This Schedule Object must will contain the following six properties:

* **session\_id** (`string`) - indicates the [Journey](../concepts/journeys) that the appointment is associated with. This corresponds the Session ID (designated **session.id**) automatically assigned as a [session-level variable](../data-and-integrations/variable-namespaces) at [the start of each Journey](../data-and-integrations/standard-journey-data).
* **start\_time** (`DateTime`) - refers to the beginning date and time of the appointment.
* **end\_time** ( `DateTime`) - refers to the ending date and time of the appointment.
* **recurrence** (`number`)- indexes the block of time selected for the appointment. Count begins at 0 and on the first occurrence of a potential appointment window, as defined by the [Time Slots that make up the Availability Schedule](../studio/builder-bar/schedules-builder) tied to the associated [Scheduler Web Control](https://docs.airkit.ai/?q=scheduler-web-control-Scheduler-Web-Control).
* **calendar\_event\_id** (`string`) - serves as an identifier for the Time Slot (as defined in the [Calendar Builder](../studio/builder-bar/schedules-builder) – note that this is _not_ the same as the selected block of time which is indicated by _**recurrence**_) that defined the selected appointment block.
* **calendar\_id** (`string`) - serves as an identifier for the particular instance of [Scheduler Web Control](https://docs.airkit.ai/?q=scheduler-web-control-Scheduler-Web-Control) used to make the appointment. This becomes particularly relevant in cases a [Journey](../concepts/journeys) contains multiple schedulers associated with the same Schedule Object.

Within this Event, each property can be referenced under `value`. For instance

```json
value.start_time
```

will return the `DateTime` describing the beginning time of the selected appointment.

When this Event is over, all information saved under the Event's value will be lost be default. If you want to store this information locally for later use within your application, you will need to save the relevant information by using the [Set Variable](../actions/the-set-variable-action) Action.

## Advanced

### State

#### Is Visible

Expects type `boolean`.

If `TRUE` the control will be visible. If `FALSE` the control will not be displayed. If the field is empty, the control will be visible.

## Example

Set the Scheduler to present the user with date and time options from availability calendars:

![organizing info](https://2093598723-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC2DgLBPTrwoEhWaU24LL%2Fuploads%2Fgit-blob-b547d4a9e88cc767620cd9b03fd1d42db69876c6%2Fscheduler-web-control-v180-1.gif?alt=media)
