# Calendar Strip

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.

> Composed · Pro · Mobile-Native — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/calendar-strip
```

## Import

```tsx
import { CalendarStrip } from "@/components/ui/calendar-strip/calendar-strip";
```

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `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 — `Date`s 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. |
| `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. |
| `className?` | `string` | — |

Source: https://lumioui.com/components/calendar-strip