Improves all-day event drag and drop

Handles dragging of both timed events (converting to all-day) and existing all-day events to different days.

Refactors all-day height recalculation to support animated transitions for a smoother user experience when all-day event counts change.

Uses event delegation for header mouseover detection.

Updates ScrollManager to listen for header height changes.

src/renderers/EventRenderer.ts

@@ -186,17 +186,10 @@ export abstract class BaseEventRenderer implements EventRendererStrategy {
       ? (maxStackHeight * ALL_DAY_CONSTANTS.EVENT_HEIGHT) + ((maxStackHeight - 1) * ALL_DAY_CONSTANTS.EVENT_GAP) + ALL_DAY_CONSTANTS.CONTAINER_PADDING
       : 0; // No height if no events
     
-    // Set CSS variable for row height
+    // Only set CSS variable - header-spacer height is handled by CSS calc()
     const root = document.documentElement;
     root.style.setProperty('--all-day-row-height', `${calculatedHeight}px`);
     
-    // Also update header-spacer height
-    const headerSpacer = container.querySelector('swp-header-spacer');
-    if (headerSpacer) {
-      const headerHeight = parseInt(getComputedStyle(root).getPropertyValue('--header-height') || '80');
-      (headerSpacer as HTMLElement).style.height = `${headerHeight + calculatedHeight}px`;
-    }
-    
     console.log(`BaseEventRenderer: Set all-day row height to ${calculatedHeight}px (max stack: ${maxStackHeight})`);
   }
 

src/renderers/GridRenderer.ts

@@ -135,12 +135,30 @@ export class GridRenderer {
 
     headerRenderer.render(calendarHeader, context);
     
-    // Add mouseover listeners on day headers for drag detection
-    const dayHeaders = calendarHeader.querySelectorAll('swp-day-header');
-    dayHeaders.forEach(dayHeader => {
-      dayHeader.addEventListener('mouseover', () => {
-        eventBus.emit('header:mouseover', { dayHeader, headerRenderer });
-      });
+    // Use event delegation for mouseover detection on entire header
+    calendarHeader.addEventListener('mouseover', (event) => {
+      const target = event.target as HTMLElement;
+      
+      // Check what was hovered - could be day-header OR all-day-container
+      const dayHeader = target.closest('swp-day-header');
+      const allDayContainer = target.closest('swp-allday-container');
+      
+      if (dayHeader || allDayContainer) {
+        const hoveredElement = dayHeader || allDayContainer;
+        const targetDate = (hoveredElement as HTMLElement).dataset.date;
+        
+        console.log('GridRenderer: Detected hover over:', {
+          elementType: dayHeader ? 'day-header' : 'all-day-container',
+          targetDate,
+          element: hoveredElement
+        });
+        
+        eventBus.emit('header:mouseover', { 
+          element: hoveredElement,
+          targetDate,
+          headerRenderer 
+        });
+      }
     });
   }
 
@@ -179,7 +197,7 @@ export class GridRenderer {
     // Clear existing content
     calendarHeader.innerHTML = '';
 
-    // Re-render headers using Strategy Pattern
+    // Re-render headers using Strategy Pattern - this will also re-attach the event listener
     this.renderCalendarHeader(calendarHeader as HTMLElement, currentWeek, resourceData);
   }
 }

src/renderers/HeaderRenderer.ts

@@ -1,6 +1,7 @@
 // Header rendering strategy interface and implementations
 
 import { CalendarConfig, ALL_DAY_CONSTANTS } from '../core/CalendarConfig';
+import { eventBus } from '../core/EventBus';
 import { ResourceCalendarData } from '../types/CalendarTypes';
 import { DateCalculator } from '../utils/DateCalculator';
 
@@ -37,7 +38,7 @@ export abstract class BaseHeaderRenderer implements HeaderRenderer {
 
   private animateHeaderExpansion(calendarHeader: HTMLElement): void {
     const root = document.documentElement;
-    const currentHeaderHeight = parseInt(getComputedStyle(root).getPropertyValue('--header-height') || '80');
+    const currentHeaderHeight = parseInt(getComputedStyle(root).getPropertyValue('--header-height'));
     const targetHeight = currentHeaderHeight + ALL_DAY_CONSTANTS.SINGLE_ROW_HEIGHT;
     
     // Find header spacer
@@ -49,7 +50,7 @@ export abstract class BaseHeaderRenderer implements HeaderRenderer {
         { height: `${currentHeaderHeight}px` },
         { height: `${targetHeight}px` }
       ], {
-        duration: 300,
+        duration: 150,
         easing: 'ease-out',
         fill: 'forwards'
       })
@@ -61,7 +62,7 @@ export abstract class BaseHeaderRenderer implements HeaderRenderer {
           { height: `${currentHeaderHeight}px` },
           { height: `${targetHeight}px` }
         ], {
-          duration: 300,
+          duration: 150,
           easing: 'ease-out',
           fill: 'forwards'
         })
@@ -72,8 +73,41 @@ export abstract class BaseHeaderRenderer implements HeaderRenderer {
     Promise.all(animations.map(anim => anim.finished)).then(() => {
       // Set the CSS variable after animation
       root.style.setProperty('--all-day-row-height', `${ALL_DAY_CONSTANTS.SINGLE_ROW_HEIGHT}px`);
+      
+      // Create empty all-day containers after animation
+      this.createEmptyAllDayContainers(calendarHeader);
+      
+      // Notify ScrollManager about header height change
+      eventBus.emit('header:height-changed');
     });
   }
+
+  private createEmptyAllDayContainers(calendarHeader: HTMLElement): void {
+    const dayHeaders = calendarHeader.querySelectorAll('swp-day-header');
+    
+    dayHeaders.forEach((dayHeader, index) => {
+      const date = (dayHeader as HTMLElement).dataset.date;
+      if (!date) return;
+      
+      const columnIndex = index + 1; // 1-based grid index
+      const containerKey = `${columnIndex}-1`;
+      
+      // Check if container already exists
+      let container = calendarHeader.querySelector(`swp-allday-container[data-container-key="${containerKey}"]`);
+      
+      if (!container) {
+        // Create empty container
+        container = document.createElement('swp-allday-container');
+        container.setAttribute('data-container-key', containerKey);
+        container.setAttribute('data-date', date);
+        (container as HTMLElement).style.gridColumn = `${columnIndex}`;
+        (container as HTMLElement).style.gridRow = '2';
+        calendarHeader.appendChild(container);
+      }
+    });
+    
+    console.log('Created empty all-day containers for all days');
+  }
 }
 
 /**