{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "event-calendar-dashboard", "title": "Event Calendar Dashboard", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/event-calendar-dashboard/event-calendar-dashboard.component.ts", "content": "// EventCalendar -- a full month-view event calendar with stats strip, drag/shift range\n// select, side rail (selected day or range summary), upcoming list, and per-event/per-cell\n// context menus. Port of the Vue/React block 1:1 -- same month-grid + range-select behavior\n// (inlined here; Angular has no useMonthGrid composable), same stats math, same copy.\n//\n// Configurable surface:\n// - [events] / (eventsChange) 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// Emits: eventClick(event), eventCreate(dateKey), eventEdit / eventDuplicate /\n// eventDelete(event), rangeChange({ lo, hi }).\nimport {\n ChangeDetectionStrategy,\n Component,\n ContentChild,\n DestroyRef,\n EventEmitter,\n Input,\n OnInit,\n Output,\n TemplateRef,\n booleanAttribute,\n computed,\n effect,\n inject,\n signal,\n} from '@angular/core'\nimport { NgTemplateOutlet } from '@angular/common'\nimport {\n ArrowRight,\n CalendarDays,\n CalendarPlus,\n Clock,\n Copy,\n CopyPlus,\n Eye,\n ListFilter,\n LucideAngularModule,\n MapPin,\n MousePointer2,\n Pencil,\n Plus,\n Search,\n Trash2,\n Users,\n X,\n ChevronLeft,\n ChevronRight,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiAvatarComponent, UiAvatarFallbackComponent } from '@/ui/avatar/avatar.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiContextMenuComponent,\n UiContextMenuContentComponent,\n UiContextMenuItemComponent,\n UiContextMenuLabelComponent,\n UiContextMenuSeparatorComponent,\n UiContextMenuShortcutComponent,\n UiContextMenuTriggerComponent,\n} from '@/ui/context-menu/context-menu.component'\nimport {\n UiDialogComponent,\n UiDialogContentComponent,\n UiDialogDescriptionComponent,\n UiDialogFooterComponent,\n UiDialogHeaderComponent,\n UiDialogTitleComponent,\n} from '@/ui/dialog/dialog.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport {\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n} from '@/ui/select/select.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport { UiSkeletonComponent } from '@/ui/skeleton/skeleton.component'\nimport type { CalendarEvent, EventTypeMeta } from './types'\nimport { defaultEventTypes } from './defaults'\n\nexport type { CalendarEvent, EventTypeMeta }\n\nexport type DateKey = string // YYYY-MM-DD\n\nexport function isoDate(d: Date): DateKey {\n const y = d.getFullYear()\n const m = String(d.getMonth() + 1).padStart(2, '0')\n const day = String(d.getDate()).padStart(2, '0')\n return `${y}-${m}-${day}`\n}\n\nexport function dateFromKey(k: DateKey): Date {\n return new Date(k + 'T00:00:00')\n}\n\nexport function dayDiff(a: DateKey, b: DateKey): number {\n return Math.round((dateFromKey(b).getTime() - dateFromKey(a).getTime()) / 86400000)\n}\n\ninterface GridDay {\n date: Date\n key: DateKey\n inMonth: boolean\n}\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-event-calendar-dashboard, [ui-event-calendar-dashboard]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n NgTemplateOutlet,\n LucideAngularModule,\n UiAvatarComponent,\n UiAvatarFallbackComponent,\n UiButtonComponent,\n UiContextMenuComponent,\n UiContextMenuContentComponent,\n UiContextMenuItemComponent,\n UiContextMenuLabelComponent,\n UiContextMenuSeparatorComponent,\n UiContextMenuShortcutComponent,\n UiContextMenuTriggerComponent,\n UiDialogComponent,\n UiDialogContentComponent,\n UiDialogDescriptionComponent,\n UiDialogFooterComponent,\n UiDialogHeaderComponent,\n UiDialogTitleComponent,\n UiInputComponent,\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n UiSeparatorComponent,\n UiSkeletonComponent,\n ],\n template: `\n
\n \n
\n
\n

{{ title }}

\n @if (description) {\n

{{ description }}

\n }\n
\n
\n @if (showSearch) {\n
\n \n \n
\n }\n @if (showViewSelect) {\n \n \n \n Month\n Week\n Day\n \n \n }\n @if (headerActionsTpl) {\n \n } @else {\n \n }\n
\n
\n\n \n @if (showStats) {\n
\n @for (key of typeKeys(); track key) {\n \n }\n
\n }\n\n \n
\n \n
\n
\n
\n \n \n \n \n \n \n \n

{{ monthLabel() }}

\n
\n
\n @if (isRange()) {\n \n \n {{ rangeDayCount() }} days, {{ rangeEvents().length }} events\n \n
\n }\n
\n \n {{ monthCounts().total }} event{{ monthCounts().total === 1 ? '' : 's' }} this month\n
\n
\n
\n\n
\n @for (w of weekdays(); track w) {\n
{{ w }}
\n }\n
\n\n
\n @if (loading) {\n @for (i of skeletonCells; track i) {\n
\n \n \n
\n }\n } @else {\n @for (d of gridDays(); track d.key; let i = $index) {\n \n \n \n {{ d.date.getDate() }}\n @if ((eventsByDate().get(d.key)?.length ?? 0) > 0) {\n \n {{ eventsByDate().get(d.key)!.length }}\n \n }\n \n \n @for (e of (eventsByDate().get(d.key) ?? []).slice(0, 2); track e.id) {\n \n \n {{ e.start }}\n {{ e.title }}\n \n \n \n \n {{ e.title }}\n \n \n \n View details\n Enter\n \n \n Edit\n \n \n Duplicate\n \n \n Copy date\n \n \n \n Cancel event\n \n \n \n }\n @if ((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 \n \n New event\n N\n \n \n Select this week\n \n \n \n Copy date\n {{ d.key }}\n \n \n Go to today\n \n @if (isRange()) {\n \n Clear range\n \n }\n \n \n }\n }\n
\n\n @if (showLegend) {\n
\n \n @for (key of typeKeys(); track key) {\n
\n \n {{ meta(key).label }}\n
\n }\n Tip: drag or shift-click to range. Right-click for actions.\n
\n }\n
\n\n \n @if (showSideRail) {\n
\n } @else {\n
\n
\n
\n
\n

\n Range, {{ rangeDayCount() }} days\n

\n

\n {{ fmtDayShort(rangeBounds().lo) }} -> {{ fmtDayShort(rangeBounds().hi) }}\n

\n
\n \n \n \n
\n
\n @for (key of typeKeys(); track key) {\n
\n
\n \n {{ meta(key).label }}\n
\n

{{ rangeTypeCounts()[key] ?? 0 }}

\n
\n }\n
\n
\n
\n @if (rangeEvents().length === 0) {\n

No events in range.

\n } @else {\n @for (e of rangeEvents(); track e.id) {\n \n \n {{ monthShort(e.date) }}\n {{ dayNum(e.date) }}\n
\n
\n
\n

{{ e.title }}

\n

\n {{ e.start }}-{{ e.end }}\n @if (e.location) {\n {{ ' ' }}{{ e.location }}\n }\n

\n
\n \n {{ meta(e.type).label }}\n \n
\n }\n }\n
\n \n }\n\n @if (showUpcoming) {\n
\n
\n

Up next

\n

After today

\n
\n
\n @if (loading) {\n @for (i of [0, 1, 2]; track i) {\n
\n \n
\n \n \n
\n
\n }\n } @else if (upcoming().length === 0) {\n

Nothing on the horizon.

\n } @else {\n @for (e of upcoming(); track e.id) {\n \n \n {{ monthShort(e.date) }}\n {{ dayNum(e.date) }}\n
\n
\n
\n \n

{{ e.title }}

\n
\n

\n {{ e.start }}-{{ e.end }}\n @if (e.location) {\n {{ ' ' }}{{ e.location }}\n }\n

\n
\n \n }\n }\n
\n \n }\n \n }\n \n\n \n \n @if (selectedEvent(); as ev) {\n \n @if (eventDialogTpl) {\n \n } @else {\n
\n
\n \n \n
\n
\n

{{ ev.title }}

\n

\n {{ meta(ev.type).label }}\n @if (ev.status) {\n {{ ' ' }}{{ ev.status }}\n }\n

\n
\n
\n \n
\n @if (ev.description) {\n

{{ ev.description }}

\n }\n \n
\n
\n \n {{ ev.date }} {{ ' ' }} {{ ev.start }} - {{ ev.end }}\n
\n @if (ev.location) {\n
\n \n {{ ev.location }}\n
\n }\n @if (ev.attendees?.length) {\n
\n \n
\n @for (a of ev.attendees; track a) {\n
\n \n \n {{ initials(a) }}\n \n \n {{ a }}\n
\n }\n
\n
\n }\n
\n
\n
\n \n \n
\n }\n \n }\n \n \n `,\n})\nexport class UiEventCalendarDashboardComponent implements OnInit {\n protected readonly ArrowRight = ArrowRight\n protected readonly CalendarDays = CalendarDays\n protected readonly CalendarPlus = CalendarPlus\n protected readonly ChevronLeft = ChevronLeft\n protected readonly ChevronRight = ChevronRight\n protected readonly Clock = Clock\n protected readonly Copy = Copy\n protected readonly CopyPlus = CopyPlus\n protected readonly Eye = Eye\n protected readonly ListFilter = ListFilter\n protected readonly MapPin = MapPin\n protected readonly MousePointer2 = MousePointer2\n protected readonly Pencil = Pencil\n protected readonly Plus = Plus\n protected readonly Search = Search\n protected readonly Trash2 = Trash2\n protected readonly Users = Users\n protected readonly X = X\n protected readonly cn = cn\n protected readonly Math = Math\n protected readonly skeletonCells = Array.from({ length: 42 }, (_, i) => i)\n\n /** Source of truth for the rendered events. */\n @Input() set events(v: CalendarEvent[] | undefined) {\n this.eventsState.set([...(v ?? [])])\n }\n /** Visual + semantic theme per event type. Falls back to defaultEventTypes. */\n @Input() set eventTypes(v: Record | undefined) {\n this.eventTypesState.set(v ?? defaultEventTypes)\n }\n /** YYYY-MM-DD -- month to open first. Defaults to today. */\n @Input() initialDate?: string\n /** 0 = Sunday (default), 1 = Monday. */\n @Input() weekStartsOn: 0 | 1 = 0\n /** Show the skeleton placeholders instead of cells / rail rows. */\n @Input({ transform: booleanAttribute }) loading = false\n @Input() title = 'Calendar'\n @Input() description = 'Schedule, meetings, and deadlines. Drag or shift-click to select a range.'\n /** Default = true. Stats strip across the top. */\n @Input({ transform: booleanAttribute }) showStats = true\n /** Default = true. Side rail to the right of the grid. */\n @Input({ transform: booleanAttribute }) showSideRail = true\n /** Default = true. Search input in the header. */\n @Input({ transform: booleanAttribute }) showSearch = true\n /** Default = true. Month/Week/Day select. Week/Day not implemented yet -- visual only. */\n @Input({ transform: booleanAttribute }) showViewSelect = true\n /** Default = true. Legend strip under the grid. */\n @Input({ transform: booleanAttribute }) showLegend = true\n /** Default = true. \"Up next\" pane under the side rail. */\n @Input({ transform: booleanAttribute }) showUpcoming = true\n @Input('class') className?: string\n\n @Output() eventsChange = new EventEmitter()\n @Output() eventClick = new EventEmitter()\n @Output() eventCreate = new EventEmitter()\n @Output() eventEdit = new EventEmitter()\n @Output() eventDuplicate = new EventEmitter()\n @Output() eventDelete = new EventEmitter()\n @Output() rangeChange = new EventEmitter<{ lo: string; hi: string }>()\n\n /** Override for the header \"New event\" button. Project `…`. */\n @ContentChild('headerActions') headerActionsTpl?: TemplateRef\n /** Full override of the detail dialog body. Context: `{ $implicit: CalendarEvent }`. */\n @ContentChild('eventDialog') eventDialogTpl?: TemplateRef<{ $implicit: CalendarEvent }>\n /** Override for the empty selected-day state. Project `…`. */\n @ContentChild('emptyDay') emptyDayTpl?: TemplateRef\n\n readonly eventsState = signal([])\n readonly eventTypesState = signal>(defaultEventTypes)\n\n readonly view = signal<'month' | 'week' | 'day'>('month')\n readonly eventOpen = signal(false)\n readonly selectedEvent = signal(null)\n readonly search = signal('')\n\n // Month-grid state (port of the useMonthGrid headless composable).\n readonly todayKey = signal(isoDate(new Date()))\n private todayDate = new Date()\n readonly cursor = signal(new Date(new Date().getFullYear(), new Date().getMonth(), 1))\n readonly rangeAnchor = signal(this.todayKey())\n readonly rangeStart = signal(this.todayKey())\n readonly rangeEnd = signal(this.todayKey())\n readonly isDragging = signal(false)\n\n constructor() {\n const destroyRef = inject(DestroyRef)\n // Mirror the Vue block: the drag also ends when the mouse is released outside the grid.\n if (typeof window !== 'undefined') {\n window.addEventListener('mouseup', this.endDragBound)\n window.addEventListener('mouseleave', this.endDragBound)\n destroyRef.onDestroy(() => {\n window.removeEventListener('mouseup', this.endDragBound)\n window.removeEventListener('mouseleave', this.endDragBound)\n })\n }\n // Vue watches rangeBounds and emits range-change (no initial fire).\n let firstRange = true\n effect(() => {\n const bounds = this.rangeBounds()\n if (firstRange) {\n firstRange = false\n return\n }\n this.rangeChange.emit(bounds)\n })\n }\n\n private readonly endDragBound = (): void => this.endDrag()\n\n ngOnInit(): void {\n // initialDate is initial-only, like the Vue composable: seed cursor + selection once.\n if (this.initialDate) {\n const init = dateFromKey(this.initialDate)\n this.todayDate = new Date(init.getFullYear(), init.getMonth(), init.getDate())\n const key = isoDate(this.todayDate)\n this.todayKey.set(key)\n this.cursor.set(new Date(init.getFullYear(), init.getMonth(), 1))\n this.rangeAnchor.set(key)\n this.rangeStart.set(key)\n this.rangeEnd.set(key)\n }\n }\n\n readonly monthLabel = computed(() => this.cursor().toLocaleDateString('en-US', { month: 'long', year: 'numeric' }))\n\n readonly gridDays = computed(() => {\n const cursor = this.cursor()\n const weekStartsOn = this.weekStartsOn\n const first = new Date(cursor.getFullYear(), cursor.getMonth(), 1)\n const offset = (first.getDay() - weekStartsOn + 7) % 7\n const start = new Date(first)\n start.setDate(first.getDate() - offset)\n const days: GridDay[] = []\n for (let i = 0; i < 42; i++) {\n const d = new Date(start)\n d.setDate(start.getDate() + i)\n days.push({ date: d, key: isoDate(d), inMonth: d.getMonth() === cursor.getMonth() })\n }\n return days\n })\n\n readonly weekdays = computed(() => {\n const base = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']\n return [...base.slice(this.weekStartsOn), ...base.slice(0, this.weekStartsOn)]\n })\n\n readonly rangeBounds = computed(() => {\n const a = this.rangeStart()\n const b = this.rangeEnd()\n return a <= b ? { lo: a, hi: b } : { lo: b, hi: a }\n })\n\n readonly rangeDayCount = computed(() => dayDiff(this.rangeBounds().lo, this.rangeBounds().hi) + 1)\n readonly isRange = computed(() => this.rangeBounds().lo !== this.rangeBounds().hi)\n\n /** Fall through to a neutral style for unknown event types. */\n private readonly 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\n meta(type: string): EventTypeMeta {\n return this.eventTypesState()[type] ?? this.neutralMeta\n }\n\n readonly typeKeys = computed(() => Object.keys(this.eventTypesState()))\n\n readonly filtered = computed(() => {\n const q = this.search().trim().toLowerCase()\n const events = this.eventsState()\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 })\n\n readonly eventsByDate = computed(() => {\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 readonly monthCounts = computed(() => {\n const cursor = this.cursor()\n const y = cursor.getFullYear()\n const m = cursor.getMonth()\n const out: Record & { total: number } = { total: 0 }\n for (const k of this.typeKeys()) out[k] = 0\n for (const e of this.eventsState()) {\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 })\n\n readonly typeStats = computed(() => {\n const cursor = this.cursor()\n const y = cursor.getFullYear()\n const m = cursor.getMonth()\n const keys = this.typeKeys()\n const out: Record = {}\n for (const k of keys) out[k] = { weeks: [0, 0, 0, 0, 0, 0], next: null }\n const firstOffset = new Date(y, m, 1).getDay()\n for (const e of this.eventsState()) {\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 keys) {\n const next = this.eventsState()\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]\n out[t]!.next = next ?? null\n }\n return out\n })\n\n readonly rangeEvents = computed(() => {\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 readonly rangeTypeCounts = computed(() => {\n const init: Record = {}\n for (const k of this.typeKeys()) init[k] = 0\n for (const e of this.rangeEvents()) {\n if (init[e.type] !== undefined) init[e.type]!++\n }\n return init\n })\n\n readonly selectedDayEvents = computed(() => this.eventsByDate().get(this.rangeStart()) ?? [])\n\n readonly upcoming = computed(() =>\n 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 setView(v: string): void {\n this.view.set(v as 'month' | 'week' | 'day')\n }\n\n openEvent(e: CalendarEvent): void {\n this.selectedEvent.set(e)\n this.eventOpen.set(true)\n this.eventClick.emit(e)\n }\n\n copyDate(key: string): void {\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 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 fmtDayLong(key: string): string {\n return dateFromKey(key).toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' })\n }\n\n fmtDayShort(key: string): string {\n return dateFromKey(key).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })\n }\n\n monthShort(key: string): string {\n return new Date(key).toLocaleDateString('en-US', { month: 'short' })\n }\n\n dayNum(key: string): number {\n return new Date(key).getDate()\n }\n\n initials(name: string): string {\n return name\n .split(' ')\n .map((n) => n[0])\n .join('')\n .slice(0, 2)\n }\n\n inRange(key: DateKey): boolean {\n const { lo, hi } = this.rangeBounds()\n return key >= lo && key <= hi\n }\n\n 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 cellClass(d: GridDay, i: number): string {\n return cn(\n 'group focus-visible:ring-ring relative flex h-24 flex-col gap-1 border-r border-b p-1.5 text-left transition-colors focus-visible:z-10 focus-visible:ring-2 focus-visible:outline-none',\n (i + 1) % 7 === 0 && 'border-r-0',\n i >= 35 && 'border-b-0',\n this.cellRangeClass(d.key, d.inMonth),\n !d.inMonth && !this.inRange(d.key) && 'text-muted-foreground/60',\n )\n }\n\n dayNumberClass(d: GridDay): string {\n return cn(\n 'inline-flex size-5 items-center justify-center rounded-full text-xs tabular-nums',\n d.key === this.todayKey() && 'bg-primary text-primary-foreground font-semibold',\n d.key !== this.todayKey() && d.inMonth && 'text-foreground',\n !d.inMonth && 'text-muted-foreground/60',\n )\n }\n\n statTileClass(key: string): string {\n return cn(\n 'group bg-card hover:bg-muted/40 relative isolate flex flex-col overflow-hidden rounded-xl border p-4 text-left ring-1 ring-transparent transition-[colors,box-shadow,transform] duration-150 ring-inset hover:shadow-xs active:scale-[0.98]',\n this.meta(key).ring,\n )\n }\n\n weekBarClass(key: string, n: number): string {\n return cn(\n 'flex-1 rounded-sm transition-colors',\n n > 0 ? this.meta(key).bar : 'bg-muted/40',\n n > 0 && 'opacity-70 group-hover:opacity-100',\n )\n }\n\n /** Static Tailwind-safe grid columns for the stats strip (Vue builds this string dynamically). */\n statsGridClass(): string {\n const n = Math.min(this.typeKeys().length, 4)\n if (n <= 1) return ''\n if (n === 2) return 'sm:grid-cols-2'\n if (n === 3) return 'sm:grid-cols-2 lg:grid-cols-3'\n return 'sm:grid-cols-2 lg:grid-cols-4'\n }\n\n rangeCountsClass(): string {\n const n = Math.min(this.typeKeys().length, 4)\n if (n <= 1) return 'grid-cols-1'\n if (n === 2) return 'grid-cols-2'\n if (n === 3) return 'grid-cols-3'\n return 'grid-cols-4'\n }\n\n selectCategoryFilter(key: string): void {\n const label = this.eventTypesState()[key]?.label.toLowerCase() || ''\n this.search.set(label === this.search().toLowerCase() ? '' : label)\n }\n\n handleEditSelected(): void {\n if (this.selectedEvent()) this.eventEdit.emit(this.selectedEvent()!)\n this.eventOpen.set(false)\n }\n\n handleDeleteSelected(): void {\n if (this.selectedEvent()) this.eventDelete.emit(this.selectedEvent()!)\n this.eventOpen.set(false)\n }\n\n prevMonth(): void {\n const c = this.cursor()\n this.cursor.set(new Date(c.getFullYear(), c.getMonth() - 1, 1))\n }\n\n nextMonth(): void {\n const c = this.cursor()\n this.cursor.set(new Date(c.getFullYear(), c.getMonth() + 1, 1))\n }\n\n goToToday(): void {\n const t = this.todayDate\n this.cursor.set(new Date(t.getFullYear(), t.getMonth(), 1))\n const key = this.todayKey()\n this.rangeAnchor.set(key)\n this.rangeStart.set(key)\n this.rangeEnd.set(key)\n }\n\n selectDay(key: DateKey): void {\n this.rangeAnchor.set(key)\n this.rangeStart.set(key)\n this.rangeEnd.set(key)\n }\n\n selectWeekOf(key: DateKey): void {\n const weekStartsOn = this.weekStartsOn\n const d = dateFromKey(key)\n const dow = (d.getDay() - weekStartsOn + 7) % 7\n const wkStart = new Date(d)\n wkStart.setDate(d.getDate() - dow)\n const wkEnd = new Date(wkStart)\n wkEnd.setDate(wkStart.getDate() + 6)\n this.rangeAnchor.set(isoDate(wkStart))\n this.rangeStart.set(isoDate(wkStart))\n this.rangeEnd.set(isoDate(wkEnd))\n }\n\n clearRange(): void {\n const key = this.todayKey()\n this.rangeAnchor.set(key)\n this.rangeStart.set(key)\n this.rangeEnd.set(key)\n }\n\n onCellMouseDown(key: DateKey, ev: MouseEvent): void {\n if (ev.button !== 0) return // ignore right-click -- context menus handle it\n if (ev.shiftKey) {\n this.rangeEnd.set(key)\n return\n }\n this.rangeAnchor.set(key)\n this.rangeStart.set(key)\n this.rangeEnd.set(key)\n this.isDragging.set(true)\n }\n\n onCellMouseEnter(key: DateKey): void {\n if (!this.isDragging()) return\n this.rangeEnd.set(key)\n this.rangeStart.set(this.rangeAnchor())\n }\n\n endDrag(): void {\n if (this.isDragging()) this.isDragging.set(false)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/event-calendar-dashboard/event-calendar-dashboard.component.ts" }, { "path": "packages/registry-angular/blocks/event-calendar-dashboard/defaults.ts", "content": "import { AlertCircle, CheckCircle2, Plane, Video } from 'lucide-angular'\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 `[eventTypes]=\"...\"`.\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}\n", "type": "registry:block", "target": "~/src/app/components/blocks/event-calendar-dashboard/defaults.ts" }, { "path": "packages/registry-angular/blocks/event-calendar-dashboard/types.ts", "content": "import type { LucideIconData } from 'lucide-angular'\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 for the stat tile + chip + dialog header. */\n icon: LucideIconData\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}\n", "type": "registry:block", "target": "~/src/app/components/blocks/event-calendar-dashboard/types.ts" }, { "path": "packages/registry-angular/blocks/event-calendar-dashboard/index.ts", "content": "export { UiEventCalendarDashboardComponent, type DateKey } from './event-calendar-dashboard.component'\nexport { defaultEventTypes } from './defaults'\nexport type { CalendarEvent, EventTypeMeta } from './types'\n", "type": "registry:block", "target": "~/src/app/components/blocks/event-calendar-dashboard/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/dialog.json", "https://uipkge.dev/r/angular/select.json", "https://uipkge.dev/r/angular/avatar.json", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/skeleton.json", "https://uipkge.dev/r/angular/input.json", "https://uipkge.dev/r/angular/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] 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.", "categories": [ "productivity", "dashboard" ] }