From 87ebc22d17de84cf4f1aea7e7661dfc391d2ab5a Mon Sep 17 00:00:00 2001 From: Guido Schmit Date: Sat, 9 May 2026 17:12:57 +0200 Subject: [PATCH] =?UTF-8?q?fix:=20Stufenf=C3=B6rmige=20Monatsgrenze=20?= =?UTF-8?q?=E2=80=93=20auch=20waagerechte=20Linie=20unter=20Vormonats-Tage?= =?UTF-8?q?n?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Die Trennlinie hat jetzt eine 'Stufen'-Form: unten unter den letzten Tagen des Vormonats in derselben Zeile, dann links runter zum 1. des neuen Monats, dann oben über die ersten Tage des neuen Monats. So ist die Monatsgrenze visuell vollständig umrandet. Co-Authored-By: Claude Opus 4.6 --- frontend/css/app.css | 11 +++++++++++ frontend/js/views/month.js | 4 +++- 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/frontend/css/app.css b/frontend/css/app.css index f075962..35ddf75 100644 --- a/frontend/css/app.css +++ b/frontend/css/app.css @@ -528,6 +528,17 @@ a { color: var(--primary); text-decoration: none; } z-index: 4; pointer-events: none; } +/* Bottom divider on the previous-month cells in the same row as the change. + Uses ::before because these cells never have month-divider-left. */ +.month-col.month-divider-bottom::before { + content: ''; + position: absolute; + bottom: 0; left: 0; right: 0; + height: 3px; + background: var(--month-divider-color, #7090c0); + z-index: 4; + pointer-events: none; +} .month-row.month-divider-top { position: relative; } diff --git a/frontend/js/views/month.js b/frontend/js/views/month.js index 4a019c4..e213a75 100644 --- a/frontend/js/views/month.js +++ b/frontend/js/views/month.js @@ -141,10 +141,12 @@ export function renderMonth(container, currentDate, events, onDayClick, onEventC // First-of-month marker: show month abbreviation, push day number below const isFirstOfMonth = cell.getDate() === 1; const firstCls = isFirstOfMonth ? 'first-of-month' : ''; - // Vertical line at month change, horizontal line spanning from change to end of row + // Step-shaped boundary at month change: bottom under the previous-month + // tail, vertical at the change, top across the new-month head. const dividerClasses = []; if (isFirstOfMonth && idx > 0) dividerClasses.push('month-divider-left'); if (monthChangeIdx > 0 && idx >= monthChangeIdx) dividerClasses.push('month-divider-top'); + if (monthChangeIdx > 0 && idx < monthChangeIdx) dividerClasses.push('month-divider-bottom'); const dividerCls = dividerClasses.join(' '); const monthLabel = isFirstOfMonth ? `
${monthsShort[cell.getMonth()]}
`