A calendar view to display a set of events. It supports creating, updating, and deleting events, and customizing different view options.

Calendar displays events using the FullCalendar library. Each event should have a unique ID.


Available properties for Calendar with supported data types or values. You can write JavaScript almost anywhere in Retool to manipulate or read information about components.


A list of boolean values for each item, by index, that reflect whether they are an all-day event.


A list of modified events with changes to the time and duration.


A list of colors for each item, by index.

data{ [key: string]: unknown }[]

The source data for the component.


The maximum number of events to display, per day, when viewType is month. If not set, events stack to the height of the cell.


Whether to display a section for all-day events.


Whether to display event times.


The time zone (UTC offset) that applies to the display value. Uses the time zone reported by the browser if set to local.


Whether to display weekends.


A list of ISO 1601 timestamps, by index, for the end of each event.


A list of IDs, by index, for each calendar event.


The maximum number of events to horizontally display when viewType is day or week.

firstDayOfWeek0 | 1 | 2 | 3 | 4 | 5 | 6

The first day of the week, by index, with Sunday as 0.


A list of group IDs, by index, to which calendar events belong.


Whether the component is visible.


The currently hovered event.


The initial date to view.

itemMode'static' | 'dynamic'

The configuration mode for option lists. Either dynamic for mapped options or static for manual options.

listType'day' | 'week' | 'month' | 'year'

The date range to display when viewType is list.


Whether the component takes up space on the canvas if hidden is true.


The amount of margin to render outside of the component.


The currently selected event.


The currently selected interval.


Whether the component remains visible in the editor if hidden is true.


A list of ISO 1601 timestamps, by index, for the start of each event.


Whether to display event times using 12-hour (h:mm a) or 24-hour format (HH:mm).


A list of titles, by index, for each event.

view{ start: string; end: string; }

The start and end datetime strings for the current view.

viewType'month' | 'week' | 'day' | 'list'

The current view type.


Events are triggered by user interactions with Calendar. Use event handling to trigger queries or other actions in response to events.

NameDescriptionCreate event

A user selects a date and time range. Create an event handler first to enable users to create events on the calendar.

Click event

A user clicks an event.

Change event

A user modifies the start or end time of an event. Create an event handler first to enable users to create events on the calendar.

Remove event

A user deletes an event. Create an event handler first to enable users to create events on the calendar.


Methods for interacting with Calendar. You can write JavaScript almost anywhere in Retool and use methods to manipulate data or components.

NameDescriptionscrollIntoView(options: any)

Scrolls the canvas or parent container so that the selected component appears in the visible area.

setHidden(hidden: boolean)

Set the hidden value to toggle whether the component is visible. Defaults to true without a parameter.