From 6223bcd176fd9d3f8c01276d18e5a288c0463ea1 Mon Sep 17 00:00:00 2001
From: "Janus C. H. Knudsen" <janus007@gmail.com>
Date: Tue, 30 Sep 2025 15:24:58 +0200
Subject: [PATCH] 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       | 66 ++++++++++++++++++++++++++++-
 wwwroot/css/calendar-layout-css.css | 27 +++++++++++-
 2 files changed, 90 insertions(+), 3 deletions(-)

diff --git a/src/managers/AllDayManager.ts b/src/managers/AllDayManager.ts
index 13e2812..89d62e9 100644
--- a/src/managers/AllDayManager.ts
+++ b/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 = '';
+    });
+  }
+
 }
\ No newline at end of file
diff --git a/wwwroot/css/calendar-layout-css.css b/wwwroot/css/calendar-layout-css.css
index 4b37100..c029484 100644
--- a/wwwroot/css/calendar-layout-css.css
+++ b/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 */