WeekStrip
A week to pick a day from, on top of the Team schedule: the month and year over seven days, Monday first, each its weekday's letter over the date. The chosen day sits on a leaf squircle that slides to the next; today wears a leaf ring; past days read muted on a faint tint, the days ahead in a hairline; a dot says a day holds bookings. The weeks scroll sideways and snap one at a time, last and next week waiting either side; ‹ › scroll there too; ← → step a day.
Playground
October 2026
<WeekStrip
date="2026-10-08"
today="2026-10-07"
locale="en"
marked={daysWithBookings}
onSelect={setDate}
onWeek={(by) => setDate(addDays(date, by * 7))}
action={<Button variant="secondary" size="sm">Today</Button>}
/>API
| Prop | Type | Default | Description |
|---|---|---|---|
| date | string | — | The chosen day, YYYY-MM-DD; its week shows. |
| today | string | — | The studio's today: ringed, and the days before it muted. |
| locale | string | — | The weekday letters, the month and the labels' dates. |
| marked | string[] | [] | Days that hold bookings: a dot under each. |
| onSelect | (date: string) => void | — | A day tapped, or ← → from the chosen one. |
| onWeek | (step: -1 | 1) => void | — | ‹ ›, or a scroll that snaps on a neighbouring week. |
| title | ReactNode | month and year | In the month's place: the Team schedule puts the chosen day's heading here (Today, the date, the hours). |
| action | ReactNode | — | Beside the arrows: Today, while today is out of view. |
| labels | Partial<WeekStripLabels> | English | The arrows' names, Today, and “has bookings” for a dotted day. |
Guidelines
- Chosen is a fill, today a ring: both can show at once, and the fill wins when they meet.
- The squircle slides as tabs do (fast, smooth-out) and holds its column in every week, so it stays still while weeks scroll by. With reduced motion ‹ › jump rather than scroll.
- The days are one tab stop: the chosen day takes focus, and the arrow keys move it, into the next week too.