Agenda View ALPHA

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.

<div id="cronofy-agenda"></div>
<script src=""></script>
        token: "{{ ELEMENT_TOKEN }}",
        target: "cronofy-agenda"

The Agenda element will fill the width of its parent DOM element, and has a set height of 400px. The default colors for different calendars can be set by passing an array of hex codes to the colors.calendars option.


agenda is required when generating the Element Token.

Agenda options

token required  #
Auth token for API connection. Not required if the element is activated in demo mode.

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

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

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:

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

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