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

feat(mini-cal): ein Punkt je Kalender in dessen Farbe pro Tag

Browse Source 
Statt eines einzelnen Punkts in --primary zeigt der Mini-Kalender jetzt fuer
jeden Kalender, der an dem Tag mindestens einen Termin hat, einen Punkt in
dessen Farbe (max. 4, stabil nach erstem Auftreten sortiert). Die Farbquelle
ist dieselbe wie in Monats-/Wochenansicht: ev.color || ev.calendarColor.

Ausserdem laeuft der Mini-Kalender jetzt ueber filterEvents(), damit
ausgeblendete Gruppenmitglieder keinen Punkt mehr erzeugen. Auf dem
"heute"-Kreis bekommen die Punkte einen duennen weissen Ring, damit sie auf
der farbigen Flaeche lesbar bleiben.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Scarriffle
2026-09-07 13:01:36 +02:00
co-authored by Claude Opus 5
parent f791160d1a
commit 7a2085b961
2 changed files with 34 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/css/app.css
+10 -4
View File
@@ -551,11 +551,17 @@ a { color: var(--primary); text-decoration: none; }
color: #fff; font-weight: 700;
}
.mini-day.selected:not(.today) { background: var(--primary-dim); color: var(--primary); font-weight: 600; }
.mini-day.has-events::after {
content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
width: 4px; height: 4px; border-radius: 50%; background: var(--primary);
/* One dot per calendar with an event that day, in that calendar's colour. */
.mini-dots {
position: absolute; bottom: 1px; left: 0; right: 0;
display: flex; justify-content: center; align-items: center; gap: 2px;
line-height: 0; pointer-events: none;
}
.mini-day.today.has-events::after { background: #fff; }
.mini-dots i {
width: 4px; height: 4px; border-radius: 50%; flex: none;
}
/* Today's cell is a filled circle — ring the dots so they stay readable on it. */
.mini-day.today .mini-dots i { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9); }
/* ── Calendar List ──────────────────────────────────────── */
.cal-list { padding: 8px 0; }