From 25830bb99e142d4ade8c23adaa48fee24e0dda90 Mon Sep 17 00:00:00 2001
From: Kyle Pope <kyle.a.pope@outlook.com>
Date: Mon, 16 Mar 2026 20:13:34 +0800
Subject: [PATCH] Fix calendar event color not updating after display calendar
 change

eventDidMount only fires once when FullCalendar first mounts a DOM element.
When event data refetches with a new calendarColor, the existing DOM element
is reused and --event-color CSS variable stays stale.

Fix: renderEventContent now uses a ref callback (syncColor) to walk up to
the parent .umbra-event element and update --event-color on every render,
ensuring background, hover, and dot colors reflect the current calendar.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/components/calendar/CalendarPage.tsx   | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/calendar/CalendarPage.tsx b/frontend/src/components/calendar/CalendarPage.tsx
index 77a9202..a7eca35 100644
--- a/frontend/src/components/calendar/CalendarPage.tsx
+++ b/frontend/src/components/calendar/CalendarPage.tsx
@@ -531,6 +531,16 @@ export default function CalendarPage() {
     const isAllDay = arg.event.allDay;
     const isRecurring = arg.event.extendedProps.is_recurring || arg.event.extendedProps.parent_event_id;
     const isInvited = arg.event.extendedProps.is_invited;
+    const calColor = arg.event.extendedProps.calendarColor as string;
+
+    // Sync --event-color on the parent FC element so CSS rules (background, hover)
+    // pick up color changes without requiring a full remount (eventDidMount only fires once).
+    const syncColor = (el: HTMLElement | null) => {
+      if (el && calColor) {
+        const fcEl = el.closest('.umbra-event');
+        if (fcEl) (fcEl as HTMLElement).style.setProperty('--event-color', calColor);
+      }
+    };
 
     const icons = (
       <>
@@ -542,7 +552,7 @@ export default function CalendarPage() {
     if (isMonth) {
       if (isAllDay) {
         return (
-          <div className="flex items-center gap-1 truncate px-1">
+          <div ref={syncColor} className="flex items-center gap-1 truncate px-1">
             <span className="text-[11px] font-medium truncate">{arg.event.title}</span>
             {icons}
           </div>
@@ -550,10 +560,10 @@ export default function CalendarPage() {
       }
       // Timed events in month: dot + title + time right-aligned
       return (
-        <div className="flex items-center gap-1.5 truncate w-full">
+        <div ref={syncColor} className="flex items-center gap-1.5 truncate w-full">
           <span
             className="fc-daygrid-event-dot"
-            style={{ borderColor: 'var(--event-color)' }}
+            style={{ borderColor: calColor || 'var(--event-color)' }}
           />
           <span className="text-[11px] font-medium truncate">{arg.event.title}</span>
           {icons}
@@ -564,7 +574,7 @@ export default function CalendarPage() {
 
     // Week/day view — title on top, time underneath
     return (
-      <div className="flex flex-col overflow-hidden h-full">
+      <div ref={syncColor} className="flex flex-col overflow-hidden h-full">
         <div className="flex items-center gap-1">
           <span className="text-[12px] font-medium truncate">{arg.event.title}</span>
           {icons}