Seven-day strip of bordered day tiles, each showing the weekday, number, and a dot row of event counts.
The import and the props worth knowing about, in one place.
import { Calendar6 } from "@/components/beste/piece/calendar6";
<Calendar6
surface="card"
bordered={true}
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
}
]}
/>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.
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.
Month grid where each day prints colored dots beneath the number to hint at event categories on it.