WIP

src/managers/AllDayManager.ts

@@ -462,7 +462,7 @@ export class AllDayManager {
           element.style.gridColumn = `${layout.startColumn} / ${layout.endColumn + 1}`;
 
           if (layout.row > ALL_DAY_CONSTANTS.MAX_COLLAPSED_ROWS)
-            element.style.display = "none";
+            element.classList.add('max-event-overflow-hide');
 
           // Remove transition class after animation
           setTimeout(() => element.classList.remove('transitioning'), 200);
@@ -523,68 +523,75 @@ export class AllDayManager {
   private toggleExpanded(): void {
     this.isExpanded = !this.isExpanded;
     this.checkAndAnimateAllDayHeight();
-  }
+
+
+    let elements = document.querySelectorAll('swp-allday-container swp-event');
+    elements.forEach(element: HTMLElement => {
+
+    element.classList.toggle('max-event-overflow-hide');
+
+    }
 
   /**
    * Count number of events in a specific column using ColumnBounds
    */
   private countEventsInColumn(columnBounds: ColumnBounds): number {
-    let columnIndex = columnBounds.index;
+      let columnIndex = columnBounds.index;
-    let count = 0;
+      let count = 0;
 
-    this.currentLayouts.forEach((layout) => {
+      this.currentLayouts.forEach((layout) => {
-      // Check if event spans this column
+        // Check if event spans this column
-      if (layout.startColumn <= columnIndex && layout.endColumn >= columnIndex) {
+        if (layout.startColumn <= columnIndex && layout.endColumn >= columnIndex) {
-        count++;
+          count++;
-      }
+        }
-    });
+      });
-    return count;
+      return count;
-  }
+    }
 
   /**
    * Update overflow indicators for collapsed state
    */
   private updateOverflowIndicators(): void {
-    const container = this.getAllDayContainer();
+      const container = this.getAllDayContainer();
-    if (!container) return;
+      if(!container) return;
 
-    // Create overflow indicators for each column that needs them
+      // Create overflow indicators for each column that needs them
-    let columns = ColumnDetectionUtils.getColumns();
+      let columns = ColumnDetectionUtils.getColumns();
 
-    columns.forEach((columnBounds) => {
+      columns.forEach((columnBounds) => {
-      let totalEventsInColumn = this.countEventsInColumn(columnBounds);
+        let totalEventsInColumn = this.countEventsInColumn(columnBounds);
-      let overflowCount = totalEventsInColumn - ALL_DAY_CONSTANTS.MAX_COLLAPSED_ROWS
+        let overflowCount = totalEventsInColumn - ALL_DAY_CONSTANTS.MAX_COLLAPSED_ROWS
 
-      if (overflowCount > 0) {
+        if (overflowCount > 0) {
-        // Create new overflow indicator element
+          // Create new overflow indicator element
-        let overflowElement = document.createElement('swp-event');
+          let overflowElement = document.createElement('swp-event');
-        overflowElement.className = 'max-event-overflow';
+          overflowElement.className = 'max-event-indicator';
-        overflowElement.style.gridRow = ALL_DAY_CONSTANTS.MAX_COLLAPSED_ROWS.toString();
+          overflowElement.style.gridRow = ALL_DAY_CONSTANTS.MAX_COLLAPSED_ROWS.toString();
-        overflowElement.style.gridColumn = columnBounds.index.toString();
+          overflowElement.style.gridColumn = columnBounds.index.toString();
-        overflowElement.innerHTML = `<span>+${overflowCount + 1} more</span>`;
+          overflowElement.innerHTML = `<span>+${overflowCount + 1} more</span>`;
-        overflowElement.onclick = (e) => {
+          overflowElement.onclick = (e) => {
-          e.stopPropagation();
+            e.stopPropagation();
-          this.toggleExpanded();
+            this.toggleExpanded();
-        };
+          };
 
-        container.appendChild(overflowElement);
+          container.appendChild(overflowElement);
-      }
+        }
-    });
+      });
-  }
+    }
 
   /**
    * Clear overflow indicators and restore normal state
    */
   private clearOverflowIndicators(): void {
-    const container = this.getAllDayContainer();
+      const container = this.getAllDayContainer();
-    if (!container) return;
+      if(!container) return;
 
-    // Remove all overflow indicator elements
+      // Remove all overflow indicator elements
-    container.querySelectorAll('.max-event-overflow').forEach((element) => {
+      container.querySelectorAll('.max-event-indicator').forEach((element) => {
-      element.remove();
+        element.remove();
-    });
+      });
 
 
-  }
+    }
 
 }

wwwroot/css/calendar-layout-css.css

@@ -353,7 +353,7 @@ swp-allday-container swp-event {
 }
 
 /* Overflow indicator styling */
-swp-allday-container swp-event.max-event-overflow {
+swp-allday-container swp-event.max-event-indicator {
   background: #e0e0e0 !important;
   color: #666 !important;
   border: 1px dashed #999 !important;
@@ -364,13 +364,13 @@ swp-allday-container swp-event.max-event-overflow {
   justify-content: center;
 }
 
-swp-allday-container swp-event.max-event-overflow:hover {
+swp-allday-container swp-event.max-event-indicator:hover {
   background: #d0d0d0 !important;
   color: #333 !important;
   opacity: 1;
 }
 
-swp-allday-container swp-event.max-event-overflow span {
+swp-allday-container swp-event.max-event-indicator span {
   display: block;
   width: 100%;
   text-align: center;
@@ -378,6 +378,14 @@ swp-allday-container swp-event.max-event-overflow span {
   font-weight: normal;
 }
 
+swp-allday-container swp-event.max-event-overflow-show {
+  display: block;
+}
+
+swp-allday-container swp-event.max-event-overflow-hide {
+  display: none;
+}
+
 /* Hide time element for all-day styled events */
 swp-allday-container swp-event swp-event-time{
   display: none;