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}