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=""></script>
        element_token: "{ELEMENT_TOKEN}",
        target_id: "cronofy-agenda"

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"]

config.logs optional  #
Set the level of logging you want to appear in the console:

  • info: show verbose logging (recommended for development use only).
  • warn: (default) only log errors and warnings.
  • error: only log errors.
  • none: suppress all console output from the Element.

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
  • US English - en (default)
  • French - fr
  • German - de
  • Italian - it
  • Spanish - es

translations optional  #
To override either a locale or a particular string, pass in a translations object here. The Agenda View uses the agenda translation “context”.

Read more about customizing translations

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