# Shadcn All Views

> Event calendar with all views and live settings

- Type: example, free and open source (MIT)
- Component: [Event Calendar](https://reui.io/components/event-calendar.md)
- Page: https://reui.io/components/event-calendar/c-event-calendar-1
- Docs (Base UI): https://reui.io/docs/components/base/event-calendar.md
- Docs (Radix UI): https://reui.io/docs/components/radix/event-calendar.md
- MCP: `get_example("c-event-calendar-1")`
- Registry item: https://reui.io/r/styles/base-nova/c-event-calendar-1.json
- Uses: Avatar, Button, Card, Event Calendar, Label, Popover, Select, Switch, Tabs

## Best for

A feature tour whose tabbed Settings popover drives view options, time grid, drag behavior, 6 languages and 5 time zones

## Agent notes

- Drag to create is on through `selectSlot`, yet nothing handles the drawn range, so a drag over empty time only selects it
- `renderEventContent` keys its custom chips to the sample ids `design-review` and `client-call`; every other event gets the built in chip
- Right to left for `ar` comes from `dir` on the wrapper div, not from `locale` or `i18n`, so carry that attribute with the calendar

## When not to use

- A form that opens on a day or an item click to create, edit and delete: use [Event Form Dialog](https://reui.io/components/event-calendar/c-event-calendar-3.md) (`get_example("c-event-calendar-3")`)

## Third-party libraries

- date-fns v4: [docs](https://date-fns.org/v4.1.0/docs/Getting-Started)

## Install

```bash
npx shadcn@latest add @reui/c-event-calendar-1
```

## About Shadcn Event Calendar

### When to use

- Team calendars in month, week, day and agenda views where events are added, edited and dragged
- Room and appointment bookings laid out as one column per resource or as a single day of open slots
- Project and campaign plans drawn as color coded bars spanning several days of a month

### When not to use

- A finished full page scheduling workspace, such as a hotel desk, shift roster or clinic: use the [Event Calendar blocks](https://reui.io/blocks/application/event-calendar.md)
- A compact booking card where someone picks a day, then a free time slot, and confirms: use the [Schedule blocks](https://reui.io/blocks/application/schedule.md)
- A plain date or date range input in a form, with no hours, events or dragging: use [Calendar](https://reui.io/components/calendar.md) (`get_component("calendar")`)

### Agent notes

- No example passes `onEventsChange`, so drags, resizes and `apiRef` edits stay in calendar state and are lost on reload
- New event ids come from a `useRef` counter that restarts at 0 on every mount, so take ids from your store once events persist

Every ReUI item has a twin like this one; the index is https://reui.io/llms.txt. Agents with the ReUI MCP (https://reui.io/docs/mcp) get the same guidance from the getters named above.