Agenda View

Required plan: Starter

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.60.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. The Agenda viewer can only use an Element Token with one sub associated with it.

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 optional  #
Use this object to add further limits to the availability display:

config.mode optional  #
The Availability Viewer element has several “modes” it can operate in:

  • default (the default mode)
  • only_managed
  • free_busy
  • free_busy_managed

When in default mode the Agenda Viewer will display all events in the users calendar. This will render all events in the users calendar, as returned by the events endpoint.

When in only_managed mode the Agenda Viewer will display only managed events - events managed by your applicaiton. Any other events in the users calendar do not show up. This is rendering events returned by the events endpoint with the only_managed option set to true.

When in free_busy mode the Agenda Viewer will display free-busy information, showing only the busy periods in the users calendar without displaying event details.

When in free_busy_managed mode the Agenda Viewer will display the full details for any events managed by your application, and free-busy information for other events in their calendar.

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:

  • ar Arabic
  • cs Czech
  • cy Welsh
  • de German
  • en US English (default)
  • es Spanish
  • fr French
  • fr-CA Canadian French
  • he Hebrew
  • it Italian
  • ja Japanese
  • nl Dutch
  • pl Polish
  • pt-BR Brazilian Portuguese
  • ru Russian
  • sv Swedish
  • tr Turkish
  • zh-CN Simplified Chinese

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

Element methods #

refresh()  #

From time to time you may wish to reload the Agenda UI Element on the page. You can do this with the Agenda.refresh() method:

// Load Agenda Element:
const Agenda = CronofyElements.Agenda(optionsObject);

// Refresh the Agenda Element:
Agenda.refresh();
update()  #

Should you need to update the options for any Element, you can reload them with the .update() method (this requires you to have saved your Element instance to a variable beforehand):

// Load Agenda Element:
const Agenda = CronofyElements.Agenda(optionsObject);

// Update the Agenda Element with new options:
Agenda.update(newOptions);

When updating, you do not need to redeclare all the options; you just need to add the ones you want to update.

Note: the Agenda.update() method must be called with an options object, otherwise a warning-level log notification will be fired.