React Components

Import UI components from @mrfinch/booking/react. They need your Convex provider, ConvexQueryCacheProvider and BookingProvider; the Quick Start shows the full setup.

Booker

Booker provides duration/date/slot selection, a contact form and confirmation for an exclusive resource. For pool quantities or custom bundles, build a UI around the multi-resource API.

examples/booker.tsx

"use client";
import { Booker } from "@mrfinch/booking/react";
 
export function MeetingBooker() {
  return <Booker eventTypeId="quick-meeting" resourceId="meeting-room" title="Book a Meeting" />;
}

Prop	Purpose
`eventTypeId`, `resourceId`	Required linked event type and resource IDs
`title`	Optional heading
`description`, `showHeader`	Optional description and header visibility
`organizerName`, `organizerAvatar`	Organizer display details
`currentUser`	Optional contact details to prefill the form
`onBookingComplete`	Receives the created booking
`onNavigate`	Handles recovery navigation if setup becomes unavailable
`onEventTypeReset`	Returns to event-type selection
`onAuthRequired`	Handles an `UNAUTHENTICATED` response from your host gateway
`originalBooking`	Enables rescheduling using the booking's management token
`reuseBookerInfo`	Skips contact re-entry in reschedule mode

A supplied currentUser only prefills the form. The backend must independently verify identity when your product requires sign-in. The Booker handles conflicts from a final booking write even if a slot looked available during selection.

Calendar

For a custom flow, Calendar exposes controlled date, duration, timezone and month state. It does not create a booking by itself:

examples/calendar.tsx

"use client";
import { useState } from "react";
import { Calendar } from "@mrfinch/booking/react";
 
export function MeetingCalendar() {
  const [date, setDate] = useState<Date | null>(null);
  const [month, setMonth] = useState(() => new Date());
  const [duration, setDuration] = useState(30);
  const [timezone, setTimezone] = useState("America/New_York");
  const [timeFormat, setTimeFormat] = useState<"12h" | "24h">("24h");
  return (
    <Calendar
      resourceId="meeting-room" eventTypeId="quick-meeting"
      selectedDate={date} onDateChange={setDate}
      currentMonth={month} onMonthChange={setMonth}
      selectedDuration={duration} onDurationChange={setDuration}
      timezone={timezone} onTimezoneChange={setTimezone}
      timeFormat={timeFormat} onTimeFormatChange={setTimeFormat}
      onSlotSelect={({ slot, duration }) => console.log({ slot, duration })}
    />
  );
}

For smaller building blocks, use CalendarGrid, TimeSlotsPanel, EventMetaPanel or the React hooks. Their exported TypeScript types provide the complete prop contracts.

Admin UI

The dashboard on this website is demo application code, not an admin component exported by the npm package. You can adapt its resource, schedule, event-type and booking screens from the demo repository. Apply your own administrator and organization checks.

Customization

Use your Tailwind theme to change colors and typography. Compose exported calendar, form and display components when you need a different layout. Changing the built-in form's fields or internal behavior requires changing package source or building a custom form; copying the demo alone does not change code installed from npm.

The BookingSlot type describes { time: string; attendees?: number }. Older versions used a different public type name; update imports when moving to 0.4.0.