wip

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<string, any[]>();
-    
+    // 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);
-      });
+      }
     });
   }