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

*(Interactive UI element — see the HTML version for the live demo)*

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

### Element permissions
`agenda` is required when generating the [Element Token](/developers/ui-elements/authentication/index.md).

### Element options
##### `element_token` *(required)*

The [Element Token](/developers/ui-elements/authentication/index.md) the
Agenda View will use to communicate with Cronofy. The Agenda viewer can only use an Element Token with **one** [sub](/developers/ui-elements/authentication/index.md) 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:

```js
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](/developers/api/events/read-events/index.md).

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](/developers/api/events/read-events/index.md) with the `only_managed` option set to true.

When in `free_busy` mode the Agenda Viewer will display [free/busy information](/developers/api/events/free-busy/index.md), 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](/developers/api/events/free-busy/index.md) 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: &quot;fr&quot;` 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](/developers/ui-elements/customization/index.md)

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

##### `tzid` *(optional)*

The time zone in which the Agenda View will be rendered. Must be a valid time zone identifier from the [IANA Time Zone Database](https://www.iana.org/time-zones). If no `tzid` is provided, the Agenda View will use the system time zone from the user's browser.

##### `start_date` *(optional)*

A date string in the format of `YYYY-MM-DD`. The Agenda View will render from this date if `start_date` is provided. If no `start_date` is provided the Agenda View will render from today's date.

### 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:

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

// Refresh the Agenda Element:
Agenda.refresh();
```

> **WARNING:** Being able to refresh a UI Element is useful in cases where your availability may have changed behind the scenes. UI Elements gather their availability data when they are first loaded, so unless they are refreshed they will not be aware of any changes to availability.

##### `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):

```js
// 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](/developers/ui-elements/index.md) will be fired.



---
[Read in HTML](/developers/ui-elements/agenda-viewer/)