From 914239fb7090a57aeaf5b5d4d6d3e09588fa7e8c Mon Sep 17 00:00:00 2001 From: Janus Knudsen Date: Tue, 5 Aug 2025 00:49:00 +0200 Subject: [PATCH] wip --- src/managers/EventManager.ts | 30 ++++++++++---------- src/managers/GridManager.ts | 55 ++++++++++++++++++++++++------------ 2 files changed, 52 insertions(+), 33 deletions(-) diff --git a/src/managers/EventManager.ts b/src/managers/EventManager.ts index af719e3..2300dd5 100644 --- a/src/managers/EventManager.ts +++ b/src/managers/EventManager.ts @@ -42,7 +42,7 @@ export class EventManager { type: 'work', allDay: false, syncStatus: 'synced', - metadata: { duration: 60 } + metadata: { duration: 60, color: '#9c27b0' } // Purple }, // Monday August 4, 2025 { @@ -53,7 +53,7 @@ export class EventManager { type: 'meeting', allDay: false, syncStatus: 'synced', - metadata: { duration: 30 } + metadata: { duration: 30, color: '#ff5722' } // Deep Orange }, { id: '3', @@ -63,7 +63,7 @@ export class EventManager { type: 'meeting', allDay: false, syncStatus: 'synced', - metadata: { duration: 90 } + metadata: { duration: 90, color: '#e91e63' } // Pink }, // Tuesday August 5, 2025 { @@ -74,7 +74,7 @@ export class EventManager { type: 'work', allDay: false, syncStatus: 'synced', - metadata: { duration: 120 } + metadata: { duration: 120, color: '#3f51b5' } // Indigo }, { id: '5', @@ -84,7 +84,7 @@ export class EventManager { type: 'meal', allDay: false, syncStatus: 'synced', - metadata: { duration: 60 } + metadata: { duration: 60, color: '#ff9800' } // Orange }, // Wednesday August 6, 2025 { @@ -95,7 +95,7 @@ export class EventManager { type: 'meeting', allDay: false, syncStatus: 'synced', - metadata: { duration: 60 } + metadata: { duration: 60, color: '#795548' } // Brown }, // Thursday August 7, 2025 { @@ -106,7 +106,7 @@ export class EventManager { type: 'meeting', allDay: false, syncStatus: 'synced', - metadata: { duration: 90 } + metadata: { duration: 90, color: '#607d8b' } // Blue Grey }, { id: '8', @@ -116,7 +116,7 @@ export class EventManager { type: 'work', allDay: false, syncStatus: 'synced', - metadata: { duration: 60 } + metadata: { duration: 60, color: '#009688' } // Teal }, // Friday August 8, 2025 { @@ -127,7 +127,7 @@ export class EventManager { type: 'meeting', allDay: false, syncStatus: 'synced', - metadata: { duration: 30 } + metadata: { duration: 30, color: '#8bc34a' } // Light Green }, { id: '10', @@ -137,7 +137,7 @@ export class EventManager { type: 'meeting', allDay: false, syncStatus: 'synced', - metadata: { duration: 90 } + metadata: { duration: 90, color: '#cddc39' } // Lime }, // Saturday August 9, 2025 { @@ -148,7 +148,7 @@ export class EventManager { type: 'work', allDay: false, syncStatus: 'synced', - metadata: { duration: 120 } + metadata: { duration: 120, color: '#f44336' } // Red }, // Test events for early/late hours { @@ -159,7 +159,7 @@ export class EventManager { type: 'work', allDay: false, syncStatus: 'synced', - metadata: { duration: 60 } + metadata: { duration: 60, color: '#00bcd4' } // Cyan }, { id: '13', @@ -169,7 +169,7 @@ export class EventManager { type: 'meeting', allDay: false, syncStatus: 'synced', - metadata: { duration: 60 } + metadata: { duration: 60, color: '#673ab7' } // Deep Purple }, { id: '14', @@ -179,14 +179,14 @@ export class EventManager { type: 'work', allDay: false, syncStatus: 'synced', - metadata: { duration: 120 } + metadata: { duration: 120, color: '#ffc107' } // Amber }, // All-day events for demo { id: '15', title: 'Company Holiday', start: '2025-08-04T00:00:00', - end: '2025-08-04T23:59:59', + end: '2025-08-05T23:59:59', type: 'milestone', allDay: true, syncStatus: 'synced', diff --git a/src/managers/GridManager.ts b/src/managers/GridManager.ts index e2f1bed..0761c26 100644 --- a/src/managers/GridManager.ts +++ b/src/managers/GridManager.ts @@ -330,32 +330,51 @@ export class GridManager { const weekDays = calendarConfig.get('weekDays'); const daysToShow = dates.slice(0, weekDays); - // Group all-day events by date - const eventsByDate = new Map(); - + // Process each all-day event to calculate its span this.allDayEvents.forEach(event => { - const eventDate = new Date(event.start); - const dateKey = this.formatDate(eventDate); + const startDate = new Date(event.start); + const endDate = new Date(event.end); - if (!eventsByDate.has(dateKey)) { - eventsByDate.set(dateKey, []); - } - eventsByDate.get(dateKey)!.push(event); - }); - - // Render all-day events for each day - daysToShow.forEach((date, dayIndex) => { - const dateKey = this.formatDate(date); - const dayEvents = eventsByDate.get(dateKey) || []; + // Find start and end column indices + let startColumnIndex = -1; + let endColumnIndex = -1; - dayEvents.forEach(event => { + daysToShow.forEach((date, index) => { + const dateStr = this.formatDate(date); + const startDateStr = this.formatDate(startDate); + const endDateStr = this.formatDate(endDate); + + if (dateStr === startDateStr) { + startColumnIndex = index; + } + + // For end date, we need to check if the event spans to this day + // All-day events typically end at 23:59:59, so we check if this date is <= end date + if (date <= endDate) { + endColumnIndex = index; + } + }); + + // Only render if the event starts within the visible week + if (startColumnIndex >= 0) { + // If end column is not found or is before start, default to single day + if (endColumnIndex < startColumnIndex) { + endColumnIndex = startColumnIndex; + } + const allDayEvent = document.createElement('swp-allday-event'); allDayEvent.textContent = event.title; - allDayEvent.style.gridColumn = `${dayIndex + 1} / ${dayIndex + 2}`; // Single column + + // Set grid column span: start column (1-based) to end column + 1 (1-based) + const gridColumnStart = startColumnIndex + 1; + const gridColumnEnd = endColumnIndex + 2; // +2 because grid columns are 1-based and we want to include the end column + allDayEvent.style.gridColumn = `${gridColumnStart} / ${gridColumnEnd}`; allDayEvent.style.backgroundColor = event.metadata?.color || '#ff9800'; + console.log(`GridManager: All-day event "${event.title}" spans columns ${gridColumnStart} to ${gridColumnEnd-1} (${endColumnIndex - startColumnIndex + 1} days)`); + weekHeader.appendChild(allDayEvent); - }); + } }); }