diff --git a/src/v2/features/headerdrawer/HeaderDrawerRenderer.ts b/src/v2/features/headerdrawer/HeaderDrawerRenderer.ts index 8be369d..deb7740 100644 --- a/src/v2/features/headerdrawer/HeaderDrawerRenderer.ts +++ b/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; } diff --git a/wwwroot/data/mock-events.json b/wwwroot/data/mock-events.json index 8e531c3..16c70e6 100644 --- a/wwwroot/data/mock-events.json +++ b/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",