# Linked appointments 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/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 between them as an all-day band. Moving either one asks whether the other follows by the same amount (Move both, Only this one, Put it back); a pickup before its drop-off, or a drop-off after its pickup, is refused with the time it would cross; the system's refusals undo the move and are said. The chosen pair's drop-off, pickup and nights in the shop, and where the customer goes meanwhile: a bay, a loaner or the lounge, a loaner already out with someone else on those days said with who and until when; bookings needing attention counted and drawn on warning. ## Use it for - Two appointments that belong together (drop-off and pickup, check-in and check-out) moved as a pair. - Bookings that hold a resource (a loaner, a bay) for the time between them. ## Not for - A practice's day of appointments ([appointment-book](https://beamline.io/components/appointment-book)). - Customers booking a job themselves ([job-booking](https://beamline.io/components/job-booking)). ## Anatomy - header: the tool's mark, title, bookings needing attention, what saved or was refused - calendar: stays as all-day bands, drop-offs and pickups as events, flagged ones on warning - side: vehicle, customer and order, drop-off, pickup, nights; the move question; where the customer goes; a loaner taken ## States - pair same day or over nights; loaner, bay, lounge or not decided; loaner taken - moved and asked, both moved, only one, put back, refused (crossing or by the system) - nothing chosen - phone: day view, details below - right to left: mirrored, arrow keys follow - reduced motion: through the shared calendar ## Keyboard - Space picks up an event, arrows move it by a step or a day, Space drops; Enter opens its pair; Tab through the question and the place ## Motion Events move through the shared calendar; nothing runs at rest. ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `pairs` | `LinkedPair[]` | — | | | `defaultPairs` | `LinkedPair[]` | — | | | `onPairsChange` | `((pairs: LinkedPair[]) => void)` | — | | | `bays` (required) | `string[]` | — | | | `loaners` (required) | `string[]` | — | | | `onSave` (required) | `(pair: LinkedPair) => Promise<{ ok: true; } \| { refused: string; }>` | — | | | `week` (required) | `string` | — | The week shown; "now" for the calendar. | | `now` (required) | `string` | — | | | `defaultSelected` | `string` | — | | | `product` | `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 - [Avatar](https://beamline.io/components/avatar.md) - [Bottom sheet](https://beamline.io/components/bottom-sheet.md) - [Button](https://beamline.io/components/button.md) - [Event calendar](https://beamline.io/components/event-calendar.md) - [Label](https://beamline.io/components/label.md) - [Popover](https://beamline.io/components/popover.md) - [Segmented control](https://beamline.io/components/segmented-control.md) - [Select](https://beamline.io/components/select.md) - [Spinner](https://beamline.io/components/spinner.md) - [Text morph](https://beamline.io/components/text-morph.md) - [Tooltip](https://beamline.io/components/tooltip.md) ## Dependencies `lucide-react` ## Import ```tsx import { LinkedAppointments } from "@beamline/linked-appointments"; ``` ## Get it Linked appointments 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 booking](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… - [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… - [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).