@nomideusz/svelte-calendar 0.3.0 → 0.4.0

package/dist/views/settings/Settings.svelte.d.ts

@@ -1,21 +1,37 @@
 import type { PresetName } from '../../theme/presets.js';
-type RangeField = {
+type BaseField = {
     key: string;
     label: string;
+    group?: string;
+};
+type RangeField = BaseField & {
     type: 'range';
     min: number;
     max: number;
     step: number;
+    enabledWhen?: string;
 };
-type ToggleField = {
-    key: string;
-    label: string;
+type ToggleField = BaseField & {
     type: 'toggle';
 };
-export type SettingsField = RangeField | ToggleField;
+type SelectField = BaseField & {
+    type: 'select';
+    options: {
+        value: string;
+        label: string;
+    }[];
+};
+type SegmentField = BaseField & {
+    type: 'segment';
+    options: {
+        value: string;
+        label: string;
+    }[];
+};
+export type SettingsField = RangeField | ToggleField | SelectField | SegmentField;
 interface Props {
     fields: SettingsField[];
-    values: Record<string, number | boolean>;
+    values: Record<string, string | number | boolean>;
     theme: PresetName;
 }
 declare const Settings: import("svelte").Component<Props, {}, "values" | "theme">;

package/dist/views/week/WeekGrid.svelte

@@ -20,6 +20,7 @@
 	interface Props {
 		weekOffset?: number;
 		mondayStart?: boolean;
+		locale?: string;
 		hourHeight?: number;
 		dayWidth?: number;
 		nowPosition?: number;
@@ -37,6 +38,7 @@
 
 	let {
 		mondayStart = true,
+		locale,
 		height = 520,
 		events = [],
 		style = '',
@@ -116,7 +118,7 @@
 			// Month label: show when first day of week is day 1-7
 			const startDate = new Date(weekStart);
 			const showMonth = startDate.getDate() <= 7;
-			const monthLabel = showMonth ? monthLong(weekStart).toUpperCase() : null;
+			const monthLabel = showMonth ? monthLong(weekStart, locale).toUpperCase() : null;
 
 			result.push({ weekStart, isCurrent, monthLabel, days });
 		}
@@ -126,11 +128,10 @@
 
 	// ─── Format helpers ─────────────────────────────────
 	function fmtAmPm(d: Date): string {
-		let h = d.getHours();
-		const m = d.getMinutes();
-		const ampm = h >= 12 ? 'PM' : 'AM';
-		h = h % 12 || 12;
-		return m > 0 ? `${h}:${m.toString().padStart(2, '0')}${ampm}` : `${h}${ampm}`;
+		return d
+			.toLocaleTimeString(locale ?? 'en-US', { hour: 'numeric', minute: '2-digit', hour12: true })
+			.toUpperCase()
+			.replace(' ', '');
 	}
 
 	function fmtNowTime(tick: number): string {
@@ -274,13 +275,13 @@
 								class:wg-cell--weekend={day.isWeekend}
 								role="gridcell"
 								tabindex="0"
-								aria-label="{new Date(day.ms).toLocaleDateString('en-US', { weekday: 'long', month: 'short', day: 'numeric' })}{day.isToday ? ' (today)' : ''}, {day.events.length} events"
+								aria-label="{new Date(day.ms).toLocaleDateString(locale ?? 'en-US', { weekday: 'long', month: 'short', day: 'numeric' })}{day.isToday ? ' (today)' : ''}, {day.events.length} events"
 								onclick={(e) => handleDayCellClick(day.ms, e)}
 								onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleDayCellClick(day.ms, e); } }}
 							>
 								<!-- Day label inside the cell -->
 								<div class="wg-cell-hd" class:wg-cell-hd--today={day.isToday}>
-									<span class="wg-day-wd">{weekdayShort(day.ms)}</span>
+									<span class="wg-day-wd">{weekdayShort(day.ms, locale)}</span>
 									<span class="wg-day-num" class:wg-day-num--today={day.isToday}>
 										{day.dayNum}
 									</span>
@@ -303,8 +304,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>
@@ -480,7 +489,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);
@@ -516,6 +526,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

@@ -2,6 +2,7 @@ import type { TimelineEvent } from '../../core/types.js';
 interface Props {
     weekOffset?: number;
     mondayStart?: boolean;
+    locale?: string;
     hourHeight?: number;
     dayWidth?: number;
     nowPosition?: number;

package/dist/views/week/WeekHeatmap.svelte

@@ -21,6 +21,7 @@
 	let {
 		weekOffset = 0,
 		mondayStart = true,
+		locale,
 		height = 400,
 		events = [],
 		style = '',
@@ -29,7 +30,7 @@
 		selectedEventId = null,
 		visibleHours,
 		...rest
-	}: WeekTimelineProps & { visibleHours?: [number, number]; [key: string]: unknown } = $props();
+	}: WeekTimelineProps & { locale?: string; visibleHours?: [number, number]; [key: string]: unknown } = $props();
 
 	const startHour = $derived(visibleHours?.[0] ?? 0);
 	const endHour = $derived(visibleHours?.[1] ?? 24);
@@ -43,7 +44,7 @@
 			: startOfWeek(clock.today, mondayStart) + weekOffset * 7 * DAY_MS,
 	);
 	const currentWeekVisible = $derived(clock.today >= weekStartMs && clock.today < weekStartMs + 7 * DAY_MS);
-	const weekLabel = $derived(fmtWeekRange(weekStartMs));
+	const weekLabel = $derived(fmtWeekRange(weekStartMs, locale));
 
 	let selectedCell = $state<{ day: number; hour: number } | null>(null);
 
@@ -96,7 +97,7 @@
 
 			out.push({
 				ms,
-				label: weekdayShort(ms),
+				label: weekdayShort(ms, locale),
 				num: dayNum(ms),
 				today: isToday,
 				past: ms < clock.today,
@@ -118,11 +119,11 @@
 		if (!selectedCell) return '';
 		const day = heatDays[selectedCell.day];
 		if (!day) return '';
-		return `${day.label} ${day.num}, ${fmtH(selectedCell.hour)}`;
+		return `${day.label} ${day.num}, ${fmtH(selectedCell.hour, locale)}`;
 	});
 
 	function fmtTime(d: Date): string {
-		return d.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true }).toLowerCase();
+		return d.toLocaleTimeString(locale ?? 'en-US', { hour: 'numeric', minute: '2-digit', hour12: true }).toLowerCase();
 	}
 
 	function duration(ev: TimelineEvent): string {
@@ -188,7 +189,7 @@
 		{#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>
+				<span class="hm-hour-mark" style:left="calc({idx} * (100% / {visibleHourCount}))">{fmtH(h, locale)}</span>
 			{/if}
 		{/each}
 	</div>
@@ -209,7 +210,7 @@
 							class:hm-cell--selected={selectedCell?.day === di && selectedCell?.hour === hi}
 							style:background={heatColor(cell.intensity)}
 							onclick={() => selectCell(di, hi)}
-							title="{fmtH(cell.hour)}: {cell.events.length > 0 ? cell.events.map(e => e.title).join(', ') : 'free'}"
+							title="{fmtH(cell.hour, locale)}: {cell.events.length > 0 ? cell.events.map(e => e.title).join(', ') : 'free'}"
 						>
 							{#if cell.isNow}
 								<span class="hm-cell-now"></span>

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

@@ -1,5 +1,6 @@
 import type { WeekTimelineProps } from '../../core/types.js';
 type $$ComponentProps = WeekTimelineProps & {
+    locale?: string;
     visibleHours?: [number, number];
     [key: string]: unknown;
 };

package/dist/widget/CalendarWidget.svelte

@@ -13,8 +13,6 @@
       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';

package/dist/widget/widget.d.ts

@@ -1,7 +1 @@
-/**
- * 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';
+export {};

package/dist/widget/widget.js

@@ -4,6 +4,47 @@
  * 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.
+import { asClassComponent } from 'svelte/legacy';
+import CalendarWidget from './CalendarWidget.svelte';
+const CalendarWidgetClass = asClassComponent(CalendarWidget);
+class DayCalendarElement extends HTMLElement {
+    instance = null;
+    static get observedAttributes() {
+        return ['api', 'events', 'theme', 'view', 'height', 'locale', 'dir', 'mondaystart', 'headers'];
+    }
+    connectedCallback() {
+        if (this.instance)
+            return;
+        this.instance = new CalendarWidgetClass({
+            target: this,
+            props: this.readProps(),
+        });
+    }
+    disconnectedCallback() {
+        this.instance?.$destroy();
+        this.instance = null;
+    }
+    attributeChangedCallback(name, _oldValue, newValue) {
+        if (!this.instance)
+            return;
+        this.instance.$set({
+            [name]: newValue ?? undefined,
+        });
+    }
+    readProps() {
+        return {
+            api: this.getAttribute('api') ?? undefined,
+            events: this.getAttribute('events') ?? undefined,
+            theme: this.getAttribute('theme') ?? undefined,
+            view: this.getAttribute('view') ?? undefined,
+            height: this.getAttribute('height') ?? undefined,
+            locale: this.getAttribute('locale') ?? undefined,
+            dir: this.getAttribute('dir') ?? undefined,
+            mondaystart: this.getAttribute('mondaystart') ?? undefined,
+            headers: this.getAttribute('headers') ?? undefined,
+        };
+    }
+}
+if (!customElements.get('day-calendar')) {
+    customElements.define('day-calendar', DayCalendarElement);
+}

package/package.json

@@ -1,68 +1,66 @@
 {
-	"name": "@nomideusz/svelte-calendar",
-	"version": "0.3.0",
-	"description": "A themeable, pluggable Svelte 5 calendar with Day and Week views — Grid, Timeline, Agenda, Heatmap.",
-	"type": "module",
-	"license": "MIT",
-	"svelte": "./dist/index.js",
-	"types": "./dist/index.d.ts",
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js",
-			"default": "./dist/index.js"
-		},
-		"./widget": "./widget/widget.js"
-	},
-	"files": [
-		"dist",
-		"widget",
-		"!dist/**/*.test.*",
-		"!dist/**/*.spec.*"
-	],
-	"scripts": {
-		"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 ''",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"test": "vitest run",
-		"test:watch": "vitest"
-	},
-	"peerDependencies": {
-		"svelte": "^5.0.0"
-	},
-	"devDependencies": {
-		"@sveltejs/adapter-auto": "^7.0.0",
-		"@sveltejs/kit": "^2.50.2",
-		"@sveltejs/package": "^2.5.7",
-		"@sveltejs/vite-plugin-svelte": "^6.2.4",
-		"svelte": "^5.51.0",
-		"svelte-check": "^4.3.6",
-		"typescript": "^5.9.3",
-		"vite": "^7.3.1",
-		"vitest": "^4.0.18"
-	},
-	"dependencies": {
-		"date-fns": "^4.1.0",
-		"date-fns-tz": "^3.2.0"
-	},
-	"keywords": [
-		"svelte",
-		"calendar",
-		"scheduler",
-		"timeline",
-		"week",
-		"day",
-		"booking",
-		"svelte5"
-	],
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/nomideusz/svelte-calendar"
-	}
-}
+  "name": "@nomideusz/svelte-calendar",
+  "version": "0.4.0",
+  "description": "A themeable, pluggable Svelte 5 calendar with Day and Week views — Grid, Timeline, Agenda, Heatmap.",
+  "type": "module",
+  "license": "MIT",
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./widget": "./widget/widget.js"
+  },
+  "files": [
+    "dist",
+    "widget",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^7.0.0",
+    "@sveltejs/kit": "^2.50.2",
+    "@sveltejs/package": "^2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
+    "svelte": "^5.51.0",
+    "svelte-check": "^4.3.6",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1",
+    "vitest": "^4.0.18"
+  },
+  "dependencies": {
+    "date-fns": "^4.1.0",
+    "date-fns-tz": "^3.2.0"
+  },
+  "keywords": [
+    "svelte",
+    "calendar",
+    "scheduler",
+    "timeline",
+    "week",
+    "day",
+    "booking",
+    "svelte5"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nomideusz/svelte-calendar"
+  },
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "package": "svelte-kit sync && svelte-package",
+    "build:widget": "vite build --config vite.config.widget.ts",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  }
+}