@nomideusz/svelte-calendar 0.7.5 → 0.9.0

package/dist/calendar/Calendar.svelte.d.ts

@@ -7,8 +7,8 @@ import type { AutoThemeOptions } from '../theme/auto.js';
 export interface CalendarView {
     id: CalendarViewId;
     label: string;
-    /** day or week */
-    mode: 'day' | 'week';
+    /** day, week or month */
+    mode: 'day' | 'week' | 'month';
     /** The Svelte component to render */
     component: Component<Record<string, unknown>>;
     /** Extra props to pass through (e.g. hourHeight, specialized settings) */
@@ -112,6 +112,17 @@ interface Props {
     ondatechange?: (date: Date) => void;
     /** Called when the pointer enters an event (hover). */
     oneventhover?: (event: TimelineEvent) => void;
+    /** Called when a day cell is clicked (month grid; more views over time). */
+    ondayclick?: (date: Date) => void;
+    /** Surfaced instead of silent console output when loading or mutations fail. */
+    onerror?: (error: Error) => void;
+    /**
+     * Render the calendar in an IANA timezone (e.g. 'Europe/Warsaw').
+     * Events, "now" and day boundaries all shift; ranges passed to
+     * oneventcreate/oneventmove convert back to real instants.
+     * Default: the viewer's local time.
+     */
+    timezone?: string;
 }
 declare const Calendar: Component<Props, {}, "">;
 type Calendar = ReturnType<typeof Calendar>;

package/dist/core/clock.svelte.d.ts

@@ -18,4 +18,4 @@ export interface Clock {
  * Must be called during component initialisation (before first await).
  * Automatically cleans up on unmount via onMount return.
  */
-export declare function createClock(): Clock;
+export declare function createClock(timezone?: string): Clock;

package/dist/core/clock.svelte.js

@@ -13,19 +13,23 @@
  */
 import { onMount } from 'svelte';
 import { sod, fmtHM, fmtS, fractionalHour } from './time.js';
+import { toZonedTime } from './timezone.js';
 /**
  * Create a shared reactive clock.
  *
  * Must be called during component initialisation (before first await).
  * Automatically cleans up on unmount via onMount return.
  */
-export function createClock() {
-    let tick = $state(Date.now());
-    let today = $state(sod(Date.now()));
+export function createClock(timezone) {
+    // With a timezone, ticks are "zoned wall-clock" epoch ms — the same plane
+    // the wrapped adapter shifts event Dates into. Views stay zone-agnostic.
+    const now = () => (timezone ? toZonedTime(Date.now(), timezone).getTime() : Date.now());
+    let tick = $state(now());
+    let today = $state(sod(tick));
     let intervalId = null;
     function start() {
         intervalId = setInterval(() => {
-            tick = Date.now();
+            tick = now();
             const sd = sod(tick);
             if (sd !== today)
                 today = sd;
@@ -37,11 +41,18 @@ export function createClock() {
             intervalId = null;
         }
     }
-    // Auto-start and auto-cleanup
-    onMount(() => {
-        start();
-        return destroy;
-    });
+    // Auto-start and auto-cleanup.
+    // Outside component initialisation (headless usage, tests) onMount throws —
+    // fall back to a static clock; callers may still call destroy().
+    try {
+        onMount(() => {
+            start();
+            return destroy;
+        });
+    }
+    catch {
+        // lifecycle_outside_component — no interval, clock stays at creation time
+    }
     return {
         get tick() { return tick; },
         get today() { return today; },

package/dist/core/locale.d.ts

@@ -17,6 +17,7 @@ export interface CalendarLabels {
     tomorrow: string;
     day: string;
     week: string;
+    month: string;
     planner: string;
     agenda: string;
     now: string;
@@ -34,7 +35,9 @@ export interface CalendarLabels {
     previousDay: string;
     nextDay: string;
     previousWeek: string;
+    previousMonth: string;
     nextWeek: string;
+    nextMonth: string;
     calendar: string;
     viewMode: string;
     dayNavigation: string;
@@ -56,6 +59,7 @@ export interface CalendarLabels {
     nEvents: (n: number) => string;
     /** e.g. "3 completed" */
     nCompleted: (n: number) => string;
+    showLess: string;
     /** e.g. "day 2 of 4" */
     dayNOfTotal: (current: number, total: number) => string;
     /** e.g. "75% complete" */

package/dist/core/locale.js

@@ -15,6 +15,7 @@ export const defaultLabels = {
     tomorrow: 'Tomorrow',
     day: 'Day',
     week: 'Week',
+    month: 'Month',
     planner: 'Planner',
     agenda: 'Agenda',
     now: 'now',
@@ -32,7 +33,9 @@ export const defaultLabels = {
     previousDay: 'Previous day',
     nextDay: 'Next day',
     previousWeek: 'Previous week',
+    previousMonth: 'Previous month',
     nextWeek: 'Next week',
+    nextMonth: 'Next month',
     calendar: 'Calendar',
     viewMode: 'View mode',
     dayNavigation: 'Day navigation',
@@ -51,6 +54,7 @@ export const defaultLabels = {
     nMore: (n) => `+${n} more`,
     nEvents: (n) => `${n} event${n === 1 ? '' : 's'}`,
     nCompleted: (n) => `${n} completed`,
+    showLess: 'Show less',
     dayNOfTotal: (current, total) => `day ${current} of ${total}`,
     percentComplete: (pct) => `${pct}% complete`,
 };

package/dist/core/timezone.d.ts

@@ -20,3 +20,15 @@ export declare function nowInZone(timezone: string): Date;
  * Returns a locale-aware string.
  */
 export declare function formatInTimeZone(date: Date | number, timezone: string, options?: Intl.DateTimeFormatOptions, locale?: string): string;
+/**
+ * Wrap a CalendarAdapter so everything it emits is expressed as wall-clock
+ * Dates in `timezone`, and everything written through it is converted back to
+ * real instants. This is how the Calendar's `timezone` prop works: views keep
+ * doing plain local-time math on an already-shifted plane.
+ *
+ * Known limit shared by every wall-clock calendar UI: during a DST fall-back
+ * the repeated hour is ambiguous on the wall clock, so writes made inside it
+ * resolve to one of the two instants (date-fns-tz picks the offset).
+ */
+import type { CalendarAdapter } from '../adapters/types.js';
+export declare function wrapAdapterWithTimezone(adapter: CalendarAdapter, timezone: string): CalendarAdapter;

package/dist/core/timezone.js

@@ -51,3 +51,34 @@ export function formatInTimeZone(date, timezone, options = {}, locale) {
         timeZone: timezone,
     }).format(d);
 }
+export function wrapAdapterWithTimezone(adapter, timezone) {
+    const zoneEvent = (ev) => ({
+        ...ev,
+        start: toZonedTime(ev.start, timezone),
+        end: toZonedTime(ev.end, timezone),
+    });
+    const unzonePartial = (obj) => ({
+        ...obj,
+        ...(obj.start instanceof Date ? { start: fromZonedTime(obj.start, timezone) } : {}),
+        ...(obj.end instanceof Date ? { end: fromZonedTime(obj.end, timezone) } : {}),
+    });
+    const wrapped = {
+        async fetchEvents(range) {
+            const events = await adapter.fetchEvents({
+                start: fromZonedTime(range.start, timezone),
+                end: fromZonedTime(range.end, timezone),
+            });
+            return events.map(zoneEvent);
+        },
+    };
+    if (adapter.createEvent) {
+        wrapped.createEvent = async (event) => zoneEvent(await adapter.createEvent(unzonePartial(event)));
+    }
+    if (adapter.updateEvent) {
+        wrapped.updateEvent = async (id, patch) => zoneEvent(await adapter.updateEvent(id, unzonePartial(patch)));
+    }
+    if (adapter.deleteEvent) {
+        wrapped.deleteEvent = (id) => adapter.deleteEvent(id);
+    }
+    return wrapped;
+}

package/dist/engine/view-state.svelte.d.ts

@@ -4,13 +4,13 @@ export type { DateRange };
  * Built-in view IDs. Custom view IDs are also supported — CalendarViewId
  * is typed as `string` so consumers can register any ID.
  */
-export type BuiltInViewId = 'day-planner' | 'day-agenda' | 'week-planner' | 'week-agenda';
+export type BuiltInViewId = 'day-planner' | 'day-agenda' | 'week-planner' | 'week-agenda' | 'month-grid';
 /**
  * Any view identifier. Use built-in strings like 'day-planner' or your own
  * custom IDs like 'day-kanban', 'week-resource', etc.
  */
 export type CalendarViewId = string;
-export type ViewMode = 'day' | 'week';
+export type ViewMode = 'day' | 'week' | 'month';
 export interface ViewStateOptions {
     view?: CalendarViewId;
     mondayStart?: boolean;

package/dist/engine/view-state.svelte.js

@@ -15,6 +15,8 @@ import { startOfWeek as calcStartOfWeek, addDaysMs, DAY_MS } from '../core/time.
 function inferMode(view) {
     if (view.startsWith('day'))
         return 'day';
+    if (view.startsWith('month'))
+        return 'month';
     return 'week';
 }
 function computeRange(focus, mode, mondayStart, dayCount = 7) {
@@ -24,6 +26,15 @@ function computeRange(focus, mode, mondayStart, dayCount = 7) {
         const end = new Date(start.getTime() + DAY_MS);
         return { start, end };
     }
+    if (mode === 'month') {
+        // Week-aligned grid covering the focus month: 4–6 rows depending on
+        // where the month's edges fall.
+        const first = new Date(focus.getFullYear(), focus.getMonth(), 1);
+        const last = new Date(focus.getFullYear(), focus.getMonth() + 1, 0);
+        const gridStart = calcStartOfWeek(first.getTime(), mondayStart);
+        const gridEnd = addDaysMs(calcStartOfWeek(last.getTime(), mondayStart), 7);
+        return { start: new Date(gridStart), end: new Date(gridEnd) };
+    }
     // week / custom period
     if (dayCount === 7) {
         const ws = calcStartOfWeek(focus.getTime(), mondayStart);
@@ -84,10 +95,19 @@ export function createViewState(options = {}) {
             dayCount = n;
         },
         next() {
+            if (mode === 'month') {
+                // Anchor to the 1st so a Jan 31 focus can't skip February.
+                focusDate = new Date(focusDate.getFullYear(), focusDate.getMonth() + 1, 1);
+                return;
+            }
             const days = mode === 'day' ? 1 : dayCount;
             focusDate = new Date(addDaysMs(focusDate.getTime(), days));
         },
         prev() {
+            if (mode === 'month') {
+                focusDate = new Date(focusDate.getFullYear(), focusDate.getMonth() - 1, 1);
+                return;
+            }
             const days = mode === 'day' ? -1 : -dayCount;
             focusDate = new Date(addDaysMs(focusDate.getTime(), days));
         },

package/dist/headless/create-calendar.svelte.js

@@ -42,15 +42,18 @@
 import { untrack } from 'svelte';
 import { createEventStore } from '../engine/event-store.svelte.js';
 import { createViewState } from '../engine/view-state.svelte.js';
+import { toZonedTime, fromZonedTime, wrapAdapterWithTimezone } from '../core/timezone.js';
 import { createSelection } from '../engine/selection.svelte.js';
 import { createDragState } from '../engine/drag.svelte.js';
 import { createClock } from '../core/clock.svelte.js';
 import { sod, DAY_MS, HOUR_MS, startOfWeek as sowFn, isAllDay, isMultiDay, segmentForDay, } from '../core/time.js';
 import { monthLong, weekdayLong, weekdayShort } from '../core/locale.js';
 export function createCalendar(options) {
-    const { adapter, mondayStart: initialMondayStart = true, initialDate, locale, visibleHours, snapInterval = 15, equalDays = false, hideDays, blockedSlots, disabledDates, days: initialDayCount = 7, readOnly = false, minDuration, maxDuration, oneventclick, oneventcreate, oneventmove, } = options;
+    const { adapter, mondayStart: initialMondayStart = true, initialDate: rawInitialDate, locale, visibleHours, snapInterval = 15, equalDays = false, hideDays, blockedSlots, disabledDates, days: initialDayCount = 7, readOnly = false, minDuration, maxDuration, oneventclick, oneventcreate, oneventmove, } = options;
     // ── Create engine ────────────────────────────────────
-    const store = createEventStore(adapter);
+    const timezone = options.timezone;
+    const initialDate = rawInitialDate && timezone ? toZonedTime(rawInitialDate, timezone) : rawInitialDate;
+    const store = createEventStore(timezone ? wrapAdapterWithTimezone(adapter, timezone) : adapter);
     const viewState = createViewState({
         view: options.view ?? 'week-planner',
         mondayStart: initialMondayStart,
@@ -60,7 +63,8 @@ export function createCalendar(options) {
     });
     const selection = createSelection();
     const drag = createDragState();
-    const clock = createClock();
+    const clock = createClock(timezone);
+    const unzoneDate = (d) => (timezone ? fromZonedTime(d, timezone) : d);
     // ── Computed ──────────────────────────────────────────
     const disabledSet = $derived(new Set(disabledDates?.map((d) => sod(d.getTime())) ?? []));
     const startHour = visibleHours?.[0] ?? 0;
@@ -182,7 +186,7 @@ export function createCalendar(options) {
         return {
             dateLabel,
             mode,
-            modes: ['day', 'week'],
+            modes: ['day', 'week', 'month'],
             switchMode: (m) => {
                 const currentView = viewState.view;
                 const currentLabel = currentView.replace(/^(day|week)-/, '');
@@ -220,6 +224,15 @@ export function createCalendar(options) {
         let { start, end } = payload;
         // Enforce min/max duration
         if (mode === 'create' || mode === 'resize-start' || mode === 'resize-end') {
+            // Defensive floor: never accept a zero/negative duration, even when
+            // minDuration is unset (views clamp, but the engine must hold alone).
+            if (end.getTime() <= start.getTime()) {
+                const floorMs = Math.max(1, snapInterval) * 60_000;
+                if (mode === 'resize-start')
+                    start = new Date(end.getTime() - floorMs);
+                else
+                    end = new Date(start.getTime() + floorMs);
+            }
             const durationMs = end.getTime() - start.getTime();
             const durationMin = durationMs / 60_000;
             if (minDuration && durationMin < minDuration) {
@@ -272,18 +285,27 @@ export function createCalendar(options) {
                 await store.move(payload.eventId, start, end);
                 const ev = store.byId(payload.eventId);
                 if (ev)
-                    oneventmove?.(ev, start, end);
+                    oneventmove?.(ev, unzoneDate(start), unzoneDate(end));
             }
             catch (e) {
                 const msg = e instanceof Error ? e.message : '';
-                if (!msg.includes('read-only') && !msg.includes('not found')) {
+                // Read-only adapter: the host still gets the callback — it owns
+                // persistence and refetches.
+                if (msg.includes('read-only')) {
+                    const ev = store.byId(payload.eventId);
+                    if (ev)
+                        oneventmove?.(ev, unzoneDate(start), unzoneDate(end));
+                }
+                else if (!msg.includes('not found')) {
                     console.warn('[calendar] drag commit failed:', e);
                 }
                 return null;
             }
         }
         else if (mode === 'create') {
-            oneventcreate?.({ start, end });
+            oneventcreate?.(timezone
+                ? { start: fromZonedTime(start, timezone), end: fromZonedTime(end, timezone) }
+                : { start, end });
         }
         return result;
     }

package/dist/headless/types.d.ts

@@ -7,7 +7,7 @@
 import type { CalendarAdapter } from '../adapters/types.js';
 import type { TimelineEvent, BlockedSlot } from '../core/types.js';
 import type { DaySegment } from '../core/time.js';
-import type { CalendarViewId } from '../engine/view-state.svelte.js';
+import type { CalendarViewId, ViewMode } from '../engine/view-state.svelte.js';
 import type { EventStore } from '../engine/event-store.svelte.js';
 import type { ViewState } from '../engine/view-state.svelte.js';
 import type { Selection } from '../engine/selection.svelte.js';
@@ -22,6 +22,8 @@ export interface HeadlessCalendarOptions {
     mondayStart?: boolean;
     /** Initial date to focus on (default: today) */
     initialDate?: Date;
+    /** Render in an IANA timezone; events, "now" and day boundaries shift. */
+    timezone?: string;
     /** BCP 47 locale tag (e.g. 'en-US', 'pl-PL') */
     locale?: string;
     /** Visible hour range [startHour, endHour). Default: [0, 24] */
@@ -96,11 +98,11 @@ export interface HeaderContext {
     /** Formatted date label for current view */
     dateLabel: string;
     /** Current mode */
-    mode: 'day' | 'week';
+    mode: ViewMode;
     /** Available modes */
-    modes: ('day' | 'week')[];
+    modes: ViewMode[];
     /** Switch to a different mode */
-    switchMode: (mode: 'day' | 'week') => void;
+    switchMode: (mode: ViewMode) => void;
     /** Go to previous period */
     prev: () => void;
     /** Go to next period */
@@ -118,7 +120,7 @@ export interface NavigationContext {
     goToday: () => void;
     isViewOnToday: boolean;
     focusDate: Date;
-    mode: 'day' | 'week';
+    mode: ViewMode;
 }
 export interface HeadlessCalendar {
     /** All loaded events for the current range */
@@ -128,7 +130,7 @@ export interface HeadlessCalendar {
     /** The currently focused date */
     readonly focusDate: Date;
     /** Current mode: 'day' or 'week' */
-    readonly mode: 'day' | 'week';
+    readonly mode: ViewMode;
     /** Current view ID */
     readonly view: CalendarViewId;
     /** Visible date range */

package/dist/index.d.ts

@@ -1,5 +1,7 @@
 export { NowIndicator, EventBlock, TimeGutter, DayHeader, EmptySlot, } from './primitives/index.js';
 export { Calendar } from './calendar/index.js';
+export { Planner, Agenda, Mobile } from './views/index.js';
+export { default as MonthGrid } from './views/month/MonthGrid.svelte';
 export type { CalendarView } from './calendar/index.js';
 export { createEventStore, createViewState, createSelection, createDragState, } from './engine/index.js';
 export type { EventStore, ViewState, ViewStateOptions, CalendarViewId, BuiltInViewId, ViewMode, Selection, DragState, DragMode, DragPayload, } from './engine/index.js';
@@ -9,6 +11,7 @@ export { createClock, startOfWeek, fmtH, fmtTime, fmtDuration, weekdayShort, wee
 export type { Clock, TimelineEvent, BlockedSlot, DaySegment, CalendarLabels, EventStatus, TextMeasure, TextMeasureOptions, ContentFit, } from './core/index.js';
 export { auto, neutral, midnight, presets } from './theme/index.js';
 export { probeHostTheme, observeHostTheme } from './theme/index.js';
+export { wrapAdapterWithTimezone } from './core/timezone.js';
 export type { PresetName, AutoThemeOptions } from './theme/index.js';
 export { createCalendar, createAgenda } from './headless/index.js';
 export type { HeadlessCalendarOptions, HeadlessCalendar, HeadlessDay, HeadlessWeek, TodayQueue, HeaderContext, NavigationContext, AgendaOptions, HeadlessAgenda, } from './headless/index.js';

package/dist/index.js

@@ -2,6 +2,9 @@
 export { NowIndicator, EventBlock, TimeGutter, DayHeader, EmptySlot, } from './primitives/index.js';
 // ─── Calendar shell ─────────────────────────────────────
 export { Calendar } from './calendar/index.js';
+// Raw view components — compose your own shell around the engine if needed
+export { Planner, Agenda, Mobile } from './views/index.js';
+export { default as MonthGrid } from './views/month/MonthGrid.svelte';
 // ─── Engine (reactive state) ────────────────────────────
 export { createEventStore, createViewState, createSelection, createDragState, } from './engine/index.js';
 // ─── Adapters ───────────────────────────────────────────
@@ -11,5 +14,6 @@ export { createClock, startOfWeek, fmtH, fmtTime, fmtDuration, weekdayShort, wee
 // ─── Themes ─────────────────────────────────────────────
 export { auto, neutral, midnight, presets } from './theme/index.js';
 export { probeHostTheme, observeHostTheme } from './theme/index.js';
+export { wrapAdapterWithTimezone } from './core/timezone.js';
 // ─── Headless API ───────────────────────────────────────
 export { createCalendar, createAgenda } from './headless/index.js';

package/dist/primitives/DayHeader.svelte

@@ -5,31 +5,15 @@
     - Relative labels ("Today", "Tomorrow") for day views via fmtDay
     - Short/long weekday + date number for week views
 -->
-<script lang="ts">
-	import { weekdayShort, weekdayLong, monthShort, fmtDay } from '../core/locale.js';
-
-	interface Props {
-		/** Timestamp (ms) of the day to label */
-		dayMs: number;
-		/** Timestamp (ms) of today (for relative labels) */
-		todayMs?: number;
-		/** Display format */
-		format?: 'relative' | 'short' | 'long';
-		/** Whether this day is "today" */
-		isToday?: boolean;
-		/** Whether this day is in the past */
-		isPast?: boolean;
-	}
-
-	let {
-		dayMs,
-		todayMs = Date.now(),
-		format = 'short',
-		isToday = false,
-		isPast = false,
-	}: Props = $props();
-
-	const dayNum = $derived(new Date(dayMs).getDate());
+<script lang="ts">import { weekdayShort, weekdayLong, monthShort, fmtDay } from "../core/locale.js";
+let {
+  dayMs,
+  todayMs = Date.now(),
+  format = "short",
+  isToday = false,
+  isPast = false
+} = $props();
+const dayNum = $derived(new Date(dayMs).getDate());
 </script>
 
 <div

package/dist/primitives/EmptySlot.svelte

@@ -5,37 +5,21 @@
   the time range when clicked. View components place these in gaps
   between events.
 -->
-<script lang="ts">
-	import { fmtTime, fmtDuration, getLabels } from '../core/locale.js';
-
-	const L = $derived(getLabels());
-
-	interface Props {
-		/** Start time of the empty slot */
-		start: Date;
-		/** End time of the empty slot */
-		end: Date;
-		/** Click handler — create event in this range */
-		onclick?: (range: { start: Date; end: Date }) => void;
-		/** Orientation for cursor hint */
-		orientation?: 'horizontal' | 'vertical';
-	}
-
-	let {
-		start,
-		end,
-		onclick,
-		orientation = 'vertical',
-	}: Props = $props();
-
-	const dur = $derived(`${fmtDuration(start, end)} ${L.free}`);
-
-	function handleKeydown(e: KeyboardEvent) {
-		if (e.key === 'Enter' || e.key === ' ') {
-			e.preventDefault();
-			onclick?.({ start, end });
-		}
-	}
+<script lang="ts">import { fmtTime, fmtDuration, getLabels } from "../core/locale.js";
+const L = $derived(getLabels());
+let {
+  start,
+  end,
+  onclick,
+  orientation = "vertical"
+} = $props();
+const dur = $derived(`${fmtDuration(start, end)} ${L.free}`);
+function handleKeydown(e) {
+  if (e.key === "Enter" || e.key === " ") {
+    e.preventDefault();
+    onclick?.({ start, end });
+  }
+}
 </script>
 
 <div

package/dist/primitives/EventBlock.svelte

@@ -8,67 +8,39 @@
 
   Emits: onclick, ondragstart, onresize (for future interaction wiring)
 -->
-<script lang="ts">
-	import type { TimelineEvent } from '../core/types.js';
-	import { fmtTime, fmtDuration, getLabels } from '../core/locale.js';
-	import type { Snippet } from 'svelte';
-
-	const L = $derived(getLabels());
-
-	interface Props {
-		event: TimelineEvent;
-		/** Display variant */
-		variant?: 'chip' | 'card' | 'row';
-		/** Is this event currently in-progress? */
-		active?: boolean;
-		/** Is this event in the past? */
-		past?: boolean;
-		/** Show the time range */
-		showTime?: boolean;
-		/** Show the duration */
-		showDuration?: boolean;
-		/** Editable (shows resize handles in future) */
-		editable?: boolean;
-		/** Click handler */
-		onclick?: (event: TimelineEvent) => void;
-		/** Custom content slot */
-		children?: Snippet<[TimelineEvent]>;
-	}
-
-	let {
-		event,
-		variant = 'chip',
-		active = false,
-		past = false,
-		showTime = false,
-		showDuration = false,
-		editable = false,
-		onclick,
-		children,
-	}: Props = $props();
-
-	const accentColor = $derived(event.color || 'var(--dt-accent, #2563eb)');
-	const isCancelled = $derived(event.status === 'cancelled');
-	const isTentative = $derived(event.status === 'tentative');
-	const isFull = $derived(event.status === 'full');
-	const isLimited = $derived(event.status === 'limited');
-
-	const ariaLabel = $derived.by(() => {
-		const t = event.title;
-		const time = `${fmtTime(event.start)} to ${fmtTime(event.end)}`;
-		const dur = fmtDuration(event.start, event.end);
-		const loc = event.location ? `, ${event.location}` : '';
-		const statusStr = isCancelled ? ', cancelled' : isTentative ? ', tentative' : isFull ? ', full' : isLimited ? ', limited' : '';
-		const activeStr = active ? `, ${L.happeningNow}` : past ? `, ${L.past}` : '';
-		return `${t}${loc}, ${time}, ${dur}${statusStr}${activeStr}`;
-	});
-
-	function handleKeydown(e: KeyboardEvent) {
-		if (e.key === 'Enter' || e.key === ' ') {
-			e.preventDefault();
-			onclick?.(event);
-		}
-	}
+<script lang="ts">import { fmtTime, fmtDuration, getLabels } from "../core/locale.js";
+const L = $derived(getLabels());
+let {
+  event,
+  variant = "chip",
+  active = false,
+  past = false,
+  showTime = false,
+  showDuration = false,
+  editable = false,
+  onclick,
+  children
+} = $props();
+const accentColor = $derived(event.color || "var(--dt-accent, #2563eb)");
+const isCancelled = $derived(event.status === "cancelled");
+const isTentative = $derived(event.status === "tentative");
+const isFull = $derived(event.status === "full");
+const isLimited = $derived(event.status === "limited");
+const ariaLabel = $derived.by(() => {
+  const t = event.title;
+  const time = `${fmtTime(event.start)} to ${fmtTime(event.end)}`;
+  const dur = fmtDuration(event.start, event.end);
+  const loc = event.location ? `, ${event.location}` : "";
+  const statusStr = isCancelled ? ", cancelled" : isTentative ? ", tentative" : isFull ? ", full" : isLimited ? ", limited" : "";
+  const activeStr = active ? `, ${L.happeningNow}` : past ? `, ${L.past}` : "";
+  return `${t}${loc}, ${time}, ${dur}${statusStr}${activeStr}`;
+});
+function handleKeydown(e) {
+  if (e.key === "Enter" || e.key === " ") {
+    e.preventDefault();
+    onclick?.(event);
+  }
+}
 </script>
 
 {#snippet content()}