Pick a day
May6 slots open on Wednesday, from 08:00 to 16:30.
A one-week day picker with seven compact cells, an accent-filled selection, muted fully booked days, and a caption for the chosen day.
The import and the props worth knowing about, in one place.
import { Calendar32 } from "@/components/beste/piece/calendar32";
<Calendar32
surface="card"
bordered={true}
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}
caption="6 slots open on Wednesday, from 08:00 to 16:30."
/>Seven-day strip of bordered day tiles, each showing the weekday, number, and a dot row of event counts.
Book a session
A week strip where the selection highlight glides to a new day, one of three time slots fills in, and a confirmed row with a check fades in before the flow resets.
Appointment picker with a timezone caption and a grid of time pills, one active and a few disabled.