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

WIP

Browse source
This commit is contained in:
Janus C. H. Knudsen 2025-10-02 15:57:11 +02:00
parent 0f2d96f76f
commit 54acdb9b41
2 changed files with 59 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/managers/AllDayManager.ts
View file

@ -462,7 +462,7 @@ 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.style.display = "none"; element.classList.add('max-event-overflow-hide');
// Remove transition class after animation // Remove transition class after animation
setTimeout(() => element.classList.remove('transitioning'), 200); setTimeout(() => element.classList.remove('transitioning'), 200);
@ -523,6 +523,13 @@ export class AllDayManager {
private toggleExpanded(): void { private toggleExpanded(): void {
this.isExpanded = !this.isExpanded; this.isExpanded = !this.isExpanded;
this.checkAndAnimateAllDayHeight(); this.checkAndAnimateAllDayHeight();
let elements = document.querySelectorAll('swp-allday-container swp-event');
elements.forEach(element: HTMLElement => {
element.classList.toggle('max-event-overflow-hide');
} }
/** /**
@ -558,7 +565,7 @@ export class AllDayManager {
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>`;
@ -580,7 +587,7 @@ export class AllDayManager {
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();
}); });

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

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