Availability Viewer ALPHA

The Availability Viewer element is an interactive week-based display of availability. It converts an availability query into a grid of days with free/busy times displayed. If the requested available periods span more than one week, the user can browse those weeks with the provided navigation buttons. Users can pre-select an available slot for any available block of time, and then confirm that slot with a button-click. When a user confirms a slot, the element passes that slot’s details into a callback function (provided when the element is initialized).

The Availability Viewer element will fill the width of its parent DOM element. The height of the element depends on the range of the provided available options (i.e. showing available slots between 9am and 5pm will take up more space that the display for 9am to 2pm).

Permission

availability is required when generating the Element Token.

AvailabilityViewer options

token required  #
Auth token for API connection. Not required if the element is activated in demo mode.

callback required  #
The function to be called when a slot has been selected by the user. Receives an object for that slot in this format:

target required  #
ID of mounting element (e.g. “cronofy-availability-viewer”).

query required  #
Object that matches a valid Cronofy Availability request.

data_center optional  #
Not needed if you are using the US data center, but required if using another (e.g. de for the EU data center).

extras optional  #
Use this object to add further limits to the availability display:

{
    "start": "2019-05-21T09:00:00Z",
    "end": "2019-05-21T11:00:00Z",
    "participants": [
        { "sub": "acc_12345678" },
        { "sub": "acc_87654321" }
    ]
}

extras.start_time optional  #
Hide any available slots before this time. Defaults to “09:00”.

extras.end_time optional  #
Hide any available slots after this time. Defaults to “17:30”.

extras.interval optional  #
When selecting a slot, the available options are staggered by this amount. Defaults to 15.

locale optional  #
The Availability Viewer supports localization (e.g. locale: "fr" to load in French). Defaults to browser language setting.

demo optional  #
Boolean to activate demo-mode. Defaults to false. If demo is set to true the element will return mock data (and not make any API calls).

styles optional  #
An object that controls the pre-packaged element styles.

styles.prefix optional  #
Customizable elements are given a prefixed class name using this value. For example, if the prefix was set as “Foo”, the class name on a slot element would be Foo__slot. Defaults to the name of the element (e.g. "AvailabilityViewer").

Available classes:

  • .{PREFIX}__slot-label
  • .{PREFIX}__slot--unavailable
  • .{PREFIX}__hover-slot
  • .{PREFIX}__hover-slot-times
  • .{PREFIX}__hover-slot-tooltip

Example AvailabilityViewer init:

<div id="cronofy-availability-viewer"></div>
<script src="https://elements.cronofy.com/js/CronofyElements.v0.9.21.js"></script>
<script>
    CronofyElements.AvailabilityViewer({
        token: "ELEMENT_TOKEN",
        target: 'cronofy-availability-viewer',
        query: {
            participants: [
                {
                    required: "all",
                    members: [
                        { sub: "acc_12345678" },
                        { sub: "acc_87654321" }
                    ]
                }
            ],
            required_duration: { minutes: 60 },
            available_periods: [
                { start: "2019-05-21T09:00:00Z", end: "2019-05-21T17:00:00Z" },
                { start: "2019-05-22T09:00:00Z", end: "2019-05-22T17:00:00Z" },
                { start: "2019-05-23T09:00:00Z", end: "2019-05-23T17:00:00Z" },
                { start: "2019-05-24T09:00:00Z", end: "2019-05-24T17:00:00Z" }
            ],
        },
        extras: {
            start_time:"09:00",
            end_time: "15:30",
            interval: 15
        },
        styles: {
            prefix: "custom-name"
        },
        callback: slot => console.log('callback',slot),
    });
</script>
Search