Availability Rules

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

Example initialization #

<div id="cronofy-availability-rules"></div>
<script src="https://elements.cronofy.com/js/CronofyElements.v1.7.15.js"></script>
        element_token: "ELEMENT_TOKEN",
        target_id: "cronofy-availability-rules",
        availability_rule_id: "work_hours",
        config: {
          start_time: "08:00",
          end_time: "18:00",
          duration: 60
        styles: {
            colors: {
                available: "green",
                unavailable: "red"
            prefix: "custom-name"
        tzid: "Etc/UTC"

Element permissions #

managed_availability is required when generating the Element Token.

Element options #

element_token required  #

The Element Token the Availability Rules will use to communicate with Cronofy.

Not required if the Element is activated in demo mode.

target_id required  #
The ID of the DOM node the Element will be loaded in to.

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.

Defaults to default.

tzid required  #
The timezone the Availability Rule will be saved with. Must be a known time zone identifier from the IANA Time Zone Database.

data_center optional  #
Designates the Cronofy data center the Element will communicate with.

Defaults to us.

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

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

config.duration optional  #
The length of time of each option in minutes. Valid values are 15, 30, and 60.

Defaults to 60.

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

Supported locales (languages) for the UI Elements are:

  • Dutch - nl
  • English - en (default)
  • French - fr
  • German - de
  • Italian - it
  • Spanish - es

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

Styling #

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 specify 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 */

Element 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__add-button-icon--path
  • {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}__timezone
  • {PREFIX}__wrapper