Agenda View

The Agenda Element displays events for a single-day period. The primary view is a column of event summaries, with the ability to navigate to the next or previous day (up to a maximum of 14 days into the past and 90 days into the future). Clicking an event reveals the full details for that event.

Example initialization #

<div id="cronofy-agenda"></div>
<script src="https://elements.cronofy.com/js/CronofyElements.v1.6.0.js
"></script>
<script>
    CronofyElements.Agenda({
        element_token: "{ELEMENT_TOKEN}",
        target_id: "cronofy-agenda"
    });
</script>

Element permissions #

agenda is required when generating the Element Token.

Element options #

element_token required  #

The Element Token the Agenda View will use to communicate with Cronofy.

Not required if the Element is activated in demo mode.

target_id required  #

ID of mounting DOM node (e.g. “cronofy-agenda”).

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

Default value is us.

styles.colors optional  #
The Agenda Element can be assigned a custom color palette for the calendars by passing in an array of HEX values to the colors.calendars option. For example:

styles: {
    colors: {
        calendars: ["#0074d9", "#ffdc00"]
    }
}

locale optional  #
The Agenda View 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).

Search