@nomideusz/svelte-calendar 0.3.0 → 0.4.0

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); }}>
@@ -656,6 +659,16 @@
 							</span>
 						{/if}
 						<span class="fs-ev-title">{p.ev.title}</span>
+						{#if p.ev.subtitle && p.heightPx > 48}
+							<span class="fs-ev-sub">{p.ev.subtitle}</span>
+						{/if}
+						{#if p.ev.tags?.length && p.heightPx > 72}
+							<span class="fs-ev-tags">
+								{#each p.ev.tags as tag}
+									<span class="fs-ev-tag">{tag}</span>
+								{/each}
+							</span>
+						{/if}
 					</div>
 				</div>
 			{/each}
@@ -1055,6 +1068,29 @@
 		white-space: nowrap;
 	}
 
+	.fs-ev-sub {
+		font: 400 11px / 1 var(--dt-sans);
+		color: var(--dt-text-2);
+		opacity: 0.6;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.fs-ev-tags {
+		display: flex;
+		gap: 4px;
+	}
+
+	.fs-ev-tag {
+		font: 500 8px / 1 var(--dt-sans);
+		color: var(--ev-color, var(--dt-accent));
+		background: color-mix(in srgb, var(--ev-color, var(--dt-accent)) 18%, transparent);
+		padding: 1px 4px;
+		border-radius: 3px;
+		white-space: nowrap;
+	}
+
 	/* ─── Focus-visible (accessibility) ──────────── */
 	.fs-event:focus-visible,
 	.fs-night:focus-visible {

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}
@@ -269,6 +270,14 @@
 					onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); oneventclick?.(p.ev); } }}
 				>
 					<span class="dt-ev-title">{p.ev.title}</span>
+					{#if p.ev.subtitle}
+						<span class="dt-ev-sub">{p.ev.subtitle}</span>
+					{/if}
+					{#if p.ev.tags?.length}
+						{#each p.ev.tags as tag}
+							<span class="dt-ev-tag">{tag}</span>
+						{/each}
+					{/if}
 				</div>
 			{/each}
 		</div>
@@ -476,6 +485,7 @@
 		padding: 0 8px;
 		display: flex;
 		align-items: center;
+		gap: 4px;
 		cursor: pointer;
 		background: color-mix(in srgb, var(--ev-color) 22%, transparent);
 		border-left: 3px solid var(--ev-color);
@@ -502,4 +512,22 @@
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
+
+	.dt-ev-sub {
+		font: 400 9px / 1 var(--dt-sans, 'Outfit', system-ui, sans-serif);
+		color: var(--dt-text-2, rgba(148, 163, 184, 0.6));
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.dt-ev-tag {
+		font: 500 7px / 1 var(--dt-sans, 'Outfit', system-ui, sans-serif);
+		color: var(--ev-color, var(--dt-accent));
+		background: color-mix(in srgb, var(--ev-color, var(--dt-accent)) 20%, transparent);
+		padding: 1px 3px;
+		border-radius: 2px;
+		white-space: nowrap;
+		flex-shrink: 0;
+	}
 </style>

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 */