Booking Detail
Detailed view of a single booking
Overview
BookingDetail displays comprehensive booking information including title, status, date/time, location, organizer, attendees with RSVP statuses, and recurrence details. It supports contextual action buttons based on booking state.
Usage
import { BookingDetail } from "@leanicon/web-builder-library/saas";
<BookingDetail
booking={{
id: "1",
title: "Weekly Team Standup",
description: "Regular weekly sync meeting.",
status: "confirmed",
startTime: new Date().toISOString(),
endTime: new Date(Date.now() + 3600000).toISOString(),
timezone: "America/New_York",
resourceId: "room-1",
resourceName: "Conference Room A",
organizer: {
userId: "1",
name: "John Doe",
email: "[email protected]",
rsvpStatus: "accepted",
isOrganizer: true,
},
attendees: [
{ userId: "2", name: "Jane Smith", email: "[email protected]", rsvpStatus: "accepted" },
],
isRecurring: false,
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
}}
showActions
availableActions={["cancel", "reschedule"]}
onCancel={(reason) => console.log("Cancel:", reason)}
onReschedule={(start, end) => console.log("Reschedule:", start, end)}
/>;Variants
Default (Confirmed)
Weekly Team Standup
ConfirmedDate & Time
Resource
Description
Regular weekly sync meeting to discuss progress and blockers.
Organizer
John Doe
Attendees (2)
- JAcceptedJane Smith[email protected]
- BPendingBob Wilson[email protected]
Created: Oct 2, 2026 11:07 PM
Last updated: Oct 2, 2026 11:07 PM
Default (Dark)
Weekly Team Standup
ConfirmedDate & Time
Resource
Description
Regular weekly sync meeting to discuss progress and blockers.
Organizer
John Doe
Attendees (2)
- JAcceptedJane Smith[email protected]
- BPendingBob Wilson[email protected]
Created: Oct 2, 2026 11:07 PM
Last updated: Oct 2, 2026 11:07 PM
Pending Status
Client Meeting
PendingDate & Time
Resource
Organizer
John Doe
Attendees (1)
- JPendingJane Smith[email protected]
Created: Oct 2, 2026 11:07 PM
Last updated: Oct 2, 2026 11:07 PM
Completed
Sprint Review
CompletedDate & Time
Resource
Organizer
John Doe
Created: Oct 2, 2026 11:07 PM
Last updated: Oct 2, 2026 11:07 PM
Cancelled
Cancelled Meeting
CancelledDate & Time
Resource
Organizer
John Doe
Created: Oct 2, 2026 11:07 PM
Last updated: Oct 2, 2026 11:07 PM
Recurring Booking
Weekly Standup
ConfirmedDate & Time
Resource
Organizer
John Doe
Attendees (1)
- JAcceptedJane Smith[email protected]
Created: Oct 2, 2026 11:07 PM
Last updated: Oct 2, 2026 11:07 PM
Loading
With Error
Team Standup
ConfirmedDate & Time
Organizer
John Doe
Created: Oct 2, 2026 11:07 PM
Last updated: Oct 2, 2026 11:07 PM
Read Only
Team Standup
ConfirmedDate & Time
Resource
Organizer
John Doe
Attendees (1)
- JAcceptedJane Smith[email protected]
Created: Oct 2, 2026 11:07 PM
Last updated: Oct 2, 2026 11:07 PM
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
booking | BookingData | — | Yes | Full booking data |
loading | boolean | false | No | Whether component is in loading state |
error | string | — | No | Error message to display |
showActions | boolean | true | No | Whether to show action buttons |
availableActions | BookingAction[] | [] | No | Which actions are available based on booking state |
className | string | — | No | Custom class name |
onConfirm | (() => void | Promise<void>) | — | No | Action callbacks |
onCancel | ((reason?: string) => void | Promise<void>) | — | No | |
onReschedule | ((newStartTime: string, newEndTime: string) => void | Promise<void>) | — | No | |
onComplete | (() => void | Promise<void>) | — | No | |
onMarkNoShow | (() => void | Promise<void>) | — | No | |
onDelete | (() => void | Promise<void>) | — | No | |
onEdit | (() => void) | — | No | |
onClose | (() => void) | — | No |