@bimetal/calendar-svelte-components 0.29.0

package/dist/views/agenda/AgendaView.svelte

@@ -0,0 +1,155 @@
+<script lang="ts">
+  import type { CalendarEvent, CalendarDateTime } from '@bimetal/calendar-core';
+  import {
+    addDays, isSameDay, startOfDay, isBefore, isAfter,
+    getDayOfMonth,
+    createTimeRange, overlaps, formatDateTime, now,
+    getRecurrenceInstanceMetadata, isSingleDayAllDay,
+  } from '@bimetal/calendar-core';
+  import { getCalendarContext, getCalendarConfig, toDateStr, toTimeStr } from '../../binding/index.js';
+  import { DEFAULT_AGENDA_RANGE_DAYS, createClickIntent } from '@bimetal/calendar-headless';
+  import AgendaEvent from './AgendaEvent.svelte';
+
+  interface DayGroup {
+    date: CalendarDateTime;
+    dateStr: string;
+    events: CalendarEvent[];
+  }
+
+  let {
+    currentDate,
+  }: {
+    currentDate: CalendarDateTime;
+  } = $props();
+
+  const config = getCalendarConfig();
+  const ctx = getCalendarContext<{
+    events: CalendarEvent[];
+    onEventClick: (eventId: string, anchorRect: DOMRect, instanceDate?: number) => void;
+    onSelectEvent: (eventId: string, instanceDate?: number) => void;
+    selectedEventId: string | null;
+    selectedInstanceDate: number | undefined;
+  }>();
+
+  const click = createClickIntent();
+
+  const rangeStartDt = $derived(startOfDay(currentDate));
+  const rangeEndDt = $derived(addDays(rangeStartDt, DEFAULT_AGENDA_RANGE_DAYS));
+  const agendaRange = $derived(createTimeRange(rangeStartDt, rangeEndDt));
+
+  const currentNow = $derived(now(config.core.timezone, config.core.clock));
+
+  const dayGroups = $derived.by((): DayGroup[] => {
+    const groups = new Map<string, CalendarEvent[]>();
+
+    for (const ev of ctx.events) {
+      if (!overlaps(ev.timeRange, agendaRange)) continue;
+
+      const evStart = isBefore(ev.timeRange.start, rangeStartDt) ? rangeStartDt : ev.timeRange.start;
+      const evEnd = isAfter(ev.timeRange.end, rangeEndDt) ? rangeEndDt : ev.timeRange.end;
+
+      let d = startOfDay(evStart);
+      const end = startOfDay(evEnd);
+      const limit = addDays(end, 1);
+      while (isBefore(d, limit) && isBefore(d, rangeEndDt)) {
+        const ds = toDateStr(d);
+        const list = groups.get(ds) || [];
+        list.push(ev);
+        groups.set(ds, list);
+        d = addDays(d, 1);
+      }
+    }
+
+    const result: DayGroup[] = [];
+    for (let i = 0; i < DEFAULT_AGENDA_RANGE_DAYS; i++) {
+      const date = addDays(rangeStartDt, i);
+      const dateStr = toDateStr(date);
+      const dayEvents = groups.get(dateStr);
+      if (dayEvents && dayEvents.length > 0) {
+        dayEvents.sort((a, b) => {
+          if (a.allDay !== b.allDay) return a.allDay ? -1 : 1;
+          return a.timeRange.start.epochMs - b.timeRange.start.epochMs;
+        });
+        result.push({ date, dateStr, events: dayEvents });
+      }
+    }
+    return result;
+  });
+
+  function handleMouseDown() {
+    click.markMouseDown();
+  }
+
+  function handleEventClick(e: MouseEvent, eventId: string, instanceDate?: number) {
+    if (!click.accept(config.clickThresholdMs)) return;
+    ctx.onSelectEvent(eventId, instanceDate);
+  }
+
+  function handleEventDoubleClick(e: MouseEvent, eventId: string, instanceDate?: number) {
+    if (!click.accept(config.clickThresholdMs)) return;
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    ctx.onEventClick(eventId, rect, instanceDate);
+  }
+
+  function isEventSelected(ev: CalendarEvent): boolean {
+    const id = getRecurrenceInstanceMetadata(ev)?.instanceDate;
+    return ctx.selectedEventId === ev.id && ctx.selectedInstanceDate === id;
+  }
+
+  function formatEventTime(ev: CalendarEvent, date: CalendarDateTime): string {
+    if (ev.allDay) {
+      if (isSingleDayAllDay(ev.timeRange)) {
+        return config.locale.allDayEvent;
+      }
+      const startStr = formatDateTime(ev.timeRange.start, { locale: config.locale.code, dateStyle: 'short' });
+      const endStr = formatDateTime(addDays(ev.timeRange.end, -1), { locale: config.locale.code, dateStyle: 'short' });
+      return `${config.locale.allDayEvent} (${startStr} \u2013 ${endStr})`;
+    }
+    const isFirst = isSameDay(ev.timeRange.start, date);
+    const isLast = isSameDay(ev.timeRange.end, date);
+    const startTime = toTimeStr(ev.timeRange.start);
+    const endTime = toTimeStr(ev.timeRange.end);
+    if (isFirst && isLast) return `${startTime} \u2013 ${endTime}`;
+    if (isFirst) return `${config.locale.timeFrom} ${startTime}`;
+    if (isLast) return `${config.locale.timeUntil} ${endTime}`;
+    return config.locale.allDayEvent;
+  }
+</script>
+
+<div class="agenda-view">
+  {#if dayGroups.length === 0}
+    <div class="agenda-view__empty">{config.locale.noEvents}</div>
+  {:else}
+    {#each dayGroups as group (group.dateStr)}
+      {@const isGroupToday = isSameDay(group.date, currentNow)}
+      <div class="agenda-view__day">
+        <div class="agenda-view__date-header{isGroupToday ? ' agenda-view__date-header--today' : ''}">
+          <span class="agenda-view__date-number{isGroupToday ? ' agenda-view__date-number--today' : ''}">
+            {getDayOfMonth(group.date)}
+          </span>
+          <div class="agenda-view__date-text">
+            <span class="agenda-view__date-weekday">
+              {formatDateTime(group.date, { locale: config.locale.code, dateStyle: 'full' }).split(',')[0]}
+            </span>
+            <span class="agenda-view__date-full">
+              {formatDateTime(group.date, { locale: config.locale.code, dateStyle: 'long' }).replace(/\d+\.?\s*/, '')}
+            </span>
+          </div>
+        </div>
+        <div class="agenda-view__events">
+          {#each group.events as ev (`${ev.id}-${group.dateStr}`)}
+            <AgendaEvent
+              {ev}
+              timeLabel={formatEventTime(ev, group.date)}
+              category={(ev.metadata.category as string | undefined) ?? 'default'}
+              isSelected={isEventSelected(ev)}
+              onEntryMouseDown={handleMouseDown}
+              onEntryClick={handleEventClick}
+              onEntryDoubleClick={handleEventDoubleClick}
+            />
+          {/each}
+        </div>
+      </div>
+    {/each}
+  {/if}
+</div>

package/dist/views/agenda/AgendaView.svelte.d.ts

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

package/dist/views/agenda/AgendaView.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgendaView.svelte.d.ts","sourceRoot":"","sources":["../../../src/views/agenda/AgendaView.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAiB,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAiB7E,KAAK,gBAAgB,GAAI;IACtB,WAAW,EAAE,gBAAgB,CAAC;CAC/B,CAAC;AA2IJ,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/views/day/AllDayEvent.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import type { CalendarEvent } from '@bimetal/calendar-core';
+  import { getRecurrenceInstanceMetadata } from '@bimetal/calendar-core';
+  import { getEventSlots } from '../../binding/index.js';
+
+  let {
+    ev,
+    isSelected,
+    onEntryMouseDown,
+    onEntryClick,
+    onEntryDoubleClick,
+  }: {
+    ev: CalendarEvent;
+    isSelected: boolean;
+    onEntryMouseDown: () => void;
+    onEntryClick: (e: MouseEvent, id: string, instanceDate?: number) => void;
+    onEntryDoubleClick: (e: MouseEvent, id: string, instanceDate?: number) => void;
+  } = $props();
+
+  const slots = $derived(getEventSlots(ev));
+  const renderedTitle = $derived(slots.title ?? ev.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 baseStyle = $derived(`background-color: ${ev.metadata.color ?? '#007AFF'};`);
+  const fullStyle = $derived(slotStyleStr ? `${baseStyle} ${slotStyleStr}` : baseStyle);
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<div
+  class="day-view__allday-event{isSelected ? ' day-view__allday-event--selected' : ''}{extraClass}"
+  style={fullStyle}
+  role="button"
+  tabindex="0"
+  onmousedown={onEntryMouseDown}
+  onclick={(e) => onEntryClick(e, ev.id, getRecurrenceInstanceMetadata(ev)?.instanceDate)}
+  ondblclick={(e) => onEntryDoubleClick(e, ev.id, getRecurrenceInstanceMetadata(ev)?.instanceDate)}
+  title={renderedTitle}
+>
+  {#if slots.content}
+    {#if typeof slots.content === 'string'}{slots.content}{:else}{@render slots.content()}{/if}
+  {:else}
+    {renderedTitle}
+  {/if}
+  {#if slots.badges}
+    {#if typeof slots.badges === 'string'}{slots.badges}{:else}{@render slots.badges()}{/if}
+  {/if}
+</div>

package/dist/views/day/AllDayEvent.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { CalendarEvent } from '@bimetal/calendar-core';
+type $$ComponentProps = {
+    ev: CalendarEvent;
+    isSelected: boolean;
+    onEntryMouseDown: () => void;
+    onEntryClick: (e: MouseEvent, id: string, instanceDate?: number) => void;
+    onEntryDoubleClick: (e: MouseEvent, id: string, instanceDate?: number) => void;
+};
+declare const AllDayEvent: import("svelte").Component<$$ComponentProps, {}, "">;
+type AllDayEvent = ReturnType<typeof AllDayEvent>;
+export default AllDayEvent;
+//# sourceMappingURL=AllDayEvent.svelte.d.ts.map

package/dist/views/day/AllDayEvent.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AllDayEvent.svelte.d.ts","sourceRoot":"","sources":["../../../src/views/day/AllDayEvent.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAI3D,KAAK,gBAAgB,GAAI;IACtB,EAAE,EAAE,aAAa,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,YAAY,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACzE,kBAAkB,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAChF,CAAC;AAsCJ,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/views/day/DayView.svelte

@@ -0,0 +1,252 @@
+<script lang="ts">
+  import type { CalendarEvent, CalendarDateTime } from '@bimetal/calendar-core';
+  import {
+    isSameDay, now, getDayOfMonth, startOfDay, addDays,
+    getHours, getMinutes,
+    createTimeRange, overlaps, formatDateTime,
+    segmentTimed, layoutTimed,
+    getRecurrenceInstanceMetadata,
+  } from '@bimetal/calendar-core';
+  import { getCalendarContext, getCalendarConfig, snapTimeFromMouseY, toDateStr, parseDateTimeStr } from '../../binding/index.js';
+  import { DEFAULT_HOUR_HEIGHT, DEFAULT_TIME_LABEL_WIDTH_DAY, DEFAULT_SCROLL_HOUR, createClickIntent } from '@bimetal/calendar-headless';
+  import { onMount } from 'svelte';
+  import TimeEvent from '../week/TimeEvent.svelte';
+  import AllDayEvent from './AllDayEvent.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;
+    onEventClick: (eventId: string, anchorRect: DOMRect, instanceDate?: number) => void;
+    onSelectEvent: (eventId: string, instanceDate?: number) => void;
+    onClearSelection: () => void;
+    selectedEventId: string | null;
+    selectedInstanceDate: number | undefined;
+  }>();
+
+  let timeGridEl: HTMLDivElement | undefined = $state();
+  let gridInnerEl: HTMLDivElement | undefined = $state();
+  const click = createClickIntent();
+  const allDayClick = createClickIntent();
+  const timeSnapMinutes = config.core.granularity.day.minutes;
+
+  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;
+  });
+
+  const dayStart = $derived(startOfDay(currentDate));
+  const dayEnd = $derived(addDays(dayStart, 1));
+  const dayRange = $derived(createTimeRange(dayStart, dayEnd));
+
+  // B-CAL-1: das vom Controller neu gebaute Event per id eintauschen (kein
+  // Parsing in der View).
+  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 && overlaps(ev.timeRange, dayRange)));
+  const timedEvents = $derived(displayEvents.filter(ev => !ev.allDay && overlaps(ev.timeRange, dayRange)));
+
+  // Lane-Layout durch den Core (Pilot-Direktive 2026-06-21).
+  const timedLayout = $derived(layoutTimed(segmentTimed(timedEvents, currentDate)));
+
+  const currentNow = $derived(now(config.core.timezone, config.core.clock));
+  const isToday = $derived(isSameDay(currentDate, currentNow));
+  const dayName = $derived(
+    formatDateTime(currentDate, { locale: config.locale.code, dateStyle: 'full' }).split(',')[0]
+  );
+  const nowHours = $derived(getHours(currentNow) + getMinutes(currentNow) / 60);
+
+  function getTimeFromMouseY(clientY: number): string {
+    if (!gridInnerEl) return '00:00';
+    return snapTimeFromMouseY(clientY, gridInnerEl.getBoundingClientRect(), DEFAULT_HOUR_HEIGHT, timeSnapMinutes);
+  }
+
+  function handleGridDragOver(e: DragEvent) {
+    e.preventDefault();
+    e.dataTransfer!.dropEffect = 'move';
+    const time = getTimeFromMouseY(e.clientY);
+    ctx.onDragOverDateTime(currentDate, time);
+  }
+
+  function handleGridDrop(e: DragEvent) {
+    e.preventDefault();
+    const time = getTimeFromMouseY(e.clientY);
+    ctx.onDropTimedEvent(e, currentDate, 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;
+    const time = getTimeFromMouseY(e.clientY);
+    // Tag + gesnapte Zeit über den geteilten Parser (kein split, wie WeekView).
+    const clickedDt = parseDateTimeStr(toDateStr(currentDate), time, currentDate.timezone);
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    ctx.onDayCellClick(clickedDt, rect);
+  }
+
+  function handleAllDayEventMouseDown() {
+    allDayClick.markMouseDown();
+  }
+
+  function handleAllDayEventClick(e: MouseEvent, eventId: string, instanceDate?: number) {
+    e.stopPropagation();
+    if (!allDayClick.accept(config.clickThresholdMs)) return;
+    ctx.onSelectEvent(eventId, instanceDate);
+  }
+
+  function handleAllDayEventDoubleClick(e: MouseEvent, eventId: string, instanceDate?: number) {
+    e.stopPropagation();
+    if (!allDayClick.accept(config.clickThresholdMs)) return;
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    ctx.onEventClick(eventId, rect, instanceDate);
+  }
+
+  function isAllDayEventSelected(ev: CalendarEvent): boolean {
+    const id = getRecurrenceInstanceMetadata(ev)?.instanceDate;
+    return ctx.selectedEventId === ev.id && ctx.selectedInstanceDate === id;
+  }
+</script>
+
+<div class="day-view">
+  <!-- Header -->
+  <div class="day-view__header">
+    <span class="day-view__day-name">{dayName}</span>
+    <span class="day-view__day-number{isToday ? ' day-view__day-number--today' : ''}">
+      {getDayOfMonth(currentDate)}
+    </span>
+  </div>
+
+  <!-- All-day events -->
+  {#if allDayEvents.length > 0}
+    <div class="day-view__allday">
+      <div class="day-view__allday-label">{config.locale.allDayLabel}</div>
+      <div class="day-view__allday-list">
+        {#each allDayEvents as ev (ev.id)}
+          <AllDayEvent
+            {ev}
+            isSelected={isAllDayEventSelected(ev)}
+            onEntryMouseDown={handleAllDayEventMouseDown}
+            onEntryClick={handleAllDayEventClick}
+            onEntryDoubleClick={handleAllDayEventDoubleClick}
+          />
+        {/each}
+      </div>
+    </div>
+  {/if}
+
+  <!-- Time grid -->
+  <div
+    bind:this={timeGridEl}
+    class="day-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="day-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="day-view__hour-row{isOff ? ' hour-slot--off' : ''}"
+          style="top: {hr * DEFAULT_HOUR_HEIGHT}px; height: {DEFAULT_HOUR_HEIGHT}px;"
+        >
+          <div class="day-view__hour-label">
+            {hr > 0 ? `${String(hr).padStart(2, '0')}:00` : ''}
+          </div>
+        </div>
+      {/each}
+
+      <!-- Day column -->
+      <div
+        class="day-view__day-col"
+        style="left: {DEFAULT_TIME_LABEL_WIDTH_DAY}px; width: calc(100% - {DEFAULT_TIME_LABEL_WIDTH_DAY}px);"
+      ></div>
+
+      <!-- Timed events -->
+      {#each timedLayout as item (`${item.segment.event.id}-${item.column}`)}
+        <TimeEvent
+          event={item.segment.event}
+          layout={{
+            dayCol: 0,
+            dayCount: 1,
+            lane: item.column,
+            laneCount: item.totalColumns,
+            startOffset: item.startOffset,
+            endOffset: item.endOffset,
+          }}
+          dayDate={currentDate}
+          hourHeight={DEFAULT_HOUR_HEIGHT}
+          timeLabelWidth={DEFAULT_TIME_LABEL_WIDTH_DAY}
+          ghost={ctx.previewEvent?.id === item.segment.event.id}
+        />
+      {/each}
+
+      <!-- Now line -->
+      {#if isToday}
+        <div class="day-view__now-line" style="top: {nowHours * DEFAULT_HOUR_HEIGHT}px;">
+          <div class="day-view__now-dot"></div>
+        </div>
+      {/if}
+    </div>
+  </div>
+</div>

package/dist/views/day/DayView.svelte.d.ts

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

package/dist/views/day/DayView.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DayView.svelte.d.ts","sourceRoot":"","sources":["../../../src/views/day/DayView.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAiB,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAc7E,KAAK,gBAAgB,GAAI;IACtB,WAAW,EAAE,gBAAgB,CAAC;CAC/B,CAAC;AAqNJ,QAAA,MAAM,OAAO,sDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/views/month/MonthView.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+  import type { CalendarEvent } from '@bimetal/calendar-core';
+  import {
+    monthGrid, segmentAllDay, layoutAllDay, startOfDay,
+  } from '@bimetal/calendar-core';
+  import { getCalendarContext, getCalendarConfig } from '../../binding/index.js';
+  import WeekRow from './WeekRow.svelte';
+
+  let {
+    year,
+    month,
+  }: {
+    year: number;
+    month: number;
+  } = $props();
+
+  const config = getCalendarConfig();
+  const ctx = getCalendarContext<{
+    events: CalendarEvent[];
+    previewEvent: CalendarEvent | null;
+  }>();
+
+  const weeks = $derived(monthGrid(year, month, config.core));
+
+  // B-CAL-1: das vom Controller neu gebaute Event per id eintauschen (kein
+  // Parsing in der View).
+  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 timedByDay = $derived.by(() => {
+    const map = new Map<number, CalendarEvent[]>();
+    for (const event of displayEvents) {
+      if (event.allDay) continue;
+      const dayMs = startOfDay(event.timeRange.start).epochMs;
+      const list = map.get(dayMs) ?? [];
+      list.push(event);
+      map.set(dayMs, list);
+    }
+    return map;
+  });
+</script>
+
+<div class="month-grid">
+  <div class="day-headers">
+    <div class="header-spacer"></div>
+    {#each config.locale.dayNamesShort as name (name)}
+      <div class="day-header">{name}</div>
+    {/each}
+  </div>
+
+  {#each weeks as weekDates, idx (idx)}
+    {@const segments = segmentAllDay(displayEvents, weekDates)}
+    {@const items = layoutAllDay(segments, weekDates)}
+    <WeekRow
+      {weekDates}
+      {items}
+      {timedByDay}
+      currentYear={year}
+      currentMonth={month}
+    />
+  {/each}
+</div>

package/dist/views/month/MonthView.svelte.d.ts

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

package/dist/views/month/MonthView.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MonthView.svelte.d.ts","sourceRoot":"","sources":["../../../src/views/month/MonthView.svelte.ts"],"names":[],"mappings":"AAUC,KAAK,gBAAgB,GAAI;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AA2DJ,QAAA,MAAM,SAAS,sDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/views/month/TimedEntry.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import type { CalendarEvent } from '@bimetal/calendar-core';
+  import { getRecurrenceInstanceMetadata } from '@bimetal/calendar-core';
+  import { getEventSlots, toTimeStr } from '../../binding/index.js';
+
+  let {
+    ev,
+    isSelected,
+    onEntryMouseDown,
+    onEntryClick,
+    onEntryDoubleClick,
+  }: {
+    ev: CalendarEvent;
+    isSelected: boolean;
+    onEntryMouseDown: (e: MouseEvent) => void;
+    onEntryClick: (e: MouseEvent, id: string, instanceDate?: number) => void;
+    onEntryDoubleClick: (e: MouseEvent, id: string, instanceDate?: number) => void;
+  } = $props();
+
+  const slots = $derived(getEventSlots(ev));
+  const renderedTitle = $derived(slots.title ?? ev.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('; ')
+    : '');
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<div
+  class="timed-entry{isSelected ? ' timed-entry--selected' : ''}{extraClass}"
+  style={slotStyleStr}
+  role="button"
+  tabindex="0"
+  onmousedown={onEntryMouseDown}
+  onclick={(e) => onEntryClick(e, ev.id, getRecurrenceInstanceMetadata(ev)?.instanceDate)}
+  ondblclick={(e) => onEntryDoubleClick(e, ev.id, getRecurrenceInstanceMetadata(ev)?.instanceDate)}
+  title={renderedTitle}
+>
+  {#if slots.content}
+    {#if typeof slots.content === 'string'}{slots.content}{:else}{@render slots.content()}{/if}
+  {:else}
+    <span class="timed-entry__dot" style:background-color={ev.metadata.color ?? '#007AFF'}></span>
+    <span class="timed-entry__time">
+      {toTimeStr(ev.timeRange.start)}
+    </span>
+    <span class="timed-entry__title">{renderedTitle}</span>
+  {/if}
+  {#if slots.badges}
+    {#if typeof slots.badges === 'string'}{slots.badges}{:else}{@render slots.badges()}{/if}
+  {/if}
+</div>

package/dist/views/month/TimedEntry.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { CalendarEvent } from '@bimetal/calendar-core';
+type $$ComponentProps = {
+    ev: CalendarEvent;
+    isSelected: boolean;
+    onEntryMouseDown: (e: MouseEvent) => void;
+    onEntryClick: (e: MouseEvent, id: string, instanceDate?: number) => void;
+    onEntryDoubleClick: (e: MouseEvent, id: string, instanceDate?: number) => void;
+};
+declare const TimedEntry: import("svelte").Component<$$ComponentProps, {}, "">;
+type TimedEntry = ReturnType<typeof TimedEntry>;
+export default TimedEntry;
+//# sourceMappingURL=TimedEntry.svelte.d.ts.map

package/dist/views/month/TimedEntry.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimedEntry.svelte.d.ts","sourceRoot":"","sources":["../../../src/views/month/TimedEntry.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAI3D,KAAK,gBAAgB,GAAI;IACtB,EAAE,EAAE,aAAa,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,gBAAgB,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAC1C,YAAY,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACzE,kBAAkB,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAChF,CAAC;AAwCJ,QAAA,MAAM,UAAU,sDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}