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"
/>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.
Thursday, 12 October
Europe/Lisbon
Available times light up one after another until one is chosen, the button spins through booking, and the slot locks in green before the demo resets.
Seven-day strip of bordered day tiles, each showing the weekday, number, and a dot row of event counts.
Meeting-booked card with an emerald check header, when/where/guests rows, and add to calendar plus reschedule.