Calender Samples

These calendars don't always tell the real date.

Single DayMultiple DaysDay Range

Single Date

mode="single" with controlled selected/onSelect, custom modifiers (events, holidays), and explicit month.

Selected: Mon Oct 06 2025

mode="multiple" with selected: Date[]. Also shows disabled range and numberOfMonths.

Selected: ["2025-10-06","2025-10-12"]

mode="range" with Popover. The button displays the selected range. Use initialFocus on the popover content for accessibility.

State: {"from":"2025-10-10","to":"2025-10-17"}

Loading…