@nomideusz/svelte-calendar 0.3.1 → 0.4.0

package/dist/calendar/Calendar.svelte

@@ -72,6 +72,7 @@
 		oneventclick?: (event: TimelineEvent) => void;
 		oneventcreate?: (range: { start: Date; end: Date }) => void;
 		oneventmove?: (event: TimelineEvent, newStart: Date, newEnd: Date) => void;
+		onviewchange?: (viewId: CalendarViewId) => void;
 	}
 
 	let {
@@ -90,6 +91,7 @@
 		oneventclick,
 		oneventcreate,
 		oneventmove,
+		onviewchange,
 	}: Props = $props();
 
 	// In readOnly mode, suppress mutation callbacks
@@ -153,6 +155,23 @@
 		store.load({ start, end });
 	});
 
+	// Keep active view in sync when external defaultView changes after mount.
+	$effect(() => {
+		viewState.setView(defaultView);
+	});
+
+	// Keep view state's week-start rule in sync with incoming prop changes.
+	$effect(() => {
+		if (viewState.mondayStart !== mondayStart) {
+			viewState.setMondayStart(mondayStart);
+		}
+	});
+
+	// Notify host when active view changes (e.g. via toolbar concept/granularity toggles).
+	$effect(() => {
+		onviewchange?.(viewState.view);
+	});
+
 	// ── Resolve active view ──
 	const activeView = $derived(views.find((v) => v.id === viewState.view) ?? views[0]);
 
@@ -170,7 +189,7 @@
 	lang={locale}
 >
 	{#if showToolbar}
-		<Toolbar {viewState} views={toolbarViews} {links} />
+		<Toolbar {viewState} views={toolbarViews} {links} {locale} />
 	{/if}
 
 	<div class="cal-body">
@@ -181,6 +200,7 @@
 				style={theme}
 				height={height - (showToolbar ? 48 : 0)}
 				mondayStart={viewState.mondayStart}
+				{locale}
 				focusDate={viewState.focusDate}
 				oneventclick={oneventclick}
 				oneventcreate={effectiveCreate}

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

@@ -47,6 +47,7 @@ interface Props {
         end: Date;
     }) => void;
     oneventmove?: (event: TimelineEvent, newStart: Date, newEnd: Date) => void;
+    onviewchange?: (viewId: CalendarViewId) => void;
 }
 declare const Calendar: Component<Props, {}, "">;
 type Calendar = ReturnType<typeof Calendar>;

package/dist/calendar/Toolbar.svelte

@@ -19,20 +19,23 @@
 		views?: ViewOption[];
 		/** Links to show in the toolbar */
 		links?: { href: string; label: string }[];
+		/** Locale used for labels */
+		locale?: string;
 	}
 
 	let {
 		viewState,
 		views = [],
 		links = [],
+		locale,
 	}: Props = $props();
 
 	const dateLabel = $derived(() => {
 		if (viewState.granularity === 'day') {
-			return `${weekdayLong(viewState.focusDate.getTime())}, ${fmtDay(viewState.focusDate.getTime(), Date.now())}`;
+			return `${weekdayLong(viewState.focusDate.getTime(), locale)}, ${fmtDay(viewState.focusDate.getTime(), Date.now(), undefined, locale)}`;
 		}
 		const ws = viewState.range.start.getTime();
-		return fmtWeekRange(ws);
+		return fmtWeekRange(ws, locale);
 	});
 
 	// Which granularities are available?

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

@@ -13,6 +13,8 @@ interface Props {
         href: string;
         label: string;
     }[];
+    /** Locale used for labels */
+    locale?: string;
 }
 declare const Toolbar: import("svelte").Component<Props, {}, "">;
 type Toolbar = ReturnType<typeof Toolbar>;

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

@@ -28,6 +28,7 @@ export interface ViewState {
     /** IANA timezone, or undefined for local */
     readonly timezone: string | undefined;
     setView(id: CalendarViewId): void;
+    setMondayStart(value: boolean): void;
     setFocusDate(date: Date): void;
     next(): void;
     prev(): void;

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

@@ -60,6 +60,9 @@ export function createViewState(options = {}) {
         setView(id) {
             view = id;
         },
+        setMondayStart(value) {
+            mondayStart = value;
+        },
         setFocusDate(date) {
             focusDate = date;
         },

package/dist/views/agenda/Agenda.svelte

@@ -25,6 +25,7 @@
 		/** 'day' = single-day timeline rail, 'week' = rolling 7-day view */
 		mode?: 'day' | 'week';
 		mondayStart?: boolean;
+		locale?: string;
 		height?: number;
 		events?: TimelineEvent[];
 		style?: string;
@@ -38,6 +39,7 @@
 	let {
 		mode = 'day',
 		mondayStart = true,
+		locale,
 		height = 520,
 		events = [],
 		style = '',
@@ -51,7 +53,7 @@
 	// ── Format helpers ──────────────────────────────────
 	function fmtTime(d: Date): string {
 		return d
-			.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true })
+			.toLocaleTimeString(locale ?? 'en-US', { hour: 'numeric', minute: '2-digit', hour12: true })
 			.toLowerCase();
 	}
 
@@ -220,7 +222,7 @@
 			? startOfWeek(sod(focusDate.getTime()), mondayStart)
 			: startOfWeek(clock.today, mondayStart),
 	);
-	const weekLabel = $derived(fmtWeekRange(weekStartMs));
+	const weekLabel = $derived(fmtWeekRange(weekStartMs, locale));
 
 	const weekDays = $derived.by((): DayGroup[] => {
 		if (mode !== 'week') return [];
@@ -255,8 +257,8 @@
 
 			out.push({
 				ms,
-				dayName: tier === 'today' || tier === 'tomorrow' ? weekdayLong(ms) : weekdayShort(ms),
-				dateLabel: `${monthShort(ms)} ${dayNum(ms)}`,
+				dayName: tier === 'today' || tier === 'tomorrow' ? weekdayLong(ms, locale) : weekdayShort(ms, locale),
+				dateLabel: `${monthShort(ms, locale)} ${dayNum(ms)}`,
 				tier,
 				events: dayEvts,
 				pastEvents,
@@ -325,7 +327,7 @@
 	<header class="ag-header">
 		{#if mode === 'day'}
 			<div class="ag-header-left">
-				<span class="ag-title">{fmtDay(dayMs, clock.today, { short: false })}</span>
+				<span class="ag-title">{fmtDay(dayMs, clock.today, { short: false }, locale)}</span>
 				{#if isToday}
 					<span class="ag-clock">{clock.hm}</span>
 				{:else if isPastDay}

package/dist/views/agenda/Agenda.svelte.d.ts

@@ -3,6 +3,7 @@ interface Props {
     /** 'day' = single-day timeline rail, 'week' = rolling 7-day view */
     mode?: 'day' | 'week';
     mondayStart?: boolean;
+    locale?: string;
     height?: number;
     events?: TimelineEvent[];
     style?: string;

package/dist/views/day/DayGrid.svelte

@@ -35,6 +35,8 @@
 		style?: string;
 		/** The date to centre this view on */
 		focusDate?: Date;
+		/** Locale for labels */
+		locale?: string;
 		/** Called when the user clicks an event */
 		oneventclick?: (event: TimelineEvent) => void;
 		/** Called when the user clicks an empty time slot */
@@ -58,6 +60,7 @@
 		height = 520,
 		events = [],
 		style = '',
+		locale,
 		focusDate,
 		oneventclick,
 		oneventcreate,
@@ -130,7 +133,7 @@
 
 			layouts.push({
 				ms,
-				name: fmtDay(ms, clock.today, { short: true }),
+				name: fmtDay(ms, clock.today, { short: true }, locale),
 				today: isToday,
 				past: isPast,
 				dayX: x,
@@ -579,7 +582,7 @@
 						{@const hour = NIGHT_END + h}
 						{@const x = h * hourWidth}
 						<div class="fs-tick" style:left="{x}px">
-							<span class="fs-tick-lb">{fmtH(hour)}</span>
+							<span class="fs-tick-lb">{fmtH(hour, locale)}</span>
 						</div>
 						<div class="fs-tick fs-tick--half" style:left="{x + hourWidth * 0.5}px"></div>
 					{/each}
@@ -605,7 +608,7 @@
 								{@const hour = (NIGHT_START + h) % 24}
 								{@const x = h * hourWidth}
 								<div class="fs-tick fs-tick--night" style:left="{x}px">
-									<span class="fs-tick-lb">{fmtH(hour)}</span>
+									<span class="fs-tick-lb">{fmtH(hour, locale)}</span>
 								</div>
 							{/each}
 							<button class="fs-night-toggle" onclick={(e) => { e.stopPropagation(); toggleNight(i); }}>

package/dist/views/day/DayGrid.svelte.d.ts

@@ -16,6 +16,8 @@ interface Props {
     style?: string;
     /** The date to centre this view on */
     focusDate?: Date;
+    /** Locale for labels */
+    locale?: string;
     /** Called when the user clicks an event */
     oneventclick?: (event: TimelineEvent) => void;
     /** Called when the user clicks an empty time slot */

package/dist/views/day/DayTimeline.svelte

@@ -14,10 +14,11 @@
 		nowPosition = 0.25,
 		events = [],
 		style = '',
+		locale,
 		focusDate,
 		oneventclick,
 		selectedEventId = null,
-	}: DayTimelineProps = $props();
+	}: DayTimelineProps & { locale?: string; [key: string]: unknown } = $props();
 
 	// ── Drag support (available when inside Calendar) ──
 	const drag = getContext<DragState>('calendar:drag') as DragState | undefined;
@@ -48,7 +49,7 @@
 			out.push({
 				ms,
 				x: i * dayW,
-				name: fmtDay(ms, clock.today),
+				name: fmtDay(ms, clock.today, undefined, locale),
 				today: ms === clock.today
 			});
 		}
@@ -242,7 +243,7 @@
 				{#each HOURS as h}
 					{@const x = d.x + h * hourWidth}
 					<div class="dt-tick" style:left="{x}px">
-						<span class="dt-tick-lb">{fmtH(h)}</span>
+						<span class="dt-tick-lb">{fmtH(h, locale)}</span>
 					</div>
 					<div class="dt-tick dt-tick--h" style:left="{x + hourWidth * 0.5}px"></div>
 				{/each}

package/dist/views/day/DayTimeline.svelte.d.ts

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

package/dist/views/schedule/WeekSchedule.svelte

@@ -40,6 +40,8 @@
 		theme?: string;
 		/** BCP 47 locale */
 		locale?: string;
+		/** Text direction */
+		dir?: 'ltr' | 'rtl' | 'auto';
 		/** Total height */
 		height?: number;
 		/** Start week on Monday */
@@ -67,6 +69,7 @@
 		schedule,
 		theme = '',
 		locale,
+		dir,
 		height = 560,
 		mondayStart = true,
 		readOnly = true,
@@ -123,6 +126,7 @@
 	defaultView="week-grid"
 	{theme}
 	{locale}
+	{dir}
 	{height}
 	{mondayStart}
 	{readOnly}

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

@@ -9,6 +9,8 @@ interface Props {
     theme?: string;
     /** BCP 47 locale */
     locale?: string;
+    /** Text direction */
+    dir?: 'ltr' | 'rtl' | 'auto';
     /** Total height */
     height?: number;
     /** Start week on Monday */