Calendar

Calendar keeps the date grid on the page, for a booking flow, a scheduling sidebar or a range picker with shortcuts. It shares one options object with the kit's date pickers.

Install

bashnpx shadcn@4.18.0 add @siteplane/calendar

Import it from @/siteplane/components/calendar. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

• vs Date Picker: Pick Date Picker when the calendar should open from a compact button.
• vs Date Field: Pick Date Field when typing is the main path, as with a birth date.
• vs Date Range Picker: Pick Date Range Picker for a compact typed range field with a popover calendar.

Rules

• Choose selectionMode (single, multiple or range) first; it sets the shape of value.
• Block days with disabled matchers and limit navigation with startMonth and endMonth.
• Define shared CalendarOptions once and reuse them in Calendar and in each picker's calendarProps.
• Control month alongside value when your own buttons, like Today, change the date.
• Values are local-midnight Date objects, so choose a storage format on purpose, for example YYYY-MM-DD.
• Give it an aria-label; do not pass React Aria CalendarDate or minValue props.

Reference

• Calendar docs, with every prop, part and example (Markdown)
• Siteplane UI 1.8.1, Date & color. Read the installed source under src/siteplane before relying on an API.