diff --git a/frontend/src/components/calendar/CalendarMonthView.tsx b/frontend/src/components/calendar/CalendarMonthView.tsx
index ae8b731d6..6100cf9a5 100644
--- a/frontend/src/components/calendar/CalendarMonthView.tsx
+++ b/frontend/src/components/calendar/CalendarMonthView.tsx
@@ -20,6 +20,24 @@ export function CalendarMonthView({ visibleMonthEvents }: Props) {
     return grouped;
   }, [visibleMonthEvents]);
 
+  // Memoize the React element array so unrelated parent renders can reuse
+  // the 35-cell grid while monthEventsByDay is unchanged.
+  const gridCells = useMemo(() => {
+    return Array.from({ length: 35 }).map((_, i) => {
+      const dayEvents = monthEventsByDay.get(i) ?? [];
+      return (
+        <div key={i} className="min-h-[84px] p-2 sm:min-h-[100px]">
+          <span className={`text-sm font-semibold ${i % 7 === 0 ? 'text-red-500' : i % 7 === 6 ? 'text-blue-500' : 'text-muted-foreground'}`}>{i < 31 ? i + 1 : ''}</span>
+          {dayEvents.map((event) => (
+            <div key={event.id} className={`mt-1 rounded px-1.5 py-1 text-[10px] font-semibold leading-tight sm:px-2 sm:text-xs ${event.monthClassName}`}>
+              {event.time}<span className="hidden sm:inline"> {event.title}</span>
+            </div>
+          ))}
+        </div>
+      );
+    });
+  }, [monthEventsByDay]);
+
   return (
     <div className="h-full rounded-2xl border border-border bg-card shadow-sm flex flex-col overflow-hidden">
       <div className="grid grid-cols-7 border-b border-border bg-secondary/50 text-center text-sm font-semibold py-3">
@@ -27,19 +45,7 @@ export function CalendarMonthView({ visibleMonthEvents }: Props) {
       </div>
       <div className="grid grid-cols-7 grid-rows-5 flex-1 divide-x divide-y divide-border">
         {/* Simulated Grid Cells */}
-        {Array.from({ length: 35 }).map((_, i) => {
-          const dayEvents = monthEventsByDay.get(i) ?? [];
-          return (
-            <div key={i} className="min-h-[84px] p-2 sm:min-h-[100px]">
-              <span className={`text-sm font-semibold ${i % 7 === 0 ? 'text-red-500' : i % 7 === 6 ? 'text-blue-500' : 'text-muted-foreground'}`}>{i < 31 ? i + 1 : ''}</span>
-              {dayEvents.map((event) => (
-                <div key={event.id} className={`mt-1 rounded px-1.5 py-1 text-[10px] font-semibold leading-tight sm:px-2 sm:text-xs ${event.monthClassName}`}>
-                  {event.time}<span className="hidden sm:inline"> {event.title}</span>
-                </div>
-              ))}
-            </div>
-          );
-        })}
+        {gridCells}
       </div>
     </div>
   );