Availability Rules ALPHA

The Availability Rules element is an interactive display of your availability rules.

The Availability Rules 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).


managed_availability is required when generating the Element Token.

AvailabilityRules 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-availability-rules”).

availability_rule_id optional  #
The String that uniquely identifies the availability rule. The first request made for an availability_rule_id will create an available period for the account and subsequent requests will update its details. If there is a specific rule that you want to view, set that string here. Default value is default.

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

start_time optional  #
Hide any available slots before this time. Defaults to 08:00.

end_time optional  #
Hide any available slots after this time. Defaults to 18:00.

duration optional  #
What size slots do you want? Defaults to 60. Other options are rounded to nearest 15 minute interval.

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

tzid optional  #
The Availability Rules element can set to any timezone using a tzid. (e.g. tzid: "America/Chicago"). Defaults to Etc/UTC.

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.colors optional  #
Use these options to set the colors for various parts of the Element without the need to add your own custom CSS. Each color option accepts either a valid HEX code (e.g. available: "#FF0000") or a browser-safe color name (e.g. available: "tomato")

  • hairline - gridlines. Defaults to "#D8D8D8"
  • primary - button background color. Defaults to "#15B3D6"
  • available - available slot background color. Defaults to "#E2FAC8"
  • availableHover - available slot when hovered. Defaults to available darkened by 10%
  • availableActive - available slot when active. Defaults to available darkened by 20%
  • unavailable - unavailable slot background color. Defaults to "#FFFFFF"
  • unavailableHover - unavailable slot when hovered. Defaults to unavailable darkened by 10%
  • unavailableActive - unavailable slot when active. Defaults to unavailable darkened by 20%

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


Cronofy UI Elements come with built-in CSS that control their layout (as well as adding a generic “theme” with placeholder colors and spacing). You can amend/append/override any style rule you like in your own stylesheet.

To be sure to avoid specificity issues with CSS, make sure any custom selectors you add are preceded by .${PREFIX}. For example, if your prefix is “ABC”, you would target the button styles with this selector:

.ABC .ABC__button{
    /* your button styles go here */

AvailabilityRules classes:

PREFIX default is AvailabilityRules

  • {PREFIX}__calendars
  • {PREFIX}__calendars__title
  • {PREFIX}__calendars__selector
  • {PREFIX}__calendars__calendar
  • {PREFIX}__calendars__add-button
  • {PREFIX}__calendars__add-button-icon
  • {PREFIX}__calendars__remove-button
  • {PREFIX}__calendars__remove-button-icon
  • {PREFIX}__calendars__modal
  • {PREFIX}__calendars__modal-close
  • {PREFIX}__calendars__modal-close-icon
  • {PREFIX}__calendars__modal-list
  • {PREFIX}__calendars__modal-list-item
  • {PREFIX}__calendars__modal-item-details
  • {PREFIX}__calendars__modal-item-title
  • {PREFIX}__calendars__modal-item-subtitle
  • {PREFIX}__confirmation
  • {PREFIX}__checkbox
  • {PREFIX}__checkbox--checked
  • {PREFIX}__checkbox--unchecked
  • {PREFIX}__checkbox-tickmark
  • {PREFIX}__error
  • {PREFIX}__error-icon
  • {PREFIX}__error-text
  • {PREFIX}__example
  • {PREFIX}__example--available
  • {PREFIX}__example--unavailable
  • {PREFIX}__footer
  • {PREFIX}__footer-spacer
  • {PREFIX}__grid
  • {PREFIX}__grid-border
  • {PREFIX}__label--day
  • {PREFIX}__label--time
  • {PREFIX}__label-column
  • {PREFIX}__label-row
  • {PREFIX}__legend
  • {PREFIX}__legend-item
  • {PREFIX}__legend-label
  • {PREFIX}__loading-wrapper
  • {PREFIX}__slot
  • {PREFIX}__slot--available
  • {PREFIX}__slot--unavailable
  • {PREFIX}__slot--dragging
  • {PREFIX}__slot-button
  • {PREFIX}__slot-tooltip
  • {PREFIX}__slot-tooltip-background
  • {PREFIX}__slot-tooltip-label
  • {PREFIX}__slot-background
  • {PREFIX}__slot-background--available
  • {PREFIX}__slot-background--unavailable
  • {PREFIX}__slots-background-column
  • {PREFIX}__slots-background-columns
  • {PREFIX}__slots-column
  • {PREFIX}__slots-columns
  • {PREFIX}__status-icon-wrapper
  • {PREFIX}__status-icon
  • {PREFIX}__submit
  • {PREFIX}__submit-inner
  • {PREFIX}__tick-mark
  • {PREFIX}__tick-mark-wrapper
  • {PREFIX}__time-select
  • {PREFIX}__time-select__close-button
  • {PREFIX}__time-select__close-button-icon
  • {PREFIX}__time-select__label
  • {PREFIX}__time-select__row
  • {PREFIX}__time-select__select
  • {PREFIX}__time-select__select-wrapper
  • {PREFIX}__time-select__trigger
  • {PREFIX}__time-select__trigger-icon
  • {PREFIX}__wrapper

Example AvailabilityRules init:

<div id="cronofy-availability-rules"></div>
<script src="https://elements.cronofy.com/js/CronofyElements.v0.9.21.js"></script>
        token: "ELEMENT_TOKEN",
        target: 'cronofy-availability-rules',
        availability_rule_id: "work_hours",
        end_time: "18:00",
        duration: 60,
        styles: {
            colors: {
                available: "green",
                unavailable: "red"
            prefix: "custom-name"