Booking Slot Calendar

A Google Calendar-style appointment picker where a user selects a day from a week strip and then taps an available time slot to book it.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Booking Slot Calendar to your project and fits it to your theme.

import { BookingSlotCalendar } from "@/components/ui/booking-slot-calendar";

export default function BookingSlotCalendarDemo() {
  return (
    <div className="flex w-full items-center justify-center p-10">
      <BookingSlotCalendar onBook={(date, slot) => console.log(date, slot)} />
    </div>
  );
}