add: rerender

templates/calendar_section.html

@@ -183,14 +183,15 @@
     }
   }
 
-  (function renderInitialCalendarRange() {
+  function buildCalendarStructure(force = false) {
     const daysContainer = document.getElementById('calendar-days');
-    if (!daysContainer || daysContainer.childElementCount > 0) return;
+    if (!daysContainer || (daysContainer.childElementCount > 0 && !force)) return;
 
     const isAdmin = typeof admin_enabled !== 'undefined' && admin_enabled;
     const calendarColSpan = 3;
     window._calendarColSpan = calendarColSpan;
     window._calendarIsAdmin = isAdmin;
+    daysContainer.innerHTML = '';
 
     const formatDayName = new Intl.DateTimeFormat('de-DE', { weekday: 'long' });
     const formatDate = new Intl.DateTimeFormat('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' });
@@ -248,7 +249,7 @@
 
       daysContainer.appendChild(dayBlock);
     }
-  })();
+  }
 
   function resetDayBlock(block) {
     const tbody = block.querySelector('.calendar-entries-list');
@@ -542,6 +543,24 @@
     }
     let calendarHasLoaded = false;
 
+    buildCalendarStructure();
+
+    let lastViewportIsDesktop = isDesktopView();
+    let resizeDebounce;
+    const handleViewportChange = () => {
+      const nowDesktop = isDesktopView();
+      if (nowDesktop === lastViewportIsDesktop) return;
+      lastViewportIsDesktop = nowDesktop;
+      buildCalendarStructure(true);
+      if (calendarHasLoaded) {
+        loadCalendarEntries();
+      }
+    };
+    window.addEventListener('resize', () => {
+      if (resizeDebounce) clearTimeout(resizeDebounce);
+      resizeDebounce = setTimeout(handleViewportChange, 150);
+    });
+
     const setRecurrenceMode = (isEditing) => {
       if (!recurrenceRow) return;
       recurrenceRow.style.display = isEditing ? 'none' : '';