UI Elements

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.v1.7.9.js

Using npm #

If you prefer, you can install the UI Elements with npm.

npm install --save cronofy-elements

After installing, you will need to import the Elements into your JavaScript:

import * as CronofyElements from "cronofy-elements";

Initialize the Element #

Once you have included the UI Element in your project (either by importing from npm or including the source file), 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-agenda" });

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.

Browser support #

UI Elements are officially supported on the last two versions of Chrome, Firefox, Safari, and Edge.

In This Section

Search