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

Improves all-day event display in collapsed mode

Browse source 
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.
This commit is contained in:
Janus C. H. Knudsen 2025-09-30 15:24:58 +02:00
parent c705869c9e
commit 6223bcd176
2 changed files with 90 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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 */