Week Availability Strip

Pick a day

May
M12
T13
W14
T15
F16
S17
S18
About this piece

Week Availability Strip

A one-week day picker with seven compact cells, an accent-filled selection, and muted fully booked days.

Usage

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

import { Calendar32 } from "@/components/beste/piece/calendar32";

<Calendar32
  surface="card"
  bordered={false}
  inverted={false}
  title="Pick a day"
  month="May"
  days={[
    {
      "weekday": "M",
      "date": "12",
      "slots": 4
    },
    {
      "weekday": "T",
      "date": "13",
      "slots": 2
    },
    {
      "weekday": "W",
      "date": "14",
      "slots": 6
    },
    {
      "weekday": "T",
      "date": "15",
      "slots": 0
    },
    {
      "weekday": "F",
      "date": "16",
      "slots": 3
    },
    {
      "weekday": "S",
      "date": "17",
      "slots": 1
    },
    {
      "weekday": "S",
      "date": "18",
      "slots": 0
    }
  ]}
  selectedIndex={2}
/>

More Calendar pieces

View all Calendar
Apr 20 – Apr 26
Mon20
Tue21
Wed22
Thu23
Fri24
Sat25
Sun26

Book a session

Mon12
Tue13
Wed14
Thu15
Fri16
Sat17
Sun18
Pick a day, then a time
Book a 30-minute callThursday, Apr 23
Apr
21Tuesday
Availability
091011121314151617MonTueWedThuFri
June 20266 nights
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