{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "event-calendar", "title": "Event Calendar", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/event-calendar/EventCalendar.tsx", "content": "'use client'\n\n/**\n * EventCalendar -- a full month-view event calendar with stats strip,\n * drag/shift range select, side rail (selected day or range summary),\n * upcoming list, and per-event/per-cell context menus.\n *\n * Configurable surface:\n * - events / onEventsChange CalendarEvent[] the source of truth\n * - eventTypes Record visual config per type\n * - initialDate YYYY-MM-DD which month opens first\n * - weekStartsOn 0 | 1 Sunday vs Monday\n * - loading skeleton state during fetch\n * - title / description / show* toggles per pane\n *\n * Render-prop slots:\n * - headerActions extra controls to the right of search/view/new\n * - eventDialog full override of the detail dialog body\n * - emptyDay node shown when a selected day has no events\n *\n * Callbacks:\n * - onEventClick(event)\n * - onEventCreate(dateKey) requested from \"New event\" or\n * the per-cell context menu\n * - onEventEdit / onEventDuplicate / onEventDelete(event)\n * - onRangeChange({ lo, hi }) fires when the selection range moves\n */\nimport * as React from 'react'\nimport {\n ChevronLeft,\n ChevronRight,\n Plus,\n Clock,\n MapPin,\n Users,\n Search,\n CalendarDays,\n ListFilter,\n Sparkles,\n Copy,\n X,\n CalendarPlus,\n ArrowRight,\n MousePointer2,\n Pencil,\n Trash2,\n Eye,\n CopyPlus,\n} from 'lucide-react'\nimport { useMonthGrid, dateFromKey } from '@/lib/use-month-grid'\nimport type { CalendarEvent, EventTypeMeta } from './types'\nimport { defaultEventTypes } from './defaults'\n\nexport type { CalendarEvent, EventTypeMeta } from './types'\nexport { defaultEventTypes } from './defaults'\nimport { Button } from '@/components/ui/button'\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n} from '@/components/ui/dialog'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\nimport { Separator } from '@/components/ui/separator'\nimport { Skeleton } from '@/components/ui/skeleton'\nimport { Input } from '@/components/ui/input'\nimport {\n ContextMenu,\n ContextMenuContent,\n ContextMenuItem,\n ContextMenuSeparator,\n ContextMenuShortcut,\n ContextMenuTrigger,\n ContextMenuLabel,\n} from '@/components/ui/context-menu'\n\nexport interface EventCalendarProps {\n /** Source of truth. Pair with onEventsChange. */\n events?: CalendarEvent[]\n onEventsChange?: (value: CalendarEvent[]) => void\n /** Visual + semantic theme per event type. Falls back to defaultEventTypes. */\n eventTypes?: Record\n /** YYYY-MM-DD -- month to open first. Defaults to today. */\n initialDate?: string\n /** 0 = Sunday (default), 1 = Monday. */\n weekStartsOn?: 0 | 1\n /** Show the skeleton placeholders instead of cells / rail rows. */\n loading?: boolean\n title?: string\n description?: string\n /** Default = true. Stats strip across the top. */\n showStats?: boolean\n /** Default = true. Side rail to the right of the grid. */\n showSideRail?: boolean\n /** Default = true. Search input in the header. */\n showSearch?: boolean\n /** Default = true. Month/Week/Day select. Week/Day not implemented yet\n * -- the select is purely visual until you wire up the modes. */\n showViewSelect?: boolean\n /** Default = true. Legend strip under the grid. */\n showLegend?: boolean\n /** Default = true. \"Up next\" pane under the side rail. */\n showUpcoming?: boolean\n onEventClick?: (event: CalendarEvent) => void\n onEventCreate?: (dateKey: string) => void\n onEventEdit?: (event: CalendarEvent) => void\n onEventDuplicate?: (event: CalendarEvent) => void\n onEventDelete?: (event: CalendarEvent) => void\n onRangeChange?: (bounds: { lo: string; hi: string }) => void\n /** Render-prop override for the controls to the right of search/view. */\n headerActions?: React.ReactNode\n /** Render-prop override for the dialog body. */\n eventDialog?: (event: CalendarEvent) => React.ReactNode\n /** Render-prop override for the empty selected-day state. */\n emptyDay?: React.ReactNode\n}\n\nexport function EventCalendar({\n events = [],\n onEventsChange: _onEventsChange,\n eventTypes = defaultEventTypes,\n initialDate,\n weekStartsOn = 0,\n loading = false,\n title = 'Calendar',\n description = 'Schedule, meetings, and deadlines. Drag or shift-click to select a range.',\n showStats = true,\n showSideRail = true,\n showSearch = true,\n showViewSelect = true,\n showLegend = true,\n showUpcoming = true,\n onEventClick,\n onEventCreate,\n onEventEdit,\n onEventDuplicate,\n onEventDelete,\n onRangeChange,\n headerActions,\n eventDialog,\n emptyDay,\n}: EventCalendarProps) {\n const [view, setView] = React.useState<'month' | 'week' | 'day'>('month')\n const [eventOpen, setEventOpen] = React.useState(false)\n const [selectedEvent, setSelectedEvent] = React.useState(null)\n const [search, setSearch] = React.useState('')\n\n const {\n todayKey,\n cursor,\n monthLabel,\n gridDays,\n weekdays,\n rangeStart,\n rangeBounds,\n rangeDayCount,\n isRange,\n inRange,\n prevMonth,\n nextMonth,\n goToToday,\n selectWeekOf,\n clearRange,\n onCellMouseDown,\n onCellMouseEnter,\n endDrag,\n } = useMonthGrid({ initialDate, weekStartsOn })\n\n React.useEffect(() => {\n onRangeChange?.(rangeBounds)\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [rangeBounds.lo, rangeBounds.hi])\n\n // Fall through to a neutral style for unknown event types so the calendar\n // doesn't crash when a consumer passes a type that's missing from the map.\n const neutralMeta: EventTypeMeta = {\n label: 'Event',\n icon: CalendarDays,\n chip: 'bg-muted text-muted-foreground ring-muted-foreground/20',\n bar: 'bg-muted-foreground',\n dot: 'bg-muted-foreground',\n glow: 'bg-muted-foreground/10',\n text: 'text-muted-foreground',\n ring: 'hover:ring-muted-foreground/30',\n }\n function metaFor(type: string): EventTypeMeta {\n return eventTypes[type] ?? neutralMeta\n }\n\n const typeKeys = React.useMemo(() => Object.keys(eventTypes), [eventTypes])\n\n const filtered = React.useMemo(() => {\n const q = search.trim().toLowerCase()\n if (!q) return events\n return events.filter(\n (e) =>\n e.title.toLowerCase().includes(q) ||\n (e.description ?? '').toLowerCase().includes(q) ||\n (e.location ?? '').toLowerCase().includes(q),\n )\n }, [events, search])\n\n const eventsByDate = React.useMemo(() => {\n const map = new Map()\n for (const e of filtered) {\n if (!map.has(e.date)) map.set(e.date, [])\n map.get(e.date)!.push(e)\n }\n for (const arr of map.values()) arr.sort((a, b) => a.start.localeCompare(b.start))\n return map\n }, [filtered])\n\n const monthCounts = React.useMemo(() => {\n const y = cursor.getFullYear()\n const m = cursor.getMonth()\n const out: Record & { total: number } = { total: 0 }\n for (const k of typeKeys) out[k] = 0\n for (const e of events) {\n const d = new Date(e.date)\n if (d.getFullYear() === y && d.getMonth() === m) {\n if (out[e.type] !== undefined) out[e.type]!++\n out.total++\n }\n }\n return out\n }, [cursor, typeKeys, events])\n\n const typeStats = React.useMemo(() => {\n const y = cursor.getFullYear()\n const m = cursor.getMonth()\n const out: Record = {}\n for (const k of typeKeys) out[k] = { weeks: [0, 0, 0, 0, 0, 0], next: null }\n const firstOffset = new Date(y, m, 1).getDay()\n\n for (const e of events) {\n const d = new Date(e.date)\n if (d.getFullYear() === y && d.getMonth() === m && out[e.type]) {\n const week = Math.floor((d.getDate() - 1 + firstOffset) / 7)\n out[e.type]!.weeks[week]!++\n }\n }\n for (const t of typeKeys) {\n const next = events\n .filter((e) => e.type === t && e.date >= todayKey)\n .sort((a, b) => a.date.localeCompare(b.date) || a.start.localeCompare(b.start))[0]\n out[t]!.next = next ?? null\n }\n return out\n }, [cursor, typeKeys, events, todayKey])\n\n function fmtNextDate(key: string) {\n if (key === todayKey) return 'Today'\n return dateFromKey(key).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })\n }\n\n const rangeEvents = React.useMemo(() => {\n const { lo, hi } = rangeBounds\n return filtered\n .filter((e) => e.date >= lo && e.date <= hi)\n .sort((a, b) => a.date.localeCompare(b.date) || a.start.localeCompare(b.start))\n }, [filtered, rangeBounds])\n\n const rangeTypeCounts = React.useMemo(() => {\n const init: Record = {}\n for (const k of typeKeys) init[k] = 0\n for (const e of rangeEvents) {\n if (init[e.type] !== undefined) init[e.type]!++\n }\n return init\n }, [typeKeys, rangeEvents])\n\n const selectedDayEvents = eventsByDate.get(rangeStart) ?? []\n\n const upcoming = React.useMemo(\n () =>\n filtered\n .filter((e) => e.date > todayKey)\n .sort((a, b) => a.date.localeCompare(b.date) || a.start.localeCompare(b.start))\n .slice(0, 4),\n [filtered, todayKey],\n )\n\n function openEvent(e: CalendarEvent) {\n setSelectedEvent(e)\n setEventOpen(true)\n onEventClick?.(e)\n }\n\n function copyDate(key: string) {\n if (typeof navigator !== 'undefined' && navigator.clipboard) {\n navigator.clipboard.writeText(key).catch(() => {\n /* clipboard may be denied; nothing to do */\n })\n }\n }\n\n function fmtDayLong(key: string) {\n return dateFromKey(key).toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' })\n }\n function fmtDayShort(key: string) {\n return dateFromKey(key).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })\n }\n\n function initials(name: string) {\n return name\n .split(' ')\n .map((n) => n[0])\n .join('')\n .slice(0, 2)\n }\n\n function cellRangeClass(key: string, inMonth: boolean) {\n const { lo, hi } = rangeBounds\n if (!inRange(key)) return inMonth ? 'bg-background hover:bg-accent/40' : 'bg-muted/20 hover:bg-muted/30'\n if (key === lo && key === hi) return 'bg-accent/30 ring-1 ring-inset ring-primary/60'\n let cls = 'bg-primary/10 hover:bg-primary/15'\n if (key === lo) cls += ' ring-1 ring-inset ring-primary/60'\n if (key === hi) cls += ' ring-1 ring-inset ring-primary/60'\n return cls\n }\n\n return (\n
\n {/* Header */}\n
\n
\n

{title}

\n {description &&

{description}

}\n
\n
\n {showSearch && (\n
\n \n setSearch(e.target.value)}\n placeholder=\"Search events\"\n className=\"h-8 w-56 pl-8 text-xs\"\n />\n
\n )}\n {showViewSelect && (\n \n )}\n {headerActions ?? (\n \n )}\n
\n
\n\n {/* Stats strip */}\n {showStats && (\n
\n {typeKeys.map((key) => {\n const Icon = eventTypes[key]!.icon\n return (\n \n setSearch(\n eventTypes[key]!.label.toLowerCase() === search.toLowerCase()\n ? ''\n : eventTypes[key]!.label.toLowerCase(),\n )\n }\n >\n \n \n\n
\n
\n \n

\n {eventTypes[key]!.label}\n

\n
\n \n \n
\n
\n\n
\n

{monthCounts[key] ?? 0}

\n

this month

\n
\n\n
\n {typeStats[key]!.weeks.slice(0, 6).map((n, i) => (\n 0 ? eventTypes[key]!.bar : 'bg-muted/40',\n n > 0 ? 'opacity-70 group-hover:opacity-100' : '',\n ].join(' ')}\n style={{ height: n > 0 ? `${Math.min(100, 30 + n * 35)}%` : '20%' }}\n title={`Week ${i + 1}: ${n} ${eventTypes[key]!.label.toLowerCase()}${n === 1 ? '' : 's'}`}\n />\n ))}\n
\n\n
\n {typeStats[key]!.next ? (\n <>\n

\n Next {fmtNextDate(typeStats[key]!.next!.date)}\n

\n

{typeStats[key]!.next!.title}

\n \n ) : (\n <>\n

No upcoming

\n

All clear

\n \n )}\n
\n \n )\n })}\n
\n )}\n\n {/* Main: calendar + side rail */}\n
\n {/* Month grid */}\n
\n
\n
\n \n \n \n

{monthLabel}

\n
\n
\n {isRange && (\n
\n \n \n {rangeDayCount} days, {rangeEvents.length} events\n \n \n
\n )}\n
\n \n \n {monthCounts.total} event{monthCounts.total === 1 ? '' : 's'} this month\n \n
\n
\n
\n\n
\n {weekdays.map((w) => (\n
\n {w}\n
\n ))}\n
\n\n
\n {loading ? (\n Array.from({ length: 42 }).map((_, i) => (\n
\n \n \n
\n ))\n ) : (\n gridDays.map((d, i) => (\n \n \n = 35 ? 'border-b-0' : '',\n cellRangeClass(d.key, d.inMonth),\n !d.inMonth && !inRange(d.key) ? 'text-muted-foreground/60' : '',\n ].join(' ')}\n onMouseDown={(e) => onCellMouseDown(d.key, e)}\n onMouseEnter={() => onCellMouseEnter(d.key)}\n >\n
\n \n {d.date.getDate()}\n \n {(eventsByDate.get(d.key)?.length ?? 0) > 0 && (\n \n {eventsByDate.get(d.key)!.length}\n \n )}\n
\n
\n {(eventsByDate.get(d.key) ?? []).slice(0, 2).map((e) => (\n \n \n ev.stopPropagation()}\n onClick={(ev) => {\n ev.stopPropagation()\n openEvent(e)\n }}\n onContextMenu={(ev) => ev.stopPropagation()}\n >\n {e.start}\n {e.title}\n \n \n \n \n \n {e.title}\n \n \n openEvent(e)}>\n View details\n Enter\n \n onEventEdit?.(e)}>\n Edit\n \n onEventDuplicate?.(e)}>\n Duplicate\n \n copyDate(e.date)}>\n Copy date\n \n \n onEventDelete?.(e)}\n >\n Cancel event\n \n \n \n ))}\n {(eventsByDate.get(d.key)?.length ?? 0) > 2 && (\n \n +{eventsByDate.get(d.key)!.length - 2} more\n \n )}\n
\n \n \n \n {fmtDayLong(d.key)}\n \n onEventCreate?.(d.key)}>\n New event\n N\n \n selectWeekOf(d.key)}>\n Select this week\n \n \n copyDate(d.key)}>\n Copy date\n {d.key}\n \n \n Go to today\n \n {isRange && (\n \n Clear range\n \n )}\n \n \n ))\n )}\n
\n\n {showLegend && (\n
\n \n {typeKeys.map((key) => (\n
\n \n {eventTypes[key]!.label}\n
\n ))}\n Tip: drag or shift-click to range. Right-click for actions.\n
\n )}\n
\n\n {/* Side rail */}\n {showSideRail && (\n \n )}\n
\n\n {/* Event Detail Dialog */}\n \n {selectedEvent && (\n \n {eventDialog ? (\n eventDialog(selectedEvent)\n ) : (\n <>\n \n
\n \n {React.createElement(metaFor(selectedEvent.type).icon, { className: 'size-4' })}\n
\n
\n {selectedEvent.title}\n \n {metaFor(selectedEvent.type).label}\n {selectedEvent.status && {selectedEvent.status}}\n \n
\n \n \n
\n {selectedEvent.description && (\n

{selectedEvent.description}

\n )}\n \n
\n
\n \n \n {selectedEvent.date} {selectedEvent.start} - {selectedEvent.end}\n \n
\n {selectedEvent.location && (\n
\n \n {selectedEvent.location}\n
\n )}\n {selectedEvent.attendees?.length ? (\n
\n \n
\n {selectedEvent.attendees.map((a) => (\n \n \n \n {initials(a)}\n \n \n {a}\n
\n ))}\n
\n
\n ) : null}\n
\n \n \n {\n onEventEdit?.(selectedEvent)\n setEventOpen(false)\n }}\n >\n Edit\n \n {\n onEventDelete?.(selectedEvent)\n setEventOpen(false)\n }}\n >\n Cancel event\n \n \n \n )}\n \n )}\n \n \n )\n}\n", "type": "registry:block", "target": "~/components/blocks/event-calendar/EventCalendar.tsx" }, { "path": "packages/registry-react/blocks/event-calendar/defaults.ts", "content": "import { Video, CheckCircle2, AlertCircle, Plane } from 'lucide-react'\nimport type { EventTypeMeta } from './types'\n\n/**\n * Default event-type theme. Mirrors the boilerplate dashboard but routes\n * every color through OKLCH tokens (chart-1..4, success, warning) so it\n * follows light/dark mode and any consumer theme override.\n *\n * Override per-type or replace the whole map via ``.\n */\nexport const defaultEventTypes: Record = {\n meeting: {\n label: 'Meeting',\n icon: Video,\n chip: 'bg-chart-1/10 text-chart-1 ring-chart-1/20',\n bar: 'bg-chart-1',\n dot: 'bg-chart-1',\n glow: 'bg-chart-1/10',\n text: 'text-chart-1',\n ring: 'hover:ring-chart-1/30',\n },\n task: {\n label: 'Task',\n icon: CheckCircle2,\n chip: 'bg-success/10 text-success ring-success/20',\n bar: 'bg-success',\n dot: 'bg-success',\n glow: 'bg-success/10',\n text: 'text-success',\n ring: 'hover:ring-success/30',\n },\n reminder: {\n label: 'Reminder',\n icon: AlertCircle,\n chip: 'bg-warning/10 text-warning ring-warning/20',\n bar: 'bg-warning',\n dot: 'bg-warning',\n glow: 'bg-warning/10',\n text: 'text-warning',\n ring: 'hover:ring-warning/30',\n },\n travel: {\n label: 'Travel',\n icon: Plane,\n chip: 'bg-chart-3/10 text-chart-3 ring-chart-3/20',\n bar: 'bg-chart-3',\n dot: 'bg-chart-3',\n glow: 'bg-chart-3/10',\n text: 'text-chart-3',\n ring: 'hover:ring-chart-3/30',\n },\n}", "type": "registry:block", "target": "~/components/blocks/event-calendar/defaults.ts" }, { "path": "packages/registry-react/blocks/event-calendar/types.ts", "content": "import type { LucideIcon } from 'lucide-react'\n\n/**\n * Single event on the calendar. `type` is a free-form string (e.g. `'meeting'`,\n * `'task'`, anything) -- the matching key must exist in the `eventTypes` map\n * passed to . Unknown types fall through to a neutral style.\n */\nexport interface CalendarEvent {\n id: string\n title: string\n /** YYYY-MM-DD */\n date: string\n /** HH:mm */\n start: string\n /** HH:mm */\n end: string\n type: string\n description?: string\n location?: string\n attendees?: string[]\n /** Free-form status tag rendered next to the type label in the dialog. */\n status?: string\n}\n\n/**\n * Visual + semantic config per event type. The default theme uses OKLCH\n * tokens (chart-1..4, success, warning) so consumers get sensible colors\n * out of the box, but you can override per-type to wire any palette.\n */\nexport interface EventTypeMeta {\n label: string\n /** Lucide icon component for the stat tile + chip + dialog header. */\n icon: LucideIcon\n /** Tailwind classes for the colored chip on event rows + dialog header.\n * Shape: `bg-X/10 text-X ring-X/20` is what the default theme uses. */\n chip: string\n /** Tailwind class for the vertical bar to the left of side-rail rows. */\n bar: string\n /** Tailwind class for the legend / stat-tile dot. */\n dot: string\n /** Tailwind class for the soft watermark glow behind stat tiles. */\n glow: string\n /** Tailwind class for the small text accent on \"Next: ...\" date labels. */\n text: string\n /** Tailwind class for the stat-tile hover ring. */\n ring: string\n}", "type": "registry:block", "target": "~/components/blocks/event-calendar/types.ts" }, { "path": "packages/registry-react/blocks/event-calendar/index.ts", "content": "export { EventCalendar, type EventCalendarProps } from './EventCalendar'\nexport type { CalendarEvent, EventTypeMeta } from './types'\nexport { defaultEventTypes } from './defaults'", "type": "registry:block", "target": "~/components/blocks/event-calendar/index.ts" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/use-month-grid.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/dialog.json", "https://uipkge.dev/r/react/select.json", "https://uipkge.dev/r/react/avatar.json", "https://uipkge.dev/r/react/separator.json", "https://uipkge.dev/r/react/skeleton.json", "https://uipkge.dev/r/react/input.json", "https://uipkge.dev/r/react/context-menu.json" ], "description": "Month-view event calendar with stats strip, drag/shift range select, side rail (selected day or range summary), upcoming list, and per-cell/per-event context menus. events / onEventsChange binds the source of truth; eventTypes config maps each type key to its label/icon/color theme so swapping the visual palette is one prop. Built on the use-month-grid headless hook.", "categories": [ "dashboard" ] }