From f791160d1a12abbbfa2af7431680a806db294286 Mon Sep 17 00:00:00 2001
From: Scarriffle <scarriffleservices@gmail.com>
Date: Wed, 1 Jul 2026 09:42:02 +0200
Subject: [PATCH] fix: mini-cal marks full multi-day span; short week events
 show title inline

- Mini calendar: mark every day an event spans (not just the start day) so
  multi-day events (Urlaub/Ferien) show a dot across the whole range
- Week view: render short events on one line (time next to title) so the title
  stays visible; drop the location line when there's no room

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/css/app.css      |  4 ++++
 frontend/js/calendar.js   | 19 +++++++++++++++----
 frontend/js/views/week.js |  8 ++++++--
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/frontend/css/app.css b/frontend/css/app.css
index 4b94dd0..c51fda2 100644
--- a/frontend/css/app.css
+++ b/frontend/css/app.css
@@ -915,6 +915,10 @@ a { color: var(--primary); text-decoration: none; }
 .timed-event .ev-time { font-size: 10px; opacity: .85; }
 .timed-event .ev-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .timed-event .ev-loc { font-size: 10px; opacity: .75; white-space: nowrap; overflow: hidden; }
+/* Short events: time and title on one line so the title stays visible. */
+.timed-event.short { display: flex; flex-direction: row; align-items: baseline; gap: 4px; }
+.timed-event.short .ev-time { flex-shrink: 0; }
+.timed-event.short .ev-title { flex: 1; min-width: 0; }
 
 /* Day view specifics */
 .day-view .week-day-col { flex: 1; }
diff --git a/frontend/js/calendar.js b/frontend/js/calendar.js
index 313548d..711774b 100644
--- a/frontend/js/calendar.js
+++ b/frontend/js/calendar.js
@@ -576,11 +576,22 @@ function renderMiniCal() {
   const DOW_LABELS = weekStartDay === 'sunday' ? DOW_SUNDAY : DOW_MONDAY;
   miniDowEls.forEach((el, i) => { el.textContent = DOW_LABELS[i]; });
 
-  // Build event date set
-  const eventDates = new Set(state.events.map(ev => {
+  // Build event date set — mark every day an event spans, not just its start
+  // day, so multi-day events (Urlaub/Ferien) show a dot across the whole range.
+  const eventDates = new Set();
+  state.events.forEach(ev => {
     const s = new Date(ev.start);
-    return `${s.getFullYear()}-${s.getMonth()}-${s.getDate()}`;
-  }));
+    let end = new Date(ev.end || ev.start);
+    // All-day events store an exclusive end → step back to the last real day.
+    if (ev.allDay) { end.setHours(0, 0, 0, 0); if (end > s) end.setDate(end.getDate() - 1); }
+    const cur  = new Date(s.getFullYear(),   s.getMonth(),   s.getDate());
+    const last = new Date(end.getFullYear(), end.getMonth(), end.getDate());
+    let guard = 0;
+    while (cur <= last && guard++ < 400) {
+      eventDates.add(`${cur.getFullYear()}-${cur.getMonth()}-${cur.getDate()}`);
+      cur.setDate(cur.getDate() + 1);
+    }
+  });
 
   const days = [];
   const cur = new Date(gridStart);
diff --git a/frontend/js/views/week.js b/frontend/js/views/week.js
index e84c0cb..5928fa3 100644
--- a/frontend/js/views/week.js
+++ b/frontend/js/views/week.js
@@ -124,8 +124,12 @@ export function renderWeek(container, currentDate, events, onSlotClick, onEventC
       const color  = ev.color || ev.calendarColor || '#4285f4';
       const pastCls = isPast(ev) ? 'past' : '';
       const startStr = fmtTime(s);
-      const locHtml = ev.location ? `<div class="ev-loc">${escHtml(ev.location)}</div>` : '';
-      return `<div class="timed-event ${pastCls}"
+      // Short events lack the vertical room to stack time over title, so render
+      // them on one line (time next to title) and drop the location.
+      const isShort = height < 34;
+      const shortCls = isShort ? 'short' : '';
+      const locHtml = (!isShort && ev.location) ? `<div class="ev-loc">${escHtml(ev.location)}</div>` : '';
+      return `<div class="timed-event ${pastCls} ${shortCls}"
         style="top:${top}px;height:${height}px;left:${left}%;width:${width}%;background:${color};color:#fff"
         data-id="${ev.id}" data-url="${escAttr(ev.url)}" title="${escAttr(ev.title)}">
         <div class="ev-time">${startStr}</div>