Skip to content
caliper ui docs
DemoSign inGet Pro

Pro

Recurrence picker

Set how something repeats and read it back in a sentence before saving: days, weeks or months, which weekdays or day of the month, the time, and when it stops. The next three runs are listed underneath.

Pro
pnpm dlx shadcn@latest add @caliper/recurrence-picker

Weekly revenue report

Sent to #finance and the board list.

Repeat

week
Ends

Every week on Monday at 9:00 am.

Next: Mon, Nov 2, 9:00 AM · Mon, Nov 9, 9:00 AM · Mon, Nov 16, 9:00 AM

FREQ=WEEKLY;INTERVAL=1;BYDAY=MO;BYHOUR=9;BYMINUTE=0
Installs components/ui/recurrence-picker.tsxDepends on @radix-ui/react-popover, lucide-reactMotion none in component source

When to use

Use it for

  • Scheduled reports, reminders, syncs and recurring invoices.
  • Anywhere a rule must be checked against real dates.

Skip it when

  • One-off dates; use the date picker.
  • Complex rules like "the last Friday"; offer a cron or RRULE field for those.

Decisions

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

A sentence and dates
The summary is said in words and proven with the next runs, so a wrong interval is caught before it is saved.

Usage

Standard out
toRRule gives the RFC 5545 rule for calendars and schedulers.

Installation

terminal
pnpm dlx shadcn@latest add @caliper/recurrence-picker

Adds its 12 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage

Import it from your copy of the source. The example behind the preview comes with the source. It is built from RecurrencePicker, describeRecurrence, toRRule and nextOccurrences.

example.tsx
import { RecurrencePicker, describeRecurrence, toRRule, nextOccurrences } from "@/components/ui/recurrence-picker"

The worked example comes with Pro

The 25-line example behind the preview opens here, ready to copy.

  • 576 Pro parts, blocks and page templates, all with source
  • $199 once, with a year of updates. What you have stays yours
  • A full refund within 14 days if it is not for you
Checking your licence…

API reference

RecurrencePicker

component
PropTypeDefault
value *Recurrence—
onValueChange *(value: Recurrence) => void—
nowDate—
classNamestring—

describeRecurrence

component
PropTypeDefaultDescription
freq *"monthly" | "daily" | "weekly"—
interval *number—Every n days, weeks or months.
weekdays *number[]—Weekly: 0 Sunday … 6 Saturday.
monthDay *number—Monthly: day of the month, 1–31 (short months use their last day).
time *string—"HH:MM", 24-hour.
ends *{ type: "never"; } | { type: "after"; count: number; } | { type: "on"; date: string; }—

toRRule

component
PropTypeDefaultDescription
freq *"monthly" | "daily" | "weekly"—
interval *number—Every n days, weeks or months.
weekdays *number[]—Weekly: 0 Sunday … 6 Saturday.
monthDay *number—Monthly: day of the month, 1–31 (short months use their last day).
time *string—"HH:MM", 24-hour.
ends *{ type: "never"; } | { type: "after"; count: number; } | { type: "on"; date: string; }—

nextOccurrences

component
PropTypeDefaultDescription
freq *"monthly" | "daily" | "weekly"—
interval *number—Every n days, weeks or months.
weekdays *number[]—Weekly: 0 Sunday … 6 Saturday.
monthDay *number—Monthly: day of the month, 1–31 (short months use their last day).
time *string—"HH:MM", 24-hour.
ends *{ type: "never"; } | { type: "after"; count: number; } | { type: "on"; date: string; }—

Accessibility

It is built on native elements and keeps aria-live in step with state. Changes that matter are announced through a live region.

Keyboard and focus handling comes from Radix popover: arrow keys move through items, Enter and Space select, and Escape closes and returns focus.

Motion

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.

All Dates examples