implemented cancelled event visualization

ui/src/pages/Calendar.vue

@@ -29,14 +29,6 @@ function buildFullDate(month: number, year: number): Date {
     return new Date(year, month, 1); //default to first of month
 }
 
-type CalEvent = {
-    id: string
-    title: string
-    start: Date
-    end?: Date
-    extendedProps?: Record<string, any>
-}
-
 const { selectedMonth, selectedYear, years, goPrev, goNext, goToday, onDatesSet, goToSelectedDate } = useCalendarNavigation(api)
 const { events } = useCalendarEvents(selectedMonth, selectedYear);
 
@@ -82,7 +74,7 @@ const calendarOptions = ref({
     navLinks: false,
     dateClick: onDateClick,
     eventClick: onEventClick,
-    editable: true,
+    editable: false,
 
     // force block-mode in dayGrid so we can lay it out on one line
     eventDisplay: 'block',
@@ -96,13 +88,25 @@ const calendarOptions = ref({
 
     // custom renderer -> one-line pill
     eventContent(arg) {
-        console.log
+        //debug
+        // console.log("Rendering event:", {
+        //     id: arg.event.id,
+        //     title: arg.event.title,
+        //     extendedProps: arg.event.extendedProps,
+        //     fullEvent: arg.event
+        // })
+
         const ext = arg.event.extendedProps || {}
-        const c = ext.color || arg.backgroundColor || arg.borderColor || ''
+        const color = ext.color || arg.backgroundColor || arg.borderColor || ''
+        const isCancelled = !!ext.cancelled;
 
         const wrap = document.createElement('div')
         wrap.className = 'ev-pill'
-        if (c) wrap.style.setProperty('--ev-color', String(c)) // dot color
+        if (color) wrap.style.setProperty('--ev-color', String(color)) // dot color
+
+        if (isCancelled) {
+            wrap.classList.add('is-cancelled')
+        }
 
         const dot = document.createElement('span')
         dot.className = 'ev-dot'
@@ -254,6 +258,12 @@ onMounted(() => {
     height: 100% !important;
 }
 
+:global(.ev-pill.is-cancelled) {
+    opacity: 0.45;
+    text-decoration: line-through;
+    filter: grayscale(100%);
+}
+
 .calendar-card {
     background: var(--color-card);
     border: 1px solid var(--color-border);
@@ -427,9 +437,10 @@ onMounted(() => {
     transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
 }
 
-.ev-pill:hover {
-    background: color-mix(in oklab, var(--color-primary) 20%, transparent);
-    border-color: color-mix(in oklab, var(--color-primary) 45%, var(--color-border));
+:global(.ev-pill:hover) {
+    /* background: color-mix(in oklab, var(--color-primary) 20%, transparent);
+    border-color: color-mix(in oklab, var(--color-primary) 45%, var(--color-border)); */
+    cursor: pointer;
 }
 
 .ev-dot {