@nomideusz/svelte-calendar 0.1.1 → 0.2.0

package/dist/calendar/Calendar.svelte

@@ -59,6 +59,10 @@
 		showToolbar?: boolean;
 		/** Links to display in toolbar */
 		links?: { href: string; label: string }[];
+		/** Text direction: 'ltr' (default), 'rtl', or 'auto' */
+		dir?: 'ltr' | 'rtl' | 'auto';
+		/** BCP 47 locale tag (e.g. 'en-US', 'ar-SA') — sets lang and locale for formatting */
+		locale?: string;
 
 		// ── Callbacks ──
 		oneventclick?: (event: TimelineEvent) => void;
@@ -75,11 +79,20 @@
 		height = 600,
 		showToolbar = true,
 		links = [],
+		dir,
+		locale,
 		oneventclick,
 		oneventcreate,
 		oneventmove,
 	}: Props = $props();
 
+	import { setDefaultLocale } from '../core/locale.js';
+
+	// ── Set locale when provided ──
+	$effect(() => {
+		if (locale) setDefaultLocale(locale);
+	});
+
 	// ── Create reactive state ──
 	const store: EventStore = $derived(createEventStore(adapter));
 	const viewState: ViewState = createViewState(untrack(() => ({
@@ -135,7 +148,14 @@
 	);
 </script>
 
-<div class="cal" style="{theme}; --cal-h: {height}px">
+<div
+	class="cal"
+	style="{theme}; --cal-h: {height}px"
+	role="region"
+	aria-label="Calendar"
+	dir={dir}
+	lang={locale}
+>
 	{#if showToolbar}
 		<Toolbar {viewState} views={toolbarViews} {links} />
 	{/if}

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

@@ -33,6 +33,10 @@ interface Props {
         href: string;
         label: string;
     }[];
+    /** Text direction: 'ltr' (default), 'rtl', or 'auto' */
+    dir?: 'ltr' | 'rtl' | 'auto';
+    /** BCP 47 locale tag (e.g. 'en-US', 'ar-SA') — sets lang and locale for formatting */
+    locale?: string;
     oneventclick?: (event: TimelineEvent) => void;
     oneventcreate?: (range: {
         start: Date;

package/dist/calendar/Toolbar.svelte

@@ -47,7 +47,7 @@
 	);
 </script>
 
-<nav class="tb">
+<nav class="tb" aria-label="Calendar navigation">
 	<!-- Nav: ← Today → -->
 	<div class="tb-nav">
 		<button class="tb-btn" onclick={() => viewState.prev()} aria-label="Previous">

package/dist/core/index.d.ts

@@ -1,6 +1,7 @@
 export { createClock } from './clock.svelte.js';
 export type { Clock } from './clock.svelte.js';
 export { DAY_MS, HOUR_MS, HOURS, sod, startOfWeek, addDaysMs, diffDays, pad, fractionalHour, fmtHM, fmtS, dayNum, dayOfWeek, } from './time.js';
-export { setDefaultLocale, getDefaultLocale, fmtH, weekdayShort, weekdayLong, monthShort, monthLong, dateShort, dateWithWeekday, fmtDay, fmtWeekRange, } from './locale.js';
+export { setDefaultLocale, getDefaultLocale, is24HourLocale, fmtH, weekdayShort, weekdayLong, monthShort, monthLong, dateShort, dateWithWeekday, fmtDay, fmtWeekRange, } from './locale.js';
+export { toZonedTime, fromZonedTime, nowInZone, formatInTimeZone, } from './timezone.js';
 export type { TimelineEvent, WeekTimelineProps, DayTimelineProps, } from './types.js';
 export { timeToX } from './types.js';

package/dist/core/index.js

@@ -4,5 +4,7 @@ export { createClock } from './clock.svelte.js';
 // Time constants & math
 export { DAY_MS, HOUR_MS, HOURS, sod, startOfWeek, addDaysMs, diffDays, pad, fractionalHour, fmtHM, fmtS, dayNum, dayOfWeek, } from './time.js';
 // Locale-aware formatting
-export { setDefaultLocale, getDefaultLocale, fmtH, weekdayShort, weekdayLong, monthShort, monthLong, dateShort, dateWithWeekday, fmtDay, fmtWeekRange, } from './locale.js';
+export { setDefaultLocale, getDefaultLocale, is24HourLocale, fmtH, weekdayShort, weekdayLong, monthShort, monthLong, dateShort, dateWithWeekday, fmtDay, fmtWeekRange, } from './locale.js';
+// Timezone utilities
+export { toZonedTime, fromZonedTime, nowInZone, formatInTimeZone, } from './timezone.js';
 export { timeToX } from './types.js';

package/dist/core/locale.d.ts

@@ -11,8 +11,9 @@
 export declare function setDefaultLocale(tag: string): void;
 /** Get the current default locale */
 export declare function getDefaultLocale(): string;
-/** Format hour index (0-23) as compact 12h label: 12a, 1a … 12p, 1p … */
-export declare function fmtH(h: number): string;
+export declare function is24HourLocale(locale?: string): boolean;
+/** Format hour index (0-23) as compact label: 12h ("12a", "1p") or 24h ("0", "13") */
+export declare function fmtH(h: number, locale?: string): string;
 /** Short weekday name for a timestamp: "Mon", "Tue", etc. */
 export declare function weekdayShort(ms: number, locale?: string): string;
 /** Long weekday name for a timestamp: "Monday", "Tuesday", etc. */

package/dist/core/locale.js

@@ -17,8 +17,25 @@ export function setDefaultLocale(tag) {
 export function getDefaultLocale() {
     return defaultLocale;
 }
-/** Format hour index (0-23) as compact 12h label: 12a, 1a … 12p, 1p … */
-export function fmtH(h) {
+/**
+ * Detect whether the current locale uses 12-hour or 24-hour time.
+ * Caches per locale tag for performance.
+ */
+const hourCycleCache = new Map();
+export function is24HourLocale(locale) {
+    const loc = locale ?? defaultLocale;
+    if (hourCycleCache.has(loc))
+        return hourCycleCache.get(loc);
+    const sample = new Intl.DateTimeFormat(loc, { hour: 'numeric' }).resolvedOptions();
+    const is24 = sample.hourCycle === 'h23' || sample.hourCycle === 'h24';
+    hourCycleCache.set(loc, is24);
+    return is24;
+}
+/** Format hour index (0-23) as compact label: 12h ("12a", "1p") or 24h ("0", "13") */
+export function fmtH(h, locale) {
+    if (is24HourLocale(locale)) {
+        return String(h);
+    }
     if (h === 0)
         return '12a';
     if (h === 12)

package/dist/core/timezone.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Convert a Date (assumed UTC or local) to a Date representing
+ * the same instant in the target timezone.
+ *
+ * The returned Date's local getters (getHours, getMinutes, etc.)
+ * will return the values as they appear in the target timezone.
+ */
+export declare function toZonedTime(date: Date | number, timezone: string): Date;
+/**
+ * Convert a "zoned" Date (whose local getters represent a specific timezone)
+ * back to a true UTC Date. Use this before persisting to a backend.
+ */
+export declare function fromZonedTime(date: Date | number, timezone: string): Date;
+/**
+ * Get the current time as it appears in the given timezone.
+ */
+export declare function nowInZone(timezone: string): Date;
+/**
+ * Format a Date in a specific timezone using Intl.DateTimeFormat.
+ * Returns a locale-aware string.
+ */
+export declare function formatInTimeZone(date: Date | number, timezone: string, options?: Intl.DateTimeFormatOptions, locale?: string): string;

package/dist/core/timezone.js

@@ -0,0 +1,53 @@
+/**
+ * Timezone utilities — convert between IANA timezones and local time.
+ *
+ * Uses date-fns-tz under the hood. All functions accept an IANA timezone
+ * string (e.g. 'America/New_York', 'Europe/Warsaw', 'Asia/Tokyo').
+ *
+ * Usage:
+ *   import { toZonedTime, fromZonedTime, nowInZone } from '@nomideusz/svelte-calendar';
+ *
+ *   // Convert a UTC date to display in a specific timezone
+ *   const localDate = toZonedTime(utcDate, 'America/New_York');
+ *
+ *   // Convert a "display" date back to UTC for storage
+ *   const utcDate = fromZonedTime(localDate, 'America/New_York');
+ *
+ *   // Get current time in a timezone
+ *   const now = nowInZone('Asia/Tokyo');
+ */
+import { toZonedTime as dfnsToZoned, fromZonedTime as dfnsFromZoned } from 'date-fns-tz';
+/**
+ * Convert a Date (assumed UTC or local) to a Date representing
+ * the same instant in the target timezone.
+ *
+ * The returned Date's local getters (getHours, getMinutes, etc.)
+ * will return the values as they appear in the target timezone.
+ */
+export function toZonedTime(date, timezone) {
+    return dfnsToZoned(date, timezone);
+}
+/**
+ * Convert a "zoned" Date (whose local getters represent a specific timezone)
+ * back to a true UTC Date. Use this before persisting to a backend.
+ */
+export function fromZonedTime(date, timezone) {
+    return dfnsFromZoned(date, timezone);
+}
+/**
+ * Get the current time as it appears in the given timezone.
+ */
+export function nowInZone(timezone) {
+    return dfnsToZoned(new Date(), timezone);
+}
+/**
+ * Format a Date in a specific timezone using Intl.DateTimeFormat.
+ * Returns a locale-aware string.
+ */
+export function formatInTimeZone(date, timezone, options = {}, locale) {
+    const d = typeof date === 'number' ? new Date(date) : date;
+    return new Intl.DateTimeFormat(locale ?? 'en-US', {
+        ...options,
+        timeZone: timezone,
+    }).format(d);
+}

package/dist/engine/index.d.ts

@@ -1,7 +1,7 @@
 export { createEventStore } from './event-store.svelte.js';
 export type { EventStore } from './event-store.svelte.js';
 export { createViewState } from './view-state.svelte.js';
-export type { ViewState, ViewStateOptions, CalendarViewId, ViewGranularity, DateRange as ViewDateRange, } from './view-state.svelte.js';
+export type { ViewState, ViewStateOptions, CalendarViewId, BuiltInViewId, ViewGranularity, DateRange as ViewDateRange, } from './view-state.svelte.js';
 export { createSelection } from './selection.svelte.js';
 export type { Selection } from './selection.svelte.js';
 export { createDragState } from './drag.svelte.js';

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

@@ -1,9 +1,19 @@
-/** All registered view IDs. Add new ones here as variants are created. */
-export type CalendarViewId = 'day-grid' | 'day-agenda' | 'week-grid' | 'week-agenda' | 'week-heatmap';
+/**
+ * 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-grid' | 'day-agenda' | 'week-grid' | 'week-agenda' | 'week-heatmap';
+/**
+ * Any view identifier. Use built-in strings like 'day-grid' or your own
+ * custom IDs like 'day-kanban', 'week-resource', etc.
+ */
+export type CalendarViewId = string;
 export type ViewGranularity = 'day' | 'week';
 export interface ViewStateOptions {
     defaultView?: CalendarViewId;
     mondayStart?: boolean;
+    /** IANA timezone string (e.g. 'America/New_York'). Defaults to local timezone. */
+    timezone?: string;
 }
 export interface DateRange {
     start: Date;
@@ -15,6 +25,8 @@ export interface ViewState {
     readonly range: DateRange;
     readonly granularity: ViewGranularity;
     readonly mondayStart: boolean;
+    /** IANA timezone, or undefined for local */
+    readonly timezone: string | undefined;
     setView(id: CalendarViewId): void;
     setFocusDate(date: Date): void;
     next(): void;

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

@@ -35,6 +35,7 @@ export function createViewState(options = {}) {
     let view = $state(options.defaultView ?? 'week-grid');
     let focusDate = $state(new Date());
     let mondayStart = $state(options.mondayStart ?? true);
+    const timezone = options.timezone;
     const granularity = $derived(granularityFor(view));
     const range = $derived(computeRange(focusDate, granularity, mondayStart));
     return {
@@ -53,6 +54,9 @@ export function createViewState(options = {}) {
         get mondayStart() {
             return mondayStart;
         },
+        get timezone() {
+            return timezone;
+        },
         setView(id) {
             view = id;
         },

package/dist/index.d.ts

@@ -4,10 +4,10 @@ export { NowIndicator, EventBlock, TimeGutter, DayHeader, EmptySlot, } from './p
 export { Calendar, Toolbar } from './calendar/index.js';
 export type { CalendarView } from './calendar/index.js';
 export { createEventStore, createViewState, createSelection, createDragState, } from './engine/index.js';
-export type { EventStore, ViewState, ViewStateOptions, CalendarViewId, ViewGranularity, ViewDateRange, Selection, DragState, DragMode, DragPayload, } from './engine/index.js';
+export type { EventStore, ViewState, ViewStateOptions, CalendarViewId, BuiltInViewId, ViewGranularity, ViewDateRange, Selection, DragState, DragMode, DragPayload, } from './engine/index.js';
 export { createMemoryAdapter, createRestAdapter } from './adapters/index.js';
 export type { CalendarAdapter, DateRange, RestAdapterOptions } from './adapters/index.js';
-export { createClock, DAY_MS, HOUR_MS, HOURS, sod, startOfWeek, addDaysMs, diffDays, pad, fractionalHour, fmtHM, fmtS, dayNum, dayOfWeek, fmtH, weekdayShort, weekdayLong, monthShort, monthLong, dateShort, dateWithWeekday, fmtDay, fmtWeekRange, setDefaultLocale, getDefaultLocale, timeToX, } from './core/index.js';
+export { createClock, DAY_MS, HOUR_MS, HOURS, sod, startOfWeek, addDaysMs, diffDays, pad, fractionalHour, fmtHM, fmtS, dayNum, dayOfWeek, fmtH, weekdayShort, weekdayLong, monthShort, monthLong, dateShort, dateWithWeekday, fmtDay, fmtWeekRange, setDefaultLocale, getDefaultLocale, is24HourLocale, timeToX, toZonedTime, fromZonedTime, nowInZone, formatInTimeZone, } from './core/index.js';
 export type { Clock, TimelineEvent, WeekTimelineProps, DayTimelineProps, } from './core/index.js';
 export { midnight, parchment, indigo, presets, stageBg } from './theme/index.js';
 export type { PresetName } from './theme/index.js';

package/dist/index.js

@@ -9,6 +9,6 @@ export { createEventStore, createViewState, createSelection, createDragState, }
 // ─── Adapters ───────────────────────────────────────────
 export { createMemoryAdapter, createRestAdapter } from './adapters/index.js';
 // ─── Core: clock, time, locale, types ───────────────────
-export { createClock, DAY_MS, HOUR_MS, HOURS, sod, startOfWeek, addDaysMs, diffDays, pad, fractionalHour, fmtHM, fmtS, dayNum, dayOfWeek, fmtH, weekdayShort, weekdayLong, monthShort, monthLong, dateShort, dateWithWeekday, fmtDay, fmtWeekRange, setDefaultLocale, getDefaultLocale, timeToX, } from './core/index.js';
+export { createClock, DAY_MS, HOUR_MS, HOURS, sod, startOfWeek, addDaysMs, diffDays, pad, fractionalHour, fmtHM, fmtS, dayNum, dayOfWeek, fmtH, weekdayShort, weekdayLong, monthShort, monthLong, dateShort, dateWithWeekday, fmtDay, fmtWeekRange, setDefaultLocale, getDefaultLocale, is24HourLocale, timeToX, toZonedTime, fromZonedTime, nowInZone, formatInTimeZone, } from './core/index.js';
 // ─── Themes ─────────────────────────────────────────────
 export { midnight, parchment, indigo, presets, stageBg } from './theme/index.js';

package/dist/primitives/EmptySlot.svelte

@@ -39,17 +39,26 @@
 		const m = mins % 60;
 		return m > 0 ? `${h}h ${m}m free` : `${h}h free`;
 	});
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			onclick?.({ start, end });
+		}
+	}
 </script>
 
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	class="es"
 	class:es-v={orientation === 'vertical'}
 	class:es-h={orientation === 'horizontal'}
+	role="button"
+	tabindex="0"
+	aria-label="Create event, {fmtTime(start)} to {fmtTime(end)}, {dur()}"
 	onclick={() => onclick?.({ start, end })}
+	onkeydown={handleKeydown}
 >
-	<div class="es-hint">
+	<div class="es-hint" aria-hidden="true">
 		<span class="es-plus">+</span>
 		<span class="es-range">{fmtTime(start)} – {fmtTime(end)}</span>
 	</div>
@@ -68,6 +77,11 @@
 		border-color: var(--dt-accent-dim, rgba(239, 68, 68, 0.18));
 		background: var(--dt-accent-dim, rgba(239, 68, 68, 0.05));
 	}
+	.es:focus-visible {
+		outline: 2px solid var(--dt-accent, #ef4444);
+		outline-offset: 2px;
+		border-color: var(--dt-accent-dim, rgba(239, 68, 68, 0.18));
+	}
 
 	.es-hint {
 		position: absolute;

package/dist/primitives/EventBlock.svelte

@@ -61,17 +61,35 @@
 	}
 
 	const accentColor = $derived(event.color || 'var(--dt-accent, #ef4444)');
+
+	const ariaLabel = $derived(() => {
+		const t = event.title;
+		const time = `${fmtTime(event.start)} to ${fmtTime(event.end)}`;
+		const dur = fmtDuration(event.start, event.end);
+		const status = active ? ', happening now' : past ? ', past' : '';
+		return `${t}, ${time}, ${dur}${status}`;
+	});
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			onclick?.(event);
+		}
+	}
 </script>
 
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	class="eb eb-{variant}"
 	class:eb-active={active}
 	class:eb-past={past}
 	class:eb-editable={editable}
 	style="--eb-color: {accentColor}"
+	role={onclick ? 'button' : 'article'}
+	tabindex={onclick ? 0 : -1}
+	aria-label={ariaLabel()}
+	aria-current={active ? 'true' : undefined}
 	onclick={() => onclick?.(event)}
+	onkeydown={handleKeydown}
 >
 	{#if children}
 		{@render children(event)}
@@ -115,6 +133,11 @@
 	.eb-editable:hover {
 		transform: translateY(-1px);
 	}
+	.eb:focus-visible {
+		outline: 2px solid var(--dt-accent, #ef4444);
+		outline-offset: 2px;
+		border-radius: 4px;
+	}
 	.eb-past {
 		opacity: 0.5;
 	}

package/dist/primitives/NowIndicator.svelte

@@ -53,7 +53,7 @@
 </script>
 
 {#if mode === 'badge'}
-	<span class="ni-badge" style={colorVar}>
+	<span class="ni-badge" style={colorVar} role="status" aria-live="polite" aria-label="Current time: {time}">
 		{#if children}
 			{@render children()}
 		{:else}
@@ -61,7 +61,7 @@
 		{/if}
 	</span>
 {:else if mode === 'dot'}
-	<div class="ni ni-dot {orientation}" style="{posStyle}; {colorVar}">
+	<div class="ni ni-dot {orientation}" style="{posStyle}; {colorVar}" role="status" aria-label="Current time: {time}">
 		<div class="ni-dot-circle"></div>
 		{#if showLabel && time}
 			<div class="ni-label">
@@ -71,7 +71,7 @@
 		{/if}
 	</div>
 {:else}
-	<div class="ni ni-line {orientation}" style="{posStyle}; {colorVar}">
+	<div class="ni ni-line {orientation}" style="{posStyle}; {colorVar}" role="status" aria-label="Current time: {time}">
 		<div class="ni-line-bar"></div>
 		{#if showLabel && time}
 			<div class="ni-label">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nomideusz/svelte-calendar",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "A themeable, pluggable Svelte 5 calendar with Day and Week views — Grid, Timeline, Agenda, Heatmap.",
   "type": "module",
   "license": "MIT",
@@ -33,7 +33,8 @@
     "vitest": "^4.0.18"
   },
   "dependencies": {
-    "date-fns": "^4.1.0"
+    "date-fns": "^4.1.0",
+    "date-fns-tz": "^3.2.0"
   },
   "keywords": [
     "svelte",