# Hotel Front Desk block

> Hotel front-desk booking board with arrivals agenda and color-coded service streams

Front-desk hotel booking board on a week time grid: a sidebar mini month picker, arrivals agenda, and colour-coded service streams drive an hourly calendar of check-ins, check-outs, housekeeping turnovers, functions, and guest services, with drag, resize, and full booking plus stream 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-3
- 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-3")`
- Built with: Alert Dialog, Avatar, Badge, Button, Calendar, Card, Checkbox, Combobox, Dialog, Dropdown Menu, Event Calendar, Field, Icon Tile, Input, Item, Popover, Progress, Scroll Area, Select, Separator, 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-only hotel desk whose rail counts the picked day's arrivals, departures and jobs, badging tentative, due out or cancelled bookings

## Agent notes

- Replace `STREAMS`, `GUESTS` and the `BLACKOUT` day in data.ts with your own service lanes, guest profiles and closures
- The rail's in and out counts match `resourceId` against `ARRIVAL_STREAM` and `DEPARTURE_STREAM`, so keep those ids or edit both
- The booking form has no inputs for `status`, `ratePlan`, `nightlyRate` or `nights`, so new bookings get none and edits keep seeded values

## When not to use

- A personal week of meetings with guests and a short list of what comes next: use [Mini Month Calendar](https://web.dev.reui.io/blocks/application/event-calendar/event-calendar-2.md) (`get_block("event-calendar-2")`)
- A month picker beside one day's agenda cards, with no hourly grid to drag on: use [Appointment Planner](https://web.dev.reui.io/blocks/application/schedule/schedule-1.md) (`get_block("schedule-1")`)

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

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