Link booking

A React block (a whole screen) in Beamline's HR & payroll app.

A candidate's booking link for one stage of one job: a column with the job, the stage's length, who they meet (each with their role), where and what the interview covers (optional agenda, each part with its minutes); the month with only its open days; that day's times in the candidate's own zone (changeable) with the company's time beside each, and the day said when it differs; the chosen time from start to end in their zone and the company's, then their details (name, email for the invite, optional phone); then Book, which sends one booking however often it is pressed (the request carries a key formed with the draft, so a repeat is the same request). A time someone took meanwhile is struck where it stood on the warning tone with the nearest open times one tap each. Once booked: both clocks, a reference, and the calendar invite's delivery on a line of its own (sending, delivered, or bounced with Send again; the booking stands either way); Pick another time moves the booking with the same guard; Cancel the interview sits in the menu with a reason and a confirm; a cancelled booking can be booked again. A closed link says why.

Use it for

A link a person outside the team opens to book one meeting the team defined: an interview, a demo, a site visit.
Where the booker and the team are in different time zones and both clocks matter, and where a double submit must never double-book.

Not for

Booking a practice's services with a practitioner and a place (client-booking).
Arranging a team's own calendar (team-calendar).

Anatomy

header: the tool's mark, Book your <stage> (Move your <stage> when rescheduling)
about (a column beside the choice): the job and company, the company's zone, length, who (initials, name, role), where, The interview (agenda with minutes)
when: the month with only open days, the zone choice, the day's times each with the company's time beside and the day said when it differs
summary: the chosen day, start–end in the candidate's zone and in the company's
details: name, email (the invite goes there), optional phone; a taken time with the nearest open ones; Book <day>, <time>
booked: status, reference, the menu (Cancel the interview), both clocks, the invite's delivery line, Pick another time
cancel: what happens, an optional reason, Keep it or Cancel the interview

States

picking mid-way, open times loading, failed with Try again, none this month
booking (Book busy; more presses send nothing new), booked, moved, failed to book (details kept)
taken meanwhile: struck, nearest offered
invite sending, delivered, bounced with Send again
cancelling, cancel failed, cancelled with Book again
link closed
phone: one column
right to left: mirrored
reduced motion: through the tokens

Keyboard

Tab through the calendar (arrows move days), the zone, each time, the details and Book; Enter or Space picks a time

Motion

Nothing runs at rest.

Props

Prop	Type	Default	Description
`company` (required)	`string`	—	The hiring company, said beside its times and in the header.
`product`	`string`	—	The hiring tool's name, for the mark.
`booked` (required)	`BookedStage`	—
`timezone` (required)	`string`	—	The company's IANA zone.
`candidateTimezone`	`string`	—	The candidate's zone at first (the browser's, or what the link knows); they can change it. Default: the company's.
`zones`	`string[]`	—	More zones offered in the zone choice.
`loadSlots` (required)	`(span: { from: string; to: string; }) => Promise<OpenSlot[]>`	—	Open starts between two days (YYYY-MM-DD, inclusive, in the candidate's zone). A rejection is said with its reason and Try again.
`onBook` (required)	`(request: LinkBookingRequest) => Promise<LinkBookingAnswer>`	—	Books (or moves) the time. Must treat a repeated `key` as the same request. Reject only when nothing could be booked: the reason is said and the details kept.
`booking`	`LinkBookingRecord \| null`	—	The booking this link already holds (controlled), or null before one is made.
`defaultBooking`	`LinkBookingRecord \| null`	—
`onBookingChange`	`((booking: LinkBookingRecord \| null) => void)`	—
`invite`	`InviteDelivery \| null`	—	The invite's delivery for the current booking, as the host learns it.
`onResendInvite`	`(() => void)`	—
`onCancel`	`((bookingId: string, reason: string) => Promise<void>)`	—	Cancels the booking; reject with the reason when it couldn't be cancelled.
`contact`	`Partial<LinkContact>`	—	Details the link already knows.
`phoneCountry`	`string`	—	The country the phone field starts on (ISO code).
`defaultDay`	`string`	—	The day and start picked at first (a link reopened mid-way).
`defaultSlot`	`string`	—
`today`	`string`	—	Today in the candidate's zone (YYYY-MM-DD): no day before it is offered. Default: today.
`closed`	`string \| null`	—	The link no longer books (used, expired, the stage closed): the reason.
`timeFormat`	`"12h" \| "24h"`	—
`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.

Built from

Dependencies

lucide-react

Import

import { LinkBooking } from "@beamline/link-booking";

Get it

Link 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

Link bookingComplete system · $49

A candidate's booking link for one stage of one job.

A candidate books their final interview

Ines opens her link from Lisbon and has a time picked. Each time shows New York's beside it, because that's where Larkspur works. Press Book as often as you like: the request is sent once, and repeats get the same booking back. After booking, the calendar invite's delivery is tracked on a line of its own. The booking can be moved or cancelled from there.

0 × 0full

States

A time someone took meanwhile; booked with a bounced invite; cancelled; open times loading, failing or absent; a closed link.