Calendar

A date grid with single, range and multiple selection. Months slide in the direction you navigate and the selection pill glides between days. Zero date library.

Inputs

October 2026

Saturday, October 31

Playground

Tweak the props, the preview and the code follow.

October 2026

Props

mode

months

weekStartsOn

locale

showOutsideDays

disableWeekends

const [value, setValue] = React.useState<Date | undefined>()

<Calendar
  mode="single"
  selected={value}
  onSelect={setValue}
/>

Installation

npx @plumsydev/plum-ui add calendar

Usage

import { Calendar, type DateRange } from "@/components/ui/calendar"

const [date, setDate] = React.useState<Date | undefined>(new Date())

<Calendar mode="single" selected={date} onSelect={setDate} />

Examples

Range

Two months side by side, minDate to block the past and a live preview of the range on hover.

November 2026

December 2026

6 nights in Lisbon€852

Multiple

Pick any number of days. Each one pops in with a spring.

October 2026

Time off0 / 25 days

Click days to add them. Click again to remove.

Booking

Weekends disabled, a two-month window and time slots that react to the selected day.

November 2026

Pick a weekday

API Reference

Calendar

Prop	Type	Default
`mode` Selection model. Drives the type of `selected` and `onSelect`.	`"single" \| "range" \| "multiple"`	`"single"`
`selected` Controlled selection. Leave it out to let the calendar manage its own state.	`Date \| DateRange \| Date[]`	`—`
`defaultSelected` Initial selection when uncontrolled.	`Date \| DateRange \| Date[]`	`—`
`onSelect` Called with the new selection. Clicking a selected day in single mode clears it.	`(value) => void`	`—`
`month` Controlled visible month.	`Date`	`—`
`defaultMonth` Initial visible month. Defaults to the selection, then today.	`Date`	`—`
`onMonthChange` Called when navigating.	`(month: Date) => void`	`—`
`numberOfMonths` Render one or two months side by side.	`1 \| 2`	`1`
`disabled` Return true to disable a day.	`(date: Date) => boolean`	`—`
`minDate` Days before are disabled and navigation stops.	`Date`	`—`
`maxDate` Days after are disabled and navigation stops.	`Date`	`—`
`weekStartsOn` 0 for Sunday, 1 for Monday.	`0 \| 1`	`1`
`locale` Any BCP 47 locale. Month and weekday names come from `Intl`.	`string`	`"en-US"`
`showOutsideDays` Show the trailing days of the adjacent months.	`boolean`	`true`
`children` Footer rendered under the grid.	`ReactNode`	`—`

Notes

Keyboard: arrows move by day and week, PageUp/PageDown by month (add Shift for a year), Home/End jump to the week edges, Enter selects.
Every grid has six rows, so the height never jumps between months.

PreviousButton NextCard