Preset Time Selection Calendar

A booking calendar that pairs a date picker with a scrollable list of preset time slots, disabling past dates and already-booked times.

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

import Calendar14 from "@/components/ui/c-calendar-14";

export default function Calendar14Demo() {
  return (
    <div className="flex w-full items-center justify-center p-8">
      <Calendar14 />
    </div>
  );
}