@monkey-mini-app/ui 0.1.0 → 0.1.4

package/dist/src/products/event-calendar.tsx

@@ -1,845 +1,50 @@
 "use client"
 
-import * as React from "react"
-import {
-  addDays,
-  addMinutes,
-  addMonths,
-  addWeeks,
-  differenceInCalendarDays,
-  differenceInMinutes,
-  endOfMonth,
-  endOfWeek,
-  format,
-  isSameDay,
-  isSameMonth,
-  isToday,
-  setHours,
-  setMinutes,
-  startOfDay,
-  startOfMonth,
-  startOfWeek,
-} from "date-fns"
-
-import { Button } from "@monkey-mini-app/ui/components/button"
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@monkey-mini-app/ui/components/dialog"
-import { Input } from "@monkey-mini-app/ui/components/input"
-import { Label } from "@monkey-mini-app/ui/components/label"
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@monkey-mini-app/ui/components/popover"
-import { Switch } from "@monkey-mini-app/ui/components/switch"
-import { DateTimeRangePicker } from "@monkey-mini-app/ui/composites/date-time-range-picker"
-import { useDateLocale, useLabels } from "@monkey-mini-app/ui/i18n/context"
 import { cn } from "@monkey-mini-app/ui/lib/utils"
 
-export type CalendarView = "month" | "week" | "day"
-
-export type CalendarEvent = {
-  id: string
-  title: string
-  start: Date
-  end: Date
-  allDay?: boolean
-}
-
-type Draft = {
-  start: Date
-  end: Date
-  allDay: boolean
-  event?: CalendarEvent
-}
-
-const HOUR_HEIGHT = 48
-const SNAP = 15
-const MONTH_MAX = 3
-const WEEK_STARTS_ON = 1 as const
-
-function applyTime(date: Date, time: string) {
-  const [h, m] = time.split(":").map(Number)
-  return setMinutes(setHours(startOfDay(date), h || 0), m || 0)
-}
-
-function snapMinutes(value: number) {
-  const max = 24 * 60
-  const next = Math.round(value / SNAP) * SNAP
-  return Math.min(max, Math.max(0, next))
-}
-
-function minutesOfDay(date: Date) {
-  return date.getHours() * 60 + date.getMinutes()
-}
-
-function atMinutes(day: Date, minutes: number) {
-  return addMinutes(startOfDay(day), Math.min(24 * 60, Math.max(0, minutes)))
-}
-
-function isBarEvent(event: CalendarEvent) {
-  if (event.allDay) return true
-  return differenceInCalendarDays(event.end, event.start) >= 1
-}
-
-function exclusiveAllDayEnd(inclusive: Date) {
-  return addDays(startOfDay(inclusive), 1)
-}
-
-function inclusiveAllDayEnd(exclusive: Date) {
-  const start = startOfDay(exclusive)
-  return addDays(start, start.getTime() === exclusive.getTime() ? -1 : 0)
-}
-
-function eventTouchesDay(event: CalendarEvent, day: Date) {
-  const start = startOfDay(event.start)
-  const end = event.allDay ? event.end : startOfDay(addMinutes(event.end, -1))
-  const t = startOfDay(day)
-  return t >= start && t < (event.allDay ? event.end : addDays(end, 1))
-}
-
-function timedOnDay(event: CalendarEvent, day: Date) {
-  if (isBarEvent(event)) return false
-  return isSameDay(event.start, day)
-}
-
-type Packed = CalendarEvent & { startMin: number; endMin: number; col: number; cols: number }
-
-function packDay(events: CalendarEvent[], day: Date): Packed[] {
-  const origin = startOfDay(day)
-  const items: Packed[] = events
-    .filter((event) => timedOnDay(event, day))
-    .map((event) => {
-      const startMin = Math.max(0, differenceInMinutes(event.start, origin))
-      const endMin = Math.min(24 * 60, Math.max(startMin + SNAP, differenceInMinutes(event.end, origin)))
-      return { ...event, startMin, endMin, col: 0, cols: 1 }
-    })
-    .sort((a, b) => a.startMin - b.startMin || b.endMin - a.endMin)
-
-  const colEnds: number[] = []
-  for (const item of items) {
-    let col = colEnds.findIndex((end) => end <= item.startMin)
-    if (col === -1) {
-      col = colEnds.length
-      colEnds.push(item.endMin)
-    } else {
-      colEnds[col] = item.endMin
-    }
-    item.col = col
-  }
-  for (const item of items) {
-    const overlapping = items.filter((other) => other.startMin < item.endMin && other.endMin > item.startMin)
-    item.cols = Math.max(1, ...overlapping.map((other) => other.col + 1))
-  }
-  return items
-}
-
-type Bar = { event: CalendarEvent; colStart: number; colSpan: number; lane: number }
-
-function packBars(events: CalendarEvent[], days: Date[]): { bars: Bar[]; lanes: number } {
-  const origin = startOfDay(days[0] ?? new Date())
-  const last = addDays(startOfDay(days[days.length - 1] ?? origin), 1)
-  const candidates = events
-    .filter(isBarEvent)
-    .map((event) => {
-      const start = event.start < origin ? origin : startOfDay(event.start)
-      const end = event.end > last ? last : event.end
-      const colStart = differenceInCalendarDays(start, origin)
-      const colSpan = Math.max(1, differenceInCalendarDays(end, start))
-      return { event, colStart, colSpan, lane: 0 }
-    })
-    .filter((bar) => bar.colStart < days.length && bar.colStart + bar.colSpan > 0)
-    .sort((a, b) => a.colStart - b.colStart || b.colSpan - a.colSpan)
-
-  const laneEnds: number[] = []
-  for (const bar of candidates) {
-    const start = Math.max(0, bar.colStart)
-    const end = Math.min(days.length, bar.colStart + bar.colSpan)
-    bar.colStart = start
-    bar.colSpan = Math.max(1, end - start)
-    let lane = laneEnds.findIndex((occupied) => occupied <= bar.colStart)
-    if (lane === -1) {
-      lane = laneEnds.length
-      laneEnds.push(bar.colStart + bar.colSpan)
-    } else {
-      laneEnds[lane] = bar.colStart + bar.colSpan
-    }
-    bar.lane = lane
-  }
-  return { bars: candidates, lanes: Math.max(1, laneEnds.length) }
-}
-
-function EventChip({
-  event,
-  compact,
-  onClick,
-}: {
-  event: CalendarEvent
-  compact?: boolean
-  onClick?: (event: CalendarEvent) => void
-}) {
-  return (
-    <button
-      type="button"
-      data-testid={`calendar-event-${event.id}`}
-      className={cn(
-        "w-full truncate rounded-sm bg-primary/15 px-1 text-left text-[11px] text-primary",
-        compact ? "h-5 leading-5" : "py-0.5"
-      )}
-      onClick={(e) => {
-        e.stopPropagation()
-        onClick?.(event)
-      }}
-    >
-      {event.allDay ? event.title : `${format(event.start, "HH:mm")} ${event.title}`}
-    </button>
-  )
-}
+import { CalendarBody } from "./full-calendar/calendar-body"
+import { CalendarProvider } from "./full-calendar/contexts/calendar-context"
+import { DndProvider } from "./full-calendar/contexts/dnd-context"
+import { CalendarHeader } from "./full-calendar/header/calendar-header"
+import type { IEvent, IUser } from "./full-calendar/interfaces"
+import type { TCalendarView, TEventColor } from "./full-calendar/types"
 
-function EventDialog({
-  draft,
-  onOpenChange,
-  onSave,
-  onDelete,
-}: {
-  draft: Draft | null
-  onOpenChange: (open: boolean) => void
-  onSave: (next: { title: string; start: Date; end: Date; allDay: boolean }) => void
-  onDelete?: () => void
-}) {
-  const t = useLabels("eventCalendar")
-  const [title, setTitle] = React.useState("")
-  const [allDay, setAllDay] = React.useState(false)
-  const [range, setRange] = React.useState<{ start?: Date; end?: Date }>({})
-
-  React.useEffect(() => {
-    if (!draft) return
-    setTitle(draft.event?.title ?? "")
-    setAllDay(draft.allDay)
-    setRange({
-      start: draft.start,
-      end: draft.allDay ? inclusiveAllDayEnd(draft.end) : draft.end,
-    })
-  }, [draft])
-
-  const setAllDayLinked = (next: boolean) => {
-    setAllDay(next)
-    if (!range.start) return
-    if (next) {
-      setRange({
-        start: startOfDay(range.start),
-        end: startOfDay(range.end ?? range.start),
-      })
-      return
-    }
-    const start = applyTime(range.start, "09:00")
-    let end = applyTime(range.end ?? range.start, "10:00")
-    if (end <= start) end = addMinutes(start, 60)
-    setRange({ start, end })
-  }
-
-  const save = () => {
-    if (!range.start || !title.trim()) return
-    if (allDay) {
-      const start = startOfDay(range.start)
-      const last = range.end ?? range.start
-      const end = exclusiveAllDayEnd(last < start ? start : last)
-      onSave({ title: title.trim(), start, end, allDay: true })
-      return
-    }
-    const start = range.start
-    let end = range.end ?? addMinutes(start, 30)
-    if (end <= start) end = addMinutes(start, 30)
-    onSave({ title: title.trim(), start, end, allDay: false })
-  }
-
-  return (
-    <Dialog open={draft != null} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-xl" data-testid="event-dialog">
-        <DialogHeader>
-          <DialogTitle>{draft?.event ? t.editEvent : t.newEvent}</DialogTitle>
-        </DialogHeader>
-        <div className="flex flex-col gap-3">
-          <Input
-            data-testid="event-title-input"
-            placeholder={t.eventTitle}
-            value={title}
-            onChange={(event) => setTitle(event.target.value)}
-            onKeyDown={(event) => {
-              if (event.key === "Enter") save()
-            }}
-          />
-          <div className="flex items-center gap-2">
-            <Switch
-              id="event-all-day"
-              checked={allDay}
-              onCheckedChange={(checked) => setAllDayLinked(checked === true)}
-            />
-            <Label htmlFor="event-all-day" id="event-all-day-label">
-              {t.allDay}
-            </Label>
-          </div>
-          <DateTimeRangePicker value={range} onChange={setRange} allDay={allDay} />
-        </div>
-        <DialogFooter className={draft?.event ? "sm:justify-between" : undefined}>
-          {draft?.event && onDelete ? (
-            <Button variant="destructive" onClick={onDelete}>
-              {t.delete}
-            </Button>
-          ) : (
-            <span />
-          )}
-          <Button data-testid="event-save" onClick={save}>
-            {t.save}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-function monthDayKey(day: Date) {
-  return format(day, "yyyy-MM-dd")
-}
-
-function orderedDays(a: Date, b: Date) {
-  return a.getTime() <= b.getTime() ? [a, b] : [b, a]
-}
-
-function MonthView({
-  current,
-  events,
-  onSelectRange,
-  onEventClick,
-}: {
-  current: Date
-  events: CalendarEvent[]
-  onSelectRange: (range: { start: Date; end: Date; allDay: boolean }) => void
-  onEventClick: (event: CalendarEvent) => void
-}) {
-  const t = useLabels("eventCalendar")
-  const monthStart = startOfWeek(startOfMonth(current), { weekStartsOn: WEEK_STARTS_ON })
-  const monthEnd = endOfWeek(endOfMonth(current), { weekStartsOn: WEEK_STARTS_ON })
-  const days: Date[] = []
-  for (let day = monthStart; day <= monthEnd; day = addDays(day, 1)) days.push(day)
-  const [draft, setDraft] = React.useState<{ start: Date; end: Date } | null>(null)
-  const draftRef = React.useRef(draft)
-  draftRef.current = draft
-
-  const dayFromPoint = (clientX: number, clientY: number) => {
-    const node = document.elementFromPoint(clientX, clientY)?.closest("[data-month-day]")
-    const key = node?.getAttribute("data-month-day")
-    return key ? startOfDay(new Date(`${key}T00:00:00`)) : null
-  }
-
-  const commit = () => {
-    const next = draftRef.current
-    if (!next) return
-    const [start, end] = orderedDays(next.start, next.end)
-    onSelectRange({ start, end: addDays(end, 1), allDay: true })
-    setDraft(null)
-  }
-
-  return (
-    <>
-      <div className="grid grid-cols-7 text-center text-[11px] text-muted-foreground">
-        {t.weekdays.map((label) => (
-          <div key={label} className="py-1">
-            {label}
-          </div>
-        ))}
-      </div>
-      <div
-        className="grid grid-cols-7"
-        data-testid="calendar-month-grid"
-        onPointerMove={(event) => {
-          if (!draftRef.current || !event.currentTarget.hasPointerCapture(event.pointerId)) return
-          const day = dayFromPoint(event.clientX, event.clientY)
-          if (day) setDraft({ ...draftRef.current, end: day })
-        }}
-        onPointerUp={commit}
-      >
-        {days.map((day) => {
-          const dayEvents = events.filter((event) => eventTouchesDay(event, day))
-          const visible = dayEvents.slice(0, MONTH_MAX)
-          const overflow = dayEvents.length - visible.length
-          const selected =
-            draft &&
-            day >= orderedDays(draft.start, draft.end)[0] &&
-            day <= orderedDays(draft.start, draft.end)[1]
-          return (
-            <div
-              key={day.toISOString()}
-              role="button"
-              tabIndex={0}
-              data-month-day={monthDayKey(day)}
-              data-testid={`calendar-month-day-${monthDayKey(day)}`}
-              onPointerDown={(event) => {
-                if ((event.target as HTMLElement).closest("button")) return
-                event.currentTarget.parentElement?.setPointerCapture?.(event.pointerId)
-                setDraft({ start: startOfDay(day), end: startOfDay(day) })
-              }}
-              onKeyDown={(event) => {
-                if (event.key === "Enter" || event.key === " ") {
-                  onSelectRange({
-                    start: startOfDay(day),
-                    end: addDays(startOfDay(day), 1),
-                    allDay: true,
-                  })
-                }
-              }}
-              className={cn(
-                "min-h-24 border-t border-r p-1 text-left text-xs last:border-r-0",
-                !isSameMonth(day, current) && "bg-muted/30 text-muted-foreground",
-                isToday(day) && "bg-primary/5",
-                selected && "bg-primary/15"
-              )}
-            >
-              <div className={cn("mb-1 font-medium", isToday(day) && "text-primary")}>{format(day, "d")}</div>
-              <div className="flex flex-col gap-0.5">
-                {visible.map((event) => (
-                  <EventChip key={event.id} event={event} compact onClick={onEventClick} />
-                ))}
-                {overflow > 0 ? (
-                  <Popover>
-                    <PopoverTrigger
-                      render={
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          data-testid="calendar-more"
-                          className="text-muted-foreground h-auto px-1 text-[11px]"
-                          onClick={(e) => e.stopPropagation()}
-                        />
-                      }
-                    >
-                      {t.more(overflow)}
-                    </PopoverTrigger>
-                    <PopoverContent align="start" className="w-56 p-2">
-                      <div className="mb-1 text-xs font-medium">{format(day, "EEE MMM d")}</div>
-                      <div className="flex flex-col gap-1">
-                        {dayEvents.map((event) => (
-                          <EventChip key={event.id} event={event} onClick={onEventClick} />
-                        ))}
-                      </div>
-                    </PopoverContent>
-                  </Popover>
-                ) : null}
-              </div>
-            </div>
-          )
-        })}
-      </div>
-    </>
-  )
-}
-
-function TimeGrid({
-  days,
-  events,
-  onSelectRange,
-  onEventClick,
-}: {
-  days: Date[]
-  events: CalendarEvent[]
-  onSelectRange: (range: { start: Date; end: Date; allDay: boolean }) => void
-  onEventClick: (event: CalendarEvent) => void
-}) {
-  const t = useLabels("eventCalendar")
-  const scrollerRef = React.useRef<HTMLDivElement>(null)
-  const [draft, setDraft] = React.useState<{ day: Date; startMin: number; endMin: number } | null>(null)
-  const draftRef = React.useRef(draft)
-  draftRef.current = draft
-  const [barDraft, setBarDraft] = React.useState<{ start: number; end: number } | null>(null)
-  const barDraftRef = React.useRef(barDraft)
-  barDraftRef.current = barDraft
-  const { bars, lanes } = packBars(events, days)
-
-  React.useEffect(() => {
-    scrollerRef.current?.scrollTo?.({ top: 8 * HOUR_HEIGHT })
-  }, [days[0]?.toDateString()])
-
-  const minutesFromPointer = (event: React.PointerEvent, column: HTMLElement) => {
-    const rect = column.getBoundingClientRect()
-    const y = event.clientY - rect.top
-    return snapMinutes((y / (24 * HOUR_HEIGHT)) * 24 * 60)
-  }
-
-  const commitTimed = () => {
-    const next = draftRef.current
-    if (!next) return
-    const startMin = Math.min(next.startMin, next.endMin)
-    const endMin = Math.max(next.startMin, next.endMin)
-    const end = endMin === startMin ? startMin + 30 : endMin
-    onSelectRange({
-      start: atMinutes(next.day, startMin),
-      end: atMinutes(next.day, Math.min(24 * 60, end)),
-      allDay: false,
-    })
-    setDraft(null)
-  }
-
-  const indexFromX = (clientX: number, el: HTMLElement) => {
-    const rect = el.getBoundingClientRect()
-    const ratio = (clientX - rect.left) / Math.max(rect.width, 1)
-    return Math.min(days.length - 1, Math.max(0, Math.floor(ratio * days.length)))
-  }
-
-  const commitBar = () => {
-    const next = barDraftRef.current
-    if (!next) return
-    const startIndex = Math.min(next.start, next.end)
-    const endIndex = Math.max(next.start, next.end)
-    const start = days[startIndex]
-    const end = days[endIndex]
-    if (!start || !end) return
-    onSelectRange({
-      start: startOfDay(start),
-      end: addDays(startOfDay(end), 1),
-      allDay: true,
-    })
-    setBarDraft(null)
-  }
-
-  return (
-    <div className="flex min-h-0 flex-1 flex-col" data-testid="calendar-week-grid">
-      <div
-        className="grid shrink-0 border-b"
-        style={{ gridTemplateColumns: `3.5rem repeat(${days.length}, minmax(0, 1fr))` }}
-      >
-        <div />
-        {days.map((day) => (
-          <div
-            key={day.toISOString()}
-            className={cn("px-2 py-1.5 text-center text-xs", isToday(day) && "text-primary")}
-          >
-            <div className="text-muted-foreground font-medium">{format(day, "EEE")}</div>
-            <div className={cn("text-sm", isToday(day) && "font-semibold")}>{format(day, "d")}</div>
-          </div>
-        ))}
-      </div>
-
-      <div
-        className="grid shrink-0 border-b"
-        data-testid="calendar-all-day"
-        style={{ gridTemplateColumns: `3.5rem repeat(${days.length}, minmax(0, 1fr))` }}
-      >
-        <div className="text-muted-foreground px-1 py-1 text-[10px] leading-4">{t.allDay}</div>
-        <div
-          className="relative"
-          style={{ gridColumn: `2 / span ${days.length}`, minHeight: lanes * 22 + 8 }}
-          onPointerDown={(event) => {
-            if ((event.target as HTMLElement).closest("[data-event-block]")) return
-            event.currentTarget.setPointerCapture?.(event.pointerId)
-            const index = indexFromX(event.clientX, event.currentTarget)
-            setBarDraft({ start: index, end: index })
-          }}
-          onPointerMove={(event) => {
-            if (!barDraftRef.current || !event.currentTarget.hasPointerCapture(event.pointerId)) return
-            setBarDraft({
-              ...barDraftRef.current,
-              end: indexFromX(event.clientX, event.currentTarget),
-            })
-          }}
-          onPointerUp={commitBar}
-        >
-          <div
-            className="absolute inset-0 grid"
-            style={{ gridTemplateColumns: `repeat(${days.length}, minmax(0, 1fr))` }}
-          >
-            {days.map((day, index) => {
-              const selected =
-                barDraft &&
-                index >= Math.min(barDraft.start, barDraft.end) &&
-                index <= Math.max(barDraft.start, barDraft.end)
-              return (
-                <div
-                  key={day.toISOString()}
-                  className={cn("border-l", selected ? "bg-primary/15" : "hover:bg-muted/30")}
-                />
-              )
-            })}
-          </div>
-          {bars.map((bar) => (
-            <button
-              key={bar.event.id}
-              type="button"
-              data-event-block
-              data-testid={`calendar-event-${bar.event.id}`}
-              className="absolute truncate rounded-sm bg-primary/20 px-1 text-left text-[11px] text-primary"
-              style={{
-                top: 4 + bar.lane * 22,
-                height: 20,
-                left: `calc(${(bar.colStart / days.length) * 100}% + 2px)`,
-                width: `calc(${(bar.colSpan / days.length) * 100}% - 4px)`,
-              }}
-              onPointerDown={(event) => event.stopPropagation()}
-              onClick={(e) => {
-                e.stopPropagation()
-                onEventClick(bar.event)
-              }}
-            >
-              {bar.event.title}
-            </button>
-          ))}
-        </div>
-      </div>
-
-      <div ref={scrollerRef} className="min-h-0 flex-1 overflow-auto">
-        <div
-          className="grid"
-          style={{
-            gridTemplateColumns: `3.5rem repeat(${days.length}, minmax(0, 1fr))`,
-            height: 24 * HOUR_HEIGHT,
-          }}
-        >
-          <div className="relative">
-            {Array.from({ length: 24 }, (_, hour) => (
-              <div
-                key={hour}
-                className="text-muted-foreground -mt-2 pr-2 text-right text-[10px]"
-                style={{ height: HOUR_HEIGHT }}
-              >
-                {hour === 0 ? "" : `${String(hour).padStart(2, "0")}:00`}
-              </div>
-            ))}
-          </div>
-          {days.map((day) => {
-            const packed = packDay(events, day)
-            const now = new Date()
-            const showNow = isToday(day)
-            return (
-              <div
-                key={day.toISOString()}
-                className="relative border-l"
-                data-testid={`calendar-day-col-${format(day, "yyyy-MM-dd")}`}
-                onPointerDown={(event) => {
-                  if ((event.target as HTMLElement).closest("[data-event-block]")) return
-                  const column = event.currentTarget
-                  column.setPointerCapture?.(event.pointerId)
-                  const minutes = minutesFromPointer(event, column)
-                  setDraft({ day, startMin: minutes, endMin: minutes })
-                }}
-                onPointerMove={(event) => {
-                  if (!draftRef.current || !event.currentTarget.hasPointerCapture(event.pointerId)) return
-                  const minutes = minutesFromPointer(event, event.currentTarget)
-                  setDraft({ ...draftRef.current, endMin: minutes })
-                }}
-                onPointerUp={() => commitTimed()}
-              >
-                {Array.from({ length: 24 }, (_, hour) => (
-                  <div key={hour} className="border-t border-border/60" style={{ height: HOUR_HEIGHT }} />
-                ))}
-                {packed.map((item) => (
-                  <button
-                    key={item.id}
-                    type="button"
-                    data-event-block
-                    data-testid={`calendar-event-${item.id}`}
-                    className="absolute overflow-hidden rounded-sm bg-primary/20 px-1 py-0.5 text-left text-[11px] text-primary ring-1 ring-primary/20"
-                    style={{
-                      top: (item.startMin / 60) * HOUR_HEIGHT,
-                      height: Math.max(16, ((item.endMin - item.startMin) / 60) * HOUR_HEIGHT),
-                      left: `calc(${(item.col / item.cols) * 100}% + 2px)`,
-                      width: `calc(${(1 / item.cols) * 100}% - 4px)`,
-                    }}
-                    onClick={(e) => {
-                      e.stopPropagation()
-                      onEventClick(item)
-                    }}
-                    onPointerDown={(e) => e.stopPropagation()}
-                  >
-                    <div className="truncate font-medium">{item.title}</div>
-                    {item.endMin - item.startMin >= 45 ? (
-                      <div className="text-primary/80 truncate">
-                        {format(item.start, "HH:mm")}–{format(item.end, "HH:mm")}
-                      </div>
-                    ) : null}
-                  </button>
-                ))}
-                {draft && isSameDay(draft.day, day) ? (
-                  <div
-                    className="pointer-events-none absolute left-1 right-1 rounded-sm bg-primary/25 ring-1 ring-primary/40"
-                    style={{
-                      top: (Math.min(draft.startMin, draft.endMin) / 60) * HOUR_HEIGHT,
-                      height: Math.max(
-                        HOUR_HEIGHT / 4,
-                        (Math.abs(draft.endMin - draft.startMin) / 60) * HOUR_HEIGHT
-                      ),
-                    }}
-                  />
-                ) : null}
-                {showNow ? (
-                  <div
-                    className="pointer-events-none absolute right-0 left-0 z-10 flex items-center"
-                    style={{ top: (minutesOfDay(now) / 60) * HOUR_HEIGHT }}
-                  >
-                    <span className="bg-destructive size-1.5 rounded-full" />
-                    <span className="bg-destructive h-px flex-1" />
-                  </div>
-                ) : null}
-              </div>
-            )
-          })}
-        </div>
-      </div>
-    </div>
-  )
-}
+export type CalendarView = TCalendarView
+export type CalendarEvent = IEvent
+export type CalendarUser = IUser
+export type CalendarEventColor = TEventColor
 
 /**
- * Month / week / day calendar. Event shape: { id, title, start, end, allDay? }.
- * Drag empty slots to create; click event to edit. Week/day have all-day row.
+ * Full calendar (day / week / month / year / agenda). Event shape matches
+ * yassir-jeraidi/full-calendar: { id, title, startDate, endDate, color, description, user }.
  * @when Scheduling, on-call, release windows
  * @example
  * <EventCalendar events={events} onEventsChange={setEvents} view="week" />
+ * @family Calendar & date
  */
 export function EventCalendar({
-  value,
-  onValueChange,
-  view = "month",
-  onViewChange,
   events,
+  users = [],
+  view = "month",
+  date,
   onEventsChange,
-  onDayClick,
-  onEventClick,
   className,
 }: {
-  value?: Date
-  onValueChange?: (date: Date) => void
-  view?: CalendarView
-  onViewChange?: (view: CalendarView) => void
-  events: CalendarEvent[]
-  onEventsChange?: (events: CalendarEvent[]) => void
-  onDayClick?: (date: Date) => void
-  onEventClick?: (event: CalendarEvent) => void
+  events: IEvent[]
+  users?: IUser[]
+  view?: TCalendarView
+  date?: Date
+  onEventsChange?: (events: IEvent[]) => void
   className?: string
 }) {
-  const [cursor, setCursor] = React.useState(value ?? new Date())
-  const current = value ?? cursor
-  const setCurrent = (date: Date) => {
-    setCursor(date)
-    onValueChange?.(date)
-  }
-  const [innerView, setInnerView] = React.useState(view)
-  React.useEffect(() => setInnerView(view), [view])
-  const currentView = innerView
-  const setView = (next: CalendarView) => {
-    setInnerView(next)
-    onViewChange?.(next)
-  }
-  const [draft, setDraft] = React.useState<Draft | null>(null)
-  const t = useLabels("eventCalendar")
-  const dateLocale = useDateLocale()
-
-  const openCreate = (range: { start: Date; end: Date; allDay: boolean }) => {
-    onDayClick?.(range.start)
-    if (!onEventsChange) return
-    setDraft(range)
-  }
-
-  const openEvent = (event: CalendarEvent) => {
-    onEventClick?.(event)
-    if (!onEventsChange) return
-    setDraft({ start: event.start, end: event.end, allDay: Boolean(event.allDay), event })
-  }
-
-  const weekStart = startOfWeek(current, { weekStartsOn: WEEK_STARTS_ON })
-  const weekDays = Array.from({ length: 7 }, (_, i) => addDays(weekStart, i))
-  const dayDays = [startOfDay(current)]
-
-  const heading =
-    currentView === "day"
-      ? format(current, "EEEE, MMM d", { locale: dateLocale })
-      : currentView === "week"
-        ? `${format(weekStart, "MMM d", { locale: dateLocale })} – ${format(addDays(weekStart, 6), "MMM d", { locale: dateLocale })}`
-        : format(current, "MMMM yyyy", { locale: dateLocale })
-
-  const shift = (dir: number) => {
-    if (currentView === "month") setCurrent(addMonths(current, dir))
-    else if (currentView === "week") setCurrent(addWeeks(current, dir))
-    else setCurrent(addDays(current, dir))
-  }
-
   return (
-    <div
-      data-testid="event-calendar"
-      className={cn(
-        "flex flex-col overflow-hidden rounded-xl border",
-        currentView === "month" ? "" : "h-[620px]",
-        className
-      )}
-    >
-      <div className="flex shrink-0 flex-wrap items-center gap-2 border-b px-3 py-2">
-        <div className="text-sm font-medium">{heading}</div>
-        <div className="ml-auto flex flex-wrap items-center gap-1">
-          <Button size="sm" variant="outline" onClick={() => setCurrent(new Date())}>
-            {t.today}
-          </Button>
-          <Button size="sm" variant="outline" onClick={() => shift(-1)}>
-            {t.prev}
-          </Button>
-          <Button size="sm" variant="outline" onClick={() => shift(1)}>
-            {t.next}
-          </Button>
-          {(["month", "week", "day"] as const).map((item) => (
-            <Button
-              key={item}
-              size="sm"
-              variant={currentView === item ? "default" : "outline"}
-              data-testid={`calendar-view-${item}`}
-              onClick={() => setView(item)}
-            >
-              {t[item]}
-            </Button>
-          ))}
-        </div>
-      </div>
-
-      {currentView === "month" ? (
-        <MonthView
-          current={current}
-          events={events}
-          onSelectRange={openCreate}
-          onEventClick={openEvent}
-        />
-      ) : (
-        <TimeGrid
-          days={currentView === "week" ? weekDays : dayDays}
-          events={events}
-          onSelectRange={openCreate}
-          onEventClick={openEvent}
-        />
-      )}
-
-      <EventDialog
-        draft={draft}
-        onOpenChange={(open) => !open && setDraft(null)}
-        onSave={(next) => {
-          if (!onEventsChange) return
-          if (draft?.event) {
-            onEventsChange(
-              events.map((event) => (event.id === draft.event?.id ? { ...event, ...next } : event))
-            )
-          } else {
-            onEventsChange([...events, { id: `evt-${Date.now()}`, ...next }])
-          }
-          setDraft(null)
-        }}
-        onDelete={
-          draft?.event
-            ? () => {
-                onEventsChange?.(events.filter((event) => event.id !== draft.event?.id))
-                setDraft(null)
-              }
-            : undefined
-        }
-      />
+    <div data-testid="event-calendar" className={cn("w-full overflow-hidden rounded-xl border bg-card", className)}>
+      <CalendarProvider events={events} users={users} view={view} date={date} onEventsChange={onEventsChange}>
+        <DndProvider>
+          <CalendarHeader />
+          <CalendarBody />
+        </DndProvider>
+      </CalendarProvider>
     </div>
   )
 }