Janus007/Calendar
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improves all-day event overflow handling

Browse source 
Ensures correct display of all-day events when collapsed or expanded.

Improves the transition between collapsed and expanded states by
adjusting the overflow event visibility.
This commit is contained in:
Janus C. H. Knudsen 2025-10-02 16:57:43 +02:00
parent 0bf369907b
commit 496be2f7ce
2 changed files with 47 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

83
src/managers/AllDayManager.ts
View file

@ -462,7 +462,10 @@ export class AllDayManager {
element.style.gridColumn = `${layout.startColumn} / ${layout.endColumn + 1}`; element.style.gridColumn = `${layout.startColumn} / ${layout.endColumn + 1}`;
if (layout.row > ALL_DAY_CONSTANTS.MAX_COLLAPSED_ROWS) if (layout.row > ALL_DAY_CONSTANTS.MAX_COLLAPSED_ROWS)
element.classList.add('max-event-overflow-hide'); if (!this.isExpanded)
element.classList.add('max-event-overflow-hide');
else
element.classList.add('max-event-overflow-show');
// Remove transition class after animation // Remove transition class after animation
setTimeout(() => element.classList.remove('transitioning'), 200); setTimeout(() => element.classList.remove('transitioning'), 200);
@ -539,62 +542,62 @@ export class AllDayManager {
* Count number of events in a specific column using ColumnBounds * Count number of events in a specific column using ColumnBounds
*/ */
private countEventsInColumn(columnBounds: ColumnBounds): number { 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 * Update overflow indicators for collapsed state
*/ */
private updateOverflowIndicators(): void { 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-indicator'; 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 * Clear overflow indicators and restore normal state
*/ */
private clearOverflowIndicators(): void { 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-indicator').forEach((element) => { container.querySelectorAll('.max-event-indicator').forEach((element) => {
element.remove(); element.remove();
}); });
} }
} }

6
wwwroot/css/calendar-layout-css.css
View file

@ -379,11 +379,13 @@ swp-allday-container swp-event.max-event-indicator span {
} }
swp-allday-container swp-event.max-event-overflow-show { swp-allday-container swp-event.max-event-overflow-show {
display: block; opacity: 1;
transition: opacity 0.3s ease-in-out;
} }
swp-allday-container swp-event.max-event-overflow-hide { swp-allday-container swp-event.max-event-overflow-hide {
display: none; opacity: 0;
transition: opacity 0.3s ease-in-out;
} }
/* Hide time element for all-day styled events */ /* Hide time element for all-day styled events */