Janus007/Calendar
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Supports multi-day all-day events in calendar view

Browse source 
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
This commit is contained in:
Janus C. H. Knudsen 2025-12-11 23:29:53 +01:00
parent d88956f47b
commit 044b547836
2 changed files with 18 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/v2/features/headerdrawer/HeaderDrawerRenderer.ts
View file

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

6
wwwroot/data/mock-events.json
View file

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