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

​
Initial Value

Pass a datetime.date to value to pre-select a date:

​
Range Selection

Set mode="range" to let users select a start and end date. The value is a dict with "from" and "to" keys:

​
Multiple Selection

Select multiple individual dates with mode="multiple". The value is a list of dates:

​
Reading the Value

Use .rx to get a reactive reference to the calendar’s current selection. What .rx holds depends on the mode: an ISO date string for single mode, a {"from": ..., "to": ...} object for range mode, or an array of ISO strings for multiple mode. The .date() pipe formats a single ISO string for display: Click a date and the input updates instantly. The .date("long") pipe formats 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".
​
value
date | Rx | dict | list[date] | None
default:"None"
Initial selected date(s). Single: a datetime.date. Range: {"from": date, "to": date}. Multiple: a list of dates. Any position also accepts an Rx for reactive binding.
​
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",
  "name?": "string",
  "mode?": "single | multiple | range",
  "value?": "string | object | Action[] | string",
  "onChange?": "Action | Action[]",
  "cssClass?": "string"
}
For the complete protocol schema, see Calendar.