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 = `+${overflowCount} more`; + 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 */