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

fix: Stufenförmige Monatsgrenze – auch waagerechte Linie unter Vormonats-Tagen

Browse Source 
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.
This commit is contained in:
Scarriffle
2026-05-09 17:12:57 +02:00
parent b120d9d430
commit 64d499647d
2 changed files with 14 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/css/app.css
View File

@@ -528,6 +528,17 @@ a { color: var(--primary); text-decoration: none; }
z-index: 4; z-index: 4;
pointer-events: none; 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 { .month-row.month-divider-top {
position: relative; position: relative;
} }

4
frontend/js/views/month.js
View File

@@ -141,10 +141,12 @@ export function renderMonth(container, currentDate, events, onDayClick, onEventC
// First-of-month marker: show month abbreviation, push day number below // First-of-month marker: show month abbreviation, push day number below
const isFirstOfMonth = cell.getDate() === 1; const isFirstOfMonth = cell.getDate() === 1;
const firstCls = isFirstOfMonth ? 'first-of-month' : ''; 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 = []; const dividerClasses = [];
if (isFirstOfMonth && idx > 0) dividerClasses.push('month-divider-left'); 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-top');
if (monthChangeIdx > 0 && idx < monthChangeIdx) dividerClasses.push('month-divider-bottom');
const dividerCls = dividerClasses.join(' '); const dividerCls = dividerClasses.join(' ');
const monthLabel = isFirstOfMonth const monthLabel = isFirstOfMonth
? `<div class="month-marker">${monthsShort[cell.getMonth()]}</div>` ? `<div class="month-marker">${monthsShort[cell.getMonth()]}</div>`