Desk booking

A React block (a whole screen) in Beamline's Events & bookings app.

Desks in an office for the people who book them and the admin who sets how far ahead. Your days over the next weeks: booked with a desk, free to book, past, not open yet (beyond the booking window), or kept beyond it because they were booked before it shrank. The chosen day's floor plan draws neighbourhoods as zones in their hues and desks as yours, free, taken or chosen; filter by floor and neighbourhood, say when none are free, and change desk with the day still booked; if the desk was taken meanwhile the old desk stays and it's said. The booking window is no limit or up to a number of office days; its preview shows the last bookable day and how many existing bookings are already beyond it, which stay booked while new ones are refused; a failed save keeps the window in force.

Use it for

Hot-desk booking with a floor plan by neighbourhood.
An admin setting how far ahead desks can be booked without cancelling existing bookings.

Not for

Booking a client appointment (client-booking).
Restaurant tables (reservation-desk).

Anatomy

bar: the office, the booking window in words and the time zone; My desk or Booking window for admins
your days: weekdays over the next weeks with the desk, free, not open yet (hatched), kept beyond the window, today marked, the chosen day ringed
plan: the day, your desk with neighbourhood and floor, floor choice, neighbourhood chips with free counts, zones and desks on the plan, a legend, the move (old → new with neighbourhood, floor and features) and Change desk or Book
booking window: No limit or Up to, how far ahead, the last bookable day, bookings already beyond it kept, Save window, and the days as people will see them

States

current assignment, filtered by floor or neighbourhood, no desks free, replacement chosen, desk taken meanwhile (old desk kept), changed
booking window unlimited or bounded, past day, beyond the window, existing booking beyond the new limit (kept), save failed
narrow room: days above the plan

Keyboard

Tab reaches each day and each free desk; Enter or Space picks it

Motion

Desks and zones ease their colour and dimming when filtered or chosen. Nothing runs at rest.

Props

Prop	Type	Default	Description
`office` (required)	`string`	—	The office's name and time zone label ("Lisbon office", "Lisbon time").
`timezoneLabel` (required)	`string`	—
`floors` (required)	`Floor[]`	—
`desks` (required)	`Desk[]`	—
`reservations`	`Reservation[]`	—
`defaultReservations`	`Reservation[]`	—
`onReservationsChange`	`((reservations: Reservation[]) => void)`	—
`taken` (required)	`Record<string, string[]>`	—	Desks others have taken, per day.
`horizon`	`BookingHorizon`	—
`defaultHorizon`	`BookingHorizon`	—
`onHorizonChange`	`((horizon: BookingHorizon) => void)`	—
`today` (required)	`string`	—	Today in the office, ISO yyyy-mm-dd.
`canManage`	`boolean`	—	May set the booking window.
`weeks`	`number`	—	How many weeks of days to show. Default 5.
`defaultDay`	`string`	—
`defaultView`	`"desk" \| "window"`	—
`onChangeDesk`	`((reservation: Reservation, deskId: string) => Promise<unknown>)`	—	Moves a booking to another desk; reject when the desk was taken meanwhile (the old desk stays).
`onBook`	`((day: string, deskId: string) => Promise<Reservation>)`	—	Books a day at a desk; resolve with the reservation.
`onSaveHorizon`	`((horizon: BookingHorizon) => Promise<unknown>)`	—	Saves the booking window; reject to keep the one in force.
`locale`	`string`	—
`className`	`string`	—	Classes on the documented visual root; no override by default.
`style`	`CSSProperties`	—	Inline styles on the documented visual root; no overrides by default.
`ref`	`Ref<HTMLDivElement>`	—	Receives the documented native target or imperative handle; omitted by default.
`defaultDesk`	`string`	—	A desk already chosen on the first day shown (a change in progress).

Built from

segmented-control
select
button

Dependencies

lucide-react

Import

import { DeskBooking } from "@beamline/desk-booking";

Get it

Desk booking is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent

Desk bookingComplete system · $49

Desks in an office for the people who book them and the admin who sets how far ahead.

Desks in the Lisbon office

Pick a free desk on the plan to move Thursday's booking; the day stays booked. Days past the booking window can't be booked; a booking made before the window shrank stays.

0 × 0full

Refusals