# Shadcn Drag-to-Book

> Event calendar with drag-to-book appointments

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

## Best for

A consultant's day from 9:00 to 18:00 where dragging over free time books a slot and overlapping draws are refused

## Agent notes

- `bookSlot` inserts a New appointment placeholder the moment a drag ends; open your booking form or call your API there instead
- `canBook` only checks new draws, so moving or resizing an appointment onto another one is never refused
- Client photos load from `randomuser.me` URLs in `buildAppointments`; swap them for your own images or drop `AvatarImage`

## When not to use

- Appointments typed into a dialog with title, color, start and duration fields: use [Event Form Dialog](https://reui.io/components/event-calendar/c-event-calendar-3.md) (`get_example("c-event-calendar-3")`)
- Several rooms or staff shown side by side as columns of one day: use [Room Bookings](https://reui.io/components/event-calendar/c-event-calendar-2.md) (`get_example("c-event-calendar-2")`)

## 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-5
```

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