CalendarPro
Single-date calendar with month and year jumping, marked days and grid keyboard support.
October 2026
Wed Oct 14 2026 · weekends are unavailable
When to use
- Picking one date: deadlines, birthdays, bookings.
When not to use
- Ranges: use the date range picker.
- Dates far in the past like birth years: an input is faster.
Installation
Usage
Import it from @/components/ui/calendar after installing.
example.tsx
import { Calendar } from "@/components/ui/calendar";
<Calendar value={date} onValueChange={setDate} today={today} isDisabled={(d) => d.getDay() === 0} marked={eventDays} />API reference
Calendar
A month grid with a month/year view. Pass today so server and browser render the same.
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue / onValueChange | Date | null | – | Controlled or uncontrolled. |
| today | Date | – | Highlighted as today. |
| isDisabled | (date) => boolean | – | Disable days, e.g. weekends. |
| marked | Date[] | – | Days that get a dot. |
| defaultMonth | Date | – | Month shown first. |
Keyboard interactions
| Keys | Action |
|---|---|
| ←or→ | Previous or next day |
| ↑or↓ | Previous or next week |
| HomeorEnd | Start or end of the week |
| Page UporPage Down | Previous or next month |
| EnterorSpace | Pick the focused day |
Accessibility
- A grid of labelled day cells with aria-selected and aria-current="date".
- The month heading is announced when it changes.
- Disabled days are marked aria-disabled and struck through.
Motion
- Months slide in the direction you move; the selection pill glides between days; the month picker scales in.
Responsive behavior
- 296px wide.
Performance
- 42 buttons per month; no date library.
Notes for AI
- Dates are local calendar dates; convert at your API boundary.
This page as Markdown, for assistants and coding agents:
/components/calendar/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt