@etus/ui 0.1.0

package/src/components/advanced/EventCalendar/EventCalendar.tsx

@@ -0,0 +1,1066 @@
+import type {
+  CalendarEvent,
+  EventCalendarAgendaProps,
+  EventCalendarDayProps,
+  EventCalendarEventProps,
+  EventCalendarHeaderProps,
+  EventCalendarMonthProps,
+  EventCalendarProps,
+  EventCalendarView,
+  EventCalendarWeekProps,
+  TimeSlot,
+} from "./EventCalendar.types"
+
+import { ChevronLeft, ChevronRight, Clock, MapPin } from "lucide-react"
+import * as React from "react"
+
+import { cn } from "../../../lib/utils"
+import { Button } from "../../primitives/Button"
+import {
+  eventCalendarAgendaItemVariants,
+  eventCalendarCellVariants,
+  eventCalendarDayNumberVariants,
+  eventCalendarEventVariants,
+  eventCalendarHeaderVariants,
+  eventCalendarTimeSlotVariants,
+  eventCalendarVariants,
+  eventCalendarViewButtonVariants,
+  getEventVariant,
+} from "./EventCalendar.variants"
+
+// ============================================================================
+// Date Utilities
+// ============================================================================
+
+function startOfMonth(date: Date): Date {
+  return new Date(date.getFullYear(), date.getMonth(), 1)
+}
+
+function endOfMonth(date: Date): Date {
+  return new Date(date.getFullYear(), date.getMonth() + 1, 0)
+}
+
+function startOfWeek(date: Date, weekStartsOn: 0 | 1 = 0): Date {
+  const d = new Date(date)
+  const day = d.getDay()
+  const diff = (day < weekStartsOn ? 7 : 0) + day - weekStartsOn
+  d.setDate(d.getDate() - diff)
+  d.setHours(0, 0, 0, 0)
+  return d
+}
+
+function endOfWeek(date: Date, weekStartsOn: 0 | 1 = 0): Date {
+  const d = startOfWeek(date, weekStartsOn)
+  d.setDate(d.getDate() + 6)
+  d.setHours(23, 59, 59, 999)
+  return d
+}
+
+function addDays(date: Date, days: number): Date {
+  const d = new Date(date)
+  d.setDate(d.getDate() + days)
+  return d
+}
+
+function addMonths(date: Date, months: number): Date {
+  const d = new Date(date)
+  d.setMonth(d.getMonth() + months)
+  return d
+}
+
+function addWeeks(date: Date, weeks: number): Date {
+  return addDays(date, weeks * 7)
+}
+
+function isSameDay(a: Date, b: Date): boolean {
+  return (
+    a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate()
+  )
+}
+
+function isSameMonth(a: Date, b: Date): boolean {
+  return (
+    a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth()
+  )
+}
+
+function isToday(date: Date): boolean {
+  return isSameDay(date, new Date())
+}
+
+function isWeekend(date: Date): boolean {
+  const day = date.getDay()
+  return day === 0 || day === 6
+}
+
+function formatDate(
+  date: Date,
+  options: Intl.DateTimeFormatOptions,
+  locale = "en-US"
+): string {
+  return date.toLocaleDateString(locale, options)
+}
+
+function formatTime(date: Date, locale = "en-US"): string {
+  return date.toLocaleTimeString(locale, { hour: "numeric", minute: "2-digit" })
+}
+
+function parseTime(timeStr: string): { hours: number; minutes: number } {
+  const [hours, minutes] = timeStr.split(":").map(Number)
+  return { hours: hours ?? 0, minutes: minutes ?? 0 }
+}
+
+function getEventsForDay(events: CalendarEvent[], date: Date): CalendarEvent[] {
+  return events.filter((event) => {
+    const eventStart = new Date(event.start)
+    const eventEnd = new Date(event.end)
+    const dayStart = new Date(date)
+    dayStart.setHours(0, 0, 0, 0)
+    const dayEnd = new Date(date)
+    dayEnd.setHours(23, 59, 59, 999)
+
+    return eventStart <= dayEnd && eventEnd >= dayStart
+  })
+}
+
+function getEventsForDateRange(
+  events: CalendarEvent[],
+  start: Date,
+  end: Date
+): CalendarEvent[] {
+  return events.filter((event) => {
+    const eventStart = new Date(event.start)
+    const eventEnd = new Date(event.end)
+    return eventStart <= end && eventEnd >= start
+  })
+}
+
+// ============================================================================
+// EventCalendarEvent Component
+// ============================================================================
+
+function EventCalendarEvent({
+  event,
+  isDragging = false,
+  onClick,
+  renderEvent,
+}: EventCalendarEventProps) {
+  if (renderEvent) {
+    return <>{renderEvent(event)}</>
+  }
+
+  const variant = getEventVariant(event.color)
+
+  return (
+    <button
+      className={cn(
+        eventCalendarEventVariants({
+          variant,
+          isAllDay: event.allDay,
+          isDragging,
+        })
+      )}
+      aria-label={`Event: ${event.title}`}
+      data-slot="event"
+      type="button"
+      onClick={(e) => {
+        e.stopPropagation()
+        onClick?.(event)
+      }}
+    >
+      {!event.allDay && (
+        <span className="mr-1 text-[10px] opacity-70">
+          {formatTime(new Date(event.start))}
+        </span>
+      )}
+      <span>{event.title}</span>
+    </button>
+  )
+}
+
+// ============================================================================
+// EventCalendarHeader Component
+// ============================================================================
+
+function EventCalendarHeader({
+  date,
+  view,
+  onPrevious,
+  onNext,
+  onToday,
+  onViewChange,
+  locale = "en-US",
+}: EventCalendarHeaderProps) {
+  const getHeaderTitle = (): string => {
+    switch (view) {
+      case "month":
+        return formatDate(date, { month: "long", year: "numeric" }, locale)
+      case "week": {
+        const weekStart = startOfWeek(date, 0)
+        const weekEnd = endOfWeek(date, 0)
+        if (weekStart.getMonth() === weekEnd.getMonth()) {
+          return `${formatDate(weekStart, { month: "long", day: "numeric" }, locale)} - ${String(weekEnd.getDate())}, ${String(weekEnd.getFullYear())}`
+        }
+        return `${formatDate(weekStart, { month: "short", day: "numeric" }, locale)} - ${formatDate(weekEnd, { month: "short", day: "numeric", year: "numeric" }, locale)}`
+      }
+      case "day":
+        return formatDate(
+          date,
+          { weekday: "long", month: "long", day: "numeric", year: "numeric" },
+          locale
+        )
+      case "agenda":
+        return formatDate(date, { month: "long", year: "numeric" }, locale)
+      default:
+        return ""
+    }
+  }
+
+  const views: EventCalendarView[] = ["month", "week", "day", "agenda"]
+
+  return (
+    <div
+      className={cn(eventCalendarHeaderVariants())}
+      data-slot="calendar-header"
+    >
+      <div className="flex items-center gap-2">
+        <Button
+          aria-label="Previous"
+          size="sm"
+          variant="outline"
+          onClick={onPrevious}
+        >
+          <ChevronLeft className="h-4 w-4" />
+        </Button>
+        <Button
+          aria-label="Next"
+          size="sm"
+          variant="outline"
+          onClick={onNext}
+        >
+          <ChevronRight className="h-4 w-4" />
+        </Button>
+        <Button size="sm" variant="outline" onClick={onToday}>
+          Today
+        </Button>
+        <h2 className="ml-2 text-lg font-semibold">{getHeaderTitle()}</h2>
+      </div>
+
+      <div className="flex items-center gap-1 rounded-lg bg-muted p-1">
+        {views.map((v) => (
+          <button
+            key={v}
+            aria-pressed={view === v}
+            className={cn(eventCalendarViewButtonVariants({ isActive: view === v }))}
+            type="button"
+            onClick={() => { onViewChange(v); }}
+          >
+            {v.charAt(0).toUpperCase() + v.slice(1)}
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+// ============================================================================
+// EventCalendarMonth Component
+// ============================================================================
+
+function EventCalendarMonth({
+  date,
+  events,
+  weekStartsOn,
+  selectable,
+  onDayClick,
+  onEventClick,
+  onSlotSelect,
+  renderEvent,
+  locale = "en-US",
+}: EventCalendarMonthProps) {
+  const monthStart = startOfMonth(date)
+  const monthEnd = endOfMonth(date)
+  const calendarStart = startOfWeek(monthStart, weekStartsOn)
+  const calendarEnd = endOfWeek(monthEnd, weekStartsOn)
+
+  // Generate week days header
+  const weekDays: string[] = []
+  let dayPointer = calendarStart
+  for (let i = 0; i < 7; i++) {
+    weekDays.push(formatDate(dayPointer, { weekday: "short" }, locale))
+    dayPointer = addDays(dayPointer, 1)
+  }
+
+  // Generate calendar grid
+  const weeks: Date[][] = []
+  let currentDay = calendarStart
+  while (currentDay <= calendarEnd) {
+    const week: Date[] = []
+    for (let i = 0; i < 7; i++) {
+      week.push(new Date(currentDay))
+      currentDay = addDays(currentDay, 1)
+    }
+    weeks.push(week)
+  }
+
+  const handleDayClick = (day: Date) => {
+    onDayClick?.(day)
+    if (selectable && onSlotSelect) {
+      const start = new Date(day)
+      start.setHours(0, 0, 0, 0)
+      const end = new Date(day)
+      end.setHours(23, 59, 59, 999)
+      onSlotSelect({ start, end, allDay: true })
+    }
+  }
+
+  return (
+    <div className="flex flex-1 flex-col" data-slot="calendar-month" role="grid">
+      {/* Week day headers */}
+      <div
+        className="grid grid-cols-7 border-b border-border bg-muted/50"
+        role="row"
+      >
+        {weekDays.map((day) => (
+          <div
+            key={day}
+            className="py-2 text-center text-xs font-medium text-muted-foreground"
+            role="columnheader"
+          >
+            {day}
+          </div>
+        ))}
+      </div>
+
+      {/* Calendar grid */}
+      <div className="flex flex-1 flex-col">
+        {weeks.map((week) => (
+          <div
+            key={week[0]?.toISOString()}
+            className="grid flex-1 grid-cols-7"
+            role="row"
+          >
+            {week.map((day) => {
+              const dayEvents = getEventsForDay(events, day)
+              const isCurrentMonth = isSameMonth(day, date)
+              const isTodayDate = isToday(day)
+              const isWeekendDay = isWeekend(day)
+
+              return (
+                <div
+                  key={day.toISOString()}
+                  aria-label={formatDate(day, {
+                    weekday: "long",
+                    month: "long",
+                    day: "numeric",
+                  })}
+                  className={cn(
+                    eventCalendarCellVariants({
+                      isToday: isTodayDate,
+                      isWeekend: isWeekendDay && !isTodayDate,
+                      isOutsideMonth: !isCurrentMonth,
+                      isSelectable: selectable,
+                    }),
+                    day.getDay() === (weekStartsOn === 0 ? 6 : 0) && "border-r-0"
+                  )}
+                  aria-current={isTodayDate ? "date" : undefined}
+                  role="gridcell"
+                  tabIndex={selectable ? 0 : undefined}
+                  onClick={() => { handleDayClick(day); }}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault()
+                      handleDayClick(day)
+                    }
+                  }}
+                >
+                  <div className="mb-1 flex justify-end">
+                    <span
+                      className={cn(
+                        eventCalendarDayNumberVariants({
+                          isToday: isTodayDate,
+                          isOutsideMonth: !isCurrentMonth,
+                        })
+                      )}
+                    >
+                      {day.getDate()}
+                    </span>
+                  </div>
+                  <div className="flex flex-col gap-0.5">
+                    {dayEvents.slice(0, 3).map((event) => (
+                      <EventCalendarEvent
+                        key={event.id}
+                        event={event}
+                        renderEvent={renderEvent}
+                        onClick={onEventClick}
+                      />
+                    ))}
+                    {dayEvents.length > 3 && (
+                      <span className="px-1 text-xs text-muted-foreground">
+                        +{dayEvents.length - 3} more
+                      </span>
+                    )}
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+// ============================================================================
+// EventCalendarWeek Component
+// ============================================================================
+
+function EventCalendarWeek({
+  date,
+  events,
+  weekStartsOn,
+  selectable,
+  minTime,
+  maxTime,
+  onEventClick,
+  onSlotSelect,
+  renderEvent,
+  locale = "en-US",
+}: EventCalendarWeekProps) {
+  const weekStart = startOfWeek(date, weekStartsOn)
+  const { hours: startHour } = parseTime(minTime)
+  const { hours: endHour } = parseTime(maxTime)
+  const hours = Array.from({ length: endHour - startHour }, (_, i) => startHour + i)
+
+  const weekDays: Date[] = Array.from({ length: 7 }, (_, i) =>
+    addDays(weekStart, i)
+  )
+
+  const handleSlotClick = (day: Date, hour: number) => {
+    if (!selectable || !onSlotSelect) return
+    const start = new Date(day)
+    start.setHours(hour, 0, 0, 0)
+    const end = new Date(day)
+    end.setHours(hour + 1, 0, 0, 0)
+    onSlotSelect({ start, end })
+  }
+
+  const getEventsForHour = (day: Date, hour: number): CalendarEvent[] => {
+    const hourStart = new Date(day)
+    hourStart.setHours(hour, 0, 0, 0)
+    const hourEnd = new Date(day)
+    hourEnd.setHours(hour + 1, 0, 0, 0)
+
+    return events.filter((event) => {
+      if (event.allDay) return false
+      const eventStart = new Date(event.start)
+      const eventEnd = new Date(event.end)
+      return (
+        isSameDay(eventStart, day) &&
+        eventStart.getHours() <= hour &&
+        eventEnd.getHours() > hour
+      )
+    })
+  }
+
+  const getAllDayEvents = (day: Date): CalendarEvent[] => {
+    return events.filter((event) => {
+      if (!event.allDay) return false
+      const eventStart = new Date(event.start)
+      const eventEnd = new Date(event.end)
+      const dayStart = new Date(day)
+      dayStart.setHours(0, 0, 0, 0)
+      const dayEnd = new Date(day)
+      dayEnd.setHours(23, 59, 59, 999)
+      return eventStart <= dayEnd && eventEnd >= dayStart
+    })
+  }
+
+  return (
+    <div className="flex flex-1 flex-col overflow-hidden" data-slot="calendar-week">
+      {/* Header with day names and dates */}
+      <div className="grid grid-cols-[60px_repeat(7,1fr)] border-b border-border bg-muted/50">
+        <div className="border-r border-border" />
+        {weekDays.map((day, dayIndex) => (
+          <div
+            key={day.toISOString()}
+            className={cn(
+              "flex flex-col items-center py-2 text-center",
+              dayIndex < 6 && "border-r border-border"
+            )}
+          >
+            <span className="text-xs text-muted-foreground">
+              {formatDate(day, { weekday: "short" }, locale)}
+            </span>
+            <span
+              className={cn(
+                eventCalendarDayNumberVariants({ isToday: isToday(day) })
+              )}
+            >
+              {day.getDate()}
+            </span>
+          </div>
+        ))}
+      </div>
+
+      {/* All day events row */}
+      <div className="grid grid-cols-[60px_repeat(7,1fr)] border-b border-border">
+        <div className="flex items-center justify-center border-r border-border text-xs text-muted-foreground">
+          All day
+        </div>
+        {weekDays.map((day, dayIndex) => {
+          const allDayEvts = getAllDayEvents(day)
+          return (
+            <div
+              key={day.toISOString()}
+              className={cn(
+                "min-h-[32px] p-0.5",
+                dayIndex < 6 && "border-r border-border"
+              )}
+            >
+              {allDayEvts.map((event) => (
+                <EventCalendarEvent
+                  key={event.id}
+                  event={event}
+                  renderEvent={renderEvent}
+                  onClick={onEventClick}
+                />
+              ))}
+            </div>
+          )
+        })}
+      </div>
+
+      {/* Time grid */}
+      <div className="flex-1 overflow-auto">
+        <div className="grid grid-cols-[60px_repeat(7,1fr)]">
+          {hours.map((hour) => (
+            <React.Fragment key={hour}>
+              <div className="flex h-12 items-start justify-end border-r border-b border-border pr-2 text-xs text-muted-foreground">
+                {formatTime(new Date(2000, 0, 1, hour, 0))}
+              </div>
+              {weekDays.map((day, dayIndex) => {
+                const hourEvents = getEventsForHour(day, hour)
+                const now = new Date()
+                const isCurrentHour =
+                  isToday(day) &&
+                  now.getHours() === hour
+
+                return (
+                  <div
+                    key={day.toISOString()}
+                    className={cn(
+                      eventCalendarTimeSlotVariants({
+                        isHour: true,
+                        isCurrentTime: isCurrentHour,
+                        isSelectable: selectable,
+                      }),
+                      "h-12",
+                      dayIndex < 6 && "border-r"
+                    )}
+                    aria-label={`${formatDate(day, { weekday: "long" })} at ${String(hour)}:00`}
+                    role="gridcell"
+                    tabIndex={selectable ? 0 : undefined}
+                    onClick={() => { handleSlotClick(day, hour); }}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault()
+                        handleSlotClick(day, hour)
+                      }
+                    }}
+                  >
+                    {hourEvents.map((event) => (
+                      <EventCalendarEvent
+                        key={event.id}
+                        event={event}
+                        renderEvent={renderEvent}
+                        onClick={onEventClick}
+                      />
+                    ))}
+                  </div>
+                )
+              })}
+            </React.Fragment>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// ============================================================================
+// EventCalendarDay Component
+// ============================================================================
+
+function EventCalendarDay({
+  date,
+  events,
+  selectable,
+  minTime,
+  maxTime,
+  onEventClick,
+  onSlotSelect,
+  renderEvent,
+  locale = "en-US",
+}: EventCalendarDayProps) {
+  const { hours: startHour } = parseTime(minTime)
+  const { hours: endHour } = parseTime(maxTime)
+  const hours = Array.from({ length: endHour - startHour }, (_, i) => startHour + i)
+
+  const handleSlotClick = (hour: number) => {
+    if (!selectable || !onSlotSelect) return
+    const start = new Date(date)
+    start.setHours(hour, 0, 0, 0)
+    const end = new Date(date)
+    end.setHours(hour + 1, 0, 0, 0)
+    onSlotSelect({ start, end })
+  }
+
+  const getEventsForHour = (hour: number): CalendarEvent[] => {
+    return events.filter((event) => {
+      if (event.allDay) return false
+      const eventStart = new Date(event.start)
+      const eventEnd = new Date(event.end)
+      return (
+        isSameDay(eventStart, date) &&
+        eventStart.getHours() <= hour &&
+        eventEnd.getHours() > hour
+      )
+    })
+  }
+
+  const allDayEvents = events.filter((e) => e.allDay && isSameDay(new Date(e.start), date))
+
+  return (
+    <div className="flex flex-1 flex-col overflow-hidden" data-slot="calendar-day">
+      {/* Day header */}
+      <div className="border-b border-border bg-muted/50 p-3 text-center">
+        <span className="text-sm text-muted-foreground">
+          {formatDate(date, { weekday: "long" }, locale)}
+        </span>
+        <span
+          className={cn(
+            "ml-2",
+            eventCalendarDayNumberVariants({ isToday: isToday(date) })
+          )}
+        >
+          {date.getDate()}
+        </span>
+      </div>
+
+      {/* All day events */}
+      {allDayEvents.length > 0 && (
+        <div className="border-b border-border p-2">
+          <div className="mb-1 text-xs text-muted-foreground">All day</div>
+          <div className="flex flex-wrap gap-1">
+            {allDayEvents.map((event) => (
+              <EventCalendarEvent
+                key={event.id}
+                event={event}
+                renderEvent={renderEvent}
+                onClick={onEventClick}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Time grid */}
+      <div className="flex-1 overflow-auto">
+        <div className="grid grid-cols-[60px_1fr]">
+          {hours.map((hour) => {
+            const hourEvents = getEventsForHour(hour)
+            const now = new Date()
+            const isCurrentHour = isToday(date) && now.getHours() === hour
+
+            return (
+              <React.Fragment key={hour}>
+                <div className="flex h-16 items-start justify-end border-r border-b border-border pr-2 text-xs text-muted-foreground">
+                  {formatTime(new Date(2000, 0, 1, hour, 0))}
+                </div>
+                <div
+                  className={cn(
+                    eventCalendarTimeSlotVariants({
+                      isHour: true,
+                      isCurrentTime: isCurrentHour,
+                      isSelectable: selectable,
+                    }),
+                    "h-16 p-1"
+                  )}
+                  aria-label={`${String(hour)}:00`}
+                  role="gridcell"
+                  tabIndex={selectable ? 0 : undefined}
+                  onClick={() => { handleSlotClick(hour); }}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault()
+                      handleSlotClick(hour)
+                    }
+                  }}
+                >
+                  {hourEvents.map((event) => (
+                    <EventCalendarEvent
+                      key={event.id}
+                      event={event}
+                      renderEvent={renderEvent}
+                      onClick={onEventClick}
+                    />
+                  ))}
+                </div>
+              </React.Fragment>
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// ============================================================================
+// EventCalendarAgenda Component
+// ============================================================================
+
+function EventCalendarAgenda({
+  date,
+  events,
+  daysToShow = 30,
+  onEventClick,
+  renderEvent,
+  locale = "en-US",
+}: EventCalendarAgendaProps) {
+  const startDate = new Date(date)
+  startDate.setHours(0, 0, 0, 0)
+  const endDate = addDays(startDate, daysToShow)
+
+  const filteredEvents = getEventsForDateRange(events, startDate, endDate).sort(
+    (a, b) => new Date(a.start).getTime() - new Date(b.start).getTime()
+  )
+
+  // Group events by date
+  const eventsByDate = filteredEvents.reduce<Record<string, CalendarEvent[]>>(
+    (acc, event) => {
+      const dateKey = new Date(event.start).toDateString()
+      acc[dateKey] ??= []
+      acc[dateKey].push(event)
+      return acc
+    },
+    {}
+  )
+
+  if (Object.keys(eventsByDate).length === 0) {
+    return (
+      <div
+        className="flex flex-1 items-center justify-center text-muted-foreground"
+        data-slot="calendar-agenda"
+      >
+        No upcoming events
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex-1 overflow-auto p-4" data-slot="calendar-agenda">
+      {Object.entries(eventsByDate).map(([dateKey, dayEvents]) => {
+        const eventDate = new Date(dateKey)
+        const isTodayDate = isToday(eventDate)
+
+        return (
+          <div key={dateKey} className="mb-6">
+            <div className="mb-2 flex items-center gap-2">
+              <span
+                className={cn(
+                  eventCalendarDayNumberVariants({ isToday: isTodayDate })
+                )}
+              >
+                {eventDate.getDate()}
+              </span>
+              <div>
+                <div className="text-sm font-medium">
+                  {formatDate(eventDate, { weekday: "long" }, locale)}
+                </div>
+                <div className="text-xs text-muted-foreground">
+                  {formatDate(eventDate, { month: "long", year: "numeric" }, locale)}
+                </div>
+              </div>
+            </div>
+
+            <div className="space-y-2 border-l-2 border-border pl-4">
+              {dayEvents.map((event) => {
+                if (renderEvent) {
+                  return (
+                    <div
+                      key={event.id}
+                      className={cn(
+                        eventCalendarAgendaItemVariants({
+                          isClickable: !!onEventClick,
+                        })
+                      )}
+                      role="button"
+                      tabIndex={onEventClick ? 0 : undefined}
+                      onClick={() => onEventClick?.(event)}
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                          e.preventDefault()
+                          onEventClick?.(event)
+                        }
+                      }}
+                    >
+                      {renderEvent(event)}
+                    </div>
+                  )
+                }
+
+                const variant = getEventVariant(event.color)
+
+                return (
+                  <div
+                    key={event.id}
+                    className={cn(
+                      eventCalendarAgendaItemVariants({
+                        isClickable: !!onEventClick,
+                      })
+                    )}
+                    role="button"
+                    tabIndex={onEventClick ? 0 : undefined}
+                    onClick={() => onEventClick?.(event)}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault()
+                        onEventClick?.(event)
+                      }
+                    }}
+                  >
+                    <div
+                      className={cn(
+                        "mt-1 h-3 w-3 flex-shrink-0 rounded-full",
+                        variant === "blue" && "bg-blue-500",
+                        variant === "green" && "bg-green-500",
+                        variant === "red" && "bg-red-500",
+                        variant === "yellow" && "bg-yellow-500",
+                        variant === "purple" && "bg-purple-500",
+                        variant === "orange" && "bg-orange-500",
+                        variant === "pink" && "bg-pink-500",
+                        variant === "cyan" && "bg-cyan-500",
+                        variant === "default" && "bg-primary"
+                      )}
+                    />
+                    <div className="min-w-0 flex-1">
+                      <div className="font-medium">{event.title}</div>
+                      <div className="flex items-center gap-3 text-sm text-muted-foreground">
+                        <span className="flex items-center gap-1">
+                          <Clock className="h-3 w-3" />
+                          {event.allDay
+                            ? "All day"
+                            : `${formatTime(new Date(event.start))} - ${formatTime(new Date(event.end))}`}
+                        </span>
+                        {event.location && (
+                          <span className="flex items-center gap-1">
+                            <MapPin className="h-3 w-3" />
+                            {event.location}
+                          </span>
+                        )}
+                      </div>
+                      {event.description && (
+                        <div className="mt-1 text-sm text-muted-foreground line-clamp-2">
+                          {event.description}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                )
+              })}
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+// ============================================================================
+// EventCalendar Main Component
+// ============================================================================
+
+function EventCalendar({
+  events = [],
+  view: controlledView,
+  date: controlledDate,
+  onDateChange,
+  onViewChange,
+  onEventClick,
+  onEventCreate,
+  onEventUpdate: _onEventUpdate,
+  onEventDelete: _onEventDelete,
+  editable: _editable = true,
+  selectable = true,
+  weekStartsOn = 0,
+  minTime = "00:00",
+  maxTime = "24:00",
+  locale = "en-US",
+  renderEvent,
+  loading = false,
+  className,
+  ...props
+}: EventCalendarProps) {
+  // Internal state for uncontrolled mode
+  const [internalDate, setInternalDate] = React.useState(() => new Date())
+  const [internalView, setInternalView] = React.useState<EventCalendarView>("month")
+
+  // Use controlled values if provided
+  const currentDate = controlledDate ?? internalDate
+  const currentView = controlledView ?? internalView
+
+  const handleDateChange = (newDate: Date) => {
+    if (onDateChange) {
+      onDateChange(newDate)
+    } else {
+      setInternalDate(newDate)
+    }
+  }
+
+  const handleViewChange = (newView: EventCalendarView) => {
+    if (onViewChange) {
+      onViewChange(newView)
+    } else {
+      setInternalView(newView)
+    }
+  }
+
+  const handlePrevious = () => {
+    switch (currentView) {
+      case "month":
+        handleDateChange(addMonths(currentDate, -1))
+        break
+      case "week":
+        handleDateChange(addWeeks(currentDate, -1))
+        break
+      case "day":
+        handleDateChange(addDays(currentDate, -1))
+        break
+      case "agenda":
+        handleDateChange(addMonths(currentDate, -1))
+        break
+    }
+  }
+
+  const handleNext = () => {
+    switch (currentView) {
+      case "month":
+        handleDateChange(addMonths(currentDate, 1))
+        break
+      case "week":
+        handleDateChange(addWeeks(currentDate, 1))
+        break
+      case "day":
+        handleDateChange(addDays(currentDate, 1))
+        break
+      case "agenda":
+        handleDateChange(addMonths(currentDate, 1))
+        break
+    }
+  }
+
+  const handleToday = () => {
+    handleDateChange(new Date())
+  }
+
+  const handleSlotSelect = (slot: TimeSlot) => {
+    onEventCreate?.(slot)
+  }
+
+  const handleDayClick = (day: Date) => {
+    handleDateChange(day)
+    if (currentView === "month") {
+      handleViewChange("day")
+    }
+  }
+
+  return (
+    <div
+      className={cn(eventCalendarVariants(), className)}
+      data-loading={loading || undefined}
+      data-slot="event-calendar"
+      {...props}
+    >
+      <EventCalendarHeader
+        date={currentDate}
+        locale={locale}
+        view={currentView}
+        onNext={handleNext}
+        onPrevious={handlePrevious}
+        onToday={handleToday}
+        onViewChange={handleViewChange}
+      />
+
+      {loading ? (
+        <div className="flex flex-1 items-center justify-center">
+          <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
+        </div>
+      ) : (
+        <>
+          {currentView === "month" && (
+            <EventCalendarMonth
+              date={currentDate}
+              events={events}
+              locale={locale}
+              renderEvent={renderEvent}
+              selectable={selectable}
+              weekStartsOn={weekStartsOn}
+              onDayClick={handleDayClick}
+              onEventClick={onEventClick}
+              onSlotSelect={handleSlotSelect}
+            />
+          )}
+          {currentView === "week" && (
+            <EventCalendarWeek
+              date={currentDate}
+              events={events}
+              locale={locale}
+              maxTime={maxTime}
+              minTime={minTime}
+              renderEvent={renderEvent}
+              selectable={selectable}
+              weekStartsOn={weekStartsOn}
+              onEventClick={onEventClick}
+              onSlotSelect={handleSlotSelect}
+            />
+          )}
+          {currentView === "day" && (
+            <EventCalendarDay
+              date={currentDate}
+              events={events}
+              locale={locale}
+              maxTime={maxTime}
+              minTime={minTime}
+              renderEvent={renderEvent}
+              selectable={selectable}
+              onEventClick={onEventClick}
+              onSlotSelect={handleSlotSelect}
+            />
+          )}
+          {currentView === "agenda" && (
+            <EventCalendarAgenda
+              date={currentDate}
+              events={events}
+              locale={locale}
+              renderEvent={renderEvent}
+              onEventClick={onEventClick}
+            />
+          )}
+        </>
+      )}
+    </div>
+  )
+}
+
+export {
+  EventCalendar,
+  EventCalendarAgenda,
+  EventCalendarDay,
+  EventCalendarEvent,
+  EventCalendarHeader,
+  EventCalendarMonth,
+  EventCalendarWeek,
+}