Calendar Pick

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

Installation

$ pnpm dlx 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.

Props14

Prop	Type	Default
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	number0 Column of the 1st: 0 is Monday, 6 is Sunday.
daysInMonth	number30 Number of days to draw in the grid.
today	number9 Day number outlined as today.
pickDay	number18 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.

theme"dark" | "light"
Ships light and dark.
Default"dark"
accentstring
Colour of the picked day, today ring and busy-day marks.
Default"#F26A2E"
titlestring
Headline shown beside the calendar once the day is booked.
Default"Launch day, booked."
monthstring
Month name in the calendar header.
Default"June"
yearstring
Year shown next to the month name.
Default"2026"
firstWeekdaynumber
Column of the 1st: 0 is Monday, 6 is Sunday.
Default0
daysInMonthnumber
Number of days to draw in the grid.
Default30
todaynumber
Day number outlined as today.
Default9
pickDaynumber
Day number the cursor clicks and the event lands on.
Default18
timeRangestring
Text typed into the opened day, e.g. '10:00 AM – 4:00 PM'.
Default"10:00 AM – 4:00 PM"
eventLabelstring
Short label shown inside the picked day.
Default"Launch"
busyDaysnumber[]
Day numbers that get a small busy marker.
Default[3, 11, 12, 22, 25, 29]
groundGshPresetId
Gradient shader preset id for the background; theme picks one by default.
groundParamsPartial<GradientParams>
Optional overrides for the background gradient parameters.