# Personal Calendar block

> Event calendar with month, week, day, N-day, and agenda views plus drag-and-drop editing

Scheduling workspace on ReUI Event Calendar: month, week, day, N-day, agenda and resource views, drag to move, resize and create events, recurrence, and an edit dialog. ReUI Event Calendar with shadcn Dialog, Select. Booking calendar, scheduler.

- Type: Pro block
- Category: [Event Calendar](https://web.dev.reui.io/blocks/application/event-calendar.md)
- Page: https://web.dev.reui.io/blocks/application/event-calendar/event-calendar-1
- Docs (Base UI): https://web.dev.reui.io/docs/components/base/event-calendar.md
- Docs (Radix UI): https://web.dev.reui.io/docs/components/radix/event-calendar.md
- MCP: `get_block("event-calendar-1")`
- Built with: Alert Dialog, Avatar, Badge, Button, Calendar, Card, Checkbox, Combobox, Dialog, Dropdown Menu, Event Calendar, Field, Input, Item, Popover, Scroll Area, Select, Sheet, Switch, Textarea, Tooltip
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

A month-first personal calendar with no side rail, where one toolbar menu shows, hides and edits the color-coded calendars

## Agent notes

- Replace `CALENDARS`, `PEOPLE` and the `HOLIDAY` off day in data.ts with your own calendars, guest list and closed days
- The Add event button calls `openCreate` with the fixed `ANCHOR` date, so new events start there instead of today
- `handleEventUpdate` refuses to drag a recurring occurrence or onto a `readOnly` event in the same calendar, with a `toast`

## When not to use

- A week view first, beside a side rail with a mini month and the next 4 items: use [Mini Month Calendar](https://web.dev.reui.io/blocks/application/event-calendar/event-calendar-2.md) (`get_block("event-calendar-2")`)
- Lending deals whose chips show progress and a hover card of clause and checks: use [Lending Deal Calendar](https://web.dev.reui.io/blocks/application/event-calendar/event-calendar-6.md) (`get_block("event-calendar-6")`)

## Third-party libraries

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

## Install

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

## About Event Calendar blocks

### 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://web.dev.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://web.dev.reui.io/blocks/application/schedule.md)
- A single date or range picker with no events, hours or drag: use [Calendar](https://web.dev.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

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