# Calendar Contacts Hub block

> Calendar app shell, icon-rail sidebar switching Calendar, Schedule, Contacts, Notifications panels

Calendar workspace with a dual-pane icon-rail Sidebar swapping mini-Calendar accounts, date-grouped Schedule, searchable Contacts, and Notifications. Uses ReUI Badge with shadcn Sidebar, Calendar, Avatar, DropdownMenu.

- Type: Pro block
- Category: [App Shell](https://web.dev.reui.io/blocks/application/app-shell.md)
- Page: https://web.dev.reui.io/blocks/application/app-shell/app-shell-5
- Docs (Base UI): https://ui.shadcn.com/docs/components/base/sidebar.md
- Docs (Radix UI): https://ui.shadcn.com/docs/components/radix/sidebar.md
- MCP: `get_block("app-shell-5")`
- Built with: Avatar, Badge, Button, Button Group, Calendar, Card, Checkbox, Collapsible, Dialog, Dropdown Menu, Hover Card, Input, Item, Popover, Scroll Area, Separator, Sidebar, Tooltip
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

An icon rail swapping one 350px panel between a mini month with calendar toggles, a dated schedule, contacts and notifications

## Agent notes

- Replace `CALENDAR_ACCOUNTS`, `UPCOMING_EVENTS`, `SCHEDULE_EVENTS`, `CONTACTS` and `CALENDAR_NOTIFICATIONS`; `DEMO_REFERENCE_DATE` fixes today at Jun 10, 2026
- No calendar grid renders: `ViewSwitcher` only relabels its button over placeholder `Card` tiles, and Today and New Event have no handler
- The header `CalendarDots` reads the static `CALENDAR_ACCOUNTS`, so checkbox and color changes made in `CalendarPanel` never reach it

## When not to use

- A working week grid where meetings are dragged, resized and created: use the [Event Calendar blocks](https://web.dev.reui.io/blocks/application/event-calendar.md)
- A date picker with one day's filterable agenda inside a page you already have: use [Appointment Planner](https://web.dev.reui.io/blocks/application/schedule/schedule-1.md) (`get_block("schedule-1")`)

## Third-party libraries

- React DayPicker v9: [API reference](https://daypicker.dev/v9/api), [docs](https://daypicker.dev/v9/start)
- next-themes: [API reference](https://github.com/pacocoursey/next-themes#api), [docs](https://github.com/pacocoursey/next-themes)

## Install

```bash
npx shadcn@latest add @reui/app-shell-5
```

## About App Shell blocks

### When to use

- The outer layout of a multi page product: the navigation around its content area
- Dashboards and admin consoles that switch between workspaces or projects

### When not to use

- One overview page of stats, charts and tables inside your own layout: use the [Dashboard blocks](https://web.dev.reui.io/blocks/application/dashboard.md)
- A top bar on its own, above a page layout you already have: use the [Navbar blocks](https://web.dev.reui.io/blocks/application/navbar.md)

### Agent notes

- Shells that switch themes call `useTheme` from next-themes, so the app must mount the next-themes ThemeProvider

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.