## Day Agenda (S—177)

A scrolling day view with an hour grid, a live “now” line, events as blocks and click-an-empty-slot to add one.

- URL: https://sundaeui.dev/components/day-agenda
- Category: UI components · Art direction: Refined
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/day-agenda.json`
- Tags: events, agenda, schedule, day-view, time-grid, calendar

Events sit on an hour grid sized by duration; overlapping events split the width. A thin now-line moves with the clock and the view scrolls to it on load.
Click an empty half-hour slot to drop a new “Untitled” event there, then click it again to remove. Arrow keys move focus between events.

### Usage

```tsx
import { DayAgenda } from '@/components/sundae/day-agenda'

<DayAgenda />
```

### Props

- `events` (`{ id: string; title: string; start: number; end: number }[]`, required): Events in fractional hours (9.5 = 9:30).
- `startHour / endHour` (`number`, default `7 / 20`): Visible range.
- `onAdd` (`(start: number) => void`): Called when an empty slot is clicked.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Calendar apps, booking dashboards, daily planners.

### When not to use

- Multi-day planning: use a week view.

### Accessibility

- Each event is a button labelled with its title and time; empty slots are buttons labelled “Add event at 2:30 pm”.
- Reduced motion removes the movement and keeps every state change.