Calendar
The Calendar widget draws a month-view calendar, displays dates, and lets users select a date by tapping a cell.
Mark event dots on specific dates, switch between month and week views, and hook actions to date selection and month navigation.
Definition and role
The Calendar widget draws a grid of dates for one month plus a header with the year and month. When a user taps a date cell, that date becomes selected and the onDateSelected action runs. Every date in the list you specify shows an event dot, and you can color dates differently depending on whether they fall before or after today and whether they have an event. Two formats are supported: month view and week view.
- Category: Contents
- Default format: month view (
month) - Default header: today header (
todayHeader)
Features
| Feature | Description |
|---|---|
| Date selection | Tapping a date cell selects that date and runs the onDateSelected action. |
| Event display | Shows an event dot on every date in the eventDate list. |
| Format switching | Switches between month view and week view. Show or hide the format switch bar. |
| Month navigation | Move to the previous or next month from the header. When the page changes, the onPageChanged action runs. |
| Range limits | Set the first (firstDay) and last (lastDay) selectable date. |
| Colors and text | Adjust colors per state — past/future, selected, and event — plus the text styles for the header, weekdays, and dates. |
How to use
- Open the Contents category in the left widget palette.
- Drag and drop the Calendar item onto the canvas.
- In the properties panel on the right, set the basic display — format (
calendarFormat), header (header), and so on. - In
onDateSelected, connect the action — logic or script — to run when a user selects a date. - Adjust event dates, range limits, and per-state colors as needed.
Properties
The header, weekday, and date text style properties set only size and weight, not text color. Set colors with the color properties below.
| Property | Description | Default | Value / Type |
|---|---|---|---|
calendarFormat | Calendar display format | month | month, week |
selectedDate | Date selected initially | Not set | String (date) |
firstDay | First selectable date | Not set | String (date) |
lastDay | Last selectable date | Not set | String (date) |
eventDate | List of dates to mark with an event dot | Not set | List of strings |
rowHeight | Height of a date row | Not set (runtime default 32) | Number (px, 0 or greater) |
header | Header form | todayHeader | todayHeader, arrowHeader |
headerNavMode | How date navigation opens when the header (year and month) is tapped | popup | popup, inline |
headerVisible | Whether the header is visible | true | Boolean |
dayOfWeekVisible | Whether the weekday row is visible | true | Boolean |
typeChangeBarVisible | Whether the format switch bar is visible | true | Boolean |
outsideDaysVisible | Whether dates outside the current month — the previous and next month — are visible | true | Boolean |
headerColor | Header text and icon color (title, today, arrows) | #FFFFFF | Color |
beforeNowDateColor | Text color for dates before today | #FFFFFF | Color |
beforeNowSelectedDateColor | Text color for a selected date before today | #121212 | Color |
beforeNowSelectedBgColor | Background color for a selected date before today | #FAFAFA | Color |
afterNowDateColor | Text color for dates after today | #A0A0A0 | Color |
afterNowSelectedDateColor | Text color for a selected date after today | #A0A0A0 | Color |
afterNowSelectedBgColor | Background color for a selected date after today | #FAFAFA | Color |
beforeNowEventDateColor | Text color for an event date before today | #FFCB00 | Color |
beforeNowEventSelectedDateColor | Text color for a selected event date before today | #121212 | Color |
beforeNowEventSelectedBgColor | Background color for a selected event date before today | #FFCB00 | Color |
afterNowEventDateColor | Text color for an event date after today | #84C13D | Color |
afterNowEventSelectedDateColor | Text color for a selected event date after today | #FFFFFF | Color |
afterNowEventSelectedBgColor | Background color for a selected event date after today | #84C13D | Color |
dayOfWeekTextColor | Weekday text color | #616161 | Color |
dragBarColor | Color of the format switch (drag) bar | #FFFFFF | Color |
disabledColor | Color of disabled (unselectable) dates | #4D4D4D | Color |
headerTitleTextStyle | Header title text style (color excluded) | 13px, weight 600 | Text style |
headerActionTextStyle | Header action text style (color excluded) | 13px, weight 500 | Text style |
monthPickerTextStyle | Month picker text style (color excluded) | 13px | Text style |
dayOfWeekTextStyle | Weekday text style (color excluded) | 14px | Text style |
dayTextStyle | Date text style (color excluded) | 14px | Text style |
Notes and tips
The color of a date cell comes from a combination of three things: whether the date is past (beforeNow*) or future (afterNow*) relative to today, whether it has an event, and whether it is selected. Set a color for each state.
Text style properties such as headerTitleTextStyle and dayTextStyle exclude text color. Set text color with the separate color properties — beforeNowDateColor, dayOfWeekTextColor, and so on.
Learn more
For the full set of Widget Control (Property, Method, and Event) you can use to script this widget, see Calendar Widget Control.