Skip to main content
The Calendar component renders a month view for selecting dates. It supports single date, multiple date, and date range selection. Selected dates are stored in client state as ISO strings.

​
Basic Usage

​
Range Selection

Set mode="range" to let users select a start and end date. The selected range is stored as a JSON object with from and to ISO strings.

​
Multiple Selection

Select multiple individual dates with mode="multiple". Selected dates are stored as a JSON array of ISO strings.

​
Displaying the Selection

Bind the calendar’s state to a label using {{ name | date }} to show a formatted date. Click a date below to see it update: The label updates instantly when the user clicks a date. The date:long format turns an ISO string like "2025-01-15" into "January 15, 2025".

​
API Reference

Calendar Parameters

​
mode
str
default:"single"
Selection mode: "single", "multiple", or "range".
​
name
str | None
default:"None"
State key for storing the selected date. Single mode stores an ISO string; range mode stores {"from": "...", "to": "..."}.
​
on_change
Action | list[Action] | None
default:"None"
Action(s) triggered when the selection changes.
​
css_class
str | None
default:"None"
Additional Tailwind CSS classes.

​
Protocol Reference

Calendar
{
  "type": "Calendar",
  "mode?": "single | multiple | range",
  "name?": "string",
  "onChange?": "Action | Action[]",
  "cssClass?": "string"
}
For the complete protocol schema, see Calendar.