@nomideusz/svelte-calendar 0.7.5 → 0.8.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,10 @@ 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;
 }
 declare const Calendar: Component<Props, {}, "">;
 type Calendar = ReturnType<typeof Calendar>;

package/dist/core/clock.svelte.js

@@ -37,11 +37,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/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

@@ -182,7 +182,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 +220,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) {
@@ -276,7 +285,14 @@ export function createCalendar(options) {
             }
             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, start, end);
+                }
+                else if (!msg.includes('not found')) {
                     console.warn('[calendar] drag commit failed:', e);
                 }
                 return null;

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';
@@ -96,11 +96,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 +118,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 +128,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';

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 ───────────────────────────────────────────

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()}

package/dist/primitives/NowIndicator.svelte

@@ -11,48 +11,22 @@
     <NowIndicator mode="dot" position={nowPx} time={clock.hm} />
     <NowIndicator mode="badge" />
 -->
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import { getLabels } from '../core/locale.js';
-
-	const L = $derived(getLabels());
-
-	interface Props {
-		/** Visual mode */
-		mode?: 'line' | 'dot' | 'badge';
-		/** Pixel offset for positioning (line/dot modes) */
-		position?: number;
-		/** Orientation of the line/dot */
-		orientation?: 'vertical' | 'horizontal';
-		/** Formatted time string (e.g. "14:30") */
-		time?: string;
-		/** Formatted seconds string (e.g. ":05") */
-		seconds?: string;
-		/** Show the time label */
-		showLabel?: boolean;
-		/** Accent color override */
-		color?: string;
-		/** Custom content slot */
-		children?: Snippet;
-	}
-
-	let {
-		mode = 'line',
-		position = 0,
-		orientation = 'vertical',
-		time = '',
-		seconds = '',
-		showLabel = true,
-		color,
-		children,
-	}: Props = $props();
-
-	const posStyle = $derived(
-		orientation === 'vertical'
-			? `left: ${position}px`
-			: `top: ${position}px`,
-	);
-	const colorVar = $derived(color ? `--ni-color: ${color}` : '');
+<script lang="ts">import { getLabels } from "../core/locale.js";
+const L = $derived(getLabels());
+let {
+  mode = "line",
+  position = 0,
+  orientation = "vertical",
+  time = "",
+  seconds = "",
+  showLabel = true,
+  color,
+  children
+} = $props();
+const posStyle = $derived(
+  orientation === "vertical" ? `left: ${position}px` : `top: ${position}px`
+);
+const colorVar = $derived(color ? `--ni-color: ${color}` : "");
 </script>
 
 {#if mode === 'badge'}

package/dist/primitives/TimeGutter.svelte

@@ -5,29 +5,15 @@
     "horizontal" — ticks along a horizontal track (for day timeline-style layouts)
     "vertical"   — label column along a vertical grid (for WeekTimeline style)
 -->
-<script lang="ts">
-	import { HOURS } from '../core/time.js';
-	import { fmtH } from '../core/locale.js';
-
-	interface Props {
-		orientation?: 'horizontal' | 'vertical';
-		/** Pixel size per hour (width for horizontal, height for vertical) */
-		hourSize?: number;
-		/** Show half-hour ticks (horizontal only) */
-		halfHour?: boolean;
-		/** Hours to display (default 0-23) */
-		hours?: readonly number[];
-		/** Custom hour formatter */
-		formatHour?: (h: number) => string;
-	}
-
-	let {
-		orientation = 'horizontal',
-		hourSize = 120,
-		halfHour = true,
-		hours = HOURS,
-		formatHour = fmtH,
-	}: Props = $props();
+<script lang="ts">import { HOURS } from "../core/time.js";
+import { fmtH } from "../core/locale.js";
+let {
+  orientation = "horizontal",
+  hourSize = 120,
+  halfHour = true,
+  hours = HOURS,
+  formatHour = fmtH
+} = $props();
 </script>
 
 {#if orientation === 'horizontal'}

package/dist/views/agenda/Agenda.svelte

@@ -1,13 +1,6 @@
-<script lang="ts">
-	import AgendaDay from './AgendaDay.svelte';
-	import AgendaWeek from './AgendaWeek.svelte';
-
-	interface Props {
-		mode?: 'day' | 'week';
-		[key: string]: unknown;
-	}
-
-	let { mode = 'day', ...rest }: Props = $props();
+<script lang="ts">import AgendaDay from "./AgendaDay.svelte";
+import AgendaWeek from "./AgendaWeek.svelte";
+let { mode = "day", ...rest } = $props();
 </script>
 
 {#if mode === 'day'}