# Mini Month Calendar block

> Calendar workspace with mini month picker, calendars visibility list, and up-next agenda sidebar

Two-panel calendar workspace: a sidebar mini month picker, calendars visibility list, and up-next agenda drive a week-view event calendar with drag, resize, and full event plus calendar CRUD.

- 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-2
- 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-2")`
- 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 week-first workspace with a side rail of the next 4 events and a checkbox per calendar, plus month, day and agenda views

## Agent notes

- Swap `CALENDARS`, `PEOPLE` and `HOLIDAY` in data.ts for your own calendars, contacts and company closures
- Up Next lists occurrences from the fixed `ANCHOR`, not today; change the start date inside `upcoming` in calendar-rail.tsx
- `CalendarRail` is hidden below lg, where the toolbar's `CalendarsMenu` takes over filtering and calendar edits

## When not to use

- A month view first, with no side rail and the color filters in one toolbar menu: use [Personal Calendar](https://web.dev.reui.io/blocks/application/event-calendar/event-calendar-1.md) (`get_block("event-calendar-1")`)
- Hotel check ins, check outs and housekeeping jobs counted per day in a side rail: use [Hotel Front Desk](https://web.dev.reui.io/blocks/application/event-calendar/event-calendar-3.md) (`get_block("event-calendar-3")`)

## Third-party libraries

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

## Install

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

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