Appointment picker with a timezone caption and a grid of time pills, one active and a few disabled.
The import and the props worth knowing about, in one place.
import { Calendar11 } from "@/components/beste/piece/calendar11";
<Calendar11
heading="Book a 30-minute call"
date="Thursday, Apr 23"
timezone="Europe/Istanbul (UTC+3)"
slots={[
{
"time": "09:30"
},
{
"time": "10:00"
},
{
"time": "11:00",
"disabled": true
},
{
"time": "13:30"
},
{
"time": "14:00"
},
{
"time": "15:30"
}
]}
selectedIndex={3}
/>Meeting-room chooser where each row shows capacity, video, and an emerald Free or rose Booked pill.
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.
Stacked block of scheduled slots with tone-colored left rails and a from-to mono time column.
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.