Improves all-day event layout and drag behavior

Refactors all-day event layout calculation and rendering for improved accuracy and performance.

Improves drag-and-drop behavior for all-day events, ensuring correct event placement and column detection.

Addresses issues with event overflow display and provides a more responsive user experience.

src/managers/AllDayManager.ts

@@ -53,8 +53,7 @@ export class AllDayManager {
         originalElementTag: payload.originalElement?.tagName
       });
 
-      this.handleConvertToAllDay(payload);
-      this.checkAndAnimateAllDayHeight();
+      this.handleConvertToAllDay(payload); 
     });
 
     eventBus.on('drag:mouseleave-header', (event) => {
@@ -64,7 +63,7 @@ export class AllDayManager {
         originalElementId: originalElement?.dataset?.eventId
       });
 
-      this.checkAndAnimateAllDayHeight();
+      //this.checkAndAnimateAllDayHeight();
     });
 
     // Listen for drag operations on all-day events
@@ -117,15 +116,8 @@ export class AllDayManager {
         reason
       });
 
-      // Recalculate all-day height since clones may have been removed
-      this.checkAndAnimateAllDayHeight();
     });
 
-    // Listen for height check requests from EventRendererManager
-    eventBus.on('allday:checkHeight', () => {
-      console.log('📏 AllDayManager: Received allday:checkHeight request');
-      this.checkAndAnimateAllDayHeight();
-    });
   }
 
   private getAllDayContainer(): HTMLElement | null {
@@ -212,7 +204,7 @@ export class AllDayManager {
 
       }
     } else {
-      
+
       // Hide chevron - not needed
       this.updateChevronButton(false);
       this.clearOverflowIndicators();
@@ -313,7 +305,19 @@ export class AllDayManager {
     return layoutEngine.calculateLayout(events);
 
   }
+  public initAllDayEventsLayout(events: CalendarEvent[], weekDates: string[]): EventLayout[] {
 
+    // Store current state
+    this.currentAllDayEvents = events;
+    this.currentWeekDates = weekDates;
+
+    // Initialize layout engine with provided week dates
+    var layoutEngine = new AllDayLayoutEngine(weekDates);
+
+    // Calculate layout for all events together - AllDayLayoutEngine handles CalendarEvents directly
+    this.currentLayouts = layoutEngine.calculateLayout(events);
+    return this.currentLayouts;
+  }
 
   /**
    * Handle conversion of timed event to all-day event - SIMPLIFIED
@@ -412,12 +416,8 @@ export class AllDayManager {
     if (dragEndEvent.draggedClone == null)
       return;
 
-
     // 2. Normalize clone ID
-    const cloneId = dragEndEvent.draggedClone?.dataset.eventId;
-    if (cloneId?.startsWith('clone-')) {
-      dragEndEvent.draggedClone.dataset.eventId = cloneId.replace('clone-', '');
-    }
+    dragEndEvent.draggedClone.dataset.eventId = dragEndEvent.draggedClone.dataset.eventId?.replace('clone-', '');
 
     // 3. Create temporary array with existing events + the dropped event
     let eventId = dragEndEvent.draggedClone.dataset.eventId;
@@ -430,7 +430,7 @@ export class AllDayManager {
 
     const droppedEvent: CalendarEvent = {
       id: eventId,
-      title: dragEndEvent.draggedClone.dataset.title || dragEndEvent.draggedClone.textContent || '',
+      title: dragEndEvent.draggedClone.dataset.title|| '',
       start: new Date(eventDate),
       end: new Date(eventDate),
       type: eventType,
@@ -449,16 +449,14 @@ export class AllDayManager {
     this.newLayouts.forEach((layout) => {
       // Find current layout for this event
       var currentLayout = this.currentLayouts.find(old => old.calenderEvent.id === layout.calenderEvent.id);
-      var currentGridArea = currentLayout?.gridArea;
-      var newGridArea = layout.gridArea;
 
-      if (currentGridArea !== newGridArea) {
+      if (currentLayout?.gridArea !== layout.gridArea) {
         changedCount++;
         const element = dragEndEvent.draggedClone;
         if (element) {
           // Add transition class for smooth animation
           element.classList.add('transitioning');
-          element.style.gridArea = newGridArea;
+          element.style.gridArea = layout.gridArea;
           element.style.gridRow = layout.row.toString();
           element.style.gridColumn = `${layout.startColumn} / ${layout.endColumn + 1}`;
 
@@ -529,7 +527,7 @@ export class AllDayManager {
   private countEventsInColumn(columnBounds: ColumnBounds): number {
     var columnIndex = columnBounds.index;
     var count = 0;
-    
+
     this.currentLayouts.forEach((layout) => {
       // Check if event spans this column
       if (layout.startColumn <= columnIndex && layout.endColumn >= columnIndex) {
@@ -546,23 +544,26 @@ export class AllDayManager {
     const container = this.getAllDayContainer();
     if (!container) return;
 
-    container.querySelectorAll('swp-event').forEach((element) => {
-      const event = element as HTMLElement;
-      const gridRow = parseInt(event.style.gridRow) || 1;
+    // Create overflow indicators for each column that needs them
+    var columns = ColumnDetectionUtils.getColumns();
 
-      if (gridRow === 4) {
-       
-        // Convert row 4 events to indicators
-        const overflowCount = this.actualRowCount - 3; // Total overflow rows
-        event.classList.add('max-event-overflow');
-        event.innerHTML = `<span>+${overflowCount} more</span>`;
-        event.onclick = (e) => {
+    columns.forEach((columnBounds) => {
+      var totalEventsInColumn = this.countEventsInColumn(columnBounds);
+      var overflowCount = Math.max(0, totalEventsInColumn - 3);
+
+      if (overflowCount > 0) {
+        // Create new overflow indicator element
+        var overflowElement = document.createElement('swp-event');
+        overflowElement.className = 'max-event-overflow';
+        overflowElement.style.gridRow = '4';
+        overflowElement.style.gridColumn = columnBounds.index.toString();
+        overflowElement.innerHTML = `<span>+${overflowCount} more</span>`;
+        overflowElement.onclick = (e) => {
           e.stopPropagation();
           this.toggleExpanded();
         };
-      } else if (gridRow > 4) {
-        // Hide events beyond row 4
-        event.style.display = 'none';
+
+        container.appendChild(overflowElement);
       }
     });
   }
@@ -574,21 +575,12 @@ export class AllDayManager {
     const container = this.getAllDayContainer();
     if (!container) return;
 
-    container.querySelectorAll('.max-event-overflow').forEach((event) => {
-      const htmlEvent = event as HTMLElement;
-      htmlEvent.classList.remove('max-event-overflow');
-      htmlEvent.onclick = null;
-
-      // Restore original title from data-title
-      if (htmlEvent.dataset.title) {
-        htmlEvent.innerHTML = htmlEvent.dataset.title;
-      } 
+    // Remove all overflow indicator elements
+    container.querySelectorAll('.max-event-overflow').forEach((element) => {
+      element.remove();
     });
 
-    // Show all hidden events
-    container.querySelectorAll('swp-event[style*="display: none"]').forEach((event) => {
-      (event as HTMLElement).style.display = '';
-    });
+
   }
 
 }