Appointment picker with a date 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"
slots={[
{
"time": "09:30"
},
{
"time": "10:00"
},
{
"time": "11:00",
"disabled": true
},
{
"time": "13:30"
},
{
"time": "14:00"
},
{
"time": "15:30"
}
]}
selectedIndex={3}
bordered={false}
/>