Appointment picker with a timezone caption and a grid of time pills, one active and a few disabled.
New here? Read the installation guide.
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.
World-clock card listing city and zone next to the local time, with an emerald Local pill on your row.
Stacked block of scheduled slots with tone-colored left rails and a from-to mono time column.
Month grid with a tinted range band, solid start and end chips, and a nights chip in the header.