Single
April 2026
Su
Mo
Tu
We
Th
Fr
Sa
Range
April 2026
Su
Mo
Tu
We
Th
Fr
Sa
Multiple
April 2026
Su
Mo
Tu
We
Th
Fr
Sa
Installation
CLI
Install the component using the StarUI CLI:
Examples
Date Range with Readout
Range mode with a reactive display of the selected dates
April 2026
Su
Mo
Tu
We
Th
Fr
Sa
Range:
on_select Callback
Sync a separate signal when a date is picked using on_select
April 2026
Su
Mo
Tu
We
Th
Fr
Sa
Last picked:
CalendarElement Signals
Access .month_display, .month, .year, and .selected from the returned CalendarElement
April 2026
Su
Mo
Tu
We
Th
Fr
Sa
Month display: April
Month: 4
Year: 2026
Selected:
Disabled
A fully disabled calendar with no interaction
March 2025
Su
Mo
Tu
We
Th
Fr
Sa
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
mode |
Literal['single', 'range', 'multiple'] |
'single' |
Selection mode for the calendar |
caption_layout |
Literal['label', 'dropdown'] |
'label' |
Navigation caption style — simple label or month/year dropdowns |
selected |
str | list[str] | None |
None |
Initially selected date(s) |
month |
int | None |
None (current month) |
Starting month (1-12) |
year |
int | None |
None (current year) |
Starting year |
disabled |
bool |
False |
Whether the calendar is disabled |
on_select |
str | list | None |
None |
JavaScript expression(s) executed after a date is selected. In the handler, `d` is the selected date string. |
signal |
str | Signal |
'' |
Custom signal prefix for the calendar |
cls |
str |
'' |
Additional CSS classes |