Forms Calendar

Calendar

Pick a day to arrive — or a range to stay (react-day-picker v9, in the brand colours).

Preview

Pick a day to arrive

October 2026

Usage

tsx

import { Calendar } from "zostel-ui";

const [date, setDate] = useState<Date | undefined>();

<Calendar
  mode="single"
  selected={date}
  onSelect={setDate}
  disabled={{ before: new Date() }}
  className="rounded-xl border border-zostel-beige"
/>

{/* a stay: mode="range", selected={{ from, to }} */}

Props

Prop	Type	Default	Description
`mode`	`"single" \| "multiple" \| "range"`	—	What can be picked.
`selected`	`Date \| Date[] \| DateRange`	—	The chosen day(s).
`onSelect`	`(value) => void`	—	Called with the new selection.
`disabled`	`Matcher \| Matcher[]`	—	Days that can’t be picked, e.g. { before: new Date() }.
`showOutsideDays`	`boolean`	`true`	Show the days of the months either side.
`classNames`	`ClassNames`	—	Override any part (v9 names: month_grid, day_button, selected, today…).
`…`	`DayPickerProps`	—	Every other react-day-picker v9 prop (numberOfMonths, locale…).
`className`	`string`	—	More classes, merged with the component’s own (tailwind-merge).

mode

Type: "single" | "multiple" | "range"

Default: —

What can be picked.

selected

Type: Date | Date[] | DateRange

Default: —

The chosen day(s).

onSelect

Type: (value) => void

Default: —

Called with the new selection.

disabled

Type: Matcher | Matcher[]

Default: —

Days that can’t be picked, e.g. { before: new Date() }.

showOutsideDays

Type: boolean

Default: true

Show the days of the months either side.

classNames

Type: ClassNames

Default: —

Override any part (v9 names: month_grid, day_button, selected, today…).

…

Type: DayPickerProps

Default: —

Every other react-day-picker v9 prop (numberOfMonths, locale…).

className

Type: string

Default: —

More classes, merged with the component’s own (tailwind-merge).

Su	Mo	Tu	We	Th	Fr	Sa