Basic Usage

Each example shows the real component on top and the exact code below (hit View code). DEMO_ID is a signed demo booking id provided to the playground; swap it for your own.

StandaloneCopy Anchor Link

A standalone <BookingCalendar> is fully self-contained — no provider, no data fetching, no state to manage on your side. You give it a booking id and import the stylesheet once; everything else (availability, time zones, the details form, and payment) runs inside the widget.

import { BookingCalendar } from "@slotr/react/booking-calendar";
import "@slotr/react/styles.css";

function App() {
  return <BookingCalendar id={DEMO_ID} />;
}

Reacting to sizeCopy Anchor Link

onResize fires on every slotr:resize message from the widget — use it to animate surrounding layout or log analytics.

<BookingCalendar id={id} onResize={({ height }) => console.log("height", height)} />

Keep goingCopy Anchor Link

• Theming — accents, radius, custom backgrounds.
• Dialog — the out-of-the-box modal.
• Prefilling — prefill details, deep-link to a slot.
• Headless — bring your own UI.
• Props — the full contract.