@nomideusz/svelte-calendar 0.2.3 → 0.3.1

package/dist/views/index.d.ts

@@ -3,3 +3,4 @@ export { WeekGrid, WeekHeatmap } from './week/index.js';
 export { Agenda } from './agenda/index.js';
 export { Settings } from './settings/index.js';
 export type { SettingsField } from './settings/index.js';
+export { WeekSchedule } from './schedule/index.js';

package/dist/views/index.js

@@ -3,3 +3,4 @@ export { DayGrid, DayTimeline } from './day/index.js';
 export { WeekGrid, WeekHeatmap } from './week/index.js';
 export { Agenda } from './agenda/index.js';
 export { Settings } from './settings/index.js';
+export { WeekSchedule } from './schedule/index.js';

package/dist/views/schedule/WeekSchedule.svelte

@@ -0,0 +1,133 @@
+<!--
+  WeekSchedule — zero-config weekly schedule display.
+
+  A convenience wrapper that pre-wires Calendar + WeekGrid + Agenda
+  so consumers can render a read-only weekly schedule with a single import.
+
+  Usage:
+    <WeekSchedule
+      events={events}
+      theme={neutral}
+      locale="pl-PL"
+      height={560}
+      readOnly
+    />
+
+  Or with a recurring adapter:
+    <WeekSchedule
+      schedule={weeklyClasses}
+      theme={neutral}
+      readOnly
+    />
+-->
+<script lang="ts">
+	import type { TimelineEvent } from '../../core/types.js';
+	import type { RecurringEvent } from '../../adapters/recurring.js';
+	import type { MemoryAdapterOptions } from '../../adapters/memory.js';
+	import { createMemoryAdapter } from '../../adapters/memory.js';
+	import { createRecurringAdapter, type RecurringAdapterOptions } from '../../adapters/recurring.js';
+	import Calendar from '../../calendar/Calendar.svelte';
+	import type { CalendarView } from '../../calendar/Calendar.svelte';
+	import { WeekGrid } from '../week/index.js';
+	import { Agenda } from '../agenda/index.js';
+
+	interface Props {
+		/** Concrete events (mutually exclusive with `schedule`) */
+		events?: TimelineEvent[];
+		/** Recurring weekly schedule (mutually exclusive with `events`) */
+		schedule?: RecurringEvent[];
+		/** CSS theme string */
+		theme?: string;
+		/** BCP 47 locale */
+		locale?: string;
+		/** Total height */
+		height?: number;
+		/** Start week on Monday */
+		mondayStart?: boolean;
+		/** Read-only mode (default: true for schedule display) */
+		readOnly?: boolean;
+		/** Visible hour range [startHour, endHour) */
+		visibleHours?: [number, number];
+		/** Show toolbar */
+		showToolbar?: boolean;
+		/** Show agenda view toggle */
+		showAgenda?: boolean;
+		/** Map of category/title to color */
+		colorMap?: Record<string, string>;
+		/** Auto-assign colors */
+		autoColor?: boolean;
+		/** Event click handler */
+		oneventclick?: (event: TimelineEvent) => void;
+		/** Event create handler (only works when readOnly is false) */
+		oneventcreate?: (range: { start: Date; end: Date }) => void;
+	}
+
+	let {
+		events,
+		schedule,
+		theme = '',
+		locale,
+		height = 560,
+		mondayStart = true,
+		readOnly = true,
+		visibleHours,
+		showToolbar = true,
+		showAgenda = true,
+		colorMap,
+		autoColor,
+		oneventclick,
+		oneventcreate,
+	}: Props = $props();
+
+	// Auto-create the adapter from events or schedule
+	const adapter = $derived.by(() => {
+		if (schedule) {
+			return createRecurringAdapter(schedule, {
+				mondayStart,
+				colorMap,
+				autoColor,
+			} satisfies RecurringAdapterOptions);
+		}
+		return createMemoryAdapter(events ?? [], {
+			colorMap,
+			autoColor,
+		} satisfies MemoryAdapterOptions);
+	});
+
+	// Pre-wired views
+	const views = $derived.by((): CalendarView[] => {
+		const v: CalendarView[] = [
+			{
+				id: 'week-grid',
+				label: 'Week',
+				granularity: 'week',
+				component: WeekGrid,
+			},
+		];
+		if (showAgenda) {
+			v.push({
+				id: 'agenda',
+				label: 'Agenda',
+				granularity: 'week',
+				component: Agenda,
+				props: { mode: 'week' },
+			});
+		}
+		return v;
+	});
+</script>
+
+<Calendar
+	{adapter}
+	{views}
+	defaultView="week-grid"
+	{theme}
+	{locale}
+	{height}
+	{mondayStart}
+	{readOnly}
+	{visibleHours}
+	{showToolbar}
+	{oneventclick}
+	oneventcreate={readOnly ? undefined : oneventcreate}
+/>

package/dist/views/schedule/WeekSchedule.svelte.d.ts

@@ -0,0 +1,38 @@
+import type { TimelineEvent } from '../../core/types.js';
+import type { RecurringEvent } from '../../adapters/recurring.js';
+interface Props {
+    /** Concrete events (mutually exclusive with `schedule`) */
+    events?: TimelineEvent[];
+    /** Recurring weekly schedule (mutually exclusive with `events`) */
+    schedule?: RecurringEvent[];
+    /** CSS theme string */
+    theme?: string;
+    /** BCP 47 locale */
+    locale?: string;
+    /** Total height */
+    height?: number;
+    /** Start week on Monday */
+    mondayStart?: boolean;
+    /** Read-only mode (default: true for schedule display) */
+    readOnly?: boolean;
+    /** Visible hour range [startHour, endHour) */
+    visibleHours?: [number, number];
+    /** Show toolbar */
+    showToolbar?: boolean;
+    /** Show agenda view toggle */
+    showAgenda?: boolean;
+    /** Map of category/title to color */
+    colorMap?: Record<string, string>;
+    /** Auto-assign colors */
+    autoColor?: boolean;
+    /** Event click handler */
+    oneventclick?: (event: TimelineEvent) => void;
+    /** Event create handler (only works when readOnly is false) */
+    oneventcreate?: (range: {
+        start: Date;
+        end: Date;
+    }) => void;
+}
+declare const WeekSchedule: import("svelte").Component<Props, {}, "">;
+type WeekSchedule = ReturnType<typeof WeekSchedule>;
+export default WeekSchedule;

package/dist/views/schedule/index.d.ts

@@ -0,0 +1 @@
+export { default as WeekSchedule } from './WeekSchedule.svelte';

package/dist/views/schedule/index.js

@@ -0,0 +1,2 @@
+// ─── Schedule views barrel export ───────────────────────
+export { default as WeekSchedule } from './WeekSchedule.svelte';

package/dist/views/settings/Settings.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { slide } from 'svelte/transition';
 	import type { PresetName } from '../../theme/presets.js';
-	import { presets, stageBg } from '../../theme/presets.js';
+	import { presets } from '../../theme/presets.js';
 
 	/* ─── Field definition types ─────────────────────── */
 	type RangeField = {

package/dist/views/week/WeekGrid.svelte

@@ -30,6 +30,9 @@
 		oneventclick?: (event: TimelineEvent) => void;
 		oneventcreate?: (range: { start: Date; end: Date }) => void;
 		selectedEventId?: string | null;
+		readOnly?: boolean;
+		visibleHours?: [number, number];
+		[key: string]: unknown;
 	}
 
 	let {
@@ -41,6 +44,8 @@
 		oneventclick,
 		oneventcreate,
 		selectedEventId = null,
+		readOnly = false,
+		...rest
 	}: Props = $props();
 
 	// ── Drag support (available when inside Calendar) ──
@@ -162,7 +167,7 @@
 	function handleDayCellClick(ms: number, e: Event) {
 		const target = e.target as HTMLElement;
 		if (target.closest('.wg-ev')) return;
-		if (!oneventcreate) return;
+		if (readOnly || !oneventcreate) return;
 		const start = new Date(ms + 9 * 3_600_000);
 		const end = new Date(ms + 10 * 3_600_000);
 		oneventcreate({ start, end });
@@ -182,7 +187,7 @@
 	}
 
 	function onEventPointerDown(e: PointerEvent, ev: TimelineEvent) {
-		if (e.button !== 0 || !drag) return;
+		if (e.button !== 0 || !drag || readOnly) return;
 		e.stopPropagation();
 		evDragStartX = e.clientX;
 		evDragStarted = false;
@@ -298,8 +303,16 @@
 											onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); e.stopPropagation(); oneventclick?.(ev); } }}
 										>
 											<span class="wg-ev-time">{fmtAmPm(ev.start)}</span>
-											<span class="wg-ev-title">{ev.title}</span>
-										</div>
+											<span class="wg-ev-title">{ev.title}</span>										{#if ev.subtitle}
+											<span class="wg-ev-sub">{ev.subtitle}</span>
+										{/if}
+										{#if ev.tags?.length}
+											<span class="wg-ev-tags">
+												{#each ev.tags as tag}
+													<span class="wg-ev-tag">{tag}</span>
+												{/each}
+											</span>
+										{/if}										</div>
 									{/each}
 									{#if day.events.length > MAX_EVENTS_SHOWN}
 										<div class="wg-ev-more">+{day.events.length - MAX_EVENTS_SHOWN} more</div>
@@ -475,7 +488,8 @@
 	.wg-ev {
 		display: flex;
 		align-items: center;
-		gap: 5px;
+		flex-wrap: wrap;
+		gap: 3px 5px;
 		padding: 3px 6px;
 		border-radius: 4px;
 		background: color-mix(in srgb, var(--ev-color) 12%, transparent);
@@ -511,6 +525,29 @@
 		text-overflow: ellipsis;
 	}
 
+	.wg-ev-sub {
+		font: 400 10px / 1 var(--dt-sans, system-ui, sans-serif);
+		color: var(--dt-text-3, rgba(0, 0, 0, 0.4));
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.wg-ev-tags {
+		display: flex;
+		gap: 3px;
+		flex-shrink: 0;
+	}
+
+	.wg-ev-tag {
+		font: 500 8px / 1 var(--dt-sans, system-ui, sans-serif);
+		color: var(--ev-color, var(--dt-accent));
+		background: color-mix(in srgb, var(--ev-color, var(--dt-accent)) 15%, transparent);
+		padding: 1px 4px;
+		border-radius: 3px;
+		white-space: nowrap;
+	}
+
 	.wg-ev-more {
 		font: 500 10px / 1 var(--dt-sans, system-ui, sans-serif);
 		color: var(--dt-text-3, rgba(0, 0, 0, 0.35));

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

@@ -15,6 +15,9 @@ interface Props {
         end: Date;
     }) => void;
     selectedEventId?: string | null;
+    readOnly?: boolean;
+    visibleHours?: [number, number];
+    [key: string]: unknown;
 }
 declare const WeekGrid: import("svelte").Component<Props, {}, "">;
 type WeekGrid = ReturnType<typeof WeekGrid>;

package/dist/views/week/WeekHeatmap.svelte

@@ -27,7 +27,13 @@
 		focusDate,
 		oneventclick,
 		selectedEventId = null,
-	}: WeekTimelineProps = $props();
+		visibleHours,
+		...rest
+	}: WeekTimelineProps & { visibleHours?: [number, number]; [key: string]: unknown } = $props();
+
+	const startHour = $derived(visibleHours?.[0] ?? 0);
+	const endHour = $derived(visibleHours?.[1] ?? 24);
+	const visibleHourCount = $derived(endHour - startHour);
 
 	const clock = createClock();
 
@@ -66,7 +72,7 @@
 			const isToday = ms === clock.today;
 
 			const cells: HeatCell[] = [];
-			for (let h = 0; h < 24; h++) {
+			for (let h = startHour; h < endHour; h++) {
 				const cellStart = ms + h * 3600000;
 				const cellEnd = cellStart + 3600000;
 				const overlaps = events.filter((ev) => ev.start.getTime() < cellEnd && ev.end.getTime() > cellStart);
@@ -179,9 +185,10 @@
 	<!-- Hour labels row -->
 	<div class="hm-hours-row">
 		<div class="hm-row-label"></div>
-		{#each Array(24) as _, h}
-			{#if h % 3 === 0}
-				<span class="hm-hour-mark" style:left="calc({h} * (100% / 24))">{fmtH(h)}</span>
+		{#each Array(visibleHourCount) as _, idx}
+			{@const h = startHour + idx}
+			{#if (h - startHour) % 3 === 0}
+				<span class="hm-hour-mark" style:left="calc({idx} * (100% / {visibleHourCount}))">{fmtH(h)}</span>
 			{/if}
 		{/each}
 	</div>

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

@@ -1,4 +1,8 @@
 import type { WeekTimelineProps } from '../../core/types.js';
-declare const WeekHeatmap: import("svelte").Component<WeekTimelineProps, {}, "">;
+type $$ComponentProps = WeekTimelineProps & {
+    visibleHours?: [number, number];
+    [key: string]: unknown;
+};
+declare const WeekHeatmap: import("svelte").Component<$$ComponentProps, {}, "">;
 type WeekHeatmap = ReturnType<typeof WeekHeatmap>;
 export default WeekHeatmap;

package/dist/widget/CalendarWidget.svelte

@@ -0,0 +1,138 @@
+<!--
+  CalendarWidget — self-contained calendar for embedding via <day-calendar> custom element.
+
+  Accepts simple HTML attributes and wires up the full Calendar with sensible defaults.
+  Designed for non-Svelte sites (plain HTML, WordPress, Squarespace, etc.).
+
+  Usage as custom element:
+    <day-calendar
+      api="https://myschool.com/api/events"
+      theme="neutral"
+      view="week-grid"
+      height="600"
+      locale="en-US"
+    ></day-calendar>
+-->
+<svelte:options customElement="day-calendar" />
+
+<script lang="ts">
+	import Calendar from '../calendar/Calendar.svelte';
+	import type { CalendarView } from '../calendar/Calendar.svelte';
+	import { DayGrid } from '../views/day/index.js';
+	import { WeekGrid } from '../views/week/index.js';
+	import { Agenda } from '../views/agenda/index.js';
+	import { WeekHeatmap } from '../views/week/index.js';
+	import { DayTimeline } from '../views/day/index.js';
+	import { createRestAdapter } from '../adapters/rest.js';
+	import { createMemoryAdapter } from '../adapters/memory.js';
+	import { presets } from '../theme/presets.js';
+	import type { PresetName } from '../theme/presets.js';
+	import type { TimelineEvent } from '../core/types.js';
+
+	interface Props {
+		/** REST API base URL — if provided, fetches events from this endpoint */
+		api?: string;
+		/** JSON string of events for static/inline data (alternative to api) */
+		events?: string;
+		/** Theme preset name: midnight, parchment, indigo, neutral, bare */
+		theme?: string;
+		/** Default view ID */
+		view?: string;
+		/** Calendar height in pixels */
+		height?: string;
+		/** BCP 47 locale tag (e.g. 'en-US', 'pl-PL') */
+		locale?: string;
+		/** Text direction: ltr, rtl, auto */
+		dir?: string;
+		/** Start week on Monday (default: true) */
+		mondaystart?: string;
+		/** Custom HTTP headers as JSON string for REST adapter */
+		headers?: string;
+	}
+
+	let {
+		api,
+		events,
+		theme = 'neutral',
+		view = 'week-grid',
+		height = '600',
+		locale,
+		dir,
+		mondaystart = 'true',
+		headers,
+	}: Props = $props();
+
+	// ── Parse attributes ──
+	const heightPx = $derived(parseInt(height, 10) || 600);
+	const isMondayStart = $derived(mondaystart !== 'false');
+	const themeStyle = $derived(
+		(presets as Record<string, string>)[theme] ?? presets.neutral
+	);
+	const dirValue = $derived(
+		(dir === 'rtl' || dir === 'ltr' || dir === 'auto') ? dir as 'ltr' | 'rtl' | 'auto' : undefined
+	);
+
+	// ── Parse static events from JSON attribute ──
+	function parseEvents(json?: string): TimelineEvent[] {
+		if (!json) return [];
+		try {
+			const raw = JSON.parse(json) as Array<Record<string, unknown>>;
+			return raw.map((e) => ({
+				id: String(e.id ?? crypto.randomUUID()),
+				title: String(e.title ?? 'Untitled'),
+				start: new Date(e.start as string),
+				end: new Date(e.end as string),
+				color: e.color ? String(e.color) : undefined,
+			}));
+		} catch {
+			console.warn('[day-calendar] Failed to parse events JSON:', json);
+			return [];
+		}
+	}
+
+	// ── Create adapter ──
+	const adapter = $derived.by(() => {
+		if (api) {
+			const parsedHeaders = headers ? JSON.parse(headers) as Record<string, string> : undefined;
+			return createRestAdapter({
+				baseUrl: api,
+				headers: parsedHeaders,
+				mapEvents: (data: unknown) => {
+					const arr = Array.isArray(data) ? data : (data as Record<string, unknown>).events as unknown[] ?? [];
+					return arr.map((e: unknown) => {
+						const ev = e as Record<string, unknown>;
+						return {
+							id: String(ev.id ?? ''),
+							title: String(ev.title ?? 'Untitled'),
+							start: new Date(ev.start as string),
+							end: new Date(ev.end as string),
+							color: ev.color ? String(ev.color) : undefined,
+						};
+					});
+				},
+			});
+		}
+		return createMemoryAdapter(parseEvents(events));
+	});
+
+	// ── Default views ──
+	const defaultViews: CalendarView[] = [
+		{ id: 'day-grid',     label: 'Grid',     granularity: 'day',  component: DayGrid },
+		{ id: 'week-grid',    label: 'Grid',     granularity: 'week', component: WeekGrid },
+		{ id: 'day-timeline', label: 'Timeline', granularity: 'day',  component: DayTimeline },
+		{ id: 'day-agenda',   label: 'Agenda',   granularity: 'day',  component: Agenda, props: { mode: 'day' } },
+		{ id: 'week-agenda',  label: 'Agenda',   granularity: 'week', component: Agenda, props: { mode: 'week' } },
+		{ id: 'week-heatmap', label: 'Heatmap',  granularity: 'week', component: WeekHeatmap },
+	];
+</script>
+
+<Calendar
+	{adapter}
+	views={defaultViews}
+	defaultView={view}
+	theme={themeStyle}
+	height={heightPx}
+	mondayStart={isMondayStart}
+	dir={dirValue}
+	{locale}
+/>

package/dist/widget/CalendarWidget.svelte.d.ts

@@ -0,0 +1,23 @@
+interface Props {
+    /** REST API base URL — if provided, fetches events from this endpoint */
+    api?: string;
+    /** JSON string of events for static/inline data (alternative to api) */
+    events?: string;
+    /** Theme preset name: midnight, parchment, indigo, neutral, bare */
+    theme?: string;
+    /** Default view ID */
+    view?: string;
+    /** Calendar height in pixels */
+    height?: string;
+    /** BCP 47 locale tag (e.g. 'en-US', 'pl-PL') */
+    locale?: string;
+    /** Text direction: ltr, rtl, auto */
+    dir?: string;
+    /** Start week on Monday (default: true) */
+    mondaystart?: string;
+    /** Custom HTTP headers as JSON string for REST adapter */
+    headers?: string;
+}
+declare const CalendarWidget: import("svelte").Component<Props, {}, "">;
+type CalendarWidget = ReturnType<typeof CalendarWidget>;
+export default CalendarWidget;

package/dist/widget/index.d.ts

@@ -0,0 +1 @@
+export { default as CalendarWidget } from './CalendarWidget.svelte';

package/dist/widget/index.js

@@ -0,0 +1 @@
+export { default as CalendarWidget } from './CalendarWidget.svelte';

package/dist/widget/widget.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Widget entry point — registers <day-calendar> as a custom element.
+ *
+ * This file is the entry point for the standalone widget bundle (widget.js).
+ * Import it via a <script> tag on any HTML page.
+ */
+import './CalendarWidget.svelte';

package/dist/widget/widget.js

@@ -0,0 +1,9 @@
+/**
+ * Widget entry point — registers <day-calendar> as a custom element.
+ *
+ * This file is the entry point for the standalone widget bundle (widget.js).
+ * Import it via a <script> tag on any HTML page.
+ */
+import './CalendarWidget.svelte';
+// The Svelte custom element is auto-registered via <svelte:options customElement="day-calendar" />
+// Nothing else needed — the component self-registers when this module is loaded.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nomideusz/svelte-calendar",
-	"version": "0.2.3",
+	"version": "0.3.1",
 	"description": "A themeable, pluggable Svelte 5 calendar with Day and Week views — Grid, Timeline, Agenda, Heatmap.",
 	"type": "module",
 	"license": "MIT",
@@ -11,10 +11,12 @@
 			"types": "./dist/index.d.ts",
 			"svelte": "./dist/index.js",
 			"default": "./dist/index.js"
-		}
+		},
+		"./widget": "./widget/widget.js"
 	},
 	"files": [
 		"dist",
+		"widget",
 		"!dist/**/*.test.*",
 		"!dist/**/*.spec.*"
 	],
@@ -22,6 +24,7 @@
 		"dev": "vite dev",
 		"build": "vite build",
 		"package": "svelte-kit sync && svelte-package",
+		"build:widget": "vite build --config vite.config.widget.ts",
 		"prepublishOnly": "npm run package",
 		"preview": "vite preview",
 		"prepare": "svelte-kit sync || echo ''",