@nomideusz/svelte-calendar 0.20.1 → 1.0.0

package/dist/views/agenda/AgendaWeek.svelte

@@ -9,11 +9,12 @@
 * Answers: "What's coming up and when do I need to be ready?"
 */
 import { createClock } from "../../core/clock.svelte.js";
-import { sod, DAY_MS, startOfWeek, dayNum, isAllDay, isMultiDay, segmentForDay } from "../../core/time.js";
+import { sod, addDaysMs, startOfWeek, dayNum, isAllDay, isMultiDay, segmentForDay } from "../../core/time.js";
 import { weekdayLong, monthLong } from "../../core/locale.js";
 import { useCalendarContext } from "../shared/context.svelte.js";
 import EventContent from "../shared/EventContent.svelte";
 import { fmtTime, duration, timeUntilMs, progress, groupIntoSlots } from "../shared/format.js";
+import { createSwipe } from "../mobile/swipe.js";
 const ctx = useCalendarContext();
 const L = $derived(ctx.labels);
 let { mondayStart = true, locale, height, events = [], style = "", focusDate, oneventclick, selectedEventId = null } = $props();
@@ -34,6 +35,28 @@ const disabledSet = $derived(ctx.disabledSet);
 function clickDay(ms) {
 	ondayclick?.(new Date(ms));
 }
+/** Keyboard activation for the day header / empty-day row (role="button").
+*  Keys aimed at a control inside a custom dayHeader snippet stay its own. */
+function dayKeydown(e, ms) {
+	if (e.target !== e.currentTarget) return;
+	if (e.key !== "Enter" && e.key !== " ") return;
+	e.preventDefault();
+	clickDay(ms);
+}
+// ── Status suffix (aria) ────────────────────────────
+function statusText(ev) {
+	if (ev.status === "cancelled") return ` (${L.cancelled})`;
+	if (ev.status === "tentative") return ` (${L.tentative})`;
+	if (ev.status === "full") return ` (${L.full})`;
+	if (ev.status === "limited") return ` (${L.limited})`;
+	return "";
+}
+/** All-day events and timed ones at least a (wall-clock) day long go to
+*  the all-day chips; a shorter overnight event is listed with its time on
+*  each day it touches. */
+function inAllDayStrip(ev) {
+	return isAllDay(ev) || ev.end.getTime() >= addDaysMs(ev.start.getTime(), 1);
+}
 // ── Day-to-day card drag (timetable columns) ────────
 // This view has no hour axis, so a drag can only choose a DAY: the card
 // keeps its time of day. Wired through the same oneventmove the planner
@@ -62,34 +85,24 @@ function onDayDrop(e, day) {
 	if (!ev) return;
 	// Same-day drop is a no-op, not a zero-minute "move" for the host to reject.
 	if (sod(ev.start.getTime()) === day.ms) return;
-	const start = new Date(day.ms + (ev.start.getTime() - sod(ev.start.getTime())));
+	// Same wall-clock time on the target day (a fixed ms offset from
+	// midnight is an hour off when a DST change lies between the two).
+	const s = ev.start;
+	const start = new Date(new Date(day.ms).setHours(s.getHours(), s.getMinutes(), s.getSeconds(), s.getMilliseconds()));
 	const end = new Date(start.getTime() + (ev.end.getTime() - ev.start.getTime()));
 	oneventmove?.(ev, start, end);
 }
 // ── Swipe navigation (mobile, touch only) ──────────
-let swipeStartX = 0;
-let swipeStartY = 0;
-let swipeActive = false;
-const SWIPE_THRESHOLD = 50;
-function onPointerDown(e) {
-	if (!isMobile || e.pointerType !== "touch") return;
-	swipeActive = true;
-	swipeStartX = e.clientX;
-	swipeStartY = e.clientY;
-}
-function onPointerUp(e) {
-	if (!swipeActive || e.pointerType !== "touch") return;
-	swipeActive = false;
-	const dx = e.clientX - swipeStartX;
-	const dy = e.clientY - swipeStartY;
-	if (Math.abs(dx) > SWIPE_THRESHOLD && Math.abs(dx) > Math.abs(dy) * 1.4) {
-		if (dx > 0) viewState?.prev();
-		else viewState?.next();
+// Touch events, not pointer events: once the browser claims a touch for
+// panning it sends pointercancel and the pointerup never arrives.
+const swipe = createSwipe({
+	disabled: () => !isMobile,
+	onmove: () => {},
+	onend: (dir) => {
+		if (dir > 0) viewState?.prev();
+		else if (dir < 0) viewState?.next();
 	}
-}
-function onPointerCancel() {
-	swipeActive = false;
-}
+});
 // ── Compact-day disclosure ("+N more" → expand) ─────
 let expandedDays = $state([]);
 function toggleDayExpand(ms) {
@@ -115,14 +128,14 @@ const customDays = $derived(viewState?.dayCount ?? 7);
 const weekDays = $derived.by(() => {
 	const now = clock.tick;
 	const todayMs = clock.today;
-	const tomorrowMs = todayMs + DAY_MS;
+	const tomorrowMs = addDaysMs(todayMs, 1);
 	const out = [];
 	for (let i = 0; i < customDays; i++) {
-		const ms = weekStartMs + i * DAY_MS;
-		const dEnd = ms + DAY_MS;
+		const ms = addDaysMs(weekStartMs, i);
+		const dEnd = addDaysMs(ms, 1);
 		const dayEvts = events.filter((ev) => ev.start.getTime() < dEnd && ev.end.getTime() > ms).sort((a, b) => a.start.getTime() - b.start.getTime());
-		const allDayEvts = dayEvts.filter((ev) => isAllDay(ev) || isMultiDay(ev));
-		const timedEvts = dayEvts.filter((ev) => !isAllDay(ev) && !isMultiDay(ev));
+		const allDayEvts = dayEvts.filter(inAllDayStrip);
+		const timedEvts = dayEvts.filter((ev) => !inAllDayStrip(ev));
 		const totalMinutes = timedEvts.reduce((sum, ev) => {
 			const s = Math.max(ev.start.getTime(), ms);
 			const e = Math.min(ev.end.getTime(), dEnd);
@@ -186,7 +199,7 @@ const weekDays = $derived.by(() => {
 		class:ag-card--full={ev.status === 'full'}
 		class:ag-card--limited={ev.status === 'limited'}
 		style:--ev-color={ev.color || 'var(--dt-accent)'}
-		aria-label="{ev.title}{ev.status === 'cancelled' ? ' (cancelled)' : ''}{ev.status === 'tentative' ? ' (tentative)' : ''}{ev.status === 'full' ? ' (full)' : ''}{ev.status === 'limited' ? ' (limited)' : ''}, {fmt(ev.start)} to {fmt(ev.end)}, {duration(ev)}"
+		aria-label="{ev.title}{statusText(ev)}, {fmt(ev.start)} – {fmt(ev.end)}, {duration(ev)}"
 		class:ag-card--drag={dragId === String(ev.id)}
 		draggable={canDrag(ev)}
 		ondragstart={(e) => onCardDragStart(e, ev)}
@@ -243,7 +256,7 @@ const weekDays = $derived.by(() => {
 		class:ag-compact--full={ev.status === 'full'}
 		class:ag-compact--limited={ev.status === 'limited'}
 		style:--ev-color={ev.color || 'var(--dt-accent)'}
-		aria-label="{ev.title}{done ? `, ${L.completed}` : ''}, {fmt(ev.start)}, {duration(ev)}"
+		aria-label="{ev.title}{statusText(ev)}{done ? `, ${L.completed}` : ''}, {fmt(ev.start)}, {duration(ev)}"
 		onclick={() => handleClick(ev)}
 		onpointerenter={() => oneventhover?.(ev)}
 	>
@@ -283,7 +296,7 @@ const weekDays = $derived.by(() => {
 	</button>
 {/snippet}
 
-<!-- svelte-ignore a11y_no_static_element_interactions -->
+<!-- svelte-ignore a11y_no_static_element_interactions (touch swipe only; no pointer/keyboard role) -->
 <div
 	class="ag ag--week"
 	class:ag--mobile={isMobile}
@@ -291,9 +304,10 @@ const weekDays = $derived.by(() => {
 	class:ag--cols={cols}
 	style={style || undefined}
 	style:height={height ? `${height}px` : undefined}
-	onpointerdown={onPointerDown}
-	onpointerup={onPointerUp}
-	onpointercancel={onPointerCancel}
+	ontouchstart={swipe.ontouchstart}
+	ontouchmove={swipe.ontouchmove}
+	ontouchend={swipe.ontouchend}
+	ontouchcancel={swipe.ontouchcancel}
 >
 	<div class="ag-body" role="list" aria-label={L.weekAhead} style:--ag-cols={weekDays.length}>
 		{#each weekDays as day (day.ms)}
@@ -301,11 +315,15 @@ const weekDays = $derived.by(() => {
 			{#if day.tier === 'past'}
 				<!-- Past day: single collapsed line -->
 				<div class="ag-wday ag-wday--past" class:ag-wday--disabled={disabledSet.has(day.ms)} data-day={day.ms} role="listitem">
-					<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+					<!-- role="button" exactly when ondayclick is set (Calendar always sets it) -->
+					<!-- svelte-ignore a11y_no_static_element_interactions, a11y_no_noninteractive_tabindex -->
 					<div
 						class="ag-wday-head"
 						class:ag-wday-head--click={!!ondayclick}
+						role={ondayclick ? 'button' : undefined}
+						tabindex={ondayclick ? 0 : undefined}
 						onclick={ondayclick ? () => clickDay(day.ms) : undefined}
+						onkeydown={ondayclick ? (e) => dayKeydown(e, day.ms) : undefined}
 					>
 						<div class="ag-wday-head-left">
 							<span class="ag-wday-name">{day.dayName}</span>
@@ -353,11 +371,15 @@ const weekDays = $derived.by(() => {
 				ondrop={(e) => onDayDrop(e, day)}
 			>
 				<!-- Day header -->
-				<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+				<!-- role="button" exactly when ondayclick is set (Calendar always sets it) -->
+				<!-- svelte-ignore a11y_no_static_element_interactions, a11y_no_noninteractive_tabindex -->
 				<div
 					class="ag-wday-head"
 					class:ag-wday-head--click={!!ondayclick}
+					role={ondayclick ? 'button' : undefined}
+					tabindex={ondayclick ? 0 : undefined}
 					onclick={ondayclick ? () => clickDay(day.ms) : undefined}
+					onkeydown={ondayclick ? (e) => dayKeydown(e, day.ms) : undefined}
 				>
 					<div class="ag-wday-head-left">
 						{#if day.isToday}
@@ -400,11 +422,14 @@ const weekDays = $derived.by(() => {
 				{/if}
 
 				{#if day.events.length === 0}
-					<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
+					<!-- svelte-ignore a11y_no_static_element_interactions, a11y_no_noninteractive_tabindex -->
 					<div
 						class="ag-wday-empty"
 						class:ag-wday-empty--click={!!ondayclick}
+						role={ondayclick ? 'button' : undefined}
+						tabindex={ondayclick ? 0 : undefined}
 						onclick={ondayclick ? () => clickDay(day.ms) : undefined}
+						onkeydown={ondayclick ? (e) => dayKeydown(e, day.ms) : undefined}
 					>{L.noEvents}</div>
 				{:else if compact && !cols}
 					<!-- Compact: minimal dot + time + title rows for all days.
@@ -772,6 +797,12 @@ const weekDays = $derived.by(() => {
 	.ag-wday-empty--click {
 		cursor: pointer;
 	}
+	.ag-wday-head--click:focus-visible,
+	.ag-wday-empty--click:focus-visible {
+		outline: 2px solid var(--dt-accent, #2563eb);
+		outline-offset: -2px;
+		border-radius: 4px;
+	}
 	.ag-wday-head {
 		display: flex;
 		justify-content: space-between;
@@ -1119,6 +1150,12 @@ const weekDays = $derived.by(() => {
 	}
 
 	/* ═══ Mobile adaptations ═══ */
+	/* Horizontal swipes are ours (week navigation); the browser keeps
+	   vertical scrolling and pinch-zoom. */
+	.ag--mobile,
+	.ag--mobile .ag-body {
+		touch-action: pan-y pinch-zoom;
+	}
 	.ag--mobile .ag-wday-head {
 		padding: 12px 16px;
 	}

package/dist/views/index.d.ts

@@ -1,3 +1,5 @@
 export { default as Planner } from './planner/Planner.svelte';
+export { default as PlannerScroll } from './planner/PlannerScroll.svelte';
 export { default as Agenda } from './agenda/Agenda.svelte';
 export { default as Mobile } from './mobile/Mobile.svelte';
+export { default as MonthGrid } from './month/MonthGrid.svelte';

package/dist/views/index.js

@@ -1,3 +1,5 @@
 export { default as Planner } from './planner/Planner.svelte';
+export { default as PlannerScroll } from './planner/PlannerScroll.svelte';
 export { default as Agenda } from './agenda/Agenda.svelte';
 export { default as Mobile } from './mobile/Mobile.svelte';
+export { default as MonthGrid } from './month/MonthGrid.svelte';

package/dist/views/mobile/MobileDay.svelte

@@ -9,7 +9,7 @@
 import { useCalendarContext } from "../shared/context.svelte.js";
 import EventContent from "../shared/EventContent.svelte";
 import { createClock } from "../../core/clock.svelte.js";
-import { DAY_MS, HOUR_MS, sod, isAllDay, isMultiDay, segmentForDay } from "../../core/time.js";
+import { HOUR_MS, sod, addDaysMs, diffDays, isAllDay, segmentForDay } from "../../core/time.js";
 import { fmtH, fmtTime } from "../../core/locale.js";
 import { createSwipe } from "./swipe.js";
 let { height = null, events = [], style = "", locale, focusDate, oneventclick, oneventcreate, selectedEventId = null, readOnly = false, visibleHours } = $props();
@@ -27,6 +27,36 @@ const drag = $derived(ctx.drag);
 const commitDragCtx = $derived(ctx.commitDrag);
 const SNAP_MS = $derived(ctx.snapInterval * 6e4);
 const clock = createClock(ctx.timezone);
+// ── Wall-clock time axis ───────────────────────────
+// The grid is 24 wall-clock rows. A DST day is 23 or 25 hours long, so
+// `dayMs + h * HOUR_MS` lands an hour off after the change: every
+// hour ↔ instant conversion goes through the local calendar instead.
+/** Fractional wall-clock hour `hour` on the day starting at `dayMs` → epoch ms. */
+function atHour(day, hour) {
+	// MakeTime sums the fields in local time, so 24 → next midnight.
+	return new Date(day).setHours(0, 0, 0, Math.round(hour * HOUR_MS));
+}
+/** Epoch ms → fractional wall-clock hour counted from the day at `day`
+*  (24 = the next midnight; calendar days, not 24 h steps). */
+function hourOf(ms, day) {
+	const d = new Date(ms);
+	return diffDays(ms, day) * 24 + d.getHours() + d.getMinutes() / 60 + d.getSeconds() / 3600 + d.getMilliseconds() / HOUR_MS;
+}
+/** Snap a fractional hour to the snap interval in wall-clock minutes of
+*  the local day (not UTC multiples — those are off in +05:30 zones). */
+function snapHour(hour, how) {
+	const step = Math.max(1, ctx.snapInterval);
+	const units = hour * 60 / step;
+	// Epsilon: 10:15 must not floor to 10:00 (or ceil to 10:30) through float noise.
+	const n = how === "floor" ? Math.floor(units + 1e-9) : how === "ceil" ? Math.ceil(units - 1e-9) : Math.round(units);
+	return n * step / 60;
+}
+/** Timed events at least a (wall-clock) day long, and all-day ones, sit in
+*  the all-day strip; a shorter overnight event is drawn in the grid,
+*  clipped to this day. */
+function inAllDayStrip(ev) {
+	return isAllDay(ev) || ev.end.getTime() >= addDaysMs(ev.start.getTime(), 1);
+}
 // ── Config ─────────────────────────────────────────
 const HOUR_HEIGHT = 64;
 const GUTTER_W = 40;
@@ -36,14 +66,14 @@ const hourCount = $derived(Math.max(1, endHour - startHour));
 const gridHeight = $derived(hourCount * HOUR_HEIGHT);
 // ── Day state ──────────────────────────────────────
 const dayMs = $derived(focusDate ? sod(focusDate.getTime()) : clock.today);
-const dayEnd = $derived(dayMs + DAY_MS);
+const dayEnd = $derived(addDaysMs(dayMs, 1));
 const isToday = $derived(dayMs === clock.today);
 const isDisabled = $derived(disabledSet.has(dayMs));
 // ── Load range ─────────────────────────────────────
 $effect(() => {
 	if (!loadRangeCtx) return;
-	const rangeStart = new Date(dayMs - 2 * DAY_MS);
-	const rangeEnd = new Date(dayMs + 3 * DAY_MS);
+	const rangeStart = new Date(addDaysMs(dayMs, -2));
+	const rangeEnd = new Date(addDaysMs(dayMs, 3));
 	loadRangeCtx.set({
 		start: rangeStart,
 		end: rangeEnd
@@ -51,11 +81,11 @@ $effect(() => {
 	return () => loadRangeCtx.set(null);
 });
 // ── Events partition ───────────────────────────────
-const timedEvents = $derived(events.filter((ev) => !isAllDay(ev) && !isMultiDay(ev) && ev.start.getTime() < dayEnd && ev.end.getTime() > dayMs).sort((a, b) => a.start.getTime() - b.start.getTime()));
+const timedEvents = $derived(events.filter((ev) => !inAllDayStrip(ev) && ev.start.getTime() < dayEnd && ev.end.getTime() > dayMs).sort((a, b) => a.start.getTime() - b.start.getTime()));
 const allDayEvents = $derived.by(() => {
 	const segs = [];
 	for (const ev of events) {
-		if (!isAllDay(ev) && !isMultiDay(ev)) continue;
+		if (!inAllDayStrip(ev)) continue;
 		const seg = segmentForDay(ev, dayMs);
 		if (seg) segs.push(seg);
 	}
@@ -82,27 +112,38 @@ const positionedEvents = $derived.by(() => {
 		}
 	}
 	// Overlap grouping
-	const infos = sorted.map((ev) => {
+	const bandStart = atHour(dayMs, startHour);
+	const bandEnd = atHour(dayMs, endHour);
+	const infos = sorted.flatMap((ev) => {
 		// While resizing, this event tracks the tentative drag payload
 		const resizing = rsP?.eventId === ev.id;
 		const evStart = resizing ? rsP.start : ev.start;
 		const evEnd = resizing ? rsP.end : ev.end;
-		const sMs = Math.max(evStart.getTime(), dayMs + startHour * HOUR_MS);
-		const eMs = Math.min(evEnd.getTime(), dayMs + endHour * HOUR_MS);
-		const topH = (sMs - dayMs) / HOUR_MS - startHour;
-		const botH = (eMs - dayMs) / HOUR_MS - startHour;
-		return {
+		const s0 = evStart.getTime();
+		const e0 = evEnd.getTime();
+		const sMs = Math.max(s0, bandStart);
+		const eMs = Math.min(e0, bandEnd);
+		// Outside the visible hours: nothing to draw (a zero-length marker
+		// counts only when it sits inside them).
+		if (eMs < sMs || eMs === sMs && (s0 !== e0 || s0 < bandStart || s0 >= bandEnd)) return [];
+		const topH = hourOf(sMs, dayMs) - startHour;
+		const botH = hourOf(eMs, dayMs) - startHour;
+		return [{
 			ev,
 			top: topH * HOUR_HEIGHT,
 			height: Math.max(24, (botH - topH) * HOUR_HEIGHT),
 			isCurrent: ev.start.getTime() <= now && ev.end.getTime() > now,
 			isNext: ev.id === nextEventId,
 			isResizing: resizing,
+			// Grips only on the edges that are the event's own — not where the
+			// day or the visible hours cut it.
+			hasStart: s0 >= Math.max(dayMs, bandStart),
+			hasEnd: e0 <= Math.min(dayEnd, bandEnd),
 			startMs: sMs,
 			endMs: eMs,
 			col: 0,
 			totalCols: 1
-		};
+		}];
 	});
 	// Assign columns for overlapping events
 	const par = infos.map((_, i) => i);
@@ -151,6 +192,8 @@ const positionedEvents = $derived.by(() => {
 		isCurrent: info.isCurrent,
 		isNext: info.isNext,
 		isResizing: info.isResizing,
+		hasStart: info.hasStart,
+		hasEnd: info.hasEnd,
 		col: info.col,
 		totalCols: info.totalCols
 	}));
@@ -158,7 +201,7 @@ const positionedEvents = $derived.by(() => {
 // ── Now indicator ──────────────────────────────────
 const nowOffset = $derived.by(() => {
 	if (!isToday) return -1;
-	const h = (clock.tick - dayMs) / HOUR_MS - startHour;
+	const h = hourOf(clock.tick, dayMs) - startHour;
 	if (h < 0 || h > hourCount) return -1;
 	return h * HOUR_HEIGHT;
 });
@@ -184,8 +227,14 @@ function statusText(ev) {
 let swipeOffset = $state(0);
 let swipeAnimate = $state(false);
 const swipe = createSwipe({
-	disabled: () => !!drag?.active || mbCreateStarted || mbRsStarted || longPressTimer !== null,
+	// A pending long-press must not block the swipe: pointerdown arms it
+	// before touchstart, so the swipe would never track. A horizontal move
+	// past the long-press tolerance cancels the pending create instead.
+	disabled: () => !!drag?.active || mbCreateStarted || mbRsStarted,
 	onmove: (dx) => {
+		if (longPressTimer !== null && !mbCreateStarted && Math.abs(dx) > LONG_PRESS_TOLERANCE) {
+			cleanupGridCreate();
+		}
 		swipeAnimate = false;
 		swipeOffset = dx;
 	},
@@ -211,9 +260,9 @@ function handleGridClick(e) {
 	}
 	if (!oneventcreate || readOnly || isDisabled) return;
 	if (e.target.closest(".mb-event")) return;
-	const tMs = gridTimeMs(e.clientY);
-	if (isBlockedAt((tMs - dayMs) / HOUR_MS)) return;
-	const startMs = clampToDay(Math.floor(tMs / SNAP_MS) * SNAP_MS);
+	const hour = gridHour(e.clientY);
+	if (isBlockedAt(hour)) return;
+	const startMs = clampToDay(atHour(dayMs, snapHour(hour, "floor")));
 	const durMin = minDuration ?? 60;
 	oneventcreate({
 		start: new Date(startMs),
@@ -226,9 +275,9 @@ function onGridKeydown(e) {
 	if (e.key !== "Enter" && e.key !== " ") return;
 	if (!oneventcreate || readOnly || isDisabled) return;
 	e.preventDefault();
-	const raw = isToday ? clock.tick : dayMs + startHour * HOUR_MS;
-	const startMs = clampToDay(Math.ceil(raw / SNAP_MS) * SNAP_MS);
-	if (isBlockedAt((startMs - dayMs) / HOUR_MS)) return;
+	const rawHour = isToday ? hourOf(clock.tick, dayMs) : startHour;
+	const startMs = clampToDay(atHour(dayMs, snapHour(rawHour, "ceil")));
+	if (isBlockedAt(hourOf(startMs, dayMs))) return;
 	const durMin = minDuration ?? 60;
 	oneventcreate({
 		start: new Date(startMs),
@@ -265,20 +314,23 @@ function clearLongPress() {
 		longPressTimer = null;
 	}
 }
-/** Pointer Y → epoch ms within the day grid (accounts for scroll). */
-function gridTimeMs(clientY) {
+/** Pointer Y → fractional wall-clock hour of this day (accounts for scroll). */
+function gridHour(clientY) {
 	const rect = gridEl.getBoundingClientRect();
 	const y = clientY - rect.top + gridEl.scrollTop;
-	return dayMs + (startHour + y / HOUR_HEIGHT) * HOUR_MS;
+	return startHour + y / HOUR_HEIGHT;
+}
+/** Pointer Y → wall-clock time snapped to the interval, clamped to the band. */
+function gridSnapped(clientY, how) {
+	return clampToDay(atHour(dayMs, snapHour(gridHour(clientY), how)));
 }
 /** Clamp a timestamp into the visible hour range of this day. */
 function clampToDay(ms) {
-	return Math.max(dayMs + startHour * HOUR_MS, Math.min(dayMs + endHour * HOUR_MS, ms));
+	return Math.max(atHour(dayMs, startHour), Math.min(atHour(dayMs, endHour), ms));
 }
 function startGridCreate() {
 	if (!drag) return;
 	mbCreateStarted = true;
-	mbCreateAnchorMs = clampToDay(Math.floor(mbCreateAnchorMs / SNAP_MS) * SNAP_MS);
 	drag.beginCreate(new Date(mbCreateAnchorMs), new Date(mbCreateAnchorMs + SNAP_MS));
 	addTouchScrollBlock();
 }
@@ -287,7 +339,7 @@ function onGridPointerDown(e) {
 	if (e.target.closest(".mb-event")) return;
 	mbCreateStartX = e.clientX;
 	mbCreateStartY = e.clientY;
-	mbCreateAnchorMs = gridTimeMs(e.clientY);
+	mbCreateAnchorMs = gridSnapped(e.clientY, "floor");
 	mbCreateStarted = false;
 	if (e.pointerType === "touch") {
 		longPressTimer = setTimeout(() => {
@@ -312,7 +364,7 @@ function onGridCreateMove(e) {
 		if (Math.abs(e.clientY - mbCreateStartY) < CREATE_THRESHOLD) return;
 		startGridCreate();
 	}
-	const snapped = clampToDay(Math.round(gridTimeMs(e.clientY) / SNAP_MS) * SNAP_MS);
+	const snapped = gridSnapped(e.clientY, "round");
 	drag.updatePointer(new Date(Math.min(mbCreateAnchorMs, snapped)), new Date(Math.max(mbCreateAnchorMs + SNAP_MS, snapped)));
 }
 function cleanupGridCreate() {
@@ -370,7 +422,7 @@ function onResizeMove(e) {
 		drag.beginResize(ev.id, mbRsEdge, ev.start, ev.end);
 		addTouchScrollBlock();
 	}
-	const snapped = clampToDay(Math.round(gridTimeMs(e.clientY) / SNAP_MS) * SNAP_MS);
+	const snapped = gridSnapped(e.clientY, "round");
 	if (mbRsEdge === "end") {
 		const end = Math.max(snapped, ev.start.getTime() + SNAP_MS);
 		drag.updatePointer(ev.start, new Date(end));
@@ -562,24 +614,29 @@ $effect(() => {
 							<span class="mb-ev-next-badge">{L.upNext}</span>
 						{/if}
 						{#if !readOnly && !p.ev.data?.readOnly}
-							<span
-								class="mb-ev-handle mb-ev-handle--start"
-								aria-hidden="true"
-								onpointerdown={(e) => onResizePointerDown(e, p.ev, 'start')}
-							></span>
-							<span
-								class="mb-ev-handle mb-ev-handle--end"
-								aria-hidden="true"
-								onpointerdown={(e) => onResizePointerDown(e, p.ev, 'end')}
-							></span>
+							{#if p.hasStart}
+								<span
+									class="mb-ev-handle mb-ev-handle--start"
+									aria-hidden="true"
+									onpointerdown={(e) => onResizePointerDown(e, p.ev, 'start')}
+								></span>
+							{/if}
+							{#if p.hasEnd}
+								<span
+									class="mb-ev-handle mb-ev-handle--end"
+									aria-hidden="true"
+									onpointerdown={(e) => onResizePointerDown(e, p.ev, 'end')}
+								></span>
+							{/if}
 						{/if}
 					</button>
 				{/each}
 
 				<!-- Drag-to-create ghost -->
 				{#if !readOnly && drag?.active && drag.mode === 'create' && drag.payload}
-					{@const gTop = ((drag.payload.start.getTime() - dayMs) / HOUR_MS - startHour) * HOUR_HEIGHT}
-					{@const gH = Math.max(12, ((drag.payload.end.getTime() - drag.payload.start.getTime()) / HOUR_MS) * HOUR_HEIGHT)}
+					{@const gTopH = hourOf(drag.payload.start.getTime(), dayMs)}
+					{@const gTop = (gTopH - startHour) * HOUR_HEIGHT}
+					{@const gH = Math.max(12, (hourOf(drag.payload.end.getTime(), dayMs) - gTopH) * HOUR_HEIGHT)}
 					<div class="mb-create-ghost" style:top="{gTop}px" style:height="{gH}px" aria-hidden="true">
 						<span class="mb-create-ghost-time">
 							{fmtTime(drag.payload.start, locale)} – {fmtTime(drag.payload.end, locale)}
@@ -613,7 +670,7 @@ $effect(() => {
 		overflow: hidden;
 		background: var(--dt-bg, #fff);
 		-webkit-tap-highlight-color: transparent;
-		touch-action: pan-y;
+		touch-action: pan-y pinch-zoom;
 	}
 	.mb--auto { overflow: visible; }
 

package/dist/views/mobile/MobileWeek.svelte

@@ -8,7 +8,7 @@
 <script lang="ts">import { useCalendarContext } from "../shared/context.svelte.js";
 import EventContent from "../shared/EventContent.svelte";
 import { createClock } from "../../core/clock.svelte.js";
-import { DAY_MS, sod, isAllDay, isMultiDay } from "../../core/time.js";
+import { sod, addDaysMs, isAllDay } from "../../core/time.js";
 import { startOfWeek as sowFn } from "../../core/time.js";
 import { fmtTime as _fmtTime, weekdayShort } from "../../core/locale.js";
 import { createSwipe } from "./swipe.js";
@@ -35,8 +35,8 @@ const weekStart = $derived(customDays === 7 ? sowFn(focusMs, mondayStart) : sod(
 // ── Load range ─────────────────────────────────────
 $effect(() => {
 	if (!loadRangeCtx) return;
-	const rangeStart = new Date(weekStart - 7 * DAY_MS);
-	const rangeEnd = new Date(weekStart + (customDays + 7) * DAY_MS);
+	const rangeStart = new Date(addDaysMs(weekStart, -7));
+	const rangeEnd = new Date(addDaysMs(weekStart, customDays + 7));
 	loadRangeCtx.set({
 		start: rangeStart,
 		end: rangeEnd
@@ -47,7 +47,7 @@ const dayCells = $derived.by(() => {
 	const result = [];
 	const hideSet = new Set(hideDays ?? []);
 	for (let i = 0; i < customDays; i++) {
-		const ms = weekStart + i * DAY_MS;
+		const ms = addDaysMs(weekStart, i);
 		const d = new Date(ms);
 		const jsDay = d.getDay();
 		const isoDay = jsDay === 0 ? 7 : jsDay;
@@ -56,9 +56,9 @@ const dayCells = $derived.by(() => {
 		const isPast = equalDays ? false : ms < todayMs;
 		const isWeekend = jsDay === 0 || jsDay === 6;
 		const isDisabled = disabledSet.has(ms);
-		const dayEnd = ms + DAY_MS;
+		const dayEnd = addDaysMs(ms, 1);
 		const dayEvents = events.filter((ev) => ev.start.getTime() < dayEnd && ev.end.getTime() > ms).sort((a, b) => a.start.getTime() - b.start.getTime());
-		const allDayCount = dayEvents.filter((ev) => isAllDay(ev) || isMultiDay(ev)).length;
+		const allDayCount = dayEvents.filter(inAllDayStrip).length;
 		result.push({
 			ms,
 			dayNum: d.getDate(),
@@ -86,10 +86,22 @@ function toggleExpand(ms) {
 function fmtTime(d) {
 	return _fmtTime(d, locale);
 }
+/** All-day events and timed ones at least a (wall-clock) day long read as
+*  "All day"; a shorter overnight event keeps its time on both days. */
+function inAllDayStrip(ev) {
+	return isAllDay(ev) || ev.end.getTime() >= addDaysMs(ev.start.getTime(), 1);
+}
 function evTimeLabel(ev) {
-	if (isAllDay(ev) || isMultiDay(ev)) return L.allDay;
+	if (inAllDayStrip(ev)) return L.allDay;
 	return `${fmtTime(ev.start)} – ${fmtTime(ev.end)}`;
 }
+/** Visible time on a day row: the start, or "until 01:00" on the day an
+*  overnight event runs into. */
+function evRowTime(ev, dayMs) {
+	if (inAllDayStrip(ev)) return L.allDay;
+	if (ev.start.getTime() < dayMs) return `${L.until} ${fmtTime(ev.end)}`;
+	return fmtTime(ev.start);
+}
 function statusText(ev) {
 	if (ev.status === "cancelled") return ` (${L.cancelled})`;
 	if (ev.status === "tentative") return ` (${L.tentative})`;
@@ -98,6 +110,13 @@ function statusText(ev) {
 	return "";
 }
 // ── Touch swipe ────────────────────────────────────
+let listEl = $state(null);
+// A new week starts at its first day: the list's scroll offset belongs to
+// the week that was showing (swipe, header nav, or a host date change).
+$effect(() => {
+	void weekStart;
+	if (listEl) listEl.scrollTop = 0;
+});
 let swipeOffset = $state(0);
 let swipeAnimate = $state(false);
 const swipe = createSwipe({
@@ -155,6 +174,7 @@ function handleDayKeydown(e, dayMs) {
 	<!-- Vertical day list -->
 	<div
 		class="mw-list"
+		bind:this={listEl}
 		class:mw-list--animate={swipeAnimate}
 		style:transform={swipeOffset !== 0 ? `translateX(${swipeOffset}px)` : undefined}
 		role="list"
@@ -195,8 +215,8 @@ function handleDayKeydown(e, dayMs) {
 								type="button"
 								class="mw-ev"
 								class:mw-ev--selected={selectedEventId === ev.id}
-								class:mw-ev--allday={isAllDay(ev) || isMultiDay(ev)}
-								class:mw-ev--current={!isAllDay(ev) && !isMultiDay(ev) && ev.start.getTime() <= clock.tick && ev.end.getTime() > clock.tick}
+								class:mw-ev--allday={inAllDayStrip(ev)}
+								class:mw-ev--current={!inAllDayStrip(ev) && ev.start.getTime() <= clock.tick && ev.end.getTime() > clock.tick}
 								class:mw-ev--cancelled={ev.status === 'cancelled'}
 								class:mw-ev--tentative={ev.status === 'tentative'}
 								class:mw-ev--full={ev.status === 'full'}
@@ -211,11 +231,7 @@ function handleDayKeydown(e, dayMs) {
 								<div class="mw-ev-body">
 									<EventContent event={ev}>
 									<span class="mw-ev-title">{ev.title}</span>
-									{#if isAllDay(ev) || isMultiDay(ev)}
-										<span class="mw-ev-time">{L.allDay}</span>
-									{:else}
-										<span class="mw-ev-time">{fmtTime(ev.start)}</span>
-									{/if}
+									<span class="mw-ev-time">{evRowTime(ev, cell.ms)}</span>
 									</EventContent>
 								</div>
 							</button>
@@ -251,7 +267,7 @@ function handleDayKeydown(e, dayMs) {
 		overflow: hidden;
 		background: var(--dt-bg, #fff);
 		-webkit-tap-highlight-color: transparent;
-		touch-action: pan-y;
+		touch-action: pan-y pinch-zoom;
 	}
 	.mw--auto { overflow: visible; }
 

package/dist/views/mobile/swipe.js

@@ -22,6 +22,11 @@ export function createSwipe(cb) {
     }
     return {
         ontouchstart(e) {
+            // A second finger (pinch-zoom) is never a swipe.
+            if (e.touches.length > 1) {
+                abandon();
+                return;
+            }
             if (cb.disabled?.()) {
                 tracking = false;
                 return;
@@ -35,7 +40,7 @@ export function createSwipe(cb) {
         ontouchmove(e) {
             if (!tracking)
                 return;
-            if (cb.disabled?.()) {
+            if (e.touches.length > 1 || cb.disabled?.()) {
                 abandon();
                 return;
             }