Booking

Compose date-only selection, timezone-aware slots, and invitee details into one booking flow.

Preview

Design consultation

Product design team

Choose a time to review a current project.

1Date & time
2Your details
3Confirmation

Select a date and time

Times are shown in the selected timezone.

Meeting duration

Timezone

Choose date

October 2026

Mon, Oct 122 times

Usage

Booking receives caller-owned absolute ISO slots and neutral meeting copy. The caller receives a validated date-only value, selected slot, invitee, timezone, and duration in onBook; the component does not claim a reservation was created.

123import { Booking } from "@/components/ui/booking";

<Booking title="Design consultation" host="Product design team" location="Video link shared after booking" availability={slots} meetingDurationOptions={[30]} timeZoneOptions={["America/New_York"]} onBook={saveBooking} />

Examples

Weekly availability

Choose an available day and start time. The timezone offset distinguishes repeated local times.

Design consultation

Product design team

Choose a time to review a current project.

1Date & time
2Your details
3Confirmation

Select a date and time

Times are shown in the selected timezone.

Meeting duration

Timezone

Available days

Mon, Oct 12

2 times

Rejected request

Submit details to exercise a rejected local callback and its retry action.

Design consultation

Product design team

Choose a time to review a current project.

1Date & time
2Your details
3Confirmation

Select a date and time

Times are shown in the selected timezone.

Meeting duration

Timezone

Choose date

October 2026

Mon, Oct 122 times

No availability

Keep duration and timezone choices visible when no times are available.

Design consultation

Product design team

Choose a time to review a current project.

1Date & time
2Your details
3Confirmation

Select a date and time

Times are shown in the selected timezone.

Meeting duration

Timezone

Choose date

October 2026

No available dates this month.

Choose an available day

No available times match this duration.

API

Booking properties
Prop	Type	Description
`availability`	`readonly BookingSlot[]`	Caller-owned absolute ISO slots. Malformed, unavailable, duplicate, and out-of-order records are ignored.
`meetingDurationOptions`	`readonly BookingChoice[]`	Available duration values in minutes, optionally with labels.
`timeZoneOptions`	`readonly BookingTimeZoneChoice[]`	IANA timezone values, optionally with labels.
`title / host / description / location`	`string`	Caller-owned meeting copy. Defaults are neutral and do not claim a person, meeting, or provider.
`durationLabel`	`string`	Optional caller copy for the selected duration in the summary.
`onBook`	`(selection: BookingSelection) => Promise<void>`	Runs after date, slot, name, and email validation. Rejections and stale requests remain visible with retry.
`defaultDate / defaultTimeZone / defaultMeetingDuration`	`string \| number`	Initial date-only, timezone, and duration choices.

Accessibility

DatePicker owns the monthly labelled grid and roving focus. Weekly dates and times are native buttons with visible focus, labelled previous/next controls, and no required scrollbar interaction. Name and email errors appear after touch or blur. Back preserves invitee draft while date, duration, timezone, or changed availability clears an invalid slot.

Installation

Copy booking.tsx and booking.css with the existing DatePicker, Field, Input, InputGroup, Select, Button, and LayerCard owners. The caller owns availability and the booking side effect.