Calendar

October 2026

Installation

pnpm dlx shadcn@latest add @paneui/calendar

Usage

import { Calendar } from "@/components/ui/calendar"

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

<Calendar value={date} onValueChange={setDate} />

Examples

Range

Disabled Days

Use when only some days can be booked.

RTL

Keyboard

Arrow keys move by day and week, Home/End to the edges of the week, PageUp/PageDown by month and Shift+PageUp/PageDown by year. One day in the grid is tabbable.

Locale

Month names, weekday initials and the first day of the week follow locale (the browser's by default). Set weekStartsOn to override the week.

API Reference

Also accepts every prop of div.

mode= "single": "single" | "range"; Pick one date or a range.
value: Date | null · { from?: Date; to?: Date }; Controlled selection (shape follows mode).
defaultValue: same as value; Initial selection when uncontrolled.
onValueChange: (value) => void; Called with the new date or range. Clicking the selected date clears a single selection.
month: Date; Controlled first visible month.
defaultMonth= the selection's month or today: Date; First visible month when uncontrolled.
onMonthChange: (month: Date) => void; Called when the visible month changes.
numberOfMonths= 1: number; Months side by side.
min: Date; Earliest selectable day.
max: Date; Latest selectable day.
disabled: (date: Date) => boolean; Extra unavailable days.
weekStartsOn= the locale's: 0–6; First weekday (0 = Sunday).
locale: string; BCP 47 locale for names and week start.
showOutsideDays= true: boolean; Show neighbouring months' days (one month only).

Prop	Type	Default	Description
mode	"single" \| "range"	"single"	Pick one date or a range.
value	Date \| null · { from?: Date; to?: Date }	—	Controlled selection (shape follows `mode`).
defaultValue	same as value	—	Initial selection when uncontrolled.
onValueChange	(value) => void	—	Called with the new date or range. Clicking the selected date clears a single selection.
month	Date	—	Controlled first visible month.
defaultMonth	Date	the selection's month or today	First visible month when uncontrolled.
onMonthChange	(month: Date) => void	—	Called when the visible month changes.
numberOfMonths	number	1	Months side by side.
min	Date	—	Earliest selectable day.
max	Date	—	Latest selectable day.
disabled	(date: Date) => boolean	—	Extra unavailable days.
weekStartsOn	0–6	the locale's	First weekday (0 = Sunday).
locale	string	—	BCP 47 locale for names and week start.
showOutsideDays	boolean	true	Show neighbouring months' days (one month only).