# Shadcn Event Calendar blocks

> Event calendar blocks with month, week and day views, drag-and-drop scheduling, and inline editing.

- Type: Pro blocks (Application)
- Page: https://reui.io/blocks/application/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
- Blocks: 6
- Installs with a ReUI Pro or Ultimate license; setup: https://reui.io/docs/license-setup

## When to use

- A full page scheduling workspace where people drag, resize and create events on a week time grid
- A personal calendar of meetings, focus time and travel, filtered by color-coded calendars
- An operations board for one trade: a hotel front desk, a shift roster, clinic chairs or a lending desk

## When not to use

- Only the scheduling grid and its props, to compose inside a layout you already have: use [Event Calendar](https://reui.io/components/event-calendar.md) (`get_component("event-calendar")`)
- A compact card that books one meeting from a date picker and a list of time slots: use the [Schedule blocks](https://reui.io/blocks/application/schedule.md)
- A single date or range picker with no events, hours or drag: use [Calendar](https://reui.io/components/calendar.md) (`get_component("calendar")`)

## Agent notes

- Replace `buildEvents` and the fixed `ANCHOR` date in data.ts with your own events and opening date; every block seeds `events` from them
- Every create, edit, move and delete only updates local state; persist moves in `handleEventsChange` and saves in `saveDraft`
- Each block sets its own `h-svh` wrapper and `p-4` padding, and the grid scrolls inside it, so give it a bounded height in an app shell

## Third-party libraries

- date-fns v4: [docs](https://date-fns.org/v4.1.0/docs/Getting-Started), used by 6 of 6 blocks
- React DayPicker v9: [API reference](https://daypicker.dev/v9/api), [docs](https://daypicker.dev/v9/start), used by 6 of 6 blocks
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started), used by 6 of 6 blocks

## Blocks

- [Personal Calendar](https://reui.io/blocks/application/event-calendar/event-calendar-1.md): Event calendar with month, week, day, N-day, and agenda views plus drag-and-drop editing. Best for a month-first personal calendar with no side rail, where one toolbar menu shows, hides and edits the color-coded calendars.
- [Mini Month Calendar](https://reui.io/blocks/application/event-calendar/event-calendar-2.md): Calendar workspace with mini month picker, calendars visibility list, and up-next agenda sidebar. Best for a week-first workspace with a side rail of the next 4 events and a checkbox per calendar, plus month, day and agenda views.
- [Hotel Front Desk](https://reui.io/blocks/application/event-calendar/event-calendar-3.md): Hotel front-desk booking board with arrivals agenda and color-coded service streams. Best for a week-only hotel desk whose rail counts the picked day's arrivals, departures and jobs, badging tentative, due out or cancelled bookings.
- [Shift Roster](https://reui.io/blocks/application/event-calendar/event-calendar-4.md): Workforce shift roster with coverage avatars, open-slot warnings, and a double-booking guard. Best for shifts that show open slots against required headcount, with an Open toggle, staff search, publish locks and a double booking check.
- [Clinic Chair Board](https://reui.io/blocks/application/event-calendar/event-calendar-5.md): Clinic chair board with per-practitioner columns, status-tinted chips, and drop-rejecting clinic holds. Best for one column per practitioner with patient counts, hatched holds that block drops and drag creates, and a log of each desk action.
- [Lending Deal Calendar](https://reui.io/blocks/application/event-calendar/event-calendar-6.md): Commercial lending calendar with multi-row deal chips and covenant detail cards on hover. Best for deal chips with a workstream progress bar and a hover card of clause, due date and pass or fail checks, filtered by category and owner.

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.