Scarriffle/Calendarr
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Feature: Dynamische Monatsansicht-Lanes + spanning All-Day-Balken in Wochenansicht

Browse Source 
month.js: MAX_LANES wird jetzt aus der tatsächlichen Container-Höhe berechnet (kein hartes Limit von 3 mehr).
week.js: All-Day-Zeile verwendet jetzt dieselbe Overlay-Logik wie die Monatsansicht – Termine spannen als einzelner Balken über mehrere Tage.
This commit is contained in:
Scarriffle
2026-04-08 14:57:57 +02:00
parent e317b799d0
commit fce162693c
3 changed files with 92 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
frontend/css/app.css
View File

@@ -550,22 +550,25 @@ a { color: var(--primary); text-decoration: none; }
.week-day-header.today .day-name { color: var(--today-color); }
/* All-day row */
.week-allday-row { display: flex; border-bottom: 1px solid var(--border); flex-shrink: 0; min-height: 28px; }
.allday-gutter { width: 56px; flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; padding-right: 6px; font-size: 10px; color: var(--text-3); }
.allday-cols { display: flex; flex: 1; }
.allday-col { flex: 1; border-left: 1px solid var(--border); padding: 2px; }
.col-span-tint {
position: absolute; inset: 0; pointer-events: none; z-index: 0;
}
.allday-event {
font-size: 11px; font-weight: 500; padding: 2px 6px;
border-radius: 3px; margin-bottom: 2px; cursor: pointer;
.week-allday-row { display: flex; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.allday-gutter { width: 56px; flex-shrink: 0; display: flex; align-items: flex-start; justify-content: flex-end; padding: 6px 6px 0; font-size: 10px; color: var(--text-3); }
.allday-cols-wrap { flex: 1; position: relative; display: flex; }
.allday-col-bg { flex: 1; border-left: 1px solid var(--border); }
.allday-spans-layer { position: absolute; inset: 0; pointer-events: none; }
.allday-span {
position: absolute;
height: 18px; line-height: 18px;
font-size: 11px; font-weight: 500;
padding: 0 6px; border-radius: 3px;
cursor: pointer; pointer-events: all;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.allday-event.multiday-timed {
opacity: .88;
border-left: 3px solid rgba(255,255,255,.45);
}
.allday-span:hover { filter: brightness(1.12); }
.allday-span.past { opacity: .45; }
.allday-span.continues-left { border-top-left-radius: 0; border-bottom-left-radius: 0; padding-left: 3px; }
.allday-span.continues-right { border-top-right-radius: 0; border-bottom-right-radius: 0; padding-right: 3px; }
.allday-span.multiday-timed { opacity: .88; border-left: 3px solid rgba(255,255,255,.4); }
.col-span-tint { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
/* Time grid */
.week-body { display: flex; flex: 1; overflow-y: auto; position: relative; }