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/managers/ColumnDetector.ts

@@ -78,18 +78,26 @@ export class ColumnDetector {
     document.body.addEventListener('mousedown', this.handleMouseDown.bind(this));
     document.body.addEventListener('mouseup', this.handleMouseUp.bind(this));
     
-    // Listen for header mouseover events
+    // Listen for header mouseover events (both day-headers and all-day-containers)
     eventBus.on('header:mouseover', (event) => {
-      const { dayHeader, headerRenderer } = (event as CustomEvent).detail;
-      if (this.isMouseDown && this.draggedClone) {
-        console.log('Dragging clone over header - expanding and converting to all-day');
-        headerRenderer.addToAllDay(dayHeader);
-        
-        // Convert clone to all-day format immediately
-        const targetDate = dayHeader.dataset.date;
-        if (targetDate) {
+      const { element, targetDate, headerRenderer } = (event as CustomEvent).detail;
+      
+      if (this.isMouseDown && this.draggedClone && targetDate) {
+        // Scenario 1: Timed event being dragged to header - convert to all-day
+        if (this.draggedClone.tagName === 'SWP-EVENT') {
+          console.log('Converting timed event to all-day for date:', targetDate);
+          headerRenderer.addToAllDay(element);
           this.convertToAllDayPreview(targetDate);
         }
+        
+        // Scenario 2: All-day event being moved to different day
+        else if (this.draggedClone.tagName === 'SWP-ALLDAY-EVENT') {
+          const currentDate = this.draggedClone.parentElement?.getAttribute('data-date');
+          if (currentDate !== targetDate) {
+            console.log('Moving all-day event from', currentDate, 'to', targetDate);
+            this.moveAllDayToNewDate(targetDate);
+          }
+        }
       }
     });
   }
@@ -442,56 +450,63 @@ export class ColumnDetector {
     this.transformCloneToAllDay(this.draggedClone, targetDate);
 
     // No need to recalculate height - addToAllDay already handles this
-    console.log(`Converted clone to all-day preview for date: ${targetDate}`);
   }
 
   /**
    * Transform clone from timed event to all-day event format
    */
   private transformCloneToAllDay(clone: HTMLElement, targetDate: string): void {
-    console.log('transformCloneToAllDay called with:', { clone, targetDate });
-    
     const calendarHeader = document.querySelector('swp-calendar-header');
-    if (!calendarHeader) {
-      console.error('No calendar header found');
-      return;
-    }
+    if (!calendarHeader) return;
 
     // Find or create all-day container for target date
     const container = this.findOrCreateAllDayContainer(calendarHeader as HTMLElement, targetDate);
-    if (!container) {
-      console.error('No container found/created');
-      return;
-    }
+    if (!container) return;
 
     // Extract title from original clone (remove time info)
     const titleElement = clone.querySelector('swp-event-title');
     const eventTitle = titleElement ? titleElement.textContent || 'Untitled Event' : 'Untitled Event';
     
-    console.log('Creating all-day event with title:', eventTitle);
-    
     // Create new all-day event element
     const allDayEvent = document.createElement('swp-allday-event');
     allDayEvent.setAttribute('data-event-id', clone.dataset.eventId || '');
     allDayEvent.setAttribute('data-type', clone.dataset.type || 'work');
     allDayEvent.textContent = eventTitle;
     
-    console.log('All-day event created:', allDayEvent);
-    
     // Remove the original clone from its current parent
     if (clone.parentElement) {
-      console.log('Removing original clone from parent:', clone.parentElement);
       clone.parentElement.removeChild(clone);
     }
     
     // Add new all-day event to container
     container.appendChild(allDayEvent);
-    console.log('All-day event added to container:', container);
     
     // Update reference to point to new element
     this.draggedClone = allDayEvent;
     
-    console.log(`Transformed clone to all-day event in container for date: ${targetDate}`);
+    // Recalculate height after adding new all-day event
+    this.recalculateAllDayHeight();
+  }
+
+  /**
+   * Move all-day event to a new date container
+   */
+  private moveAllDayToNewDate(targetDate: string): void {
+    if (!this.draggedClone) return;
+    
+    const calendarHeader = document.querySelector('swp-calendar-header');
+    if (!calendarHeader) return;
+    
+    // Find or create container for new date
+    const newContainer = this.findOrCreateAllDayContainer(calendarHeader as HTMLElement, targetDate);
+    
+    // Move the dragged clone to new container
+    if (newContainer && this.draggedClone.parentElement !== newContainer) {
+      newContainer.appendChild(this.draggedClone);
+      
+      // Recalculate height after moving
+      this.recalculateAllDayHeight();
+    }
   }
 
   /**
@@ -528,13 +543,87 @@ export class ColumnDetector {
       (container as HTMLElement).style.gridRow = '2'; // All-day row
       calendarHeader.appendChild(container);
       
-      console.log(`Created new all-day container for column ${columnIndex}, date: ${targetDate}`);
     }
     
     return container as HTMLElement;
   }
 
 
+  /**
+   * Recalculate all-day row height based on maximum events in any container
+   */
+  private recalculateAllDayHeight(): void {
+    const calendarHeader = document.querySelector('swp-calendar-header') as HTMLElement;
+    if (!calendarHeader) return;
+    
+    // Find all all-day containers
+    const allDayContainers = calendarHeader.querySelectorAll('swp-allday-container');
+    let maxStackHeight = 0;
+    
+    // Count events in each container to find maximum
+    allDayContainers.forEach(container => {
+      const eventCount = container.querySelectorAll('swp-allday-event').length;
+      if (eventCount > maxStackHeight) {
+        maxStackHeight = eventCount;
+      }
+    });
+    
+    // Calculate new height using same formula as EventRenderer
+    const calculatedHeight = maxStackHeight > 0 
+      ? (maxStackHeight * ALL_DAY_CONSTANTS.EVENT_HEIGHT) + 
+        ((maxStackHeight - 1) * ALL_DAY_CONSTANTS.EVENT_GAP) + 
+        ALL_DAY_CONSTANTS.CONTAINER_PADDING
+      : ALL_DAY_CONSTANTS.SINGLE_ROW_HEIGHT; // Keep minimum height
+    
+    // Get current heights for animation
+    const root = document.documentElement;
+    const headerHeight = parseInt(getComputedStyle(root).getPropertyValue('--header-height'));
+    const currentAllDayHeight = parseInt(getComputedStyle(root).getPropertyValue('--all-day-row-height') || '0');
+    const currentTotalHeight = headerHeight + currentAllDayHeight;
+    const targetTotalHeight = headerHeight + calculatedHeight;
+    
+    // Only animate if height actually changes
+    if (currentAllDayHeight !== calculatedHeight) {
+      // Find header spacer
+      const headerSpacer = document.querySelector('swp-header-spacer') as HTMLElement;
+      
+      // Animate both header and spacer simultaneously
+      const animations = [
+        calendarHeader.animate([
+          { height: `${currentTotalHeight}px` },
+          { height: `${targetTotalHeight}px` }
+        ], {
+          duration: 150,
+          easing: 'ease-out',
+          fill: 'forwards'
+        })
+      ];
+      
+      if (headerSpacer) {
+        animations.push(
+          headerSpacer.animate([
+            { height: `${currentTotalHeight}px` },
+            { height: `${targetTotalHeight}px` }
+          ], {
+            duration: 150,
+            easing: 'ease-out',
+            fill: 'forwards'
+          })
+        );
+      }
+      
+      // Wait for all animations to finish before setting CSS variable
+      Promise.all(animations.map(anim => anim.finished)).then(() => {
+        root.style.setProperty('--all-day-row-height', `${calculatedHeight}px`);
+        
+        // Notify ScrollManager about header height change
+        eventBus.emit('header:height-changed');
+      });
+      
+      console.log(`Animated all-day height: ${currentAllDayHeight}px → ${calculatedHeight}px (max stack: ${maxStackHeight})`);
+    }
+  }
+
   public destroy(): void {
     this.stopAutoScroll();
     document.body.removeEventListener('mousemove', this.handleMouseMove.bind(this));

src/managers/ScrollManager.ts

@@ -36,6 +36,10 @@ export class ScrollManager {
       this.setupScrolling();
     });
 
+    // Handle all-day row height changes
+    eventBus.on('header:height-changed', () => {
+      this.updateScrollableHeight();
+    });
     
     // Handle window resize
     window.addEventListener('resize', () => {

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');
+  }
 }
 
 /**

wwwroot/css/calendar-layout-css.css

@@ -56,7 +56,7 @@ swp-header-spacer {
   border-bottom: 1px solid var(--color-border);
   z-index: 5; /* Higher than time-axis to cover it when scrolling */
   position: relative;
-  transition: height 300ms ease; /* Smooth height transitions */
+  transition: height 150ms ease; /* Smooth height transitions */
 }
 
 
@@ -151,7 +151,7 @@ swp-calendar-header {
   top: 0;
   z-index: 3; /* Lower than header-spacer so it slides under during horizontal scroll */
   height: calc(var(--header-height) + var(--all-day-row-height)); /* Same calculation as spacers */
-  transition: height 0.3s ease;
+  transition: height 150ms ease;
   
   /* Force scrollbar to appear for alignment */
   overflow-y: scroll;