# Resource booking A React block (a whole screen) in [Beamline](https://beamline.io/)'s [Events & bookings](https://beamline.io/components/apps/events-bookings) app. Live demo: https://beamline.io/components/resource-booking Booking something shared (a room, a van, a camera kit). Choose what, then either a free hour on a day: a grid of starts the app says are free (a taken one says who has it and can't be chosen), one chosen at a time, chosen again to clear when clearing is allowed, arrow keys moving between free starts, and Check again for fresh availability that says when the chosen start was taken meanwhile (nothing is booked). Or a span over several days with its own start and end times: days on one calendar, a time for each end, the range in use kept apart from the one being edited (Use this range or Cancel), an end before its start, a missing time or a day past the last bookable one said, the range in use staying until fixed. A reminder typed in segments or chosen from named groups of times (an unavailable one says why); one that would come after the start is said. Times read in 24- or 12-hour form without changing what is stored. One summary and Book. ## Use it for - Booking shared rooms, vehicles or kit by the hour or over several days. - Any form that needs a slot grid, a date range with separate times or a time with named presets. ## Not for - Desks on a floor plan ([desk-booking](https://beamline.io/components/desk-booking)). - A customer booking a service at their address ([job-booking](https://beamline.io/components/job-booking)). ## Anatomy - what to book: rooms, vehicles and kit with a line each; the time zone - when: A free hour or Over several days; 24- or 12-hour; days and the grid of starts with Check again, or the calendar with each end's day and time, Cancel, Use this range and the range in use; the reminder with Choose a time - summary: what, when, the reminder, a booked or refused note, Book ## States - slots: none chosen, chosen, taken start, nothing free, checking again, chosen start no longer free, clearing allowed or not - range: empty, start only, range chosen, time missing, end before start, past the last bookable day, committed, cancelled - reminder: empty, presets open, preset chosen, typed, unavailable preset, after the start - booked, refused - narrow room: columns stack ## Keyboard - Tab to the grid, then arrow keys, Home and End move between free starts; Enter or Space chooses (again clears when allowed) - The calendar and time segments take arrow keys; the presets panel is a list of buttons ## Motion Starts ease into the accent when chosen; the grid dims while availability is checked. Nothing runs at rest. ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `resources` (required) | `BookableResource[]` | — | | | `zone` (required) | `string` | — | The zone times are in, in words. | | `days` (required) | `string[]` | — | Days offered for a free hour, ISO yyyy-mm-dd. | | `onLoadSlots` (required) | `(resourceId: string, date: string, reason: "check" \| "open") => Promise` | — | Free starts on a day for a resource; `reason` is "check" when the person asks to check again (skip any cache). | | `slotMinutes` | `number` | — | Length of a free-hour booking in minutes. Default 60. | | `allowDeselect` | `boolean` | — | Choosing the chosen start again clears it. Default true. | | `rangeMin` (required) | `string` | — | First and last bookable day for a range. | | `rangeMax` (required) | `string` | — | | | `presetGroups` (required) | `TimePresetGroup[]` | — | | | `unavailableTimes` | `Record` | — | | | `onBook` | `((request: BookingRequest) => Promise)` | — | Books it; reject with a reason (a start taken meanwhile is checked again). | | `defaultResource` | `string` | — | | | `defaultMode` | `"range" \| "slot"` | — | | | `defaultDay` | `string` | — | | | `defaultSlot` | `string` | — | | | `defaultRange` | `DateTimeInterval \| null` | — | | | `defaultRangeDraft` | `Partial<{ startDate: string \| null; startTime: string \| null; endDate: string \| null; e…` | — | | | `defaultReminder` | `string \| null` | — | | | `defaultFormat` | `"12h" \| "24h"` | — | | | `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` | — | Receives the documented native target or imperative handle; omitted by default. | ## Built from - [segmented-control](https://beamline.io/components/segmented-control) - calendar - [time-picker](https://beamline.io/components/time-picker) - popover - button ## Dependencies `lucide-react` ## Import ```tsx import { ResourceBooking } from "@beamline/resource-booking"; ``` ## Get it Resource booking is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. [Get Beamline](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect) ## More in Events & bookings - [Team calendar](https://beamline.io/components/team-calendar): A team's schedule: the people and shared calendars to show (each its colour), a month to jump by, who is out this week, and the week, day or month of… - [Day agenda](https://beamline.io/components/day-agenda): One person's days with notes, tasks and calendar events side by side, each kept as what it is. A task's scheduled day, deadline, reminder and repeat are… - [Crew booking](https://beamline.io/components/crew-booking): Booking crew for a project: each person with a strip of the project's days, days in the same state joined into one run said once (booked solid, available… - [Resource rules](https://beamline.io/components/resource-rules): Each person's scheduling rules beside their day, the day board leading: role, available (an unavailable day filled in the danger tint and said, a job… - [Desk booking](https://beamline.io/components/desk-booking): 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… - [Linked appointments](https://beamline.io/components/linked-appointments): A drop-off and a pickup kept as one linked pair on the week's calendar (the shared event calendar, day view on a phone), with the car's stay drawn… - [Waitlist desk](https://beamline.io/components/waitlist-desk): A front desk's waitlist beside the day's book: who is waiting (filters as chips, the queue's count apart from the day's), the day's bookings and the… - [Visitor desk](https://beamline.io/components/visitor-desk): An office front desk's visitors. Invite a meeting's guests from the calendar: colleagues are shown but never invited, guests without an email are said… - [Issued ticket](https://beamline.io/components/issued-ticket): One issued event ticket at the door, led by the ticket itself: what it admits to (event and venue), when, the section, seat and who it admits, and its… - [Itinerary](https://beamline.io/components/itinerary): A trip's days where every event says who sees it, in words: everyone, only Ana and Ben, or hidden from Leo. The same rules give each traveller their own… - [Trip budget](https://beamline.io/components/trip-budget): A trip's money against its plan, in the trip's own currency. The budget (set or changed in place; a refused save keeps what was typed), what's spent and… - [Proposal payments](https://beamline.io/components/proposal-payments): A travel proposal's money from the agent's side to the client's. Pricing: the price rule (markup on supplier cost, a fixed price, or net), what the… - [Project periods](https://beamline.io/components/project-periods): A project's time periods (build, show, teardown) on one time scale, the thing being planned: each period a bar across its days with the crew and gear… Part of [Beamline UI: polished, editable React components and complete screens for custom applications](https://beamline.io/). [Build your own style from any look; tokens, fonts, radii, motion; not only colours](https://beamline.io/docs/customize).