Meeting schedulerPro

• Duration picker
• Calendar of open days
• Slots with confirm
• Confirmation view

• Demo booking, consultations and interviews.

• Internal calendars: use the week calendar.

Import it from @/components/blocks/meeting-scheduler after installing. It ships with sample data, so it renders straight away; swap in your own data when you're ready.

import { MeetingScheduler } from "@/components/blocks/meeting-scheduler";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <MeetingScheduler />
    </main>
  );
}

• Disabled days are marked; slots are a radio group; booking is announced.

• Slots slide in per day; confirm grows out of the chosen time; confirmation pops in.

• Three columns from 1024px, stacked below.

• Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

• Fetch free/busy for the visible month and mark unavailable slots.