Week Strip

Apr 20 – Apr 26
Mon20
Tue21
Wed22
Thu23
Fri24
Sat25
Sun26
About this piece

Week Strip

Seven-day strip of bordered day tiles, each showing the weekday, number, and a dot row of event counts.

Usage

The import and the props worth knowing about, in one place.

import { Calendar6 } from "@/components/beste/piece/calendar6";

<Calendar6
  surface="card"
  bordered={false}
  inverted={false}
  heading="Apr 20 – Apr 26"
  days={[
    {
      "weekday": "Mon",
      "day": 20,
      "events": 2
    },
    {
      "weekday": "Tue",
      "day": 21,
      "events": 1
    },
    {
      "weekday": "Wed",
      "day": 22
    },
    {
      "weekday": "Thu",
      "day": 23,
      "today": true,
      "events": 3
    },
    {
      "weekday": "Fri",
      "day": 24,
      "events": 1
    },
    {
      "weekday": "Sat",
      "day": 25
    },
    {
      "weekday": "Sun",
      "day": 26,
      "events": 2
    }
  ]}
/>

More Calendar pieces

View all Calendar
Apr
21Tuesday

Pick a day

May
M12
T13
W14
T15
F16
S17
S18

Book a session

Mon12
Tue13
Wed14
Thu15
Fri16
Sat17
Sun18
Pick a day, then a time
April 2026
MTWTFSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Q2 roadmap
KickoffApr 01
BetaMay 27
GA launchJun 17
April 2026
MTWTFSS