Calendar
A configurable calendar component to show events.
Getting Started
The Calendar component can be used to show events and related data within your datasources. Each event must have three vital pieces of information: Event Start, Event End, and Title. These values will be used to plot events on your calendar.
| Property | Type |
|---|---|
| Event Start | DateTime Column |
| Event End | DateTime Column |
| Title | String |
You should first use a Data Provider to fetch your data, and add a Calendar component to your screen, with the datasource set to the Data Provider. Configure your columns for Event Start, Event End, and Title. Your calendar should now display rows from your table. NB: Do not paginate your data provider, and consider how many rows you should display.
Views
Different views can be selected, depending on your needs.
Month View - An overview of the whole month, including events that fall outside of that month, but inside of this view .
Week View - A snapshot of the week
Day View - a simple timeline of the day
Agenda - an ordered list of the events of the week
Options
Creators can optionally show or hide the date or date-range being shown in the view. using the "Show title" setting, which can be configured for DD-MM-YYYY or MM-DD-YYYY formats.
Creators also have options to adjust the way the title is displayed, for example in the Title section of the settings, Year title format set to 4-digit, and Month title format set to "Long" will show the title on the Month view as February 2026. Please note that not all settings will apply to all views.
Creators can also allow their users to move around to different dates or views using the "Show Controls" option. By default, the calendar component will open on the current day, but using the "Open on date" setting, and providing a date in YYYY-MM-DD format, the calendar will open on this date (or date range). This could be useful to show specific plans.
On click events
On-click events can be established to surface the values for an event's row_id, event start, event end, and event title. These could be used in conjunction with a Single Row provider in a modal or side panel, or even as part of Navigate To action using URL Parameters
Setting | Expected Value | Use |
|---|---|---|
Data Provider | Data Provider | Should fetch a datasource that contains the required columns (detailed below) |
Event Start | DateTime column | |
Event End | DateTime column | |
Event Title | Text column | |
Type | Month/Week/Day/Agenda | Sets which view is shown by default |
On click event | Read more about Actions | |
Show title date | Boolean | Show or hide the date-range as a title |
Title locale | DD MM YYYY or | Only visible when "Show title date" is checked. |
Year title format | Hidden or 4-digit or 2-digit | |
Month title format | Hidden or Numeric or 2-digit or Short or Long | |
Day title format | Hidden or Numeric or 2-digit | |
Weekday title format | Hidden or Short or Long or Narrow | |
Empty Agenda text | Text | Used when the calendar is showing Agenda, with no events to show. |
Show Controls | Boolean | Allow or prevent the user from navigating to different views or dates |
Button Type | Action (Default) or Primary | |
Open on date | Text, expects YYYY-MM-DD format | Calendar will open on current date by default. Set this to open on a specific date. |
Month button Text | Text | Allows customisation for non-english-speaking users |
Week button Text | Text | Allows customisation for non-english-speaking users |
Day button text | Text | Allows customisation for non-english-speaking users |
Today button text | Text | Allows customisation for non-english-speaking users |
Updated about 4 hours ago