# Calendar Pick
URL: https://remocn.dev/docs/numbers/calendar-pick

A month calendar picks a launch day, tagging dates with small event labels

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

## Installation

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

## Usage

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

const CalendarPickScene = () => (
  <CalendarPick
    title="Launch day, booked."
    month="June"
    year="2026"
    pickDay={18}
    eventLabel="Launch"
  />
);

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

A tilted month calendar rises in and the day cells fade in row by row while the camera pushes toward one day. A cursor glides in and clicks it, the cell opens into an input that types a time range, then floods with the accent colour and shows an event label. Pass `month`, `year`, `firstWeekday`, `daysInMonth`, `pickDay` and `timeRange` to fit your date. It ships light and dark through the `theme` prop and has no `speed` prop.

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 |
|---|---|---|---|
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark. |
| `accent` | `string` | `"#F26A2E"` | Colour of the picked day, today ring and busy-day marks. |
| `title` | `string` | `"Launch day, booked."` | Headline shown beside the calendar once the day is booked. |
| `month` | `string` | `"June"` | Month name in the calendar header. |
| `year` | `string` | `"2026"` | Year shown next to the month name. |
| `firstWeekday` | `number` | `0` | Column of the 1st: 0 is Monday, 6 is Sunday. |
| `daysInMonth` | `number` | `30` | Number of days to draw in the grid. |
| `today` | `number` | `9` | Day number outlined as today. |
| `pickDay` | `number` | `18` | Day number the cursor clicks and the event lands on. |
| `timeRange` | `string` | `"10:00 AM – 4:00 PM"` | Text typed into the opened day, e.g. '10:00 AM – 4:00 PM'. |
| `eventLabel` | `string` | `"Launch"` | Short label shown inside the picked day. |
| `busyDays` | `number[]` | `[3, 11, 12, 22, 25, 29]` | Day numbers that get a small busy marker. |
| `ground` | `GshPresetId` | — | Gradient shader preset id for the background; theme picks one by default. |
| `groundParams` | `Partial<GradientParams>` | — | Optional overrides for the background gradient parameters. |

## Use when
- A launch-date beat where a month grid fades in, a cursor clicks one day and an event label with a time range is typed into it.
- A scheduling or booking moment, such as picking a demo day, that needs a realistic UI feel over a soft gradient ground.
- A portrait or landscape teaser that ends on a headline like 'Launch day, booked.' beside the highlighted date.

## Don't use when
- You only want to announce a date with a calendar drawing itself and a glowing ring — use `launch-date`.
- You need a live countdown to the date rather than a picked day — use `countdown`.
- You want to show a year or number landing on a ruler — use `ruler-scrub`.