Implements event overlap rendering

Adds logic to handle event overlaps in the calendar view. It introduces two patterns: column sharing for events with the same start time (rendered using flexbox) and stacking for events with a >30 min difference (rendered with reduced width and z-index).

It also introduces deep linking to specific events via URL parameters.
This commit is contained in:
Janus Knudsen 2025-09-04 00:16:35 +02:00
parent 7a1c776bc1
commit ff067cfac3
11 changed files with 837 additions and 16 deletions

View file

@ -204,4 +204,36 @@ swp-events-layer[data-filter-active="true"] swp-event {
/* Events that match the filter stay normal */
swp-events-layer[data-filter-active="true"] swp-event[data-matches="true"] {
opacity: 1;
}
/* Event overlap styling */
/* Event group container for column sharing */
.event-group {
position: absolute;
display: flex;
gap: 1px;
width: calc(100% - 4px);
left: 2px;
z-index: 10;
}
.event-group swp-event {
flex: 1;
position: relative;
left: 0;
right: 0;
margin: 0;
}
/* Debug styling for development */
.event-group[data-event-count="2"] {
border-left: 2px solid rgba(0, 255, 0, 0.3);
}
.event-group[data-event-count="3"] {
border-left: 2px solid rgba(0, 0, 255, 0.3);
}
.event-group[data-event-count="4"] {
border-left: 2px solid rgba(255, 0, 255, 0.3);
}