# Shadcn Event Calendar

> Open-source shadcn event calendar components with month, week, day and agenda views, and drag-and-drop scheduling.

- Type: ReUI component, free
- Page: https://reui.io/components/event-calendar
- 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_component("event-calendar")`, then `get_examples("event-calendar")`
- Examples: 5

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

## Third-party libraries

- date-fns v4: [docs](https://date-fns.org/v4.1.0/docs/Getting-Started)
- date-fns time zones v1: [API reference](https://github.com/date-fns/date-fns/tree/main/pkgs/tz#api), [docs](https://github.com/date-fns/date-fns/tree/main/pkgs/tz)
- Base UI v1: [API reference](https://base-ui.com/react/components), [docs](https://base-ui.com/react/overview/quick-start), [llms.txt](https://base-ui.com/llms.txt), through the Base UI twin
- Radix UI v1: [docs](https://www.radix-ui.com/primitives/docs/overview/getting-started), through the Radix UI twin

## Examples

- [All Views](https://reui.io/components/event-calendar/c-event-calendar-1.md): Event calendar with all views and live settings. Best for a feature tour whose tabbed Settings popover drives view options, time grid, drag behavior, 6 languages and 5 time zones.
- [Room Bookings](https://reui.io/components/event-calendar/c-event-calendar-2.md): Event calendar with resource view for room bookings. Best for hotel rooms as columns from 8:00 to 20:00, holding stays, check-outs and housekeeping colored by a status legend.
- [Event Form Dialog](https://reui.io/components/event-calendar/c-event-calendar-3.md): Event calendar with create and edit dialog. Best for a single form dialog that opens blank on an empty day or the toolbar, and edits or deletes whatever you click.
- [Custom Event Chips](https://reui.io/components/event-calendar/c-event-calendar-4.md): Event calendar with custom event chips. Best for project bars spanning several days in a Monday first month, led by a track icon, with hover tooltips and a legend.
- [Drag-to-Book](https://reui.io/components/event-calendar/c-event-calendar-5.md): Event calendar with drag-to-book appointments. 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.

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.