Calendar

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.

Properties

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.

NameTypeDescriptionallDayByIndexboolean[]

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

changeSetobject

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

colorByIndexcolor[]

A list of colors for each item, by index.

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

The source data for the component.

dayMaxEventsnumber

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

displayAllDaySlotboolean

Whether to display a section for all-day events.

displayEventTimeboolean

Whether to display event times.

displayTimeZonestring

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

displayWeekendsboolean

Whether to display weekends.

endByIndexstring[]

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

eventIdByIndexstring[]

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

eventMaxStacknumber

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.

groupIdByIndexstring[]

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

hiddenboolean

Whether the component is visible.

hoveredEventobject

The currently hovered event.

initialDatestring

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.

maintainSpaceWhenHiddenboolean

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

marginstring

The amount of margin to render outside of the component.

selectedEventobject

The currently selected event.

selectedIntervalobject

The currently selected interval.

showInEditorboolean

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

startByIndexstring[]

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

timeFormatstring

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

titleByIndexstring[]

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

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

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.