Slot Picker ALPHA

The Slot Picker element is an embeddable version of the Real Time Scheduling interface. It converts an availability query into a list of bookable slots. When a user confirms a slot, the element passes that slot’s details into a callback function (provided when the element is initialized).

The Slot Picker element will fill the width of its parent DOM element. The height defaults to 300px with internal padding of 1em, but these can be overridden through the styles option.

Permission

availability is required when generating the Element Token.

SlotPicker options

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

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

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

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:

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

confirm optional  #
Boolean that defines if an extra “confirmation” step is used after a user selects a slot from the list. Defaults to true.

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

styles.useStyles  #
Set to false to disable in-built CSS for customizable elements. Most inbuilt styles are locked down (for example the transitions and basic layout), but some are optional (for example, the slot button styles in the Slot Picker element). If useStyles is set to false the optional styles will not be applied.

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

height optional  #
The height of the element in pixels. Defaults to "300px".

padding optional  #
The size of the padding around the edge of the element. Defaults to "1em".

Available classes:

  • .{PREFIX}__slot
  • .{PREFIX}__slots-header
  • .{PREFIX}__confirmation-wrapper
  • .{PREFIX}__confirmation-summary

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

api_domain optional  #
Override the default domain-prefix for the API call. Default value is "https://api.cronofy.com".

Example Slot Picker init:

    <div id="cronofy-slot-picker"></div>
    <script src="https://elements.cronofy.com/js/CronofyElements.v0.7.8.js"></script>
    <script>
        CronofyElements.SlotPicker({
            token: "ELEMENT_TOKEN",
            target: "cronofy-slot-picker",
            query: {
                participants: [
                    {
                        required: "all",
                        members: [
                            { sub: "acc_12345678" },
                            { sub: "acc_87654321" }
                        ]
                    }
                ],
                required_duration: { minutes: 30 },
                available_periods: [
                    { start: "2019-03-26T09:00:00Z", end: "2019-03-26T17:00:00Z" },
                    { start: "2019-03-27T09:00:00Z", end: "2019-03-27T17:00:00Z" }
                ]
            },
            styles: {
                prefix: "custom-name",
                height: "400px"
            },
            callback: slot => console.log("callback",slot)
        });
    </script>
Search