@nomideusz/svelte-calendar 0.20.0 → 0.21.0

package/README.md

@@ -34,7 +34,9 @@ That's it — 6 views (Day/Week × Planner, Agenda, Mobile), auto-coloring, drag
 ## Views
 
 Switch between **Planner** (time grid), **Scroll** (weeks stacked in one
-vertical scroller — drag to move, drop onto a day, scrolls under a drag),
+vertical scroller, Hey-Calendar style — each class at the height of its
+start time, month names down the side; drag to move, drop onto a day,
+scrolls under a drag),
 **Agenda** (list) and the **Month** grid:
 
 ```svelte

package/dist/adapters/recurring.js

@@ -1,4 +1,4 @@
-import { startOfWeek, DAY_MS } from '../core/time.js';
+import { startOfWeek, addDaysMs, diffDays, DAY_MS } from '../core/time.js';
 import { VIVID_PALETTE } from '../core/palette.js';
 // ── Helpers ─────────────────────────────────────────────
 /** Parse "HH:MM" into [hours, minutes] */
@@ -100,14 +100,14 @@ function computeUntilFromCount(rec, startDateObj, mondayStart) {
             const maxCycles = Math.ceil(count / days.length) + 2;
             for (let c = 0; c < maxCycles; c++) {
                 for (const day of days) {
-                    const dayMs = weekMs + isoWeekdayToOffset(day) * DAY_MS;
+                    const dayMs = addDaysMs(weekMs, isoWeekdayToOffset(day));
                     if (dayMs >= startMs) {
                         remaining--;
                         if (remaining === 0)
                             return new Date(dayMs);
                     }
                 }
-                weekMs += interval * 7 * DAY_MS;
+                weekMs = addDaysMs(weekMs, interval * 7);
             }
             return undefined;
         }
@@ -165,16 +165,16 @@ function projectWeekly(rec, range, startDate, effectiveUntil, mondayStart, out)
         weekMs = anchorWeekMs;
     }
     else {
-        const weeksBetween = Math.floor((rangeStartMs - anchorWeekMs) / (7 * DAY_MS));
+        const weeksBetween = Math.floor(diffDays(rangeStartMs, anchorWeekMs) / 7);
         const skip = Math.floor(weeksBetween / interval);
-        weekMs = anchorWeekMs + skip * interval * 7 * DAY_MS;
-        if (weekMs + 7 * DAY_MS <= rangeStartMs) {
-            weekMs += interval * 7 * DAY_MS;
+        weekMs = addDaysMs(anchorWeekMs, skip * interval * 7);
+        if (addDaysMs(weekMs, 7) <= rangeStartMs) {
+            weekMs = addDaysMs(weekMs, interval * 7);
         }
     }
     while (weekMs < rangeEndMs) {
         for (const day of days) {
-            const dayMs = weekMs + isoWeekdayToOffset(day) * DAY_MS;
+            const dayMs = addDaysMs(weekMs, isoWeekdayToOffset(day));
             if (startDateMs != null && dayMs < startDateMs)
                 continue;
             if (dayMs >= rangeEndMs)
@@ -187,7 +187,7 @@ function projectWeekly(rec, range, startDate, effectiveUntil, mondayStart, out)
                 out.push(ev);
             }
         }
-        weekMs += interval * 7 * DAY_MS;
+        weekMs = addDaysMs(weekMs, interval * 7);
     }
 }
 function projectMonthly(rec, range, startDate, effectiveUntil, out) {

package/dist/core/locale.js

@@ -7,7 +7,7 @@
  * For date-fns locale integration later, this module can import from
  * `date-fns/locale/*` and pass to `format()`.
  */
-import { DAY_MS } from './time.js';
+import { addDaysMs } from './time.js';
 /** English defaults — used unless overridden via `setLabels()`. */
 export const defaultLabels = {
     today: 'Today',
@@ -155,9 +155,9 @@ export function fmtDay(ms, todayMs, opts, locale) {
     const L = _labels;
     if (ms === todayMs)
         return opts?.short ? L.today : `${L.today} · ${short}`;
-    if (ms === todayMs - DAY_MS)
+    if (ms === addDaysMs(todayMs, -1))
         return opts?.short ? L.yesterday : `${L.yesterday} · ${short}`;
-    if (ms === todayMs + DAY_MS)
+    if (ms === addDaysMs(todayMs, 1))
         return opts?.short ? L.tomorrow : `${L.tomorrow} · ${short}`;
     if (opts?.short) {
         return new Date(ms).toLocaleDateString(loc, { weekday: 'short', day: 'numeric' });
@@ -170,7 +170,7 @@ export function fmtDay(ms, todayMs, opts, locale) {
 export function fmtWeekRange(weekStartMs, locale, weekEndMs) {
     const loc = locale ?? defaultLocale;
     const s = new Date(weekStartMs);
-    const e = new Date(weekEndMs ?? weekStartMs + 6 * DAY_MS);
+    const e = new Date(weekEndMs ?? addDaysMs(weekStartMs, 6));
     const sm = s.toLocaleDateString(loc, { month: 'short' });
     const em = e.toLocaleDateString(loc, { month: 'short' });
     const sy = s.getFullYear();

package/dist/core/time.js

@@ -74,8 +74,7 @@ export function isMultiDay(ev) {
 export function isAllDay(ev) {
     if (ev.allDay)
         return true;
-    const duration = ev.end.getTime() - ev.start.getTime();
-    if (duration < DAY_MS)
+    if (ev.end.getTime() < addDaysMs(ev.start.getTime(), 1))
         return false;
     const s = ev.start;
     return s.getHours() === 0 && s.getMinutes() === 0 && s.getSeconds() === 0;
@@ -86,7 +85,7 @@ export function isAllDay(ev) {
  */
 export function segmentForDay(ev, dayMs) {
     const dayStart = sod(dayMs);
-    const dayEnd = dayStart + DAY_MS;
+    const dayEnd = addDaysMs(dayStart, 1);
     const evStart = ev.start.getTime();
     const evEnd = ev.end.getTime();
     // No overlap
@@ -95,8 +94,8 @@ export function segmentForDay(ev, dayMs) {
     const firstDayMs = sod(evStart);
     // For end time: if event ends exactly at midnight, last day is the day before
     const lastDayMs = sod(evEnd - 1);
-    const totalDays = Math.floor((lastDayMs - firstDayMs) / DAY_MS) + 1;
-    const dayIndex = Math.floor((dayStart - firstDayMs) / DAY_MS) + 1;
+    const totalDays = diffDays(lastDayMs, firstDayMs) + 1;
+    const dayIndex = diffDays(dayStart, firstDayMs) + 1;
     return {
         ev,
         start: new Date(Math.max(evStart, dayStart)),

package/dist/engine/event-store.svelte.js

@@ -17,7 +17,7 @@
  */
 import { SvelteMap } from 'svelte/reactivity';
 import { untrack } from 'svelte';
-import { sod, DAY_MS } from '../core/time.js';
+import { sod, addDaysMs } from '../core/time.js';
 /**
  * Create a reactive event store backed by a CalendarAdapter.
  *
@@ -103,7 +103,7 @@ export function createEventStore(adapter) {
         },
         forDay(date) {
             const dayStart = new Date(sod(date.getTime()));
-            const dayEnd = new Date(dayStart.getTime() + DAY_MS);
+            const dayEnd = new Date(addDaysMs(dayStart.getTime(), 1));
             return eventArray.filter((ev) => overlaps(ev, dayStart, dayEnd));
         },
         byId(id) {

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

@@ -11,7 +11,7 @@
  *   vs.prev()      — go back one period
  *   vs.goToday()   — jump to today
  */
-import { startOfWeek as calcStartOfWeek, addDaysMs, DAY_MS } from '../core/time.js';
+import { startOfWeek as calcStartOfWeek, addDaysMs } from '../core/time.js';
 function inferMode(view) {
     if (view.startsWith('day'))
         return 'day';
@@ -23,7 +23,7 @@ function computeRange(focus, mode, mondayStart, dayCount = 7) {
     if (mode === 'day') {
         const start = new Date(focus);
         start.setHours(0, 0, 0, 0);
-        const end = new Date(start.getTime() + DAY_MS);
+        const end = new Date(addDaysMs(start.getTime(), 1));
         return { start, end };
     }
     if (mode === 'month') {
@@ -48,7 +48,7 @@ function computeRange(focus, mode, mondayStart, dayCount = 7) {
     start.setHours(0, 0, 0, 0);
     return {
         start,
-        end: new Date(start.getTime() + dayCount * DAY_MS),
+        end: new Date(addDaysMs(start.getTime(), dayCount)),
     };
 }
 export function createViewState(options = {}) {

package/dist/headless/create-agenda.svelte.js

@@ -33,7 +33,7 @@
 import { untrack } from 'svelte';
 import { createEventStore } from '../engine/event-store.svelte.js';
 import { createClock } from '../core/clock.svelte.js';
-import { sod, DAY_MS, isAllDay, isMultiDay } from '../core/time.js';
+import { sod, addDaysMs, isAllDay, isMultiDay } from '../core/time.js';
 import { fmtTime as _fmtTime, fmtDuration } from '../core/locale.js';
 import { timeUntilMs, progress as _progress, groupIntoSlots } from '../views/shared/format.js';
 // ─── Implementation ─────────────────────────────────────
@@ -49,17 +49,17 @@ export function createAgenda(options) {
     // ── Load events for focus date range ──
     $effect(() => {
         const start = new Date(focusDayMs);
-        const end = new Date(focusDayMs + lookahead * DAY_MS);
+        const end = new Date(addDaysMs(focusDayMs, lookahead));
         store.load({ start, end });
     });
     // Eager initial load
     untrack(() => {
         const start = new Date(focusDayMs);
-        const end = new Date(focusDayMs + lookahead * DAY_MS);
+        const end = new Date(addDaysMs(focusDayMs, lookahead));
         store.load({ start, end });
     });
     // ── Day derivations ──
-    const dayEnd = $derived(focusDayMs + DAY_MS);
+    const dayEnd = $derived(addDaysMs(focusDayMs, 1));
     const isToday = $derived(focusDayMs === clock.today);
     const isPast = $derived(focusDayMs < clock.today);
     const isFuture = $derived(focusDayMs > clock.today);
@@ -93,8 +93,8 @@ export function createAgenda(options) {
         return { past, current, upcoming, upcomingSlots: groupIntoSlots(upcoming) };
     });
     // ── Navigation ──
-    function prev() { focusDayMs = focusDayMs - DAY_MS; }
-    function next() { focusDayMs = focusDayMs + DAY_MS; }
+    function prev() { focusDayMs = addDaysMs(focusDayMs, -1); }
+    function next() { focusDayMs = addDaysMs(focusDayMs, 1); }
     function goToday() { focusDayMs = clock.today; }
     function setDate(date) { focusDayMs = sod(date.getTime()); }
     // ── Format helpers ──

package/dist/headless/create-calendar.svelte.js

@@ -46,7 +46,7 @@ import { toZonedTime, fromZonedTime, wrapAdapterWithTimezone } from '../core/tim
 import { createSelection } from '../engine/selection.svelte.js';
 import { createDragState } from '../engine/drag.svelte.js';
 import { createClock } from '../core/clock.svelte.js';
-import { sod, DAY_MS, HOUR_MS, startOfWeek as sowFn, isAllDay, isMultiDay, segmentForDay, } from '../core/time.js';
+import { sod, addDaysMs, HOUR_MS, startOfWeek as sowFn, isAllDay, isMultiDay, segmentForDay, } from '../core/time.js';
 import { monthLong, weekdayLong, weekdayShort } from '../core/locale.js';
 export function createCalendar(options) {
     const { adapter, mondayStart: initialMondayStart = true, initialDate: rawInitialDate, locale, visibleHours, snapInterval = 15, equalDays = false, hideDays, blockedSlots, disabledDates, days: initialDayCount = 7, readOnly = false, minDuration, maxDuration, oneventclick, oneventcreate, oneventmove, } = options;
@@ -85,14 +85,14 @@ export function createCalendar(options) {
         const events = store.events;
         const todayMs = clock.today;
         const result = [];
-        for (let ms = startMs; ms < endMs; ms += DAY_MS) {
+        for (let ms = startMs; ms < endMs; ms = addDaysMs(ms, 1)) {
             const date = new Date(ms);
             const jsDay = date.getDay();
             const isoDay = jsDay === 0 ? 7 : jsDay;
             // Skip hidden days
             if (hideDays?.includes(isoDay))
                 continue;
-            const dayEnd = ms + DAY_MS;
+            const dayEnd = addDaysMs(ms, 1);
             const dayEventsAll = events
                 .filter((ev) => ev.start.getTime() < dayEnd && ev.end.getTime() > ms)
                 .sort((a, b) => a.start.getTime() - b.start.getTime());
@@ -134,7 +134,7 @@ export function createCalendar(options) {
             if (chunk.length === 0)
                 continue;
             const periodStart = chunk[0].ms;
-            const periodEnd = periodStart + dayCount * DAY_MS;
+            const periodEnd = addDaysMs(periodStart, dayCount);
             result.push({
                 periodStart,
                 isCurrent: todayMs >= periodStart && todayMs < periodEnd,

package/dist/headless/create-range-agenda.svelte.js

@@ -32,7 +32,7 @@
  */
 import { untrack } from 'svelte';
 import { createEventStore } from '../engine/event-store.svelte.js';
-import { sod, DAY_MS } from '../core/time.js';
+import { sod, addDaysMs } from '../core/time.js';
 import { fmtTime as _fmtTime, fmtDuration } from '../core/locale.js';
 // ─── Implementation ─────────────────────────────────────
 export function createRangeAgenda(options) {
@@ -43,7 +43,7 @@ export function createRangeAgenda(options) {
     const store = $derived(createEventStore(resolveAdapter()));
     // ── Window start (reactive, writable) ──
     let startMs = $state(sod(initialDate?.getTime() ?? Date.now()));
-    const endMs = $derived(startMs + dayCount * DAY_MS);
+    const endMs = $derived(addDaysMs(startMs, dayCount));
     // ── Load events for the window (re-runs on paging / adapter swap) ──
     $effect(() => {
         store.load({ start: new Date(startMs), end: new Date(endMs) });
@@ -57,8 +57,8 @@ export function createRangeAgenda(options) {
         const todayMs = sod(Date.now());
         const events = store.events;
         return Array.from({ length: dayCount }, (_, i) => {
-            const ms = startMs + i * DAY_MS;
-            const dayEnd = ms + DAY_MS;
+            const ms = addDaysMs(startMs, i);
+            const dayEnd = addDaysMs(ms, 1);
             const date = new Date(ms);
             // JS getDay(): 0=Sun … 6=Sat → ISO 1=Mon … 7=Sun
             const weekday = ((date.getDay() + 6) % 7) + 1;
@@ -92,10 +92,10 @@ export function createRangeAgenda(options) {
             return store.error;
         },
         prev() {
-            startMs -= dayCount * DAY_MS;
+            startMs = addDaysMs(startMs, -dayCount);
         },
         next() {
-            startMs += dayCount * DAY_MS;
+            startMs = addDaysMs(startMs, dayCount);
         },
         goToday() {
             startMs = sod(Date.now());

package/dist/views/agenda/AgendaDay.svelte

@@ -12,7 +12,7 @@
 *   Clean numbered schedule list.
 */
 import { createClock } from "../../core/clock.svelte.js";
-import { sod, DAY_MS, dayNum, isAllDay, isMultiDay } from "../../core/time.js";
+import { sod, addDaysMs, dayNum, isAllDay, isMultiDay } from "../../core/time.js";
 import { weekdayLong, monthLong } from "../../core/locale.js";
 import { useCalendarContext } from "../shared/context.svelte.js";
 import EventContent from "../shared/EventContent.svelte";
@@ -69,9 +69,9 @@ function handleClick(ev) {
 }
 // ── Day derivations ─────────────────────────────────
 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 isTomorrow = $derived(dayMs === clock.today + DAY_MS);
+const isTomorrow = $derived(dayMs === addDaysMs(clock.today, 1));
 const isPastDay = $derived(equalDays ? false : dayMs < clock.today);
 /** All events for this day, sorted chronologically */
 const dayEvents = $derived.by(() => {

package/dist/views/agenda/AgendaWeek.svelte

@@ -9,7 +9,7 @@
 * 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";
@@ -115,11 +115,11 @@ 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));

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 { DAY_MS, HOUR_MS, sod, addDaysMs, isAllDay, isMultiDay, 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();
@@ -36,7 +36,7 @@ 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 ─────────────────────────────────────

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 { DAY_MS, sod, addDaysMs, isAllDay, isMultiDay } 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";
@@ -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,7 +56,7 @@ 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;
 		result.push({

package/dist/views/month/MonthGrid.svelte

@@ -8,7 +8,7 @@
 -->
 <script lang="ts">import { useCalendarContext } from "../shared/context.svelte.js";
 import { createClock } from "../../core/clock.svelte.js";
-import { DAY_MS, sod, isAllDay } from "../../core/time.js";
+import { DAY_MS, sod, addDaysMs, isAllDay } from "../../core/time.js";
 import { fmtTime, weekdayShort } from "../../core/locale.js";
 let { events = [], style = "", height = null, locale, focusDate, oneventclick, selectedEventId = null } = $props();
 const ctx = useCalendarContext();
@@ -54,7 +54,7 @@ const rovingMs = $derived.by(() => {
 });
 function moveFocus(fromMs, deltaDays) {
 	if (!range) return;
-	const target = fromMs + deltaDays * DAY_MS;
+	const target = addDaysMs(fromMs, deltaDays);
 	if (target < sod(range.start.getTime()) || target >= range.end.getTime()) return;
 	focusMs = target;
 	const el = bodyEl?.querySelector(`[data-ms="${target}"]`);
@@ -108,7 +108,7 @@ function cellLabel(cell) {
 }
 function eventsForDay(ms) {
 	const dayStart = ms;
-	const dayEnd = ms + DAY_MS;
+	const dayEnd = addDaysMs(ms, 1);
 	return events.filter((e) => e.start.getTime() < dayEnd && e.end.getTime() > dayStart).sort((a, b) => {
 		const aAll = isAllDay(a) ? 0 : 1;
 		const bAll = isAllDay(b) ? 0 : 1;
@@ -118,10 +118,10 @@ function eventsForDay(ms) {
 const weeks = $derived.by(() => {
 	if (!range) return [];
 	const rows = [];
-	for (let ms = sod(range.start.getTime()); ms < range.end.getTime(); ms += 7 * DAY_MS) {
+	for (let ms = sod(range.start.getTime()); ms < range.end.getTime(); ms = addDaysMs(ms, 7)) {
 		const row = [];
 		for (let i = 0; i < 7; i++) {
-			const cellMs = ms + i * DAY_MS;
+			const cellMs = addDaysMs(ms, i);
 			const date = new Date(cellMs);
 			const jsDay = date.getDay();
 			const dayEvents = eventsForDay(cellMs);