# Calendar Event

An event block for week views: colour tag, title, time and attendees.

Tier: Free

## Installation

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

## Usage

```tsx
import { CalendarEvent } from '@/components/fetaui/calendar-event'

export function Example() {
  return <CalendarEvent title="Design review" time="10:00 to 10:45" tone="accent" />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| title | string | required |
| time | string |  |
| tone | neutral, accent, success, warning | neutral |
| state | default, selected, now | default |
| dense | boolean | false |
| people | number | 0 |
| onSelect | () => void |  |
| animated | boolean | true |
| className | string |  |

## When to use

- In week and day grids.

## When not to use

- For a list of events: use Item.

## Accessibility

- With `onSelect` it is a button with a pressed state.
- Tone is never the only signal: the title carries the meaning.

## Motion

- Hover widens the tag to 3 px and fans the attendees out.
- With `onSelect` it lifts 1 px, presses to 0.97 and pops when selected.
- `now` breathes the tag. It pauses offscreen and with `animated` off.
- Reduced motion keeps the colour changes only.