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-05-21T09:00:00Z",
    "end": "2019-05-21T11: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.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").

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

Available classes:

  • .{PREFIX}__slots-header
  • .{PREFIX}__slots-heading
  • .{PREFIX}__slot--empty
  • .{PREFIX}__slots-list
  • .{PREFIX}__slots-list--days
  • .{PREFIX}__slots-list--times
  • .{PREFIX}__slots-list--empty
  • .{PREFIX}__slot
  • .{PREFIX}__slot--unavailble
  • .{PREFIX}__slots-icon
  • .{PREFIX}__slots-icon--back
  • .{PREFIX}__slots-icon--tickmark
  • .{PREFIX}__slots-icon--remove
  • .{PREFIX}__confirmation-wrapper
  • .{PREFIX}__confirmation
  • .{PREFIX}__confirmation-summary
  • .{PREFIX}__confirmation-buttons
  • .{PREFIX}__confirmation-button

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

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

Example Slot Picker init:

    <div id="cronofy-slot-picker"></div>
    <script src="https://elements.cronofy.com/js/CronofyElements.v0.9.21.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-05-21T09:00:00Z", end: "2019-05-21T17:00:00Z" },
                    { start: "2019-05-22T09:00:00Z", end: "2019-05-22T17:00:00Z" }
                ]
            },
            styles: {
                prefix: "custom-name"
            },
            callback: slot => console.log("callback",slot)
        });
    </script>
Search