Calendar

Days, months and years, written by hand.

One day

Arrow keys move a day at a time; Page Up and Page Down move a month.

September 2026

One day, several days, or a stretch of them. It can show more than one month at a time, offer dropdowns for month and year, and speak whatever language you hand it. There is no date library behind it — the arithmetic is ours.

Installation

npx philcn@latest add calendar

The file is written into your project. It is yours from then on — change it as you like.

Examples

A range, over two months

Pick a first day, then a last one. Two months make a long stretch easier to see.

September 2026

October 2026

Props

Prop	Type	What it does
Calendar.mode	"multiple" \| "range" \| "single"	One of `"single"`, `"multiple"` or `"range"`. It decides what `selected` holds.
Calendar.selected	Date[] \| Date \| DateRange	What is chosen: a date, an array of them, or a range.
Calendar.onSelect	((date: Date \| undefined) => void) \| ((dates: Date[] \| undefined) => void) \| ((range: DateRange \| undefined) => void)	Called with the new choice, in the shape of the mode.
Calendar.defaultMonth	Date	The month to open on, when nothing is chosen yet.
Calendar.numberOfMonths	number	How many months to show side by side.
Calendar.captionLayout	"dropdown" \| "dropdown-months" \| "dropdown-years" \| "label"	A plain caption, or dropdowns for the month, the year, or both.
Calendar.disabled	DateMatcher	Which days cannot be chosen.
Calendar.showOutsideDays	boolean	Whether the days either side of the month are drawn.
Calendar.weekStartsOn	number	0 for Sunday, 1 for Monday, and so on.

Types are read from the library itself, so this table cannot describe an option the code no longer has.

Worth knowing

A date picker is not a component here, any more than it is at shadcn: it is a Calendar inside a Popover.

Su	Mo	Tu	We	Th	Fr	Sa

Su	Mo	Tu	We	Th	Fr	Sa

Su	Mo	Tu	We	Th	Fr	Sa