# Shift Roster block

> Workforce shift roster with coverage avatars, open-slot warnings, and a double-booking guard

Workforce shift scheduling board for HR and operations teams: a day, week, and month event calendar of staffing shifts grouped into color-coded departments, with per-shift coverage showing assigned staff avatars, required headcount, and open-slot warnings, plus search across shifts and staff, an open-slots filter, drag and resize with a double-booking guard, publish and unpublish locking, and full CRUD on shifts, assignments, and departments.

- 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-4
- 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-4")`
- Built with: Alert, Alert Dialog, Avatar, Badge, Button, Calendar, Card, Checkbox, Combobox, Dialog, Dropdown Menu, Event Calendar, Field, Input, Input Group, Item, Number Field, Popover, Scroll Area, Select, Separator, Sheet, Switch, Textarea, Toggle, Tooltip
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

Shifts that show open slots against required headcount, with an Open toggle, staff search, publish locks and a double booking check

## Agent notes

- Replace `STAFF`, `DEPARTMENTS` and the `ROSTER` and `ON_CALL` rows in data.ts with your own people, teams and shifts
- Publish and Unpublish run `togglePublished`, which only flips the shift's `readOnly` flag and fires a `toast`
- `findDoubleBooking` checks only the shifts in local state and skips all-day standby rows; enforce the same rule on your server

## When not to use

- One column per person for a single day, with bookings dropped into their hours: use [Clinic Chair Board](https://web.dev.reui.io/blocks/application/event-calendar/event-calendar-5.md) (`get_block("event-calendar-5")`)
- A host sharing free time slots so someone else can book one meeting: use [Booking Page](https://web.dev.reui.io/blocks/application/schedule/schedule-4.md) (`get_block("schedule-4")`)

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

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