A Multi-Purpose Calendar Component

Multi-view scheduler with timezone support. Month, week, day, and agenda views with automatic timezone conversion.

Sun

Mon

Tue

Wed

Thu

Fri

Sat

Tuesday

April 7

30min slots Host: New York (Eastern Time)

Usage

<CalendarScheduler
  availability={[
    { day: "monday", startTime: "09:00", endTime: "17:00", enabled: true },
  ]}
  bookedSlots={[{ date: "2024-03-15", time: "10:00" }]}
  slotDuration={30}
  adminTimeZone="America/New_York"
  onDateSelect={(date) => setSelectedDate(date)}
  onSlotSelect={(date, time) => handleBooking(date, time)}
/>

Props

availabilityAvailability[]Weekly availability schedule

bookedSlots?BookedSlot[]Already booked slots

slotDurationnumberSlot length in minutes

adminTimeZone?stringIANA timezone (default: "UTC")

onSlotSelect(date, time) => voidCalled when a slot is clicked