Booking Slots

Appointment picker with a timezone caption and a grid of time pills, one active and a few disabled.

Book a 30-minute callThursday, Apr 23 · Europe/Istanbul (UTC+3)

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use

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}
/>