# Calendar

> Single-date calendar with month and year jumping, marked days and grid keyboard support.

Component · Pro · https://lodeui.com/components/calendar

## 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

```bash
npx shadcn@latest add @lode/calendar
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="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 |
| --- | --- |
| ← / → | Previous or next day |
| ↑ / ↓ | Previous or next week |
| Home / End | Start or end of the week |
| Page Up / Page Down | Previous or next month |
| Enter / Space | 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.

## Related

- [Date range picker](https://lodeui.com/components/date-range-picker) — Pick a start and an end on a calendar that previews the range as you move.
- [Time slot picker](https://lodeui.com/components/time-slot-picker) — Bookable time slots where picking one slides out a confirm button.
- [Meeting scheduler](https://lodeui.com/blocks/meeting-scheduler) — Book a call: host card, calendar, time slots and confirmation.