Calendar Strip

Pro

Horizontal week strip with a selection disc that glides between days. Each day can show a progress ring that lights up once complete. Swipe or tap arrows to change weeks, with marked-date dots.

Preview

Installation

npx @lumioui/cli add pro/calendar-strip

Usage

import { CalendarStrip } from "@/components/ui/calendar-strip/calendar-strip";
<CalendarStrip />

API reference

Prop Type Default
value Date

Selected date — controlled. Omit for uncontrolled (see defaultValue).

 —
defaultValue Date

Initial selected date for uncontrolled use — defaults to today.

 —
onChange (date: Date) => void —
markedDates (Date | string)[]

Dates that get a dot — Dates or "YYYY-MM-DD" strings.

 —
progress Record<string, number>

Per-day completion, 0–1, keyed "YYYY-MM-DD". Each listed day carries a hairline ring that fills with its fraction; reaching 1 lights the day.

 —
onDayComplete (date: Date) => void

Fires when a day's progress reaches 1 (not on first render).

 —
weekStartsOn 0 | 1 | 2 | 3 | 4 | 5 | 6

Column the week starts on: 0 = Sunday … 6 = Saturday. Default 0.

 0
initialWeek Date

Week shown initially — defaults to the week containing the selection.

 —
onWeekChange (weekStart: Date) => void

Fires when the visible week changes (swipe or arrows).

 —
hideArrows boolean

Hide the header chevrons — swipe paging still works.

 false
className string —