@nomideusz/svelte-calendar 1.1.1 → 1.3.0

package/dist/views/planner/PlannerWeek.svelte

@@ -14,14 +14,15 @@
     disabled) applies on drop.
   • Now-line across today's column only; auto-scrolls to the current time.
 -->
-<script lang="ts">import { untrack } from "svelte";
+<script lang="ts">import { tick, untrack } from "svelte";
 import { useCalendarContext } from "../shared/context.svelte.js";
 import EventContent from "../shared/EventContent.svelte";
 import { createClock } from "../../core/clock.svelte.js";
 import { fitParts } from "../../text-fit.js";
 import { HOUR_MS, sod, addDaysMs, diffDays } from "../../core/time.js";
 import { startOfWeek as sowFn, isAllDay, segmentForDay } from "../../core/time.js";
-import { fmtHParts, fmtTime, fmtDuration, weekdayShort, weekdayLong } from "../../core/locale.js";
+import { fmtHParts, fmtTime, fmtDuration, fmtWeekRange, weekdayShort, weekdayLong } from "../../core/locale.js";
+import { dateLong } from "../shared/format.js";
 let { mode = "week", mondayStart = true, locale, height = 520, events = [], style = "", focusDate, oneventclick, oneventcreate, onexternaldrop, selectedEventId = null, readOnly = false, visibleHours } = $props();
 // ── Context ────────────────────────────────────────
 const ctx = useCalendarContext();
@@ -79,6 +80,8 @@ function inAllDayStrip(ev) {
 }
 // ── Config ─────────────────────────────────────────
 const HOUR_H = 64;
+/** Half a gutter label plus a gap: what a scroll needs above an hour line */
+const LABEL_ROOM = 18;
 const GUTTER_W = 60;
 const MIN_COL_W = $derived(ctx.minColumnWidth);
 const ALLDAY_MAX = 3;
@@ -297,7 +300,8 @@ const nowY = $derived.by(() => {
 const weekIsEmpty = $derived(!events.some((ev) => ev.start.getTime() < weekEndMs && ev.end.getTime() > weekStartMs));
 // ── Auto-scroll (mount + week change) ──────────────
 // Week with today → current time minus ~1h of context; otherwise the
-// visibleHours start or 08:00, whichever is later.
+// visibleHours start or 08:00, whichever is later. Lands on a whole hour,
+// with room for its label (centred on the line) below the sticky top.
 $effect(() => {
 	void weekStartMs;
 	const el = scrollEl;
@@ -310,7 +314,7 @@ $effect(() => {
 		} else {
 			targetHour = Math.max(startHour, Math.min(8, endHour - 1));
 		}
-		el.scrollTop = (targetHour - startHour) * HOUR_H;
+		el.scrollTop = Math.max(0, (Math.floor(targetHour) - startHour) * HOUR_H - LABEL_ROOM);
 	});
 });
 // ── Pointer coalescing ─────────────────────────────
@@ -623,6 +627,79 @@ function handleColsClick(e) {
 		end: new Date(startMs + durMin * 6e4)
 	});
 }
+// ── Keyboard ───────────────────────────────────────
+// The day columns are one tab stop (roving): ←/→ walk the days, Enter or
+// Space adds an event at the next slot (today) or 09:00. A focused event
+// moves with Alt+↑/↓ (one snap) and Alt+←/→ (one shown day); Alt+Shift+↑/↓
+// moves its end. Each key is a one-step drag through ctx.commitDrag, so
+// Calendar validates it exactly as it does a pointer drag.
+let focusedColMs = $state(null);
+const tabbableColMs = $derived((dayCols.find((d) => d.ms === focusedColMs) ?? dayCols.find((d) => d.isToday) ?? dayCols[0])?.ms);
+const colsCreate = $derived(!!oneventcreate && !readOnly);
+function onColKeydown(e, i) {
+	if (e.target !== e.currentTarget) return;
+	const day = dayCols[i];
+	if (e.key === "Enter" || e.key === " ") {
+		e.preventDefault();
+		if (!oneventcreate || readOnly || day.isDisabled) return;
+		const step = Math.max(1, ctx.snapInterval) / 60;
+		const want = day.isToday ? snapHour(nowFracHour, "floor") + step : 9;
+		const hour = Math.min(Math.max(want, startHour), endHour - step);
+		if (isBlockedAt(day.ms, hour)) return;
+		const startMs = atHour(day.ms, hour);
+		oneventcreate({
+			start: new Date(startMs),
+			end: new Date(startMs + Math.max(60, minDuration ?? 0) * 6e4)
+		});
+		return;
+	}
+	const dir = e.key === "ArrowRight" ? 1 : e.key === "ArrowLeft" ? -1 : 0;
+	if (!dir) return;
+	e.preventDefault();
+	const next = dayCols[i + (isRtl() ? -dir : dir)];
+	if (!next) return;
+	focusedColMs = next.ms;
+	colsEl?.querySelector(`.tw-col[data-day="${next.ms}"]`)?.focus();
+}
+async function onEventKeydown(e, ev) {
+	if (e.key === "Enter" || e.key === " ") {
+		e.preventDefault();
+		e.stopPropagation();
+		oneventclick?.(ev, e.currentTarget.getBoundingClientRect());
+		return;
+	}
+	if (!e.altKey || !drag || readOnly || ev.data?.readOnly) return;
+	const vert = e.key === "ArrowUp" ? -1 : e.key === "ArrowDown" ? 1 : 0;
+	const horiz = e.key === "ArrowLeft" ? -1 : e.key === "ArrowRight" ? 1 : 0;
+	if (!vert && (!horiz || e.shiftKey)) return;
+	let start = ev.start.getTime();
+	let end = ev.end.getTime();
+	// Up lands on the snap line above (or the one before, when already on
+	// one); down on the line below.
+	const nudge = (ms) => vert < 0 ? snapMs(ms - 1, "floor") : snapMs(ms, "floor") + SNAP_MS;
+	if (e.shiftKey) end = nudge(end);
+	else if (vert) {
+		start = nudge(start);
+		end = start + (ev.end.getTime() - ev.start.getTime());
+	} else {
+		const fromDay = sod(start);
+		const i = dayCols.findIndex((d) => d.ms === fromDay);
+		const to = dayCols[i + (isRtl() ? -horiz : horiz)];
+		if (i < 0 || !to) return;
+		start = atHour(to.ms, hourOf(start, fromDay));
+		end = start + (ev.end.getTime() - ev.start.getTime());
+	}
+	e.preventDefault();
+	e.stopPropagation();
+	if (e.shiftKey) drag.beginResize(ev.id, "end", ev.start, ev.end);
+	else drag.beginMove(ev.id, ev.start, ev.end);
+	drag.updatePointer(new Date(start), new Date(end));
+	await commitDragCtx?.();
+	// A move to another day re-creates the block: keep the keyboard on it,
+	// or on its day when the host re-ids it (a recurring copy made one-off).
+	await tick();
+	(colsEl?.querySelector(`.tw-ev[data-event-id="${CSS.escape(ev.id)}"]`) ?? colsEl?.querySelector(`.tw-col[data-day="${sod(start)}"]`))?.focus();
+}
 // ── Drag-to-move (vertical = time, horizontal = day) ──
 const DRAG_THRESHOLD = 5;
 let evDragStartX = 0;
@@ -823,7 +900,9 @@ function onWindowKeydown(e) {
 	style:--tw-col-min="{MIN_COL_W}px"
 	style:height={autoHeight ? undefined : (height ? `${height}px` : '100%')}
 	role="region"
-	aria-label={L.weekAhead}
+	aria-label="{singleDay ? L.dayPlanner : L.weekAhead}{dayCols.length
+		? `, ${singleDay ? dateLong(dayCols[0].ms, locale) : fmtWeekRange(dayCols[0].ms, locale, dayCols[dayCols.length - 1].ms)}`
+		: ''}"
 >
 	<div class="tw-scroll" bind:this={scrollEl}>
 		<div class="tw-inner" style:min-width="{innerMinWidth}px">
@@ -929,9 +1008,10 @@ function onWindowKeydown(e) {
 						{/if}
 					</div>
 
-					{#each dayCols as day (day.ms)}
+					{#each dayCols as day, di (day.ms)}
 						{@const positioned = layoutByDay.get(day.ms) ?? []}
 						{@const ghost = ghostForDay(day.ms)}
+						<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 						<div
 							class="tw-col"
 							class:tw-col--today={day.isToday}
@@ -939,6 +1019,12 @@ function onWindowKeydown(e) {
 							class:tw-col--weekend={day.isWeekend}
 							class:tw-col--disabled={day.isDisabled}
 							data-day={day.ms}
+							role={colsCreate ? 'group' : undefined}
+							aria-label={colsCreate ? `${dateLong(day.ms, locale)}, ${L.createEvent}` : undefined}
+							aria-keyshortcuts={colsCreate ? 'Enter' : undefined}
+							tabindex={colsCreate ? (day.ms === tabbableColMs ? 0 : -1) : undefined}
+							onfocusin={() => (focusedColMs = day.ms)}
+							onkeydown={colsCreate ? (e) => onColKeydown(e, di) : undefined}
 						>
 							<!-- Blocked slot overlays -->
 							{#if blockedSlots?.length}
@@ -981,6 +1067,7 @@ function onWindowKeydown(e) {
 									class:tw-ev--past={p.ev.end.getTime() < clock.tick}
 									class:tw-ev--short={p.height < 44}
 									class:tw-ev--compact={p.height < 34}
+									class:tw-ev--on-now={weekHasToday && nowY !== null && p.top < nowY && p.top + p.height > nowY}
 									style:top="{p.top}px"
 									style:height="{p.height}px"
 									style:left="calc({(p.col / p.totalCols) * 100}% + 1px)"
@@ -988,11 +1075,13 @@ function onWindowKeydown(e) {
 									style:--ev-color={p.ev.color ?? 'var(--dt-event, var(--dt-accent))'}
 									role="button"
 									tabindex="0"
+									data-event-id={p.ev.id}
+									aria-keyshortcuts={!readOnly && !p.ev.data?.readOnly ? 'Alt+ArrowUp Alt+ArrowDown Alt+ArrowLeft Alt+ArrowRight Alt+Shift+ArrowUp Alt+Shift+ArrowDown' : undefined}
 									title={p.ev.title}
 									aria-label="{p.ev.title}, {fmtTime(p.ev.start, locale)} – {fmtTime(p.ev.end, locale)}, {fmtDuration(p.ev.start, p.ev.end)}{statusText(p.ev)}{isCurrent ? ` (${L.inProgress})` : ''}"
 									onpointerdown={(e) => onEventPointerDown(e, p.ev)}
 									onpointerenter={() => oneventhover?.(p.ev)}
-									onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); e.stopPropagation(); oneventclick?.(p.ev, e.currentTarget.getBoundingClientRect()); } }}
+									onkeydown={(e) => onEventKeydown(e, p.ev)}
 
 								>
 									<div class="tw-ev-stripe" aria-hidden="true"></div>
@@ -1053,9 +1142,8 @@ function onWindowKeydown(e) {
 
 							<!-- Now line (today's column only) -->
 							{#if day.isToday && nowY !== null}
-								<div class="tw-now" style:top="{nowY}px" aria-label={L.currentTime}>
-									<span class="tw-now-dot" aria-hidden="true"></span>
-								</div>
+								<div class="tw-now" style:top="{nowY}px" aria-label={L.currentTime}></div>
+								<span class="tw-now-dot" style:top="{nowY}px" aria-hidden="true"></span>
 							{/if}
 						</div>
 					{/each}
@@ -1198,8 +1286,9 @@ function onWindowKeydown(e) {
 		padding: 6px 8px 6px 0;
 	}
 	.tw-ad-gutter-lb {
-		font: 500 10px/1.2 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
+		font: 500 12px/1.2 var(--dt-sans, system-ui, sans-serif);
+		letter-spacing: 0.08em;
+		color: var(--dt-text-2, rgba(0, 0, 0, 0.66));
 		text-align: right;
 	}
 
@@ -1265,7 +1354,7 @@ function onWindowKeydown(e) {
 		min-width: 0;
 	}
 	.tw-ad-span {
-		font: 400 11px/1 var(--dt-sans, system-ui, sans-serif);
+		font: 400 12.5px/1 var(--dt-sans, system-ui, sans-serif);
 		font-variant-numeric: tabular-nums;
 		color: inherit;
 		opacity: 0.75;
@@ -1298,7 +1387,7 @@ function onWindowKeydown(e) {
 		border-radius: 3px;
 		text-align: left;
 		align-self: flex-start;
-		font: 500 10px/1 var(--dt-sans, system-ui, sans-serif);
+		font: 400 12.5px/1 var(--dt-sans, system-ui, sans-serif);
 		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
 		padding: 2px 6px;
 		cursor: pointer;
@@ -1427,20 +1516,27 @@ function onWindowKeydown(e) {
 		border-left: 1px solid var(--dt-border, rgba(0, 0, 0, 0.08));
 		box-sizing: border-box;
 	}
+	.tw-col:focus-visible {
+		outline: 2px solid var(--dt-accent, #2563eb);
+		outline-offset: -2px;
+	}
 	/* The gutter's right border already bounds the first column */
 	.tw-lines + .tw-col { border-left: none; }
 
-	.tw-col--today { background: var(--dt-today-bg, rgba(37, 99, 235, 0.04)); }
+	/* --tw-col-wash: the column's ground, repeated under an event that the
+	   now line crosses (that event is opaque, so the line runs beneath it). */
+	.tw-col { background: var(--tw-col-wash, transparent); }
+	.tw-col--today { --tw-col-wash: var(--dt-today-bg, rgba(37, 99, 235, 0.04)); }
 	/* Dim past days with a wash, never a subtree opacity (event contrast) */
 	.tw-col--past {
-		background: color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 4%, transparent);
+		--tw-col-wash: color-mix(in srgb, var(--dt-text, rgba(0, 0, 0, 0.87)) 4%, transparent);
 	}
 	/* What has already happened steps back; a cancelled block keeps its own look. */
 	.tw-ev--past:not(.tw-ev--cancelled) {
 		opacity: 0.78;
 	}
 	.tw-col--weekend:not(.tw-col--today):not(.tw-col--past) {
-		background: var(--dt-weekend-bg, rgba(0, 0, 0, 0.012));
+		--tw-col-wash: var(--dt-weekend-bg, rgba(0, 0, 0, 0.012));
 	}
 	.tw-col--disabled {
 		background: repeating-linear-gradient(
@@ -1472,8 +1568,8 @@ function onWindowKeydown(e) {
 		overflow: hidden;
 	}
 	.tw-blocked-lb {
-		font: 500 10px/1 var(--dt-sans, system-ui, sans-serif);
-		color: var(--dt-text-3, rgba(0, 0, 0, 0.38));
+		font: 500 11px/1 var(--dt-sans, system-ui, sans-serif);
+		color: var(--dt-text-2, rgba(0, 0, 0, 0.54));
 		text-transform: uppercase;
 		letter-spacing: 0.04em;
 		white-space: nowrap;
@@ -1481,24 +1577,28 @@ function onWindowKeydown(e) {
 	}
 
 	/* ─── Now line ───────────────────────────────────── */
+	/* Under the events (z 6): the one it crosses is opaque (.tw-ev--on-now),
+	   so the line never strikes through a title. The dot stays on top. */
 	.tw-now {
 		position: absolute;
 		left: 0;
 		right: 0;
 		height: 0;
 		border-top: 2px solid var(--dt-accent, #2563eb);
-		z-index: 12;
+		z-index: 5;
 		pointer-events: none;
 		transform: translateY(-1px);
 	}
 	.tw-now-dot {
 		position: absolute;
 		left: -4px;
-		top: -5px;
 		width: 8px;
 		height: 8px;
+		margin-top: -4px;
 		border-radius: 50%;
 		background: var(--dt-accent, #2563eb);
+		z-index: 12;
+		pointer-events: none;
 	}
 
 	/* ─── Events ─────────────────────────────────────── */
@@ -1541,6 +1641,17 @@ function onWindowKeydown(e) {
 	.tw-ev--current {
 		background: var(--dt-accent-dim, rgba(37, 99, 235, 0.12));
 	}
+	/* An event the now line crosses lays its column's ground (and its own
+	   wash) over the paper, so the line passes beneath its text. */
+	.tw-ev.tw-ev--on-now {
+		background:
+			linear-gradient(var(--tw-ev-wash, transparent), var(--tw-ev-wash, transparent)),
+			linear-gradient(var(--tw-col-wash, transparent), var(--tw-col-wash, transparent)),
+			var(--dt-paper, none),
+			var(--dt-bg, #ffffff);
+	}
+	.tw-ev--on-now.tw-ev--current { --tw-ev-wash: var(--dt-accent-dim, rgba(37, 99, 235, 0.12)); }
+	.tw-ev--on-now:hover { --tw-ev-wash: var(--dt-hover, rgba(0, 0, 0, 0.04)); }
 	.tw-ev--resizing {
 		z-index: 50;
 		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
@@ -1592,14 +1703,20 @@ function onWindowKeydown(e) {
 		gap: 1px;
 		overflow: hidden;
 	}
-	/* Compact (< ~35min at default zoom): single inline line "9:00 Title" */
+	/* Compact (< ~35min at default zoom): one line, "Title 9:00". The title
+	   wins the room: the time wraps onto a second line, which the block
+	   clips, before the title is cut; a title too long alone ellipsizes. */
 	.tw-ev--compact .tw-ev-body {
 		flex-direction: row;
-		align-items: center;
-		gap: 4px;
-		padding-top: 1px;
-		padding-bottom: 1px;
-	}
+		flex-wrap: wrap;
+		align-content: flex-start;
+		align-items: baseline;
+		gap: 24px 5px;
+		padding-top: 2px;
+		padding-bottom: 0;
+	}
+	.tw-ev--compact .tw-ev-title { flex: 0 1 auto; min-width: 0; }
+	.tw-ev--compact .tw-ev-end { display: none; }
 
 	/* Title first, time under it; both one size, rank by weight and ink. */
 	.tw-ev-time {
@@ -1610,7 +1727,6 @@ function onWindowKeydown(e) {
 		white-space: nowrap;
 		flex-shrink: 0;
 	}
-	.tw-ev--compact .tw-ev-time { order: 0; }
 	/* A narrow overlap column keeps the start time whole and drops the end. */
 	@container tw-ev (max-width: 104px) {
 		.tw-ev-end { display: none; }
@@ -1731,13 +1847,13 @@ function onWindowKeydown(e) {
 		box-shadow: none;
 	}
 	.tw-ghost-time {
-		font: 700 12px/1.15 var(--dt-sans, system-ui, sans-serif);
+		font: 500 12.5px/1.15 var(--dt-sans, system-ui, sans-serif);
 		font-variant-numeric: tabular-nums;
 		color: var(--ev-color, var(--dt-accent, #2563eb));
 		white-space: nowrap;
 	}
 	.tw-ghost-title {
-		font: 600 12px/1.2 var(--dt-sans, system-ui, sans-serif);
+		font: 500 12.5px/1.2 var(--dt-sans, system-ui, sans-serif);
 		color: var(--dt-text, rgba(0, 0, 0, 0.87));
 		white-space: nowrap;
 		overflow: hidden;

package/dist/views/shared/format.d.ts

@@ -18,3 +18,6 @@ export interface TimeSlot {
     events: TimelineEvent[];
 }
 export declare function groupIntoSlots(evts: TimelineEvent[]): TimeSlot[];
+/** A day in full, in the locale's own order: "Monday, October 19" (en-US),
+ *  "poniedziałek, 19 października" (pl-PL). For screen-reader names. */
+export declare function dateLong(ms: number, locale?: string): string;

package/dist/views/shared/format.js

@@ -1,4 +1,4 @@
-import { fmtTime as _fmtTime, fmtDuration, getLabels } from '../../core/locale.js';
+import { fmtTime as _fmtTime, fmtDuration, getLabels, getDefaultLocale } from '../../core/locale.js';
 export function fmtTime(d, locale) {
     return _fmtTime(d, locale);
 }
@@ -47,3 +47,12 @@ export function groupIntoSlots(evts) {
     }
     return slots;
 }
+/** A day in full, in the locale's own order: "Monday, October 19" (en-US),
+ *  "poniedziałek, 19 października" (pl-PL). For screen-reader names. */
+export function dateLong(ms, locale) {
+    return new Date(ms).toLocaleDateString(locale ?? getDefaultLocale(), {
+        weekday: 'long',
+        month: 'long',
+        day: 'numeric',
+    });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nomideusz/svelte-calendar",
-  "version": "1.1.1",
+  "version": "1.3.0",
   "description": "A themeable Svelte 5 calendar: day, week, scrolling-week and month views, agenda lists, touch-first mobile layouts, drag-and-drop, timezones, a headless API and an embeddable web component.",
   "type": "module",
   "sideEffects": [
@@ -50,13 +50,11 @@
     "svelte": "^5.29.0"
   },
   "devDependencies": {
-    "@sveltejs/adapter-auto": "^8.0.0",
-    "@sveltejs/adapter-vercel": "^7.0.0",
+    "@sveltejs/adapter-node": "^6.0.0",
     "@sveltejs/kit": "^3.0.0",
     "@sveltejs/package": "^3.0.0",
     "@sveltejs/vite-plugin-svelte": "^7.3.0",
     "@types/node": "^22.20.0",
-    "@vercel/analytics": "^1.6.1",
     "jsdom": "^29.1.1",
     "marked": "^17.0.6",
     "svelte": "^5.57.1",