@dodlhuat/basix 1.2.3 → 1.2.5

package/js/calendar.ts

@@ -1,19 +1,13 @@
 // ============================================================
 // calendar.ts — Basix Calendar Component
-// Integrates with @dodlhuat/basix design tokens & conventions
 // ============================================================
 
-// -----------------------------------------------------------
-// Types & Interfaces
-// -----------------------------------------------------------
-
 export interface CalendarEvent {
     id: string;
     title: string;
     start: Date;
     end: Date;
     allDay?: boolean;
-    /** Extra CSS class — use Basix badge/alert classes e.g. "badge-success" */
     className?: string;
 }
 
@@ -23,7 +17,6 @@ export interface CalendarLocale {
     monthNames: string[];
     dayNamesShort: string[];
     dayNamesFull: string[];
-    /** 0 = Sunday, 1 = Monday */
     firstDayOfWeek: number;
     today: string;
     month: string;
@@ -34,68 +27,63 @@ export interface CalendarLocale {
 }
 
 export interface CalendarOptions {
-    /** Target container element or CSS selector */
     container: HTMLElement | string;
     events?: CalendarEvent[];
     view?: CalendarView;
     locale?: Partial<CalendarLocale>;
-    /** Show days outside the current month in month view */
     showOutsideDays?: boolean;
-    /** Callback when a day cell is clicked */
     onDayClick?: (date: Date) => void;
-    /** Callback when an event is clicked */
     onEventClick?: (event: CalendarEvent) => void;
-    /** Callback when view or date changes */
     onChange?: (date: Date, view: CalendarView) => void;
-    /** Extra CSS class injected on the root .cal element */
     className?: string;
+    iconBasePath?: string;
+}
+
+interface SpanLayout {
+    event: CalendarEvent;
+    colStart: number;
+    colEnd: number;
+    lane: number;
+    continuesBefore: boolean;
+    continuesAfter: boolean;
+}
+
+interface TimedEventLayout {
+    event: CalendarEvent;
+    top: number;
+    height: number;
+    col: number;
+    cols: number;
 }
 
 // -----------------------------------------------------------
-// Date Logic (pure functions, no side effects)
+// Date Logic
 // -----------------------------------------------------------
 
 export const CalendarLogic = {
-    /**
-     * Returns all days to render for a month grid (including leading/trailing
-     * days from adjacent months to fill the 7-column grid).
-     */
     getMonthGrid(year: number, month: number, firstDayOfWeek: number): Date[] {
         const firstOfMonth = new Date(year, month, 1);
         const lastOfMonth = new Date(year, month + 1, 0);
 
-        // Leading days from previous month
         let startDow = firstOfMonth.getDay() - firstDayOfWeek;
         if (startDow < 0) startDow += 7;
 
         const days: Date[] = [];
+        for (let i = startDow; i > 0; i--) days.push(new Date(year, month, 1 - i));
+        for (let d = 1; d <= lastOfMonth.getDate(); d++) days.push(new Date(year, month, d));
 
-        for (let i = startDow; i > 0; i--) {
-            days.push(new Date(year, month, 1 - i));
-        }
-        for (let d = 1; d <= lastOfMonth.getDate(); d++) {
-            days.push(new Date(year, month, d));
-        }
-
-        // Trailing days to fill remaining cells (always complete the row)
         const remaining = 7 - (days.length % 7);
         if (remaining < 7) {
-            for (let i = 1; i <= remaining; i++) {
-                days.push(new Date(year, month + 1, i));
-            }
+            for (let i = 1; i <= remaining; i++) days.push(new Date(year, month + 1, i));
         }
-
         return days;
     },
 
-    /** Returns the 7 dates of the week containing `date`. */
     getWeekDays(date: Date, firstDayOfWeek: number): Date[] {
         const d = new Date(date);
-        const dow = d.getDay();
-        let diff = dow - firstDayOfWeek;
+        let diff = d.getDay() - firstDayOfWeek;
         if (diff < 0) diff += 7;
         d.setDate(d.getDate() - diff);
-
         return Array.from({ length: 7 }, (_, i) => {
             const day = new Date(d);
             day.setDate(d.getDate() + i);
@@ -104,11 +92,9 @@ export const CalendarLogic = {
     },
 
     isSameDay(a: Date, b: Date): boolean {
-        return (
-            a.getFullYear() === b.getFullYear() &&
-            a.getMonth() === b.getMonth() &&
-            a.getDate() === b.getDate()
-        );
+        return a.getFullYear() === b.getFullYear()
+            && a.getMonth() === b.getMonth()
+            && a.getDate() === b.getDate();
     },
 
     isToday(date: Date): boolean {
@@ -119,48 +105,136 @@ export const CalendarLogic = {
         return date.getFullYear() === year && date.getMonth() === month;
     },
 
-    /** Returns all events that fall (fully or partially) on a given day. */
+    startOfDay(d: Date): Date {
+        const r = new Date(d);
+        r.setHours(0, 0, 0, 0);
+        return r;
+    },
+
+    isMultiDay(event: CalendarEvent): boolean {
+        return !CalendarLogic.isSameDay(event.start, event.end);
+    },
+
     getEventsForDay(events: CalendarEvent[], day: Date): CalendarEvent[] {
-        const dayStart = new Date(day);
-        dayStart.setHours(0, 0, 0, 0);
-        const dayEnd = new Date(day);
-        dayEnd.setHours(23, 59, 59, 999);
-
-        return events.filter(
-            (e) => e.start <= dayEnd && e.end >= dayStart
-        );
+        const dayStart = new Date(day); dayStart.setHours(0, 0, 0, 0);
+        const dayEnd   = new Date(day); dayEnd.setHours(23, 59, 59, 999);
+        return events.filter(e => e.start <= dayEnd && e.end >= dayStart);
     },
 
-    /** Returns only allDay events for a day. */
     getAllDayEvents(events: CalendarEvent[], day: Date): CalendarEvent[] {
-        return CalendarLogic.getEventsForDay(events, day).filter((e) => e.allDay);
+        return CalendarLogic.getEventsForDay(events, day).filter(e => e.allDay);
     },
 
-    /** Returns only timed events for a day. */
     getTimedEvents(events: CalendarEvent[], day: Date): CalendarEvent[] {
-        return CalendarLogic.getEventsForDay(events, day).filter((e) => !e.allDay);
+        return CalendarLogic.getEventsForDay(events, day).filter(e => !e.allDay);
     },
 
-    /** Returns top-offset % and height % for a timed event within a day column. */
     getEventPosition(event: CalendarEvent, day: Date): { top: number; height: number } {
-        const dayStart = new Date(day);
-        dayStart.setHours(0, 0, 0, 0);
-        const dayEnd = new Date(day);
-        dayEnd.setHours(24, 0, 0, 0);
-
-        const totalMs = 24 * 60 * 60 * 1000;
-        const startMs = Math.max(event.start.getTime(), dayStart.getTime()) - dayStart.getTime();
-        const endMs = Math.min(event.end.getTime(), dayEnd.getTime()) - dayStart.getTime();
-
+        const dayStart = new Date(day); dayStart.setHours(0, 0, 0, 0);
+        const dayEnd   = new Date(day); dayEnd.setHours(24, 0, 0, 0);
+        const totalMs  = 24 * 60 * 60 * 1000;
+        const startMs  = Math.max(event.start.getTime(), dayStart.getTime()) - dayStart.getTime();
+        const endMs    = Math.min(event.end.getTime(),   dayEnd.getTime())   - dayStart.getTime();
         return {
-            top: (startMs / totalMs) * 100,
-            height: Math.max(((endMs - startMs) / totalMs) * 100, 2), // min 2%
+            top:    (startMs / totalMs) * 100,
+            height: Math.max(((endMs - startMs) / totalMs) * 100, 2),
         };
     },
 
     formatTime(date: Date): string {
         return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
     },
+
+    /** Compute horizontal span layout for a set of events within a 7-day row. */
+    computeSpanLayout(weekDays: Date[], events: CalendarEvent[]): SpanLayout[] {
+        if (!events.length) return [];
+
+        const weekStart = CalendarLogic.startOfDay(weekDays[0]);
+        const weekEnd   = CalendarLogic.startOfDay(weekDays[6]);
+
+        const relevant = events.filter(e => {
+            const s  = CalendarLogic.startOfDay(e.start);
+            const en = CalendarLogic.startOfDay(e.end);
+            return s <= weekEnd && en >= weekStart;
+        });
+
+        relevant.sort((a, b) => {
+            const diff = a.start.getTime() - b.start.getTime();
+            if (diff !== 0) return diff;
+            return (b.end.getTime() - b.start.getTime()) - (a.end.getTime() - a.start.getTime());
+        });
+
+        const laneEnds: number[] = [];
+        const layouts: SpanLayout[] = [];
+
+        for (const event of relevant) {
+            const eStart = CalendarLogic.startOfDay(event.start);
+            const eEnd   = CalendarLogic.startOfDay(event.end);
+
+            const continuesBefore = eStart < weekStart;
+            const continuesAfter  = eEnd   > weekEnd;
+
+            let colStart = 0;
+            if (!continuesBefore) {
+                for (let i = 0; i < 7; i++) {
+                    if (CalendarLogic.isSameDay(weekDays[i], eStart)) { colStart = i; break; }
+                }
+            }
+
+            let colEnd = 6;
+            if (!continuesAfter) {
+                for (let i = 6; i >= 0; i--) {
+                    if (CalendarLogic.isSameDay(weekDays[i], eEnd)) { colEnd = i; break; }
+                }
+            }
+
+            let lane = 0;
+            while (lane < laneEnds.length && laneEnds[lane] >= colStart) lane++;
+            if (lane >= laneEnds.length) laneEnds.push(colEnd);
+            else laneEnds[lane] = colEnd;
+
+            layouts.push({ event, colStart, colEnd, lane, continuesBefore, continuesAfter });
+        }
+
+        return layouts;
+    },
+
+    /** Compute side-by-side column layout for overlapping timed events in a day column. */
+    computeTimedLayout(events: CalendarEvent[], day: Date): TimedEventLayout[] {
+        if (!events.length) return [];
+
+        const sorted = [...events].sort((a, b) => {
+            const diff = a.start.getTime() - b.start.getTime();
+            if (diff !== 0) return diff;
+            return (b.end.getTime() - b.start.getTime()) - (a.end.getTime() - a.start.getTime());
+        });
+
+        // Greedy sub-column assignment
+        const colEnds: Date[] = [];
+        const assigns: { event: CalendarEvent; col: number }[] = [];
+
+        for (const event of sorted) {
+            let col = 0;
+            while (col < colEnds.length && colEnds[col] > event.start) col++;
+            if (col >= colEnds.length) colEnds.push(event.end);
+            else colEnds[col] = event.end;
+            assigns.push({ event, col });
+        }
+
+        return assigns.map(({ event, col }) => {
+            // cols = highest sub-column among events that overlap this one + 1
+            const cols = assigns
+                .filter(a => a.event.start < event.end && a.event.end > event.start)
+                .reduce((max, a) => Math.max(max, a.col), 0) + 1;
+            const pos = CalendarLogic.getEventPosition(event, day);
+            return { event, top: pos.top, height: pos.height, col, cols };
+        });
+    },
+
+    nowLinePct(): number {
+        const now = new Date();
+        return (now.getHours() * 60 + now.getMinutes()) / 1440 * 100;
+    },
 };
 
 // -----------------------------------------------------------
@@ -172,19 +246,19 @@ const DEFAULT_LOCALE: CalendarLocale = {
         'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni',
         'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember',
     ],
-    dayNamesShort: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
-    dayNamesFull: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
+    dayNamesShort:  ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'],
+    dayNamesFull:   ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
     firstDayOfWeek: 1,
-    today: 'Heute',
-    month: 'Monat',
-    week: 'Woche',
-    agenda: 'Agenda',
-    allDay: 'Ganztägig',
+    today:   'Heute',
+    month:   'Monat',
+    week:    'Woche',
+    agenda:  'Agenda',
+    allDay:  'Ganztägig',
     noEvents: 'Keine Termine',
 };
 
 // -----------------------------------------------------------
-// Renderer — builds DOM from CalendarLogic output
+// Renderer
 // -----------------------------------------------------------
 
 export class CalendarRenderer {
@@ -194,7 +268,6 @@ export class CalendarRenderer {
         this.locale = locale;
     }
 
-    /** Ordered day-name headers respecting firstDayOfWeek */
     renderWeekdayHeaders(): string {
         const { dayNamesShort, firstDayOfWeek } = this.locale;
         const ordered = [
@@ -202,168 +275,172 @@ export class CalendarRenderer {
             ...dayNamesShort.slice(0, firstDayOfWeek),
         ];
         return ordered
-            .map((name) => `<div class="cal__weekday" aria-label="${name}">${name}</div>`)
+            .map(name => `<div class="cal__weekday" aria-label="${name}">${name}</div>`)
             .join('');
     }
 
     renderEvent(event: CalendarEvent, compact = false): string {
-        const extraClass = event.className ?? '';
+        const cls = event.className ?? '';
         if (compact) {
-            return `<div class="cal__event-pill ${extraClass}"
-        data-event-id="${event.id}"
-        role="button"
-        tabindex="0"
-        aria-label="${event.title}"
-        title="${event.title}">${event.title}</div>`;
+            return `<div class="cal__event-pill ${cls}" data-event-id="${event.id}" role="button" tabindex="0" aria-label="${event.title}" title="${event.title}">${event.title}</div>`;
         }
-        return `<div class="cal__event-pill ${extraClass}"
-      data-event-id="${event.id}"
-      role="button"
-      tabindex="0"
-      aria-label="${event.title}, ${CalendarLogic.formatTime(event.start)} – ${CalendarLogic.formatTime(event.end)}"
-      title="${event.title}">
+        return `<div class="cal__event-pill ${cls}" data-event-id="${event.id}" role="button" tabindex="0" aria-label="${event.title}, ${CalendarLogic.formatTime(event.start)} – ${CalendarLogic.formatTime(event.end)}" title="${event.title}">
       <span class="cal__event-time">${CalendarLogic.formatTime(event.start)}</span>
       ${event.title}
     </div>`;
     }
 
+    renderSpanBar(layout: SpanLayout): string {
+        const { event, colStart, colEnd, lane, continuesBefore, continuesAfter } = layout;
+        const colSpan = colEnd - colStart + 1;
+        const cls = [
+            'cal__span-bar',
+            event.className ?? '',
+            continuesBefore ? 'cal__span-bar--cont-before' : '',
+            continuesAfter  ? 'cal__span-bar--cont-after'  : '',
+        ].filter(Boolean).join(' ');
+
+        return `<div class="${cls}"
+        style="--span-col:${colStart};--span-len:${colSpan};--span-lane:${lane}"
+        data-event-id="${event.id}"
+        role="button" tabindex="0"
+        aria-label="${event.title}"
+        title="${event.title}">${event.title}</div>`;
+    }
+
     renderMonthDay(
         date: Date,
         currentMonth: number,
         currentYear: number,
         events: CalendarEvent[],
-        selectedDate: Date | null,
-        showOutsideDays: boolean
+        showOutsideDays: boolean,
     ): string {
-        const dayEvents = CalendarLogic.getEventsForDay(events, date);
-        const isToday = CalendarLogic.isToday(date);
-        const isSelected = selectedDate ? CalendarLogic.isSameDay(date, selectedDate) : false;
         const isOutside = !CalendarLogic.isCurrentMonth(date, currentYear, currentMonth);
 
         if (isOutside && !showOutsideDays) {
             return `<div class="cal__day cal__day--empty" aria-hidden="true"></div>`;
         }
 
+        const allForDay  = CalendarLogic.getEventsForDay(events, date);
+        const pillEvents = allForDay.filter(e => !CalendarLogic.isMultiDay(e));
+        const isToday    = CalendarLogic.isToday(date);
+
         const classes = [
             'cal__day',
-            isToday ? 'is-today' : '',
-            isSelected ? 'is-selected' : '',
+            isToday   ? 'is-today'          : '',
             isOutside ? 'cal__day--outside' : '',
-            dayEvents.length > 0 ? 'has-events' : '',
-        ]
-            .filter(Boolean)
-            .join(' ');
-
-        const eventsHtml = dayEvents
-            .slice(0, 3)
-            .map((e) => this.renderEvent(e, true))
-            .join('');
+            allForDay.length > 0 ? 'has-events' : '',
+        ].filter(Boolean).join(' ');
 
-        const moreCount = dayEvents.length - 3;
-        const moreHtml =
-            moreCount > 0
-                ? `<div class="cal__event-more">+${moreCount}</div>`
-                : '';
-
-        return `<div class="${classes}"
-        role="gridcell"
-        tabindex="0"
-        aria-label="${date.toLocaleDateString()}"
-        aria-selected="${isSelected}"
-        data-date="${date.toISOString()}">
+        const eventsHtml = pillEvents.slice(0, 3).map(e => this.renderEvent(e, true)).join('');
+        const moreCount  = pillEvents.length - 3;
+        const moreHtml   = moreCount > 0 ? `<div class="cal__event-more">+${moreCount}</div>` : '';
+
+        return `<div class="${classes}" aria-label="${date.toLocaleDateString()}">
       <span class="cal__day-num">${date.getDate()}</span>
       <div class="cal__day-events">${eventsHtml}${moreHtml}</div>
     </div>`;
     }
 
+    renderWeekRow(
+        weekDays: Date[],
+        currentMonth: number,
+        currentYear: number,
+        events: CalendarEvent[],
+        showOutsideDays: boolean,
+    ): string {
+        const multiDay = events.filter(e => CalendarLogic.isMultiDay(e));
+        const spans    = CalendarLogic.computeSpanLayout(weekDays, multiDay);
+        const maxLanes = spans.length > 0 ? Math.max(...spans.map(s => s.lane)) + 1 : 0;
+
+        const dayCells = weekDays
+            .map(d => this.renderMonthDay(d, currentMonth, currentYear, events, showOutsideDays))
+            .join('');
+        const spanBars = spans.map(s => this.renderSpanBar(s)).join('');
+
+        return `<div class="cal__week-row" style="--span-lanes:${maxLanes}">
+      ${dayCells}${spanBars}
+    </div>`;
+    }
+
     renderMonthView(
         year: number,
         month: number,
         events: CalendarEvent[],
-        selectedDate: Date | null,
         showOutsideDays: boolean,
-        firstDayOfWeek: number
+        firstDayOfWeek: number,
     ): string {
         const days = CalendarLogic.getMonthGrid(year, month, firstDayOfWeek);
-        const cells = days
-            .map((d) =>
-                this.renderMonthDay(d, month, year, events, selectedDate, showOutsideDays)
-            )
-            .join('');
+        const weekRows: string[] = [];
+        for (let i = 0; i < days.length; i += 7) {
+            weekRows.push(this.renderWeekRow(
+                days.slice(i, i + 7),
+                month, year, events, showOutsideDays,
+            ));
+        }
 
         return `<div class="cal__month-grid" role="grid" aria-label="${this.locale.monthNames[month]} ${year}">
-      ${this.renderWeekdayHeaders()}
-      ${cells}
+      <div class="cal__month-head">${this.renderWeekdayHeaders()}</div>
+      ${weekRows.join('')}
     </div>`;
     }
 
     renderWeekView(
         date: Date,
         events: CalendarEvent[],
-        selectedDate: Date | null,
-        firstDayOfWeek: number
+        firstDayOfWeek: number,
+        showNowLine = false,
     ): string {
         const days = CalendarLogic.getWeekDays(date, firstDayOfWeek);
 
-        // All-day row
-        const allDayCols = days
-            .map((d) => {
-                const adEvents = CalendarLogic.getAllDayEvents(events, d);
-                const pills = adEvents.map((e) => this.renderEvent(e, true)).join('');
-                return `<div class="cal__allday-col">${pills}</div>`;
-            })
-            .join('');
+        const headCols = days.map(d => {
+            const isToday = CalendarLogic.isToday(d);
+            const cls = ['cal__week-head-day', isToday ? 'is-today' : '']
+                .filter(Boolean).join(' ');
+            const dow = this.locale.dayNamesShort[(d.getDay() + 7) % 7];
+            return `<div class="${cls}">${dow}<span>${d.getDate()}</span></div>`;
+        }).join('');
 
-        // Day column headers
-        const headCols = days
-            .map((d) => {
-                const isToday = CalendarLogic.isToday(d);
-                const isSelected = selectedDate ? CalendarLogic.isSameDay(d, selectedDate) : false;
-                const classes = [
-                    'cal__week-head-day',
-                    isToday ? 'is-today' : '',
-                    isSelected ? 'is-selected' : '',
-                ]
-                    .filter(Boolean)
-                    .join(' ');
-
-                const dow = this.locale.dayNamesShort[(d.getDay() + 7) % 7];
-                return `<div class="${classes}" data-date="${d.toISOString()}">
-          ${dow}<span>${d.getDate()}</span>
-        </div>`;
-            })
-            .join('');
+        // All-day row: span layout for all allDay events (both single-day and multi-day)
+        const allDayEvents  = events.filter(e => e.allDay);
+        const allDayLayouts = CalendarLogic.computeSpanLayout(days, allDayEvents);
+        const allDayLanes   = allDayLayouts.length > 0 ? Math.max(...allDayLayouts.map(l => l.lane)) + 1 : 0;
+
+        const allDayCols = days.map(() => `<div class="cal__allday-col"></div>`).join('');
+        const allDayBars = allDayLayouts.map(l => this.renderSpanBar(l)).join('');
 
-        // Hour slots + events
         const hourLabels = Array.from({ length: 24 }, (_, h) => {
             const label = h === 0 ? '' : `${String(h).padStart(2, '0')}:00`;
             return `<div class="cal__time-slot">${label}</div>`;
         }).join('');
 
-        const dayCols = days
-            .map((d) => {
-                const timedEvents = CalendarLogic.getTimedEvents(events, d);
-                const hourCells = Array.from({ length: 24 }, () => `<div class="cal__day-col-hour"></div>`).join('');
-
-                const eventOverlays = timedEvents
-                    .map((e) => {
-                        const { top, height } = CalendarLogic.getEventPosition(e, d);
-                        const extraClass = e.className ?? '';
-                        return `<div class="cal__week-event ${extraClass}"
-              style="top:${top.toFixed(2)}%;height:${height.toFixed(2)}%"
-              data-event-id="${e.id}"
-              role="button"
-              tabindex="0"
-              aria-label="${e.title}">
-              <span class="cal__event-time">${CalendarLogic.formatTime(e.start)}</span>
-              ${e.title}
+        const dayCols = days.map(d => {
+            const timedEvents = CalendarLogic.getTimedEvents(events, d);
+            const hourCells   = Array.from({ length: 24 }, () => `<div class="cal__day-col-hour"></div>`).join('');
+            const layouts     = CalendarLogic.computeTimedLayout(timedEvents, d);
+
+            const eventOverlays = layouts.map(({ event, top, height, col, cols }) => {
+                const cls = event.className ?? '';
+                let posStyle = `top:${top.toFixed(2)}%;height:${height.toFixed(2)}%`;
+                if (cols > 1) {
+                    const l = (col / cols * 100).toFixed(2);
+                    const w = (100 / cols).toFixed(2);
+                    posStyle += `;left:calc(${l}% + 2px);right:auto;width:calc(${w}% - 4px)`;
+                }
+                return `<div class="cal__week-event ${cls}"
+              style="${posStyle}"
+              data-event-id="${event.id}" role="button" tabindex="0" aria-label="${event.title}">
+              <span class="cal__event-time">${CalendarLogic.formatTime(event.start)}</span>
+              ${event.title}
             </div>`;
-                    })
-                    .join('');
+            }).join('');
 
-                return `<div class="cal__day-col" data-date="${d.toISOString()}">${hourCells}${eventOverlays}</div>`;
-            })
-            .join('');
+            return `<div class="cal__day-col" data-date="${d.toISOString()}">${hourCells}${eventOverlays}</div>`;
+        }).join('');
+
+        const nowLine = showNowLine
+            ? `<div class="cal__now-line" style="top:${CalendarLogic.nowLinePct().toFixed(3)}%"></div>`
+            : '';
 
         return `<div class="cal__week" role="grid">
       <div class="cal__week-head">
@@ -372,29 +449,41 @@ export class CalendarRenderer {
       </div>
       <div class="cal__allday">
         <div class="cal__allday-label">${this.locale.allDay}</div>
-        ${allDayCols}
+        <div class="cal__allday-spans" style="--allday-lanes:${allDayLanes}">
+          ${allDayCols}${allDayBars}
+        </div>
       </div>
       <div class="cal__week-body">
         <div class="cal__week-grid">
           <div class="cal__time-col">${hourLabels}</div>
           ${dayCols}
+          ${nowLine}
         </div>
       </div>
     </div>`;
     }
 
     renderAgendaView(year: number, month: number, events: CalendarEvent[]): string {
-        // Collect all days in this month that have events
-        const daysInMonth = new Date(year, month + 1, 0).getDate();
+        const daysInMonth  = new Date(year, month + 1, 0).getDate();
+        const shownMultiDay = new Set<string>();
         let html = '';
 
         for (let d = 1; d <= daysInMonth; d++) {
-            const day = new Date(year, month, d);
+            const day       = new Date(year, month, d);
             const dayEvents = CalendarLogic.getEventsForDay(events, day);
-            if (dayEvents.length === 0) continue;
+
+            // Multi-day events show only once (first occurrence in this month)
+            const filtered = dayEvents.filter(e => {
+                if (!CalendarLogic.isMultiDay(e)) return true;
+                if (shownMultiDay.has(e.id)) return false;
+                shownMultiDay.add(e.id);
+                return true;
+            });
+
+            if (!filtered.length) continue;
 
             const isToday = CalendarLogic.isToday(day);
-            const dow = this.locale.dayNamesFull[day.getDay()];
+            const dow     = this.locale.dayNamesFull[day.getDay()];
 
             html += `<div class="cal__agenda-day ${isToday ? 'is-today' : ''}">
         <div class="cal__agenda-date">
@@ -402,30 +491,33 @@ export class CalendarRenderer {
           <span class="cal__agenda-num ${isToday ? 'is-today' : ''}">${d}</span>
         </div>
         <div class="cal__agenda-events">
-          ${dayEvents.map((e) => `
-            <div class="cal__agenda-event ${e.className ?? ''}"
-              data-event-id="${e.id}"
-              role="button"
-              tabindex="0">
-              <span class="cal__agenda-event-time">
-                ${e.allDay ? this.locale.allDay : CalendarLogic.formatTime(e.start) + ' – ' + CalendarLogic.formatTime(e.end)}
-              </span>
+          ${filtered.map(e => {
+              const isMulti = CalendarLogic.isMultiDay(e);
+              let timeLabel: string;
+              if (isMulti) {
+                  timeLabel = `${e.start.toLocaleDateString()} – ${e.end.toLocaleDateString()}`;
+              } else if (e.allDay) {
+                  timeLabel = this.locale.allDay;
+              } else {
+                  timeLabel = `${CalendarLogic.formatTime(e.start)} – ${CalendarLogic.formatTime(e.end)}`;
+              }
+              return `<div class="cal__agenda-event ${e.className ?? ''}"
+              data-event-id="${e.id}" role="button" tabindex="0">
+              <span class="cal__agenda-event-time">${timeLabel}</span>
               <span class="cal__agenda-event-title">${e.title}</span>
-            </div>`).join('')}
+            </div>`;
+          }).join('')}
         </div>
       </div>`;
         }
 
-        if (!html) {
-            html = `<div class="cal__agenda-empty">${this.locale.noEvents}</div>`;
-        }
-
+        if (!html) html = `<div class="cal__agenda-empty">${this.locale.noEvents}</div>`;
         return `<div class="cal__agenda">${html}</div>`;
     }
 }
 
 // -----------------------------------------------------------
-// Calendar — main controller class
+// Calendar — main controller
 // -----------------------------------------------------------
 
 export class Calendar {
@@ -433,14 +525,12 @@ export class Calendar {
     private options: Required<CalendarOptions>;
     private locale: CalendarLocale;
     private renderer: CalendarRenderer;
-
     private currentDate: Date;
     private currentView: CalendarView;
-    private selectedDate: Date | null = null;
     private events: CalendarEvent[] = [];
+    private nowLineTimer: ReturnType<typeof setInterval> | null = null;
 
     constructor(options: CalendarOptions) {
-        // Resolve container
         if (typeof options.container === 'string') {
             const el = document.querySelector<HTMLElement>(options.container);
             if (!el) throw new Error(`Calendar: container "${options.container}" not found.`);
@@ -449,22 +539,23 @@ export class Calendar {
             this.container = options.container;
         }
 
-        this.locale = { ...DEFAULT_LOCALE, ...(options.locale ?? {}) };
+        this.locale   = { ...DEFAULT_LOCALE, ...(options.locale ?? {}) };
         this.renderer = new CalendarRenderer(this.locale);
 
         this.options = {
-            container: this.container,
-            events: options.events ?? [],
-            view: options.view ?? 'month',
-            locale: options.locale ?? {},
+            container:       this.container,
+            events:          options.events          ?? [],
+            view:            options.view            ?? 'month',
+            locale:          options.locale          ?? {},
             showOutsideDays: options.showOutsideDays ?? true,
-            onDayClick: options.onDayClick ?? (() => {}),
-            onEventClick: options.onEventClick ?? (() => {}),
-            onChange: options.onChange ?? (() => {}),
-            className: options.className ?? '',
+            onDayClick:      options.onDayClick      ?? (() => {}),
+            onEventClick:    options.onEventClick    ?? (() => {}),
+            onChange:        options.onChange        ?? (() => {}),
+            className:       options.className       ?? '',
+            iconBasePath:    options.iconBasePath    ?? 'svg-icons/',
         };
 
-        this.events = [...this.options.events];
+        this.events      = [...this.options.events];
         this.currentView = this.options.view;
         this.currentDate = new Date();
 
@@ -484,17 +575,9 @@ export class Calendar {
 
     next(): void {
         if (this.currentView === 'month' || this.currentView === 'agenda') {
-            this.currentDate = new Date(
-                this.currentDate.getFullYear(),
-                this.currentDate.getMonth() + 1,
-                1
-            );
+            this.currentDate = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth() + 1, 1);
         } else {
-            this.currentDate = new Date(
-                this.currentDate.getFullYear(),
-                this.currentDate.getMonth(),
-                this.currentDate.getDate() + 7
-            );
+            this.currentDate = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth(), this.currentDate.getDate() + 7);
         }
         this.render();
         this.options.onChange(this.currentDate, this.currentView);
@@ -502,17 +585,9 @@ export class Calendar {
 
     prev(): void {
         if (this.currentView === 'month' || this.currentView === 'agenda') {
-            this.currentDate = new Date(
-                this.currentDate.getFullYear(),
-                this.currentDate.getMonth() - 1,
-                1
-            );
+            this.currentDate = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth() - 1, 1);
         } else {
-            this.currentDate = new Date(
-                this.currentDate.getFullYear(),
-                this.currentDate.getMonth(),
-                this.currentDate.getDate() - 7
-            );
+            this.currentDate = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth(), this.currentDate.getDate() - 7);
         }
         this.render();
         this.options.onChange(this.currentDate, this.currentView);
@@ -530,7 +605,7 @@ export class Calendar {
     }
 
     removeEvent(id: string): void {
-        this.events = this.events.filter((e) => e.id !== id);
+        this.events = this.events.filter(e => e.id !== id);
         this.render();
     }
 
@@ -544,14 +619,15 @@ export class Calendar {
     }
 
     destroy(): void {
-        this.container.removeEventListener('click', this.boundHandleClick);
+        this.clearNowLineTimer();
+        this.container.removeEventListener('click',   this.boundHandleClick);
         this.container.removeEventListener('keydown', this.boundHandleKeydown);
         this.container.innerHTML = '';
         this.container.removeAttribute('data-cal');
     }
 
     // ----------------------------------------------------------
-    // Internal rendering
+    // Rendering
     // ----------------------------------------------------------
 
     private getTitle(): string {
@@ -560,38 +636,33 @@ export class Calendar {
         const m = this.currentDate.getMonth();
 
         if (this.currentView === 'week') {
-            const days = CalendarLogic.getWeekDays(this.currentDate, this.locale.firstDayOfWeek);
+            const days  = CalendarLogic.getWeekDays(this.currentDate, this.locale.firstDayOfWeek);
             const first = days[0];
-            const last = days[6];
-            if (first.getMonth() === last.getMonth()) {
-                return `${monthNames[first.getMonth()]} ${y}`;
-            }
-            return `${monthNames[first.getMonth()]} – ${monthNames[last.getMonth()]} ${y}`;
+            const last  = days[6];
+            return first.getMonth() === last.getMonth()
+                ? `${monthNames[first.getMonth()]} ${y}`
+                : `${monthNames[first.getMonth()]} – ${monthNames[last.getMonth()]} ${y}`;
         }
-
         return `${monthNames[m]} ${y}`;
     }
 
     private buildHeader(): string {
-        const activeMonth = this.currentView === 'month' || this.currentView === 'agenda' ? 'cal__btn--active' : '';
-        const activeWeek = this.currentView === 'week' ? 'cal__btn--active' : '';
-        const activeAgenda = this.currentView === 'agenda' ? 'cal__btn--active' : '';
-
+        const v = this.currentView;
         return `<div class="cal__header">
       <div class="cal__nav">
         <button class="cal__btn cal__btn--today" data-action="today" aria-label="${this.locale.today}">${this.locale.today}</button>
         <button class="cal__btn" data-action="prev" aria-label="Zurück">
-          <svg class="icon-svg" aria-hidden="true"><use href="svg-icons/icons.svg#chevron_left"/></svg>
+          <svg class="icon-svg" aria-hidden="true"><use href="${this.options.iconBasePath}icons.svg#chevron_left"/></svg>
         </button>
         <button class="cal__btn" data-action="next" aria-label="Vor">
-          <svg class="icon-svg" aria-hidden="true"><use href="svg-icons/icons.svg#chevron_right"/></svg>
+          <svg class="icon-svg" aria-hidden="true"><use href="${this.options.iconBasePath}icons.svg#chevron_right"/></svg>
         </button>
       </div>
       <h2 class="cal__title" aria-live="polite">${this.getTitle()}</h2>
       <div class="cal__view-toggle" role="group" aria-label="Ansicht wählen">
-        <button class="cal__btn ${activeMonth}" data-action="view-month" aria-pressed="${this.currentView === 'month'}">${this.locale.month}</button>
-        <button class="cal__btn ${activeWeek}" data-action="view-week" aria-pressed="${this.currentView === 'week'}">${this.locale.week}</button>
-        <button class="cal__btn ${activeAgenda}" data-action="view-agenda" aria-pressed="${this.currentView === 'agenda'}">${this.locale.agenda}</button>
+        <button class="cal__btn ${v === 'month'  ? 'cal__btn--active' : ''}" data-action="view-month"  aria-pressed="${v === 'month'}">${this.locale.month}</button>
+        <button class="cal__btn ${v === 'week'   ? 'cal__btn--active' : ''}" data-action="view-week"   aria-pressed="${v === 'week'}">${this.locale.week}</button>
+        <button class="cal__btn ${v === 'agenda' ? 'cal__btn--active' : ''}" data-action="view-agenda" aria-pressed="${v === 'agenda'}">${this.locale.agenda}</button>
       </div>
     </div>`;
     }
@@ -603,109 +674,101 @@ export class Calendar {
 
         switch (this.currentView) {
             case 'month':
-                return this.renderer.renderMonthView(
-                    y, m, this.events, this.selectedDate,
-                    this.options.showOutsideDays, firstDayOfWeek
-                );
-            case 'week':
-                return this.renderer.renderWeekView(
-                    this.currentDate, this.events, this.selectedDate, firstDayOfWeek
-                );
+                return this.renderer.renderMonthView(y, m, this.events, this.options.showOutsideDays, firstDayOfWeek);
+            case 'week': {
+                const weekDays     = CalendarLogic.getWeekDays(this.currentDate, firstDayOfWeek);
+                const showNowLine  = weekDays.some(d => CalendarLogic.isToday(d));
+                return this.renderer.renderWeekView(this.currentDate, this.events, firstDayOfWeek, showNowLine);
+            }
             case 'agenda':
                 return this.renderer.renderAgendaView(y, m, this.events);
         }
     }
 
     private render(): void {
+        this.clearNowLineTimer();
         const rootClass = ['cal', this.options.className].filter(Boolean).join(' ');
         this.container.setAttribute('data-cal', this.currentView);
         this.container.innerHTML = `<div class="${rootClass}" role="application" aria-label="Kalender">
       ${this.buildHeader()}
-      <div class="cal__body">
-        ${this.buildBody()}
-      </div>
+      <div class="cal__body">${this.buildBody()}</div>
     </div>`;
+
+        if (this.currentView === 'week') {
+            const weekDays = CalendarLogic.getWeekDays(this.currentDate, this.locale.firstDayOfWeek);
+            if (weekDays.some(d => CalendarLogic.isToday(d))) {
+                this.scrollToNow();
+                this.startNowLineTimer();
+            }
+        }
+    }
+
+    private scrollToNow(): void {
+        const body = this.container.querySelector<HTMLElement>('.cal__week-body');
+        if (!body) return;
+        const pct = CalendarLogic.nowLinePct() / 100;
+        body.scrollTop = Math.max(0, pct * body.scrollHeight - body.clientHeight / 2);
+    }
+
+    private startNowLineTimer(): void {
+        this.nowLineTimer = setInterval(() => {
+            const line = this.container.querySelector<HTMLElement>('.cal__now-line');
+            if (line) line.style.top = `${CalendarLogic.nowLinePct().toFixed(3)}%`;
+        }, 60_000);
+    }
+
+    private clearNowLineTimer(): void {
+        if (this.nowLineTimer !== null) {
+            clearInterval(this.nowLineTimer);
+            this.nowLineTimer = null;
+        }
     }
 
     // ----------------------------------------------------------
     // Event delegation
     // ----------------------------------------------------------
 
-    private readonly boundHandleClick = (e: MouseEvent): void => this.handleClick(e);
-    private readonly boundHandleKeydown = (e: KeyboardEvent): void => this.handleKeydown(e);
+    private readonly boundHandleClick   = (e: MouseEvent)  => this.handleClick(e);
+    private readonly boundHandleKeydown = (e: KeyboardEvent) => this.handleKeydown(e);
 
     private attachEvents(): void {
-        this.container.addEventListener('click', this.boundHandleClick);
+        this.container.addEventListener('click',   this.boundHandleClick);
         this.container.addEventListener('keydown', this.boundHandleKeydown);
     }
 
     private handleClick(e: MouseEvent): void {
         const target = e.target as HTMLElement;
 
-        // Nav / view buttons
         const btn = target.closest<HTMLElement>('[data-action]');
         if (btn) {
             const action = btn.dataset.action!;
-            if (action === 'prev') this.prev();
-            else if (action === 'next') this.next();
-            else if (action === 'today') this.today();
-            else if (action === 'view-month') this.setView('month');
-            else if (action === 'view-week') this.setView('week');
+            if      (action === 'prev')        this.prev();
+            else if (action === 'next')        this.next();
+            else if (action === 'today')       this.today();
+            else if (action === 'view-month')  this.setView('month');
+            else if (action === 'view-week')   this.setView('week');
             else if (action === 'view-agenda') this.setView('agenda');
             return;
         }
 
-        // Event click
         const eventEl = target.closest<HTMLElement>('[data-event-id]');
         if (eventEl) {
-            const id = eventEl.dataset.eventId!;
-            const event = this.events.find((ev) => ev.id === id);
-            if (event) {
-                e.stopPropagation();
-                this.options.onEventClick(event);
-            }
+            const id    = eventEl.dataset.eventId!;
+            const event = this.events.find(ev => ev.id === id);
+            if (event) { e.stopPropagation(); this.options.onEventClick(event); }
             return;
         }
 
-        // Day click
-        const dayEl = target.closest<HTMLElement>('[data-date]');
-        if (dayEl && dayEl.dataset.date) {
-            const date = new Date(dayEl.dataset.date);
-            this.selectedDate = date;
-            this.options.onDayClick(date);
-            // Re-render to update selection state
-            this.render();
-        }
     }
 
     private handleKeydown(e: KeyboardEvent): void {
         const target = e.target as HTMLElement;
 
-        // Allow Enter/Space to trigger click on focused interactive elements
         if (e.key === 'Enter' || e.key === ' ') {
-            if (target.closest('[data-date], [data-event-id], [data-action]')) {
+            if (target.closest('[data-event-id], [data-action]')) {
                 e.preventDefault();
                 target.click();
             }
         }
-
-        // Arrow key navigation within month grid
-        if (!['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(e.key)) return;
-        const dayEl = target.closest<HTMLElement>('.cal__day[data-date]');
-        if (!dayEl) return;
-
-        e.preventDefault();
-        const all = Array.from(
-            this.container.querySelectorAll<HTMLElement>('.cal__day[data-date]:not(.cal__day--empty)')
-        );
-        const idx = all.indexOf(dayEl);
-        let next = idx;
-
-        if (e.key === 'ArrowRight') next = idx + 1;
-        else if (e.key === 'ArrowLeft') next = idx - 1;
-        else if (e.key === 'ArrowDown') next = idx + 7;
-        else if (e.key === 'ArrowUp') next = idx - 7;
-
-        all[Math.max(0, Math.min(next, all.length - 1))]?.focus();
     }
-}
+}