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

Fix: Scroll auf week-view verlegen – Header und Zeitraster immer gleich breit

Browse Source
This commit is contained in:
Scarriffle
2026-04-08 15:19:16 +02:00
parent 377a24eac6
commit 804d6ac9eb
2 changed files with 6 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/css/app.css
View File

@@ -509,7 +509,7 @@ a { color: var(--primary); text-decoration: none; }
.month-more:hover { color: var(--primary); }
/* ── Week / Day Views ───────────────────────────────────── */
.week-view, .day-view { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.week-view, .day-view { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: scroll; }
.week-head-sticky {
flex-shrink: 0; position: sticky; top: 0; z-index: 10;
background: var(--bg-app);
@@ -573,7 +573,7 @@ a { color: var(--primary); text-decoration: none; }
.col-span-tint { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
/* Time grid */
.week-body { display: flex; flex: 1; overflow-y: scroll; position: relative; min-height: 0; }
.week-time-area { display: flex; flex-shrink: 0; }
.week-time-col { width: 56px; flex-shrink: 0; position: relative; }
.time-label {
height: var(--hour-h, 60px); display: flex; align-items: flex-start; justify-content: flex-end;

14
frontend/js/views/week.js
View File

@@ -147,21 +147,15 @@ export function renderWeek(container, currentDate, events, onSlotClick, onEventC
${alldayCols}
</div>
</div>
<div class="week-body">
<div class="week-time-area">
<div class="week-time-col">${timeLabels}</div>
<div class="week-days-col">${dayCols}</div>
</div>
</div>`;
// Scroll to ~8:00
const body = container.querySelector('.week-body');
if (body) body.scrollTop = 8 * hourH - 20;
// Align sticky header width to body content width (account for scrollbar)
const stickyTop = container.querySelector('.week-head-sticky');
if (body && stickyTop) {
stickyTop.style.paddingRight = (body.offsetWidth - body.clientWidth) + 'px';
}
const scrollEl = container.querySelector(`.${viewClass}`);
if (scrollEl) scrollEl.scrollTop = 8 * hourH - 20;
// Render current-time line
renderNowLine(container, days, hourH);
@@ -171,7 +165,7 @@ export function renderWeek(container, currentDate, events, onSlotClick, onEventC
col.addEventListener('click', e => {
if (e.target.closest('.timed-event')) return;
const rect = col.getBoundingClientRect();
const y = e.clientY - rect.top + (container.querySelector('.week-body')?.scrollTop || 0);
const y = e.clientY - rect.top + (scrollEl?.scrollTop || 0);
const h = Math.floor(y / hourH);
const m = Math.round(((y % hourH) / hourH * 60) / 15) * 15;
const date = new Date(col.dataset.date + 'T00:00:00');