Week calendarPro

• Calendars filter
• Now line
• Click-to-create and delete

• Scheduling, booking and team calendars.

• Month overviews.

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

import { WeekCalendar } from "@/components/blocks/week-calendar";

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

• Slots and events are labelled buttons.
• Calendar filters are labelled checkboxes.

• New events grow into place; deleted ones fade out.

• The grid scrolls horizontally on phones; the filter list moves above it.

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

• Store times as ISO strings; the block works in local time.