{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "event-calendar-dashboard", "title": "Event Calendar Dashboard", "type": "registry:block", "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": [ "productivity", "dashboard" ], "files": [ { "path": "packages/elements-lit/src/blocks/event-calendar-dashboard/event-calendar-dashboard.ts", "content": "import { LitElement, css, html, nothing } from 'lit'\nimport {\n AlertCircle,\n CalendarDays,\n CheckCircle2,\n ChevronLeft,\n ChevronRight,\n Clock,\n GraduationCap,\n Headphones,\n ListFilter,\n MapPin,\n MousePointer2,\n Pencil,\n Plane,\n Plus,\n Search,\n Trash2,\n Users,\n Video,\n Wrench,\n X,\n type IconNode,\n} from 'lucide'\nimport { tailwind } from '../../lib/styles'\nimport { ThemeController } from '../../lib/theme'\nimport { icon } from '../../lib/icon'\n// Side-effect imports: register the composed elements for standalone use\n// (consumers who install only this block still get working primitives).\nimport '../../components/avatar/avatar'\nimport '../../components/button/button'\nimport '../../components/dialog/dialog'\nimport '../../components/input/input'\nimport '../../components/select/select'\nimport '../../components/separator/separator'\nimport '../../components/skeleton/skeleton'\nimport type { UipInput } from '../../components/input/input'\nimport type { UipSelect } from '../../components/select/select'\n\nexport interface DashboardCalendarEvent {\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 status?: string\n}\n\n/**\n * Visual + semantic config per event type. Mirrors React's EventTypeMeta,\n * except `icon` is a kebab-case icon name (resolved to lucide inside the\n * shadow root) instead of a Lucide component — components can't cross the\n * custom-element boundary from plain HTML.\n */\nexport interface DashboardEventTypeMeta {\n label: string\n icon: string\n chip: string\n bar: string\n dot: string\n glow: string\n text: string\n ring: string\n}\n\nexport const defaultDashboardEventTypes: 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: 'circle-check',\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: 'circle-alert',\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}\n\nconst NEUTRAL_META: DashboardEventTypeMeta = {\n label: 'Event',\n icon: 'calendar-days',\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\nfunction typeIcon(name: string, cls: string) {\n const map: Record = {\n video: [Video, 'video'],\n 'circle-check': [CheckCircle2, 'circle-check-big'],\n 'circle-alert': [AlertCircle, 'circle-alert'],\n plane: [Plane, 'plane'],\n headphones: [Headphones, 'headphones'],\n wrench: [Wrench, 'wrench'],\n 'graduation-cap': [GraduationCap, 'graduation-cap'],\n 'calendar-days': [CalendarDays, 'calendar-days'],\n }\n const [node, kebab] = map[name] ?? [CalendarDays, 'calendar-days']\n return icon(node, kebab, cls)\n}\n\nfunction pad(n: number): string {\n return String(n).padStart(2, '0')\n}\n\nfunction dateKey(d: Date): string {\n return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`\n}\n\nfunction dateFromKey(key: string): Date {\n const [y, m, d] = key.split('-').map(Number)\n return new Date(y!, m! - 1, d)\n}\n\n/**\n * — the registry EventCalendar block as a web component.\n *\n * A faithful month-view port of React's EventCalendar: stats strip, day\n * click / shift-click range select, side rail (selected day or range\n * summary), upcoming list, search, skeleton loading, show* toggles, and the\n * event detail dialog. `events` / `eventTypes` are settable properties\n * (arrays/objects cross the boundary as properties, not attributes).\n *\n * Deviations from React (documented): no drag-to-range (click /\n * shift-click only — pointer drag across shadow-DOM cells is unreliable),\n * no per-cell/per-event context menus (uip-context-menu trigger-wrapping\n * per cell is left to consumers), no headerActions / eventDialog / emptyDay\n * render-prop slots (use light-DOM composition instead), and\n * `eventTypes[].icon` is a kebab icon-name string rather than a Lucide\n * component. Callbacks become kebab CustomEvents: `event-click`,\n * `event-create` (dateKey), `event-edit` / `event-duplicate` /\n * `event-delete` (event), `range-change` ({ lo, hi }).\n */\nexport class UipEventCalendarDashboard extends LitElement {\n static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n // :host display can't be a utility class (the host has no template of its own).\n static styles = [tailwind, css`:host { display: block; }`]\n\n static properties = {\n events: { attribute: false },\n eventTypes: { attribute: false },\n initialDate: { attribute: 'initial-date' },\n weekStartsOn: { type: Number, attribute: 'week-starts-on' },\n loading: { type: Boolean },\n heading: {},\n description: {},\n showStats: { type: Boolean, attribute: 'show-stats' },\n showSideRail: { type: Boolean, attribute: 'show-side-rail' },\n showSearch: { type: Boolean, attribute: 'show-search' },\n showViewSelect: { type: Boolean, attribute: 'show-view-select' },\n showLegend: { type: Boolean, attribute: 'show-legend' },\n showUpcoming: { type: Boolean, attribute: 'show-upcoming' },\n view: { state: true },\n search: { state: true },\n cursorYear: { state: true },\n cursorMonth: { state: true },\n rangeStart: { state: true },\n rangeEnd: { state: true },\n dialogOpen: { state: true },\n selectedEvent: { state: true },\n }\n\n events: DashboardCalendarEvent[] = []\n eventTypes: Record = defaultDashboardEventTypes\n initialDate?: string\n weekStartsOn: 0 | 1 = 0\n loading = false\n /** React's `title` (`title` is taken by HTMLElement). */\n heading = 'Calendar'\n description = 'Schedule, meetings, and deadlines. Click 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\n private view: 'month' | 'week' | 'day' = 'month'\n private search = ''\n private cursorYear = 0\n private cursorMonth = 0\n private rangeStart = ''\n private rangeEnd = ''\n private dialogOpen = false\n private selectedEvent: DashboardCalendarEvent | null = null\n\n constructor() {\n super()\n new ThemeController(this)\n const now = new Date()\n this.cursorYear = now.getFullYear()\n this.cursorMonth = now.getMonth()\n }\n\n connectedCallback() {\n super.connectedCallback()\n this.setAttribute('data-uipkge', '')\n this.setAttribute('data-slot', 'event-calendar-dashboard')\n const base = this.initialDate ? dateFromKey(this.initialDate) : new Date()\n this.cursorYear = base.getFullYear()\n this.cursorMonth = base.getMonth()\n const today = dateKey(new Date())\n this.rangeStart = today\n this.rangeEnd = today\n }\n\n private get todayKey(): string {\n return dateKey(new Date())\n }\n\n private get monthLabel(): string {\n return new Date(this.cursorYear, this.cursorMonth, 1).toLocaleDateString('en-US', {\n month: 'long',\n year: 'numeric',\n })\n }\n\n private get weekdays(): string[] {\n const base = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']\n return this.weekStartsOn === 1 ? [...base.slice(1), base[0]!] : base\n }\n\n private get gridDays(): Array<{ key: string; date: Date; inMonth: boolean }> {\n const first = new Date(this.cursorYear, this.cursorMonth, 1)\n let offset = first.getDay()\n if (this.weekStartsOn === 1) offset = (offset + 6) % 7\n const start = new Date(this.cursorYear, this.cursorMonth, 1 - offset)\n return Array.from({ length: 42 }, (_, i) => {\n const date = new Date(start.getFullYear(), start.getMonth(), start.getDate() + i)\n return { key: dateKey(date), date, inMonth: date.getMonth() === this.cursorMonth }\n })\n }\n\n private get rangeBounds(): { lo: string; hi: string } {\n return this.rangeStart <= this.rangeEnd\n ? { lo: this.rangeStart, hi: this.rangeEnd }\n : { lo: this.rangeEnd, hi: this.rangeStart }\n }\n\n private get isRange(): boolean {\n return this.rangeBounds.lo !== this.rangeBounds.hi\n }\n\n private get rangeDayCount(): number {\n const { lo, hi } = this.rangeBounds\n return Math.round((dateFromKey(hi).getTime() - dateFromKey(lo).getTime()) / 86_400_000) + 1\n }\n\n private inRange(key: string): boolean {\n const { lo, hi } = this.rangeBounds\n return key >= lo && key <= hi\n }\n\n private metaFor(type: string): DashboardEventTypeMeta {\n return this.eventTypes[type] ?? NEUTRAL_META\n }\n\n private get typeKeys(): string[] {\n return Object.keys(this.eventTypes)\n }\n\n private get filtered(): DashboardCalendarEvent[] {\n const q = this.search.trim().toLowerCase()\n if (!q) return this.events\n return this.events.filter(\n (e) =>\n e.title.toLowerCase().includes(q) ||\n (e.description ?? '').toLowerCase().includes(q) ||\n (e.location ?? '').toLowerCase().includes(q),\n )\n }\n\n private get eventsByDate(): Map {\n const map = new Map()\n for (const e of this.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 }\n\n private get monthCounts(): Record & { total: number } {\n const out: Record & { total: number } = { total: 0 }\n for (const k of this.typeKeys) out[k] = 0\n for (const e of this.events) {\n const d = new Date(`${e.date}T00:00:00`)\n if (d.getFullYear() === this.cursorYear && d.getMonth() === this.cursorMonth) {\n if (out[e.type] !== undefined) out[e.type]!++\n out.total++\n }\n }\n return out\n }\n\n private get typeStats(): Record {\n const out: Record = {}\n for (const k of this.typeKeys) out[k] = { weeks: [0, 0, 0, 0, 0, 0], next: null }\n const firstOffset = new Date(this.cursorYear, this.cursorMonth, 1).getDay()\n for (const e of this.events) {\n const d = new Date(`${e.date}T00:00:00`)\n if (d.getFullYear() === this.cursorYear && d.getMonth() === this.cursorMonth && 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 this.typeKeys) {\n out[t]!.next =\n this.events\n .filter((e) => e.type === t && e.date >= this.todayKey)\n .sort((a, b) => a.date.localeCompare(b.date) || a.start.localeCompare(b.start))[0] ?? null\n }\n return out\n }\n\n private fmtNextDate(key: string): string {\n if (key === this.todayKey) return 'Today'\n return dateFromKey(key).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })\n }\n\n private get rangeEvents(): DashboardCalendarEvent[] {\n const { lo, hi } = this.rangeBounds\n return this.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 }\n\n private get selectedDayEvents(): DashboardCalendarEvent[] {\n return this.eventsByDate.get(this.rangeStart) ?? []\n }\n\n private get upcoming(): DashboardCalendarEvent[] {\n return this.filtered\n .filter((e) => e.date > this.todayKey)\n .sort((a, b) => a.date.localeCompare(b.date) || a.start.localeCompare(b.start))\n .slice(0, 4)\n }\n\n private openEvent(e: DashboardCalendarEvent) {\n this.selectedEvent = e\n this.dialogOpen = true\n this.dispatchEvent(new CustomEvent('event-click', { detail: e, bubbles: true, composed: true }))\n }\n\n private prevMonth() {\n const d = new Date(this.cursorYear, this.cursorMonth - 1, 1)\n this.cursorYear = d.getFullYear()\n this.cursorMonth = d.getMonth()\n }\n\n private nextMonth() {\n const d = new Date(this.cursorYear, this.cursorMonth + 1, 1)\n this.cursorYear = d.getFullYear()\n this.cursorMonth = d.getMonth()\n }\n\n private goToToday() {\n const now = new Date()\n this.cursorYear = now.getFullYear()\n this.cursorMonth = now.getMonth()\n const key = dateKey(now)\n this.rangeStart = key\n this.rangeEnd = key\n this.emitRange()\n }\n\n private clearRange() {\n this.rangeEnd = this.rangeStart\n this.emitRange()\n }\n\n private onCellClick(key: string, e: MouseEvent) {\n if (e.shiftKey) {\n this.rangeEnd = key\n } else {\n this.rangeStart = key\n this.rangeEnd = key\n }\n this.emitRange()\n }\n\n private emitRange() {\n this.dispatchEvent(\n new CustomEvent('range-change', { detail: this.rangeBounds, bubbles: true, composed: true }),\n )\n }\n\n private fmtDayLong(key: string): string {\n return dateFromKey(key).toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' })\n }\n\n private fmtDayShort(key: string): string {\n return dateFromKey(key).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })\n }\n\n private initials(name: string): string {\n return name\n .split(' ')\n .map((n) => n[0])\n .join('')\n .slice(0, 2)\n }\n\n private cellRangeClass(key: string, inMonth: boolean): string {\n const { lo, hi } = this.rangeBounds\n if (!this.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 render() {\n const monthCounts = this.monthCounts\n const typeStats = this.typeStats\n const gridDays = this.gridDays\n const eventsByDate = this.eventsByDate\n const todayKey = this.todayKey\n const rangeEvents = this.rangeEvents\n const selectedDayEvents = this.selectedDayEvents\n const upcoming = this.upcoming\n const rangeTypeCounts: Record = {}\n for (const k of this.typeKeys) rangeTypeCounts[k] = 0\n for (const e of rangeEvents) {\n if (rangeTypeCounts[e.type] !== undefined) rangeTypeCounts[e.type]!++\n }\n return html`\n
\n
\n
\n

${this.heading}

\n ${this.description ? html`

${this.description}

` : nothing}\n
\n
\n ${this.showSearch\n ? html`
\n {\n this.search = (e.target as UipInput).value\n }}\n >\n ${icon(Search, 'search', 'size-3.5')}\n \n
`\n : nothing}\n ${this.showViewSelect\n ? html` {\n this.view = (e.target as UipSelect).value as 'month' | 'week' | 'day'\n }}\n >\n \n \n \n `\n : nothing}\n \n this.dispatchEvent(new CustomEvent('event-create', { detail: this.rangeStart, bubbles: true, composed: true }))}\n >\n ${icon(Plus, 'plus', 'size-3.5')} New event\n \n
\n
\n\n ${this.showStats\n ? html`\n
\n ${this.typeKeys.map((key) => {\n const meta = this.eventTypes[key]!\n const searched = meta.label.toLowerCase() === this.search.toLowerCase()\n return html`\n {\n this.search = searched ? '' : meta.label.toLowerCase()\n }}\n >\n ${typeIcon(\n meta.icon,\n [\n 'pointer-events-none absolute -top-4 -right-4 size-24 opacity-[0.06] transition-opacity group-hover:opacity-[0.12]',\n meta.text,\n ].join(' '),\n )}\n
\n
\n \n

${meta.label}

\n
\n \n ${typeIcon(meta.icon, 'size-3.5')}\n
\n
\n
\n

${monthCounts[key] ?? 0}

\n

this month

\n
\n
\n ${typeStats[key]!.weeks.slice(0, 6).map(\n (n, i) => html`\n 0 ? meta.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} ${meta.label.toLowerCase()}${n === 1 ? '' : 's'}\"\n >\n `,\n )}\n
\n
\n ${typeStats[key]!.next\n ? html`\n

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

\n

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

\n `\n : html`\n

No upcoming

\n

All clear

\n `}\n
\n \n `\n })}\n
\n `\n : nothing}\n\n
\n
\n
\n
\n \n ${icon(ChevronLeft, 'chevron-left', 'size-4')}\n \n \n ${icon(ChevronRight, 'chevron-right', 'size-4')}\n \n Today\n

${this.monthLabel}

\n
\n
\n ${this.isRange\n ? html`\n \n ${icon(MousePointer2, 'mouse-pointer-2', 'size-3')}\n ${this.rangeDayCount} days, ${rangeEvents.length} events \n \n
\n `\n : nothing}\n
\n ${icon(CalendarDays, 'calendar-days', 'size-3')}\n ${monthCounts.total} event${monthCounts.total === 1 ? '' : 's'} this month \n
\n
\n
\n\n
\n ${this.weekdays.map((w) => html`
${w}
`)}\n
\n\n
\n ${this.loading\n ? Array.from({ length: 42 }).map(\n () => html`\n
\n \n \n
\n `,\n )\n : gridDays.map(\n (d, i) => html`\n = 35 ? 'border-b-0' : '',\n this.cellRangeClass(d.key, d.inMonth),\n !d.inMonth && !this.inRange(d.key) ? 'text-muted-foreground/60' : '',\n ].join(' ')}\n @click=${(e: MouseEvent) => this.onCellClick(d.key, e)}\n >\n
\n \n ${d.date.getDate()}\n \n ${(eventsByDate.get(d.key)?.length ?? 0) > 0\n ? html`${eventsByDate.get(d.key)!.length}`\n : nothing}\n
\n
\n ${(eventsByDate.get(d.key) ?? []).slice(0, 2).map(\n (e) => html`\n {\n ev.stopPropagation()\n this.openEvent(e)\n }}\n >\n ${e.start}\n ${e.title}\n \n `,\n )}\n ${(eventsByDate.get(d.key)?.length ?? 0) > 2\n ? html`+${eventsByDate.get(d.key)!.length - 2} more`\n : nothing}\n
\n \n `,\n )}\n
\n\n ${this.showLegend\n ? html`\n
\n ${icon(ListFilter, 'list-filter', 'size-3')}\n ${this.typeKeys.map(\n (key) => html`\n
\n \n ${this.eventTypes[key]!.label}\n
\n `,\n )}\n Tip: click or shift-click to range. Click an event for details.\n
\n `\n : nothing}\n
\n\n ${this.showSideRail\n ? html`\n \n `\n : nothing}\n \n\n ) => {\n this.dialogOpen = e.detail.open\n }}\n >\n ${this.selectedEvent\n ? html`\n
\n ${this.selectedEvent.description\n ? html`

${this.selectedEvent.description}

`\n : nothing}\n \n
\n
\n ${icon(Clock, 'clock', 'text-muted-foreground size-4')}\n ${this.selectedEvent.date} ${this.selectedEvent.start} - ${this.selectedEvent.end} \n
\n ${this.selectedEvent.location\n ? html`
\n ${icon(MapPin, 'map-pin', 'text-muted-foreground size-4')}\n ${this.selectedEvent.location}\n
`\n : nothing}\n ${this.selectedEvent.attendees?.length\n ? html`
\n ${icon(Users, 'users', 'text-muted-foreground mt-0.5 size-4')}\n
\n ${this.selectedEvent.attendees.map(\n (a) => html`\n
\n \n \n ${this.initials(a)}\n \n \n ${a}\n
\n `,\n )}\n
\n
`\n : nothing}\n
\n
\n
\n {\n this.dispatchEvent(\n new CustomEvent('event-edit', { detail: this.selectedEvent, bubbles: true, composed: true }),\n )\n this.dialogOpen = false\n }}\n >\n ${icon(Pencil, 'pencil', 'size-3.5')} Edit\n \n {\n this.dispatchEvent(\n new CustomEvent('event-delete', { detail: this.selectedEvent, bubbles: true, composed: true }),\n )\n this.dialogOpen = false\n }}\n >\n ${icon(Trash2, 'trash-2', 'size-3.5')} Cancel event\n \n
\n `\n : nothing}\n \n \n `\n }\n}\n\ncustomElements.get('uip-event-calendar-dashboard') ||\n customElements.define('uip-event-calendar-dashboard', UipEventCalendarDashboard)\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'uip-event-calendar-dashboard': UipEventCalendarDashboard\n }\n}\n", "type": "registry:file", "target": "src/uip/blocks/event-calendar-dashboard/event-calendar-dashboard.ts" } ], "dependencies": [ "lit", "lucide" ], "registryDependencies": [ "https://uipkge.dev/r/lit/avatar.json", "https://uipkge.dev/r/lit/button.json", "https://uipkge.dev/r/lit/dialog.json", "https://uipkge.dev/r/lit/input.json", "https://uipkge.dev/r/lit/lit-core.json", "https://uipkge.dev/r/lit/select.json", "https://uipkge.dev/r/lit/separator.json", "https://uipkge.dev/r/lit/skeleton.json" ] }