diff --git a/client/src/components/schedule-calendar-wrapper/scheduler-calendar-wrapper.component.jsx b/client/src/components/schedule-calendar-wrapper/scheduler-calendar-wrapper.component.jsx
index e9e411b41..b2d355434 100644
--- a/client/src/components/schedule-calendar-wrapper/scheduler-calendar-wrapper.component.jsx
+++ b/client/src/components/schedule-calendar-wrapper/scheduler-calendar-wrapper.component.jsx
@@ -40,27 +40,26 @@ export function ScheduleCalendarWrapperComponent({
   const currentView = search.view || defaultView || "week";
 
   const handleEventPropStyles = (event) => {
-    const hasColor = Boolean(event?.color?.hex || event?.color);
+    const { color, block, arrived } = event ?? {};
+    const hasColor = Boolean(color?.hex || color);
     const useBg = currentView !== "agenda";
 
     // Prioritize explicit blocked-day background to ensure red in all themes
     let bg;
     if (useBg) {
-      if (event?.block) {
-        bg = "var(--event-block-bg)";
-      } else if (hasColor) {
-        bg = event?.color?.hex ?? event?.color;
-      } else {
-        bg = "var(--event-bg-fallback)";
-      }
+      bg = block
+        ? "var(--event-block-bg)"
+        : arrived
+          ? "var(--event-arrived-bg)"
+          : (color?.hex ?? color ?? "var(--event-bg-fallback)");
     }
 
-    const usedFallback = !hasColor && !event?.block; // only mark as fallback when not blocked
+    const usedFallback = !hasColor && !block && !arrived; // only mark as fallback when not blocked or arrived
 
     const classes = [
       "imex-event",
-      event.arrived && "imex-event-arrived",
-      event.block && "imex-event-block",
+      arrived && "imex-event-arrived",
+      block && "imex-event-block",
       usedFallback && "imex-event-fallback"
     ]
       .filter(Boolean)