## Event Calendar (S—214)

A month view with event dots per day: pick a day to list its events below, jump months, and add a quick event.

- URL: https://sundaeui.dev/components/event-calendar
- Category: UI components · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/event-calendar.json`
- Tags: events, agenda, date, schedule, month, calendar

Days with events show up to three dots. Selecting a day lists its events with times; an empty day offers a one-line quick add.
Arrow keys move through days, Page Up/Down change month, and “Today” jumps back.

### Usage

```tsx
import { EventCalendar } from '@/components/sundae/event-calendar'

<EventCalendar />
```

### Props

- `events` (`{ date: string; time: string; title: string }[]`, required): Events with ISO dates.
- `defaultDate` (`string`): Selected ISO date.
- `weekStart` (`0 | 1`, default `1`): Sunday or Monday.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Personal planners, booking overviews, team calendars on mobile.

### When not to use

- Dense scheduling across hours: use a day or week view.

### Accessibility

- A grid of day buttons; each says the date and how many events it has.
- The selected day’s list is a live region.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- Arrow keys: Move a day / week
- Page Up / Down: Previous / next month
- T: Today