Supports multi-day all-day events in calendar view

Enhances header drawer rendering to handle multi-day events
- Calculates column span for events across multiple days
- Adds support for events spanning beyond visible date range
- Updates event data attributes to include start and end dates

src/v2/features/headerdrawer/HeaderDrawerRenderer.ts

@@ -72,25 +72,33 @@ export class HeaderDrawerRenderer {
 
   /**
    * Create a header item element for an allDay event
+   * Supports multi-day events with column span
    */
   private createHeaderItem(event: ICalendarEvent, visibleDates: string[]): HTMLElement | null {
-    const dateKey = this.dateService.getDateKey(event.start);
-    const colIndex = visibleDates.indexOf(dateKey);
-    if (colIndex === -1) return null; // Event not in visible range
+    const startDateKey = this.dateService.getDateKey(event.start);
+    const endDateKey = this.dateService.getDateKey(event.end);
+
+    const startColIndex = visibleDates.indexOf(startDateKey);
+    const endColIndex = visibleDates.indexOf(endDateKey);
+
+    // Event skal mindst starte eller slutte inden for synlige datoer
+    if (startColIndex === -1 && endColIndex === -1) return null;
 
     const item = document.createElement('swp-header-item');
     item.dataset.eventId = event.id;
     item.dataset.itemType = 'event';
-    item.dataset.date = dateKey;
+    item.dataset.start = event.start.toISOString();
+    item.dataset.end = event.end.toISOString();
     item.textContent = event.title;
 
     // Color class
     const colorClass = this.getColorClass(event);
     if (colorClass) item.classList.add(colorClass);
 
-    // Grid position (1-indexed)
-    const col = colIndex + 1;
-    item.style.gridArea = `1 / ${col} / 2 / ${col + 1}`;
+    // Grid position (1-indexed, clamp til synlige kolonner)
+    const col = Math.max(0, startColIndex) + 1;
+    const endCol = (endColIndex !== -1 ? endColIndex : visibleDates.length - 1) + 2;
+    item.style.gridArea = `1 / ${col} / 2 / ${endCol}`;
 
     return item;
   }

wwwroot/data/mock-events.json

@@ -73,10 +73,10 @@
     "id": "EVT-DEC09-002",
     "title": "Skæg trimning",
     "description": "Skæg trim og styling",
-    "start": "2025-12-09T16:00:00",
-    "end": "2025-12-09T16:30:00",
+    "start": "2025-12-09T00:00:00",
+    "end": "2025-12-10T23:59:59",
     "type": "customer",
-    "allDay": false,
+    "allDay": true,
     "bookingId": "BOOK-006",
     "resourceId": "EMP003",
     "customerId": "CUST006",