improve calendar

static/app.css

@@ -656,7 +656,7 @@ footer {
   border: 1px solid #ddd;
   border-top: 0;
   border-radius: 0 0 6px 6px;
-  overflow: hidden;
+  overflow: visible;
 }
 
 .calendar-weekday-header {
@@ -712,6 +712,11 @@ footer {
   border-bottom: none;
 }
 
+.calendar-day-hidden {
+  visibility: hidden;
+  pointer-events: none;
+}
+
 @media (min-width: 992px) {
   .calendar-grid {
     grid-template-columns: repeat(7, minmax(0, 1fr));
@@ -727,7 +732,12 @@ footer {
     border: 1px solid #ddd;
     border-bottom: 0;
     border-radius: 8px 8px 0 0;
-    overflow: hidden;
+    overflow: visible;
+    position: sticky;
+    top: 70px;
+    z-index: 900;
+    background: var(--card-background, #fff);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
   }
 
   .calendar-day {

templates/calendar_section.html

@@ -24,15 +24,7 @@
       </div>
     </div>
 
-    <div class="calendar-weekday-header">
-      <div>Mo</div>
-      <div>Di</div>
-      <div>Mi</div>
-      <div>Do</div>
-      <div>Fr</div>
-      <div>Sa</div>
-      <div>So</div>
-    </div>
+    <div class="calendar-weekday-header"></div>
 
     <div id="calendar-days" class="calendar-grid">
       <!-- Populated via inline script below -->
@@ -157,18 +149,40 @@
     return holidays.get(toLocalISO(date)) || '';
   }
 
+  function isDesktopView() {
+    return window.matchMedia && window.matchMedia('(min-width: 992px)').matches;
+  }
+
   function getCalendarRange() {
     const weeks = window._calendarIsAdmin ? 12 : 4;
     const start = new Date();
     start.setHours(0, 0, 0, 0);
-    // shift back to Monday (0 = Sunday)
-    const diffToMonday = (start.getDay() + 6) % 7;
-    start.setDate(start.getDate() - diffToMonday);
+
+    if (isDesktopView()) {
+      // shift back to Monday (0 = Sunday)
+      const diffToMonday = (start.getDay() + 6) % 7;
+      start.setDate(start.getDate() - diffToMonday);
+    }
+
     const end = new Date(start);
     end.setDate(end.getDate() + (weeks * 7) - 1);
     return { start, end };
   }
 
+  function renderWeekdayHeader(startDate) {
+    const header = document.querySelector('.calendar-weekday-header');
+    if (!header) return;
+    header.innerHTML = '';
+    const formatDayShort = new Intl.DateTimeFormat('de-DE', { weekday: 'short' });
+    for (let i = 0; i < 7; i++) {
+      const d = new Date(startDate);
+      d.setDate(startDate.getDate() + i);
+      const div = document.createElement('div');
+      div.textContent = formatDayShort.format(d);
+      header.appendChild(div);
+    }
+  }
+
   (function renderInitialCalendarRange() {
     const daysContainer = document.getElementById('calendar-days');
     if (!daysContainer || daysContainer.childElementCount > 0) return;
@@ -181,6 +195,8 @@
     const formatDayName = new Intl.DateTimeFormat('de-DE', { weekday: 'long' });
     const formatDate = new Intl.DateTimeFormat('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' });
     const { start, end } = getCalendarRange();
+    const todayIso = toLocalISO(new Date());
+    renderWeekdayHeader(start);
     const dayCount = Math.round((end - start) / (1000 * 60 * 60 * 24)) + 1;
 
     for (let i = 0; i < dayCount; i++) {
@@ -203,6 +219,9 @@
       if (holidayName) {
         dayBlock.classList.add('calendar-day-holiday');
       }
+      if (isDesktopView() && isoDate < todayIso) {
+        dayBlock.classList.add('calendar-day-hidden');
+      }
 
       dayBlock.innerHTML = `
         <div class="calendar-day-header">