# Shadcn Room Bookings

> Event calendar with resource view for room bookings

- 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-2
- 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-2")`
- Registry item: https://reui.io/r/styles/base-nova/c-event-calendar-2.json
- Uses: Button, Card, Event Calendar

## Best for

Hotel rooms as columns from 8:00 to 20:00, holding stays, check-outs and housekeeping colored by a status legend

## Agent notes

- Chip colors are copied from `STATUS` into each booking's `color` when built, so changing `status` later also needs a new `color`
- `addBooking` always books noon to 1 PM in room `r101` with no overlap check, so repeated clicks double book that hour

## When not to use

- Bookings made by dragging across free time, with double booking refused: use [Drag-to-Book](https://reui.io/components/event-calendar/c-event-calendar-5.md) (`get_example("c-event-calendar-5")`)
- Bookings typed into a form that also edits or deletes the one you click: 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-2
```

## 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.