UI Elements ALPHA

UI Elements are javascript components that provide user interface overlays to various Cronofy API end points.

Installation

All the UI Elements accept some global options, and each have additional element-specific options. For all elements, load them into your app by including the source .js file into your page.

https://elements.cronofy.com/js/CronofyElements.v0.7.8.js

Once you’ve included the js file in your project, you can initialize the desired element using the corresponding method and passing in an options as an object. For example, to load the “Agenda” element, your script would look like this:

CronofyElements.Agenda({token: "YOUR_TOKEN",target: "cronofy-calendar"});

Updating options

Should you need to update the {options} for any Element, you can reload them with the .update() method (this requires you to have saved your element instance to a variable beforehand):

// Load element:
const YourElement = CronofyElements.AvailabilityViewer(optionsObject);

// Update the Element with new options:
YourElement.update(newOptions);

When updating, you do not need to redeclare all the options; you just need to add the ones you want to update. For instance, the AvailabilityViewer element accepts several options, but when you’re updating the options, you only need to include the options that are changing.

Initialize the element:

const Element = CronofyElements.AvailabilityViewer({
    token: "ELEMENT_TOKEN",
    target: 'cronofy-availability-viewer',
    query: {
        // QUERY_OPTIONS
    },
    extras: {
        start_time:"09:00",
        end_time: "15:30",
        interval: 15
    },
    callback: slot => console.log('callback',slot)
});

Update the element with new “extras” option:

Element.upload({
    extras: {
        // New options:
        start_time:"08:30",
        end_time: "17:30",
        interval: 15
    }
});

In This Section

Search