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.
The import and the props worth knowing about, in one place.
import { Calendar33 } from "@/components/beste/piece/calendar33";
<Calendar33
title="Book a session"
days={[
{
"weekday": "Mon",
"date": "12"
},
{
"weekday": "Tue",
"date": "13"
},
{
"weekday": "Wed",
"date": "14"
},
{
"weekday": "Thu",
"date": "15"
},
{
"weekday": "Fri",
"date": "16"
},
{
"weekday": "Sat",
"date": "17"
},
{
"weekday": "Sun",
"date": "18"
}
]}
slots={[
"09:00",
"11:30",
"14:00"
]}
startIndex={1}
pickIndex={3}
pickSlot={1}
tone="primary"
bordered={false}
/>