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

Implements advanced event stacking and grid layout

Browse source 
Introduces a 3-phase algorithm in `EventStackManager` for dynamic event positioning. Groups events by start time proximity to determine optimal layout.

Optimizes horizontal space by using side-by-side grid columns for simultaneous events and allowing non-overlapping events to share stack levels. Supports nested stacking for late-arriving events within grid columns.

Includes comprehensive documentation (`STACKING_CONCEPT.md`) and a visual demonstration (`stacking-visualization.html`) to explain the new layout logic. Updates event rendering to utilize the new manager and adds extensive test coverage.
This commit is contained in:
Janus C. H. Knudsen 2025-10-05 23:54:50 +02:00
parent 57bf122675
commit 2f58ceccd4
8 changed files with 4509 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

43
wwwroot/css/calendar-events-css.css
View file

@ -232,19 +232,52 @@ swp-events-layer[data-filter-active="true"] swp-event[data-matches="true"] {
/* Event group container for column sharing */
swp-event-group {
position: absolute;
display: flex;
gap: 1px;
width: calc(100% - 4px);
display: grid;
gap: 2px;
left: 2px;
right: 2px;
z-index: 10;
}
/* Grid column configurations */
swp-event-group.cols-2 {
grid-template-columns: 1fr 1fr;
}
swp-event-group.cols-3 {
grid-template-columns: 1fr 1fr 1fr;
}
swp-event-group.cols-4 {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
/* Stack levels using margin-left */
swp-event-group.stack-level-0 {
margin-left: 0px;
}
swp-event-group.stack-level-1 {
margin-left: 15px;
}
swp-event-group.stack-level-2 {
margin-left: 30px;
}
swp-event-group.stack-level-3 {
margin-left: 45px;
}
swp-event-group.stack-level-4 {
margin-left: 60px;
}
/* Child events within grid */
swp-event-group swp-event {
flex: 1;
position: relative;
left: 0;
right: 0;
margin: 0;
}
/* All-day event transition for smooth repositioning */