Improves all-day event display in collapsed mode

Enhances the all-day event display when collapsed by showing four rows (three events plus an overflow indicator).

Updates the overflow indicator logic to dynamically display the number of hidden events and allow the user to expand the view.

src/managers/AllDayManager.ts

@@ -31,7 +31,7 @@ export class AllDayManager {
   // Expand/collapse state
   private isExpanded: boolean = false;
   private actualRowCount: number = 0;
-  private readonly MAX_COLLAPSED_ROWS = 3;
+  private readonly MAX_COLLAPSED_ROWS = 4; // Show 4 rows when collapsed (3 events + 1 indicator row)
 
   constructor() {
     this.allDayEventRenderer = new AllDayEventRenderer();
@@ -208,13 +208,17 @@ export class AllDayManager {
       // Show chevron button
       this.updateChevronButton(true);
       
-      // Limit to 3 if collapsed
+      // Show 4 rows when collapsed (3 events + indicators)
       if (!this.isExpanded) {
         displayRows = this.MAX_COLLAPSED_ROWS;
+        this.updateOverflowIndicators();
+      } else {
+        this.clearOverflowIndicators();
       }
     } else {
       // Hide chevron - not needed
       this.updateChevronButton(false);
+      this.clearOverflowIndicators();
     }
 
     // Animate to required rows (0 = collapse, >0 = expand)
@@ -558,4 +562,62 @@ export class AllDayManager {
     this.checkAndAnimateAllDayHeight();
   }
 
+  /**
+   * Update overflow indicators for collapsed state
+   */
+  private updateOverflowIndicators(): void {
+    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;
+      
+      if (gridRow === 4) {
+        // Store original content before converting to indicator
+        if (!event.dataset.originalTitle) {
+          event.dataset.originalTitle = event.dataset.title || event.innerHTML;
+        }
+        
+        // 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) => {
+          e.stopPropagation();
+          this.toggleExpanded();
+        };
+      } else if (gridRow > 4) {
+        // Hide events beyond row 4
+        event.style.display = 'none';
+      }
+    });
+  }
+
+  /**
+   * Clear overflow indicators and restore normal state
+   */
+  private clearOverflowIndicators(): void {
+    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;
+      } else if (htmlEvent.dataset.originalTitle) {
+        htmlEvent.innerHTML = htmlEvent.dataset.originalTitle;
+      }
+    });
+    
+    // Show all hidden events
+    container.querySelectorAll('swp-event[style*="display: none"]').forEach((event) => {
+      (event as HTMLElement).style.display = '';
+    });
+  }
+
 }

wwwroot/css/calendar-layout-css.css

@@ -332,7 +332,7 @@ swp-allday-container swp-event {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  background: hsl(208, 100%, 50%);  
+  background: hsl(208, 100%, 50%);
   display: flex;
   z-index: 2; /* Above ghost columns */
   align-items: center;
@@ -349,7 +349,32 @@ swp-allday-container swp-event {
   &.dragging {
     background: lab(70.24% -13.38 -46.17);
   }
+}
 
+/* Overflow indicator styling */
+swp-allday-container swp-event.max-event-overflow {
+  background: #e0e0e0 !important;
+  color: #666 !important;
+  border: 1px dashed #999 !important;
+  cursor: pointer !important;
+  text-align: center !important;
+  font-style: italic;
+  opacity: 0.8;
+  justify-content: center;
+}
+
+swp-allday-container swp-event.max-event-overflow:hover {
+  background: #d0d0d0 !important;
+  color: #333 !important;
+  opacity: 1;
+}
+
+swp-allday-container swp-event.max-event-overflow span {
+  display: block;
+  width: 100%;
+  text-align: center;
+  font-size: 11px;
+  font-weight: normal;
 }
 
 /* Hide time element for all-day styled events */