# Calendar

Pick a date, a range, or a date and a time. Six rows always, so the height never jumps.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/calendar
```

## Usage

```tsx
import { Calendar } from '@/components/fetaui/calendar'

export function Example() {
  return <Calendar onValueChange={setDate} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| mode | single, range, datetime | single |
| value | Date or DateRange |  |
| defaultValue | Date or DateRange |  |
| onValueChange | (value) => void |  |
| onApply | (value) => void |  |
| slots | string[] | datetime only |
| months | 1, 2 | 1 |
| defaultMonth | Date | value, then today |
| isDisabled | (date) => boolean |  |
| booked | Date[] |  |
| events | Date[] |  |
| locale | string | en-US |
| animated | boolean | true |
| dropdowns | boolean | false |

## When to use

- Single for one date, Range for stays and reports, Date and time for booking.
- Two months when ranges often cross a month.

## When not to use

- Inside a form field: use Date Picker.

## Accessibility

- Grid role with arrow key movement.
- Each day has a full label, like Wednesday, November 4, 2026.
- Today is marked with aria-current.

## Motion

- Months slide 24 px the way you paged, in 280 ms.
- The selected chip scales from 0.9. A range band follows the pointer after the start is picked.
- With reduced motion, months swap and the fill changes in place.