Calendar

Single, range and multiple selection with full keyboard grid navigation.

Built on Icons.

Check-in: Fri, Dec 11
Check-out: Tue, Dec 15

4nights

December 2026

January 2027

$186 × 4 nights$744

Installation

npx shadcn@latest add https://neonkit.heyaadi.com/r/calendar.json

Usage

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

const [range, setRange] = React.useState<DateRange>({})

<Calendar mode="range" numberOfMonths={2} selected={range} onSelect={setRange} />

Examples

A single day

The default mode. Weekends are disabled with a function, so the keyboard skips them too.

Several days

Multiple mode toggles each day on and off and reports them sorted.

Locales

Month and weekday names, digits and the first day of the week all come from Intl.

API reference

Calendar

Also accepts native div attributes, and the ref points at the root. It has no surface of its own, so it sits cleanly in a popover or card.

Prop	Type	Default
`mode`	`"single" \| "range" \| "multiple"` What a click selects. It also sets the types of selected and onSelect.	`"single"`
`selected`	`Date \| DateRange \| Date[] \| null` Controlled selection, shaped by mode. Pass null for controlled with nothing picked.	None
`defaultSelected`	`Date \| DateRange \| Date[]` Initial selection when uncontrolled.	None
`onSelect`	`(value) => void` Single: the picked Date. Range: { from } on the first pick, then { from, to }. Multiple: every selected Date, sorted. Dates are local midnight.	None
`month`	`Date` Controlled first visible month.	None
`defaultMonth`	`Date` First visible month at mount. Falls back to the selection's month, then today's.	None
`onMonthChange`	`(month: Date) => void` Called with the first of the month when the view pages, from the buttons or the keyboard.	None
`numberOfMonths`	`number` Months shown side by side. They stack below the sm breakpoint.	`1`
`weekStartsOn`	`0 \| 1 \| 2 \| 3 \| 4 \| 5 \| 6` First column, 0 for Sunday. Defaults to the locale's first day of the week.	from locale
`minDate`	`Date` Earlier days are disabled, and the previous button stops at this month.	None
`maxDate`	`Date` Later days are disabled, and the next button stops at this month.	None
`disabled`	`(date: Date) => boolean` Return true for days that can't be picked. A range can't run across one.	None
`showOutsideDays`	`boolean` Fill the first and last rows with days from the neighbouring months.	`true`
`locale`	`string` BCP 47 tag for month and weekday names, digits and the week start.	`"en-US"`
`autoFocus`	`boolean` Focus the active day on mount and mark it with data-autofocus for a surrounding popover.	`false`
`color`	`NeonColor` Palette name or hex. Falls back to --neon-accent, then cyan.	inherited

DateRange

Prop	Type	Default
`from`	`Date` First day, inclusive.	None
`to`	`Date` Last day, inclusive. Unset while the end is still being picked.	None

Accessibility

Each month is a grid labelled by its caption, and the caption is a polite live region so paging is announced.
Only one day is in the Tab order: the focused day, else the selection, else today, else the first day that can be picked.
Arrow keys move by day and week, Page Up and Page Down by month, Shift with them by year, and Home and End to the ends of the week. Enter or Space selects.
Moving past the visible months pages the view, and moves that land on a disabled day skip ahead to the next one that isn't.
Days carry a full spoken date, aria-selected, aria-disabled, and aria-current="date" for today.
A month that has fewer days than the one you came from lands on its last day: Jan 31 plus a month is Feb 28.
Date math uses local calendar days, never milliseconds, so daylight-saving changes can't skip or repeat a day.
Today is read on the client only, so server and browser time zones can't disagree during hydration.
Month slides and the range ignition are skipped with reduced motion.