@bimetal/calendar-svelte-components 0.29.0

package/dist/views/week/AllDayRow.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+  import type { CalendarEvent, CalendarDateTime, LayoutItem } from '@bimetal/calendar-core';
+  import { maxLanes } from '@bimetal/calendar-core';
+  import { getCalendarContext, getCalendarConfig } from '../../binding/index.js';
+  import { colFromTimeGridX, DEFAULT_TIME_LABEL_WIDTH_WEEK } from '@bimetal/calendar-headless';
+  import EventBar from '../../components/EventBar.svelte';
+
+  let {
+    weekDates,
+    items,
+  }: {
+    weekDates: CalendarDateTime[];
+    items: LayoutItem[];
+  } = $props();
+
+  const config = getCalendarConfig();
+  const ctx = getCalendarContext<{
+    onDropEvent: (e: DragEvent, dropDate: CalendarDateTime) => void;
+    onDragOverDate: (date: CalendarDateTime) => void;
+    onHidePreview: () => void;
+    previewEvent: CalendarEvent | null;
+  }>();
+
+  let rowEl: HTMLDivElement | undefined = $state();
+
+  const lanes = $derived(maxLanes(items));
+
+  function handleDragOver(e: DragEvent) {
+    e.preventDefault();
+    e.dataTransfer!.dropEffect = 'move';
+    if (!rowEl) return;
+    const col = colFromTimeGridX(e.clientX, rowEl.getBoundingClientRect(), DEFAULT_TIME_LABEL_WIDTH_WEEK);
+    ctx.onDragOverDate(weekDates[col]);
+  }
+
+  function handleDrop(e: DragEvent) {
+    e.preventDefault();
+    if (!rowEl) return;
+    const col = colFromTimeGridX(e.clientX, rowEl.getBoundingClientRect(), DEFAULT_TIME_LABEL_WIDTH_WEEK);
+    ctx.onDropEvent(e, weekDates[col]);
+  }
+
+  function handleDragLeave(e: DragEvent) {
+    const row = e.currentTarget as HTMLElement;
+    const rect = row.getBoundingClientRect();
+    if (e.clientX < rect.left || e.clientX > rect.right ||
+        e.clientY < rect.top || e.clientY > rect.bottom) {
+      ctx.onHidePreview();
+    }
+  }
+</script>
+
+{#if items.length > 0}
+  <div
+    bind:this={rowEl}
+    class="week-view__allday"
+    role="application"
+    ondragover={handleDragOver}
+    ondrop={handleDrop}
+    ondragleave={handleDragLeave}
+  >
+    <div class="week-view__allday-label">{config.locale.allDayLabel}</div>
+    <div class="week-view__allday-grid" style="--lane-count: {lanes};">
+      {#each items as layoutItem, idx (`${layoutItem.segment.event.id}-${idx}`)}
+        {@const isDragged = ctx.previewEvent?.id === layoutItem.segment.event.id}
+        <EventBar
+          item={layoutItem}
+          {weekDates}
+          ghost={isDragged}
+        />
+      {/each}
+    </div>
+  </div>
+{/if}

package/dist/views/week/AllDayRow.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { CalendarDateTime, LayoutItem } from '@bimetal/calendar-core';
+type $$ComponentProps = {
+    weekDates: CalendarDateTime[];
+    items: LayoutItem[];
+};
+declare const AllDayRow: import("svelte").Component<$$ComponentProps, {}, "">;
+type AllDayRow = ReturnType<typeof AllDayRow>;
+export default AllDayRow;
+//# sourceMappingURL=AllDayRow.svelte.d.ts.map

package/dist/views/week/AllDayRow.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AllDayRow.svelte.d.ts","sourceRoot":"","sources":["../../../src/views/week/AllDayRow.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAiB,gBAAgB,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAMzF,KAAK,gBAAgB,GAAI;IACtB,SAAS,EAAE,gBAAgB,EAAE,CAAC;IAC9B,KAAK,EAAE,UAAU,EAAE,CAAC;CACrB,CAAC;AAgEJ,QAAA,MAAM,SAAS,sDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/views/week/TimeEvent.svelte

@@ -0,0 +1,192 @@
+<script lang="ts">
+  import type { CalendarEvent, CalendarDateTime } from '@bimetal/calendar-core';
+  import { isSameDay, getRecurrenceInstanceMetadata } from '@bimetal/calendar-core';
+  import { getCalendarContext, getCalendarConfig, toTimeStr, buildDragInfo, getEventSlots } from '../../binding/index.js';
+  import type { DragInfo } from '../../binding/index.js';
+  import { createClickIntent, writeCalendarDragData, installTransparentDragImage } from '@bimetal/calendar-headless';
+
+  /**
+   * Layout-Position eines Termins (Pilot-Direktive 2026-06-21). Zwei
+   * orthogonale Achsen — Begründung in der React-Variante.
+   */
+  export interface TimeEventLayout {
+    readonly dayCol: number;
+    readonly dayCount: number;
+    readonly lane: number;
+    readonly laneCount: number;
+    readonly startOffset: number;
+    readonly endOffset: number;
+  }
+
+  let {
+    event,
+    layout,
+    dayDate,
+    hourHeight,
+    timeLabelWidth = 50,
+    ghost = false,
+  }: {
+    event: CalendarEvent;
+    layout: TimeEventLayout;
+    dayDate: CalendarDateTime;
+    hourHeight: number;
+    timeLabelWidth?: number;
+    ghost?: boolean;
+  } = $props();
+
+  const config = getCalendarConfig();
+  const ctx = getCalendarContext<{
+    onEventClick: (eventId: string, anchorRect: DOMRect, instanceDate?: number) => void;
+    onSelectEvent: (eventId: string, instanceDate?: number) => void;
+    selectedEventId: string | null;
+    selectedInstanceDate: number | undefined;
+    onDragStart: (info: DragInfo) => void;
+    onDragEnd: () => void;
+  }>();
+
+  const click = createClickIntent();
+
+  function handleMouseDown() {
+    click.markMouseDown();
+  }
+
+  function handleDragStart(e: DragEvent) {
+    click.markDragged();
+    const el = e.currentTarget as HTMLElement;
+    const rect = el.getBoundingClientRect();
+    const yInEl = e.clientY - rect.top;
+    const minutesIntoVisible = (yInEl / hourHeight) * 60;
+    const snap = config.core.granularity.day.minutes;
+    const minuteOffset = Math.round(minutesIntoVisible / snap) * snap;
+
+    const info: DragInfo = buildDragInfo(event, 'move-timed', { minuteOffset });
+    writeCalendarDragData(e.dataTransfer!, info);
+    ctx.onDragStart(info);
+  }
+
+  function handleResizeDragStart(e: DragEvent, edge: 'start' | 'end') {
+    e.stopPropagation();
+    click.markDragged();
+    installTransparentDragImage(e.dataTransfer!);
+    const info: DragInfo = buildDragInfo(event, 'resize-timed', { edge });
+    writeCalendarDragData(e.dataTransfer!, info);
+    ctx.onDragStart(info);
+  }
+
+  function handleClick(e: MouseEvent) {
+    e.stopPropagation();
+    if (!click.accept(config.clickThresholdMs)) return;
+    const instanceDate = getRecurrenceInstanceMetadata(event)?.instanceDate;
+    ctx.onSelectEvent(event.id, instanceDate);
+  }
+
+  function handleDoubleClick(e: MouseEvent) {
+    e.stopPropagation();
+    if (!click.accept(config.clickThresholdMs)) return;
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    const instanceDate = getRecurrenceInstanceMetadata(event)?.instanceDate;
+    ctx.onEventClick(event.id, rect, instanceDate);
+  }
+
+  const isFirstDay = $derived(isSameDay(event.timeRange.start, dayDate));
+  const isLastDay = $derived(isSameDay(event.timeRange.end, dayDate));
+  // Zeit-Geometrie aus layoutTimed (Pilot-Direktive 2026-06-21).
+  const dayHeight = $derived(24 * hourHeight);
+  const top = $derived(layout.startOffset * dayHeight);
+  const rawHeight = $derived((layout.endOffset - layout.startOffset) * dayHeight);
+  const height = $derived(Math.max(rawHeight, 0.25 * hourHeight));
+  const duration = $derived(Math.max((layout.endOffset - layout.startOffset) * 24, 0.25));
+  const color = $derived(event.metadata.color ?? '#007AFF');
+
+  const startTimeStr = $derived(toTimeStr(event.timeRange.start));
+  const endTimeStr = $derived(toTimeStr(event.timeRange.end));
+
+  const timeLabel = $derived.by(() => {
+    if (isFirstDay && isLastDay) return `${startTimeStr} \u2013 ${endTimeStr}`;
+    if (isFirstDay) return `${config.locale.timeFrom} ${startTimeStr}`;
+    if (isLastDay) return `${config.locale.timeUntil} ${endTimeStr}`;
+    return '';
+  });
+
+  // Vorgerechnete Br\u00fcche f\u00fcr die Horizontal-Geometrie.
+  const leftFraction = $derived(
+    layout.dayCol / layout.dayCount + layout.lane / (layout.dayCount * layout.laneCount),
+  );
+  const widthFraction = $derived(1 / (layout.dayCount * layout.laneCount));
+
+  const baseStyle = $derived(
+    `top: ${top}px; height: ${height}px; ` +
+    `left: calc(${timeLabelWidth}px + (100% - ${timeLabelWidth}px) * ${leftFraction} + 2px); ` +
+    `width: calc((100% - ${timeLabelWidth}px) * ${widthFraction} - 4px); ` +
+    `background-color: ${color}; ` +
+    `border-radius: ${isFirstDay ? 4 : 0}px ${isFirstDay ? 4 : 0}px ${isLastDay ? 4 : 0}px ${isLastDay ? 4 : 0}px;`
+  );
+
+  const instanceDate = $derived(getRecurrenceInstanceMetadata(event)?.instanceDate);
+  const isSelected = $derived(ctx.selectedEventId === event.id && ctx.selectedInstanceDate === instanceDate);
+
+  const slots = $derived(getEventSlots(event));
+  const renderedTitle = $derived(slots.title ?? event.title);
+  const extraClass = $derived(slots.className ? ' ' + slots.className : '');
+  const slotStyleStr = $derived(slots.style
+    ? Object.entries(slots.style).map(([k, v]) => `${k.replace(/[A-Z]/g, m => '-' + m.toLowerCase())}: ${v}`).join('; ')
+    : '');
+  const style = $derived(slotStyleStr ? `${baseStyle} ${slotStyleStr}` : baseStyle);
+</script>
+
+<div
+  class="time-event{ghost ? ' time-event--ghost' : ''}{isSelected ? ' time-event--selected' : ''}{extraClass}"
+  {style}
+  draggable={!ghost}
+  role="button"
+  tabindex="0"
+  data-day-col={layout.dayCol}
+  data-day-count={layout.dayCount}
+  data-lane={layout.lane}
+  data-lane-count={layout.laneCount}
+  onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') handleClick(e as any); }}
+  onmousedown={handleMouseDown}
+  ondragstart={handleDragStart}
+  ondragend={ctx.onDragEnd}
+  onclick={handleClick}
+  ondblclick={handleDoubleClick}
+  title={renderedTitle}
+>
+  {#if isFirstDay && !ghost}
+    <!-- svelte-ignore a11y_no_noninteractive_element_interactions a11y_no_noninteractive_tabindex a11y_no_static_element_interactions -->
+    <div
+      class="time-event__resize time-event__resize--top"
+      role="separator"
+      aria-label="Resize start"
+      draggable={true}
+      ondragstart={(e) => handleResizeDragStart(e, 'start')}
+      ondragend={ctx.onDragEnd}
+      onmousedown={(e) => e.stopPropagation()}
+    ></div>
+  {/if}
+
+  {#if slots.content}
+    {#if typeof slots.content === 'string'}{slots.content}{:else}{@render slots.content()}{/if}
+  {:else}
+    <div class="time-event__title">{renderedTitle}</div>
+    {#if duration >= 0.75 && timeLabel}
+      <div class="time-event__time">{timeLabel}</div>
+    {/if}
+  {/if}
+  {#if slots.badges}
+    {#if typeof slots.badges === 'string'}{slots.badges}{:else}{@render slots.badges()}{/if}
+  {/if}
+
+  {#if isLastDay && !ghost}
+    <!-- svelte-ignore a11y_no_noninteractive_element_interactions a11y_no_noninteractive_tabindex a11y_no_static_element_interactions -->
+    <div
+      class="time-event__resize time-event__resize--bottom"
+      role="separator"
+      aria-label="Resize end"
+      draggable={true}
+      ondragstart={(e) => handleResizeDragStart(e, 'end')}
+      ondragend={ctx.onDragEnd}
+      onmousedown={(e) => e.stopPropagation()}
+    ></div>
+  {/if}
+</div>

package/dist/views/week/TimeEvent.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { CalendarEvent, CalendarDateTime } from '@bimetal/calendar-core';
+/**
+ * Layout-Position eines Termins (Pilot-Direktive 2026-06-21). Zwei
+ * orthogonale Achsen — Begründung in der React-Variante.
+ */
+export interface TimeEventLayout {
+    readonly dayCol: number;
+    readonly dayCount: number;
+    readonly lane: number;
+    readonly laneCount: number;
+    readonly startOffset: number;
+    readonly endOffset: number;
+}
+type $$ComponentProps = {
+    event: CalendarEvent;
+    layout: TimeEventLayout;
+    dayDate: CalendarDateTime;
+    hourHeight: number;
+    timeLabelWidth?: number;
+    ghost?: boolean;
+};
+declare const TimeEvent: import("svelte").Component<$$ComponentProps, {}, "">;
+type TimeEvent = ReturnType<typeof TimeEvent>;
+export default TimeEvent;
+//# sourceMappingURL=TimeEvent.svelte.d.ts.map

package/dist/views/week/TimeEvent.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeEvent.svelte.d.ts","sourceRoot":"","sources":["../../../src/views/week/TimeEvent.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAO5E;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;CAC5B;AACF,KAAK,gBAAgB,GAAI;IACtB,KAAK,EAAE,aAAa,CAAC;IACrB,MAAM,EAAE,eAAe,CAAC;IACxB,OAAO,EAAE,gBAAgB,CAAC;IAC1B,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAgJJ,QAAA,MAAM,SAAS,sDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/views/week/WeekView.svelte

@@ -0,0 +1,232 @@
+<script lang="ts">
+  import type { CalendarEvent, CalendarDateTime } from '@bimetal/calendar-core';
+  import {
+    weekGrid, calendarWeekNumber, isSameDay, now,
+    segmentAllDay, segmentTimed, layoutAllDay, layoutTimed,
+    getHours, getMinutes, getDayOfMonth,
+  } from '@bimetal/calendar-core';
+  import { getCalendarContext, getCalendarConfig, toDateStr, parseDateTimeStr } from '../../binding/index.js';
+  import { DEFAULT_HOUR_HEIGHT, DEFAULT_TIME_LABEL_WIDTH_WEEK, DEFAULT_SCROLL_HOUR, createClickIntent, timeGridHit } from '@bimetal/calendar-headless';
+  import { onMount } from 'svelte';
+  import AllDayRow from './AllDayRow.svelte';
+  import TimeEvent from './TimeEvent.svelte';
+
+  const HOURS = Array.from({ length: 24 }, (_, i) => i);
+
+  let {
+    currentDate,
+  }: {
+    currentDate: CalendarDateTime;
+  } = $props();
+
+  const config = getCalendarConfig();
+  const ctx = getCalendarContext<{
+    events: CalendarEvent[];
+    previewEvent: CalendarEvent | null;
+    onDragOverDateTime: (date: CalendarDateTime, time: string) => void;
+    onDropTimedEvent: (e: DragEvent, dropDate: CalendarDateTime, dropTime: string) => void;
+    onHidePreview: () => void;
+    onDayCellClick: (date: CalendarDateTime, anchorRect: DOMRect) => void;
+    selectedEventId: string | null;
+    onClearSelection: () => void;
+  }>();
+
+  let timeGridEl: HTMLDivElement | undefined = $state();
+  let gridInnerEl: HTMLDivElement | undefined = $state();
+  const click = createClickIntent();
+  const timeSnapMinutes = config.core.granularity.week.minutes;
+
+  const weekDates = $derived(weekGrid(currentDate, config.core));
+  const weekNumber = $derived(calendarWeekNumber(weekDates[0]));
+
+  function scrollTo8AM() {
+    if (timeGridEl) {
+      timeGridEl.scrollTop = DEFAULT_SCROLL_HOUR * DEFAULT_HOUR_HEIGHT;
+    }
+  }
+
+  onMount(scrollTo8AM);
+
+  let lastDateEpoch = 0;
+  $effect(() => {
+    const dateEpoch = currentDate.epochMs;
+    if (lastDateEpoch !== 0 && lastDateEpoch !== dateEpoch) {
+      scrollTo8AM();
+    }
+    lastDateEpoch = dateEpoch;
+  });
+
+  // B-CAL-1: der Controller hat die Geometrie des gezogenen Events bereits neu
+  // gebaut (`previewEvent`). Per id eintauschen — kein String-Parsing / +1 /
+  // Validity in der View; diese Policy lebt einmal im Headless.
+  const displayEvents = $derived.by((): CalendarEvent[] => {
+    const pv = ctx.previewEvent;
+    const evts = ctx.events;
+    if (!pv) return evts;
+    return evts.map(ev => ev.id === pv.id ? { ...ev, timeRange: pv.timeRange } : ev);
+  });
+
+  const allDayEvents = $derived(displayEvents.filter(ev => ev.allDay));
+  const timedEvents = $derived(displayEvents.filter(ev => !ev.allDay));
+
+  const allDaySegments = $derived(segmentAllDay(allDayEvents, weekDates));
+  const allDayItems = $derived(layoutAllDay(allDaySegments, weekDates));
+
+  // Lane-Layout pro Tag durch den Core (Pilot-Direktive 2026-06-21):
+  // segmentTimed + layoutTimed bauen Collision-Groups + Lane-Belegung.
+  const timedLayoutByDay = $derived.by(() => {
+    const map = new Map<number, ReturnType<typeof layoutTimed>>();
+    for (let col = 0; col < 7; col++) {
+      const segments = segmentTimed(timedEvents, weekDates[col]);
+      map.set(col, layoutTimed(segments));
+    }
+    return map;
+  });
+
+  const currentNow = $derived(now(config.core.timezone, config.core.clock));
+  const nowCol = $derived(weekDates.findIndex(d => isSameDay(d, currentNow)));
+  const nowHours = $derived(getHours(currentNow) + getMinutes(currentNow) / 60);
+
+  // Hit-Test lebt im Headless (`timeGridHit`); das Binding misst nur den Rect.
+  function handleGridDragOver(e: DragEvent) {
+    e.preventDefault();
+    e.dataTransfer!.dropEffect = 'move';
+    if (!gridInnerEl) return;
+    const rect = gridInnerEl.getBoundingClientRect();
+    const hit = timeGridHit({ x: e.clientX, y: e.clientY }, rect, { labelWidth: DEFAULT_TIME_LABEL_WIDTH_WEEK, hourHeight: DEFAULT_HOUR_HEIGHT, snapMinutes: timeSnapMinutes });
+    ctx.onDragOverDateTime(weekDates[hit.col], hit.time);
+  }
+
+  function handleGridDrop(e: DragEvent) {
+    e.preventDefault();
+    if (!gridInnerEl) return;
+    const rect = gridInnerEl.getBoundingClientRect();
+    const hit = timeGridHit({ x: e.clientX, y: e.clientY }, rect, { labelWidth: DEFAULT_TIME_LABEL_WIDTH_WEEK, hourHeight: DEFAULT_HOUR_HEIGHT, snapMinutes: timeSnapMinutes });
+    ctx.onDropTimedEvent(e, weekDates[hit.col], hit.time);
+  }
+
+  function handleGridDragLeave(e: DragEvent) {
+    const el = e.currentTarget as HTMLElement;
+    const rect = el.getBoundingClientRect();
+    if (e.clientX < rect.left || e.clientX > rect.right ||
+        e.clientY < rect.top || e.clientY > rect.bottom) {
+      ctx.onHidePreview();
+    }
+  }
+
+  function handleGridMouseDown() {
+    click.markMouseDown();
+  }
+
+  function handleGridClick(e: MouseEvent) {
+    if (!click.accept(config.clickThresholdMs)) return;
+    if ((e.target as HTMLElement).closest('.time-event')) return;
+    // Single click on empty grid deselects; create-dialog moves to dblclick.
+    if (ctx.selectedEventId !== null) ctx.onClearSelection();
+  }
+
+  function handleGridDoubleClick(e: MouseEvent) {
+    if (!click.accept(config.clickThresholdMs)) return;
+    if ((e.target as HTMLElement).closest('.time-event')) return;
+    if (!gridInnerEl) return;
+    const gridRect = gridInnerEl.getBoundingClientRect();
+    const hit = timeGridHit({ x: e.clientX, y: e.clientY }, gridRect, { labelWidth: DEFAULT_TIME_LABEL_WIDTH_WEEK, hourHeight: DEFAULT_HOUR_HEIGHT, snapMinutes: timeSnapMinutes });
+    const clickedDate = weekDates[hit.col];
+    // Klick-Datum + gesnapte Zeit über den geteilten Parser (kein split).
+    const clickedDt = parseDateTimeStr(toDateStr(clickedDate), hit.time, clickedDate.timezone);
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    ctx.onDayCellClick(clickedDt, rect);
+  }
+</script>
+
+<div class="week-view">
+  <!-- Header -->
+  <div class="week-view__header">
+    <div class="week-view__corner">{config.locale.calendarWeek} {weekNumber}</div>
+    {#each weekDates as date, i (i)}
+      {@const isToday = isSameDay(date, currentNow)}
+      <div class="week-view__day-header{isToday ? ' week-view__day-header--today' : ''}">
+        <span class="week-view__day-name">{config.locale.dayNamesShort[i]}</span>
+        <span class="week-view__day-number{isToday ? ' week-view__day-number--today' : ''}">
+          {getDayOfMonth(date)}
+        </span>
+      </div>
+    {/each}
+  </div>
+
+  <!-- All-day row -->
+  <AllDayRow {weekDates} items={allDayItems} />
+
+  <!-- Time grid -->
+  <div
+    bind:this={timeGridEl}
+    class="week-view__time-grid"
+    role="grid"
+    tabindex="0"
+    ondragover={handleGridDragOver}
+    ondrop={handleGridDrop}
+    ondragleave={handleGridDragLeave}
+    onmousedown={handleGridMouseDown}
+    onclick={handleGridClick}
+    ondblclick={handleGridDoubleClick}
+    onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') handleGridDoubleClick(e as any); }}
+  >
+    <div
+      bind:this={gridInnerEl}
+      class="week-view__time-grid-inner"
+      style="height: {24 * DEFAULT_HOUR_HEIGHT}px;"
+    >
+      <!-- Hour rows -->
+      {#each HOURS as hr (hr)}
+        {@const wh = config.core.workingHours}
+        {@const isOff = wh ? (hr < wh.start || hr >= wh.end) : false}
+        <div
+          class="week-view__hour-row{isOff ? ' hour-slot--off' : ''}"
+          style="top: {hr * DEFAULT_HOUR_HEIGHT}px; height: {DEFAULT_HOUR_HEIGHT}px;"
+        >
+          <div class="week-view__hour-label">
+            {hr > 0 ? `${String(hr).padStart(2, '0')}:00` : ''}
+          </div>
+        </div>
+      {/each}
+
+      <!-- Day columns -->
+      {#each weekDates as _, col (col)}
+        <div
+          class="week-view__day-col"
+          style="left: calc({DEFAULT_TIME_LABEL_WIDTH_WEEK}px + {col} * (100% - {DEFAULT_TIME_LABEL_WIDTH_WEEK}px) / 7); width: calc((100% - {DEFAULT_TIME_LABEL_WIDTH_WEEK}px) / 7);"
+        ></div>
+      {/each}
+
+      <!-- Timed events -->
+      {#each Array.from(timedLayoutByDay.entries()) as [col, items] (col)}
+        {#each items as item (`${item.segment.event.id}-${col}-${item.column}`)}
+          <TimeEvent
+            event={item.segment.event}
+            layout={{
+              dayCol: col,
+              dayCount: 7,
+              lane: item.column,
+              laneCount: item.totalColumns,
+              startOffset: item.startOffset,
+              endOffset: item.endOffset,
+            }}
+            dayDate={weekDates[col]}
+            hourHeight={DEFAULT_HOUR_HEIGHT}
+            ghost={ctx.previewEvent?.id === item.segment.event.id}
+          />
+        {/each}
+      {/each}
+
+      <!-- Now line -->
+      {#if nowCol >= 0}
+        <div
+          class="week-view__now-line"
+          style="top: {nowHours * DEFAULT_HOUR_HEIGHT}px; left: calc({DEFAULT_TIME_LABEL_WIDTH_WEEK}px + {nowCol} * (100% - {DEFAULT_TIME_LABEL_WIDTH_WEEK}px) / 7); width: calc((100% - {DEFAULT_TIME_LABEL_WIDTH_WEEK}px) / 7);"
+        >
+          <div class="week-view__now-dot"></div>
+        </div>
+      {/if}
+    </div>
+  </div>
+</div>

package/dist/views/week/WeekView.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { CalendarDateTime } from '@bimetal/calendar-core';
+type $$ComponentProps = {
+    currentDate: CalendarDateTime;
+};
+declare const WeekView: import("svelte").Component<$$ComponentProps, {}, "">;
+type WeekView = ReturnType<typeof WeekView>;
+export default WeekView;
+//# sourceMappingURL=WeekView.svelte.d.ts.map

package/dist/views/week/WeekView.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WeekView.svelte.d.ts","sourceRoot":"","sources":["../../../src/views/week/WeekView.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAiB,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAY7E,KAAK,gBAAgB,GAAI;IACtB,WAAW,EAAE,gBAAgB,CAAC;CAC/B,CAAC;AAuMJ,QAAA,MAAM,QAAQ,sDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/views/year/YearView.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+  import type { CalendarEvent, CalendarDateTime } from '@bimetal/calendar-core';
+  import {
+    monthGrid, getMonth, getDayOfMonth, isSameDay, startOfDay, addDays, now,
+  } from '@bimetal/calendar-core';
+  import { getCalendarConfig, getCalendarContext } from '../../binding/index.js';
+
+  let {
+    year,
+    onMonthClick = undefined,
+  }: {
+    year: number;
+    onMonthClick?: (year: number, month: number) => void;
+  } = $props();
+
+  const config = getCalendarConfig();
+  const ctx = getCalendarContext<{
+    events: CalendarEvent[];
+    onDayCellClick: (date: CalendarDateTime, rect: DOMRect) => void;
+  }>();
+
+  const today = $derived(now(config.core.timezone, config.core.clock));
+
+  const eventDays = $derived.by(() => {
+    const set = new Set<number>();
+    for (const ev of ctx.events) {
+      let cursor = startOfDay(ev.timeRange.start);
+      const last = ev.timeRange.end;
+      while (cursor.epochMs < last.epochMs) {
+        set.add(cursor.epochMs);
+        cursor = addDays(cursor, 1);
+      }
+    }
+    return set;
+  });
+
+  const months = $derived.by(() => {
+    const monthFmt = new Intl.DateTimeFormat(config.locale.code, {
+      month: 'long', timeZone: config.core.timezone,
+    });
+    return Array.from({ length: 12 }, (_, m) => ({
+      month: m,
+      label: monthFmt.format(new Date(Date.UTC(year, m, 15, 12))),
+      weeks: monthGrid(year, m, config.core),
+    }));
+  });
+
+  function dayClick(e: MouseEvent, date: CalendarDateTime) {
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    ctx.onDayCellClick(date, rect);
+  }
+</script>
+
+<div class="year-grid">
+  {#each months as { month, label, weeks } (month)}
+    <div class="year-month">
+      {#if onMonthClick}
+        <button type="button" class="year-month__header" onclick={() => onMonthClick?.(year, month)}>
+          {label}
+        </button>
+      {:else}
+        <div class="year-month__header">{label}</div>
+      {/if}
+      <div class="year-month__day-headers">
+        {#each config.locale.dayNamesShort as n (n)}
+          <div class="year-month__day-header">{n[0]}</div>
+        {/each}
+      </div>
+      <div class="year-month__days">
+        {#each weeks as week, wIdx (wIdx)}
+          {#each week as date (date.epochMs)}
+            {@const inMonth = getMonth(date) === month}
+            {@const isToday = isSameDay(date, today)}
+            {@const hasEvents = eventDays.has(startOfDay(date).epochMs)}
+            <button
+              type="button"
+              class={
+                'year-month__day'
+                + (inMonth ? '' : ' year-month__day--outside')
+                + (isToday ? ' year-month__day--today' : '')
+                + (hasEvents ? ' year-month__day--has-events' : '')
+              }
+              onclick={(e) => dayClick(e, date)}
+            >
+              <span class="year-month__day-num">{getDayOfMonth(date)}</span>
+            </button>
+          {/each}
+        {/each}
+      </div>
+    </div>
+  {/each}
+</div>

package/dist/views/year/YearView.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    year: number;
+    onMonthClick?: (year: number, month: number) => void;
+};
+declare const YearView: import("svelte").Component<$$ComponentProps, {}, "">;
+type YearView = ReturnType<typeof YearView>;
+export default YearView;
+//# sourceMappingURL=YearView.svelte.d.ts.map

package/dist/views/year/YearView.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"YearView.svelte.d.ts","sourceRoot":"","sources":["../../../src/views/year/YearView.svelte.ts"],"names":[],"mappings":"AASC,KAAK,gBAAgB,GAAI;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACtD,CAAC;AAqFJ,QAAA,MAAM,QAAQ,sDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}