# Calendar Booking
URL: https://remocn.dev/docs/product-scenes/calendar-booking

A cursor picks a day and a time slot, confirms, and a meeting-scheduled card appears.

- Install: `npx shadcn@latest add @remocn/calendar-booking`
- Vibe: clean
- Natural length: 122f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/calendar-booking
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { CalendarBooking } from "@/components/remocn/calendar-booking";

const CalendarBookingScene = () => (
  <CalendarBooking
    host={{ name: "Maya Chen", initials: "MC" }}
    day={18}
    pick="10:30am"
  />
);

export const RemotionRoot = () => (
  <Composition
    id="CalendarBooking"
    component={CalendarBookingScene}
    durationInFrames={165}
    fps={30}
    width={1280}
    height={720}
  />
);
```

A scheduling card shows the host, event details and a month grid; the cursor picks a `day`, then a time slot, and presses Confirm, which morphs the card into a scheduled confirmation with a drawn check and detail rows. Pass `host`, `event`, `slots`, `pick` and `day` for your own flow. Ships light and dark.

The ground is a live gradients.sh shader (`GshGround`), installed with the component as `@remocn/gsh`. Pick another look with the `ground` preset prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `host` | `BookingHost` | `DEFAULT_HOST` | Host name, optional email and avatar initials |
| `event` | `BookingEvent` | — | Event details: title, durations, location, month and weekday offsets |
| `slots` | `string[]` | `DEFAULT_SLOTS` | Time slots shown after picking a day, e.g. '10:30am' |
| `pick` | `string` | — | Slot the cursor picks; defaults to 10:30am |
| `day` | `number` | `18` | Day of the month the cursor picks |
| `accent` | `string` | `"#3B5BFD"` | Accent color for highlights, buttons and progress |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline |
| `theme` | `"light" \| "dark"` | `"light"` | Light or dark palette |
| `ground` | `GshPresetId` | — | gradients.sh preset id for the backdrop shader |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the backdrop shader parameters |

## Use when
- A scheduling or booking product beat: pick a day, pick a time, get confirmed.
- A demo-booking flow shown start to finish in under five seconds.
- A short success moment where the confirmation card is the payoff.

## Don't use when
- You want a calendar that tags launch dates with event labels — use `calendar-pick`.
- You want a heat-themed launch calendar — use `heat-drain-reveal`.
- You want a team timeline with draggable bars — use `roadmap-timeline`.