Calendar
A day or a range, with one fluid hover across months, a live range preview and booking rules.
Installation
Installs the Base UI flavor. Switch in the right panel.
Range
Pick a start, then move to preview the end. Two months sit side by side when there is room and stack in narrower containers.
Single date
Arrow keys move between days. Enter selects, PageUp and PageDown change the month, and Home and End move within the week. Selection stays in your state.
Booked and unavailable days
Booked dates are struck through, past dates fade, and neither can be picked. Use available to allow only matching days instead. This stay needs at least two nights.
Day details and week numbers
A taller cell leaves room for a price or count, which is read after its date by screen readers. Week numbers use a Monday start unless you choose otherwise.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| mode | "single" | "range" | "single" | Pick one date, or a start and an end. |
| selected | Date | DateRange | — | Controlled date, or { from, to } in range mode. |
| onSelect | (value: Date | DateRange | undefined) => void | — | Called for each pick. The first range pick has no end yet. |
| required | boolean | false | Keep a selection when its date is picked again. |
| min / max | number | — | Fewest and most nights in range mode. |
| booked | Matcher | Matcher[] | — | Taken dates are disabled, struck through and announced as booked. A range cannot cross them. |
| available | Matcher | Matcher[] | — | Only matching dates can be picked, for example { dayOfWeek: [1, 2, 3, 4, 5] }. |
| disabled | Matcher | Matcher[] | — | Additional dates that cannot be picked, such as { before: today }. |
| Prop | Type | Default | Description |
|---|---|---|---|
| numberOfMonths | 1 | 2 | 1 | Months in the same fluid hover scope. |
| orientation | "auto" | "horizontal" | "vertical" | "auto" | Auto stacks two months when their container is too narrow. |
| cellSize | number | 36, 32 compact | Cell size in pixels. The type size stays the same. |
| fill | boolean | false | Stretch columns to the container width; cellSize caps row height. |
| dayDetail | (date: Date) => ReactNode | — | A short line below a day, such as a price. Use cellSize 56 or more and a pure callback. |
| showWeekNumber | boolean | false | Add a muted week column. Uses ISO weeks with a Monday start by default. |
| showOutsideDays | boolean | true for one month | Show neighboring dates. Always hidden with two months to avoid duplicates. |
| size | "default" | "compact" | — | Pin the calendar to one step of the shared size ladder. |
| DayPicker props | DayPickerProps | — | Pass through locale, weekStartsOn, month, onMonthChange, labels and other supported calendar props. |
Adapted from Fluid Functionalism.