@zeyos/zx 4.2.0 → 4.3.4

package/src/components/calendar/calendar.css

@@ -9,15 +9,20 @@
   min-inline-size: 0;
   overflow: hidden;
   border: 1px solid var(--zx-color-border);
-  border-radius: var(--zx-radius-lg);
+  border-radius: 0;
   background: var(--zx-color-bg-surface);
   color: var(--zx-color-text);
   font-size: var(--zx-text-sm);
 }
 
+/*
+ * The heading is the only elastic track. With `1fr auto 1fr` the end-justified commands group
+ * kept its min-content width inside a narrower `1fr` track and bled back over the centered
+ * heading; giving navigation and commands their natural width lets the heading ellipsize instead.
+ */
 .zx-calendar__toolbar {
   display: grid;
-  grid-template-columns: 1fr auto 1fr;
+  grid-template-columns: auto minmax(0, 1fr) auto;
   align-items: center;
   gap: var(--zx-space-3);
   min-inline-size: 0;
@@ -35,7 +40,14 @@
 
 .zx-calendar__navigation { justify-self: start; gap: var(--zx-space-1); }
 .zx-calendar__commands { justify-self: end; gap: var(--zx-space-3); }
-.zx-calendar__views { overflow-x: auto; }
+.zx-calendar__views {
+  block-size: var(--zx-control-height);
+  gap: 2px;
+  overflow-x: auto;
+  border-radius: 0;
+  background: var(--zx-color-bg-muted);
+  padding: 3px;
+}
 
 .zx-calendar__toolbar-button,
 .zx-calendar__view-button,
@@ -59,15 +71,21 @@
 }
 
 .zx-calendar__toolbar-button:has(.zx-icon) { padding-inline: var(--zx-space-2); }
-.zx-calendar__view-button { border-inline-end-width: 0; padding-inline: var(--zx-space-3); }
-.zx-calendar__view-button:first-child { border-start-start-radius: var(--zx-control-radius); border-end-start-radius: var(--zx-control-radius); }
-.zx-calendar__view-button:last-child { border-inline-end-width: 1px; border-start-end-radius: var(--zx-control-radius); border-end-end-radius: var(--zx-control-radius); }
+.zx-calendar__view-button {
+  block-size: 100%;
+  min-block-size: 0;
+  border-color: transparent;
+  border-radius: 0;
+  background: transparent;
+  padding-inline: var(--zx-space-3);
+}
 .zx-calendar__view-button[aria-pressed="true"] {
   position: relative;
   z-index: 1;
-  border-color: var(--zx-color-accent);
-  background: var(--zx-color-bg-selected);
-  color: var(--zx-color-accent);
+  border-color: var(--zx-color-border-control);
+  background: var(--zx-color-bg-control);
+  box-shadow: var(--zx-shadow-2);
+  color: var(--zx-color-text);
 }
 
 .zx-calendar__new {
@@ -81,7 +99,7 @@
 }
 
 .zx-calendar__toolbar-button:hover:not(:disabled),
-.zx-calendar__view-button:hover:not(:disabled) { background: var(--zx-color-bg-hover); }
+.zx-calendar__view-button:hover:not(:disabled):not([aria-pressed="true"]) { background: var(--zx-color-bg-hover); }
 .zx-calendar__new:hover:not(:disabled) { background: var(--zx-color-accent-hover); }
 .zx-calendar button:disabled { cursor: default; opacity: .55; }
 
@@ -148,6 +166,7 @@
   min-block-size: calc(var(--zx-control-height) + var(--zx-space-2));
   place-content: center;
   border: 0;
+  border-radius: 0;
   border-inline-end: 1px solid var(--zx-color-border);
   background: var(--zx-color-bg-surface);
   color: var(--zx-color-text);
@@ -227,6 +246,7 @@
 .zx-calendar__slot {
   min-inline-size: 0;
   border: 0;
+  border-radius: 0;
   border-block-start: 1px solid var(--zx-color-border);
   border-inline-end: 1px solid var(--zx-color-border);
   background: var(--zx-color-bg-surface);
@@ -261,6 +281,7 @@
   inline-size: 100%;
   block-size: 100%;
   min-inline-size: 0;
+  min-block-size: 0;
   overflow: hidden;
   border: 1px solid color-mix(in srgb, var(--zx-calendar-event-color) 65%, var(--zx-color-border));
   border-inline-start: 3px solid var(--zx-calendar-event-color);
@@ -310,8 +331,11 @@
   z-index: 3;
   display: grid;
   block-size: 8px;
+  min-block-size: 0;
   place-items: center;
+  appearance: none;
   border: 0;
+  border-radius: 0;
   background: transparent;
   padding: 0;
   cursor: ns-resize;
@@ -329,6 +353,7 @@
 .zx-calendar__event[data-variant="span"] .zx-calendar__event-action,
 .zx-calendar__event[data-variant="month"] .zx-calendar__event-action {
   display: flex;
+  min-block-size: 0;
   align-items: center;
   gap: var(--zx-space-1);
   padding-block: 2px;
@@ -358,10 +383,17 @@
 }
 
 .zx-calendar__agenda { display: grid; }
-.zx-calendar__agenda-day { display: grid; grid-template-columns: minmax(10rem, 22%) minmax(0, 1fr); border-block-end: 1px solid var(--zx-color-border); }
+.zx-calendar__agenda-day {
+  display: grid;
+  grid-template-columns: minmax(10rem, 22%) minmax(0, 1fr);
+  border-block-end: 1px solid var(--zx-color-border);
+}
 .zx-calendar__agenda-heading {
-  align-self: start;
+  align-self: stretch;
+  appearance: none;
   border: 0;
+  border-inline-end: 1px solid var(--zx-color-border);
+  border-radius: 0;
   background: var(--zx-color-bg-muted);
   color: var(--zx-color-text);
   padding: var(--zx-space-3);
@@ -371,9 +403,13 @@
   cursor: pointer;
 }
 .zx-calendar__agenda-heading[aria-current="date"] { color: var(--zx-color-accent); }
+.zx-calendar__agenda-events {
+  display: grid;
+  min-inline-size: 0;
+}
 .zx-calendar__agenda-empty { margin: 0; color: var(--zx-color-text-muted); padding: var(--zx-space-3); }
-.zx-calendar__agenda-day > .zx-calendar__event { border-block-end: 1px solid var(--zx-color-border); }
-.zx-calendar__agenda-day > .zx-calendar__event:last-child { border-block-end: 0; }
+.zx-calendar__agenda-events > .zx-calendar__event { border-block-end: 1px solid var(--zx-color-border); }
+.zx-calendar__agenda-events > .zx-calendar__event:last-child { border-block-end: 0; }
 .zx-calendar__event[data-variant="agenda"] .zx-calendar__event-action {
   grid-template-columns: minmax(6rem, 18%) minmax(0, 1fr);
   grid-template-areas: "time title" "time location";
@@ -418,26 +454,13 @@
   text-transform: uppercase;
   letter-spacing: .04em;
 }
-.zx-calendar__month-weekdays .zx-calendar__month-weekday { grid-row: 1; }
-.zx-calendar__month-weekdays .zx-calendar__month-weekday:nth-last-child(7) { grid-column: 2; }
-.zx-calendar__month-weekdays .zx-calendar__month-weekday:nth-last-child(6) { grid-column: 3; }
-.zx-calendar__month-weekdays .zx-calendar__month-weekday:nth-last-child(5) { grid-column: 4; }
-.zx-calendar__month-weekdays .zx-calendar__month-weekday:nth-last-child(4) { grid-column: 5; }
-.zx-calendar__month-weekdays .zx-calendar__month-weekday:nth-last-child(3) { grid-column: 6; }
-.zx-calendar__month-weekdays .zx-calendar__month-weekday:nth-last-child(2) { grid-column: 7; }
-.zx-calendar__month-weekdays .zx-calendar__month-weekday:nth-last-child(1) { grid-column: 8; }
-.zx-calendar__month-weekdays:not(:has(.zx-calendar__month-week-gutter)) .zx-calendar__month-weekday:nth-last-child(7) { grid-column: 1; }
-.zx-calendar__month-weekdays:not(:has(.zx-calendar__month-week-gutter)) .zx-calendar__month-weekday:nth-last-child(6) { grid-column: 2; }
-.zx-calendar__month-weekdays:not(:has(.zx-calendar__month-week-gutter)) .zx-calendar__month-weekday:nth-last-child(5) { grid-column: 3; }
-.zx-calendar__month-weekdays:not(:has(.zx-calendar__month-week-gutter)) .zx-calendar__month-weekday:nth-last-child(4) { grid-column: 4; }
-.zx-calendar__month-weekdays:not(:has(.zx-calendar__month-week-gutter)) .zx-calendar__month-weekday:nth-last-child(3) { grid-column: 5; }
-.zx-calendar__month-weekdays:not(:has(.zx-calendar__month-week-gutter)) .zx-calendar__month-weekday:nth-last-child(2) { grid-column: 6; }
-.zx-calendar__month-weekdays:not(:has(.zx-calendar__month-week-gutter)) .zx-calendar__month-weekday:nth-last-child(1) { grid-column: 7; }
 .zx-calendar__month-week { min-block-size: 7.5rem; border-block-end: 1px solid var(--zx-color-border); }
 .zx-calendar__month-week-number {
-  grid-row: 1 / span 2;
+  grid-row: 1;
+  appearance: none;
   border: 0;
   border-inline-end: 1px solid var(--zx-color-border);
+  border-radius: 0;
   background: var(--zx-color-bg-muted);
   color: var(--zx-color-text-muted);
   font: inherit;
@@ -452,11 +475,21 @@
 }
 .zx-calendar__month-week:not(:has(.zx-calendar__month-week-number)) .zx-calendar__month-days,
 .zx-calendar__month-week:not(:has(.zx-calendar__month-week-number)) .zx-calendar__month-events { grid-column: 1; }
-.zx-calendar__month-days { grid-row: 1; }
+.zx-calendar__month-days {
+  grid-row: 1;
+  min-block-size: 7.5rem;
+  align-items: stretch;
+}
 .zx-calendar__month-day {
+  display: flex;
+  block-size: 100%;
+  appearance: none;
+  align-items: flex-start;
+  justify-content: flex-end;
   min-block-size: var(--zx-control-height);
   border: 0;
   border-inline-end: 1px solid var(--zx-color-border);
+  border-radius: 0;
   background: var(--zx-color-bg-surface);
   color: var(--zx-color-text);
   padding: var(--zx-space-2);
@@ -464,12 +497,34 @@
   text-align: end;
   cursor: pointer;
 }
+.zx-calendar__month-day:last-child { border-inline-end: 0; }
 .zx-calendar__month-day[data-other-month="true"] { color: var(--zx-color-text-muted); background: var(--zx-color-bg-muted); }
-.zx-calendar__month-day[aria-current="date"] { color: var(--zx-color-accent); font-weight: 750; box-shadow: inset 0 2px var(--zx-color-accent); }
+.zx-calendar__month-day[aria-current="date"] {
+  color: var(--zx-color-accent);
+  font-weight: 750;
+}
 .zx-calendar__month-day:hover:not(:disabled) { background: var(--zx-color-bg-hover); }
-.zx-calendar__month-events { grid-row: 2; grid-auto-rows: calc(var(--zx-control-height) - var(--zx-space-2)); align-content: start; gap: 2px 0; padding-block: var(--zx-space-1); }
+.zx-calendar__month-events {
+  grid-row: 1;
+  z-index: 2;
+  grid-auto-rows: calc(var(--zx-control-height) - var(--zx-space-2));
+  align-content: start;
+  gap: 2px 0;
+  padding-block: calc(var(--zx-control-height) + var(--zx-space-1)) var(--zx-space-1);
+  pointer-events: none;
+}
+.zx-calendar__month-events > .zx-calendar__event,
+.zx-calendar__month-events > .zx-calendar__more { pointer-events: auto; }
+.zx-calendar__event[data-variant="month"] .zx-calendar__event-action {
+  border-color: color-mix(in srgb, var(--zx-calendar-event-color) 55%, var(--zx-color-border));
+  border-inline-start-width: 1px;
+  border-radius: 0;
+  background: color-mix(in srgb, var(--zx-calendar-event-color) 13%, var(--zx-color-bg-surface));
+}
+.zx-calendar__event[data-variant="month"][data-all-day="true"] .zx-calendar__event-time { display: none; }
 .zx-calendar__more {
   align-self: center;
+  min-block-size: 0;
   overflow: hidden;
   border: 0;
   background: transparent;
@@ -546,7 +601,14 @@
   .zx-calendar__view-button { flex: 1 0 auto; }
   .zx-calendar__new span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
   .zx-calendar__agenda-day { grid-template-columns: 1fr; }
-  .zx-calendar__agenda-heading { position: sticky; inset-block-start: 0; z-index: 3; border-block-end: 1px solid var(--zx-color-border); }
+  .zx-calendar__agenda-heading {
+    position: sticky;
+    inset-block-start: 0;
+    z-index: 3;
+    border-inline-end: 0;
+    border-block-end: 1px solid var(--zx-color-border);
+  }
+  .zx-calendar__agenda-events { grid-column: 1; }
   .zx-calendar__event[data-variant="agenda"] .zx-calendar__event-action { grid-template-columns: 5.5rem minmax(0, 1fr); }
   .zx-calendar__year { grid-template-columns: 1fr; padding: var(--zx-space-3); }
 }

package/src/components/calendar/calendar.js

@@ -3,8 +3,8 @@ import { h } from '../../core/dom.js';
 import { icon } from '../../core/icons.js';
 import {
   CALENDAR_VIEWS, addCalendarDays, calendarDayDifference, calendarDayKey,
-  calendarEventIntersects, calendarEventSpansDays, calendarRange, cloneCalendarEvent,
-  layoutCalendarSpans, layoutTimedCalendarEvents, normalizeCalendarEvents,
+  calendarEventIntersects, calendarEventSpansDays, calendarPageDate, calendarRange,
+  cloneCalendarEvent, layoutCalendarSpans, layoutTimedCalendarEvents, normalizeCalendarEvents,
   shiftCalendarEvent, startOfCalendarDay
 } from './calendar-model.js';
 
@@ -289,7 +289,9 @@ export class Calendar extends Component {
         ? changes.durationEditable : current.durationEditable,
       data: changes.data ?? current.data
     };
-    const [next] = normalizeCalendarEvents([source]);
+    // `source` is assembled from canonical keys, so the configured readers must not be reapplied
+    // here — but `dateUnit` must, or a numeric change is read in the wrong unit.
+    const [next] = normalizeCalendarEvents([source], { dateUnit: this.options.dateUnit });
     next.data = source.data;
     this._events = this._events.map((event, eventIndex) => eventIndex === index ? next : event);
     this._mutationVersions.delete(String(id));
@@ -452,7 +454,11 @@ export class Calendar extends Component {
         if (!calendarEventIntersects(event, day, next)) return false;
         return event.start >= day || index === 0;
       }).sort(compareEvents);
-      const row = h('section', { class: 'zx-calendar__agenda-day', role: 'row' },
+      const row = h('section', {
+        class: 'zx-calendar__agenda-day',
+        role: 'row',
+        dataset: { date: calendarDayKey(day) }
+      },
         h('button', {
           type: 'button',
           class: 'zx-calendar__agenda-heading',
@@ -461,11 +467,13 @@ export class Calendar extends Component {
           ariaCurrent: sameCalendarDay(day, this._now()) ? 'date' : null,
           disabled: this.options.disabled
         }, this._format(day, { weekday: 'long', day: 'numeric', month: 'long' })));
+      const entries = h('div', { class: 'zx-calendar__agenda-events', role: 'gridcell' });
       if (!events.length) {
-        row.append(h('p', { class: 'zx-calendar__agenda-empty', role: 'gridcell' }, this.msg('noEvents')));
+        entries.append(h('p', { class: 'zx-calendar__agenda-empty' }, this.msg('noEvents')));
       } else {
-        for (const event of events) row.append(this._eventElement(event, { variant: 'agenda', day }));
+        for (const event of events) entries.append(this._eventElement(event, { variant: 'agenda', day }));
       }
+      row.append(entries);
       grid.append(row);
     }
     return grid;
@@ -721,6 +729,7 @@ export class Calendar extends Component {
       dataset: {
         eventId: key,
         variant: context.variant,
+        allDay: event.allDay ? 'true' : null,
         draggable: this._canMove(event) ? 'true' : null
       },
       style: event.color ? { '--zx-calendar-event-color': event.color } : null
@@ -989,7 +998,9 @@ export class Calendar extends Component {
       const item = this._eventById(control.dataset.eventId);
       const action = control.dataset.eventAction === 'resize' ? 'resize' : 'move';
       if (!item || (action === 'move' ? !this._canMove(item) : !this._canResize(item))) return;
-      control.setPointerCapture?.(event.pointerId);
+      event.preventDefault();
+      this._capturePointer(event.pointerId);
+      const offset = action === 'move' ? this._dragOffsetForEvent(item, event.clientX, event.clientY) : null;
       this._pointer = {
         type: 'event',
         pointerId: event.pointerId,
@@ -999,6 +1010,8 @@ export class Calendar extends Component {
         event: cloneCalendarEvent(item),
         action,
         control,
+        timeOffsetMinutes: offset?.minutes ?? 0,
+        dayOffset: offset?.days ?? 0,
         moved: false
       };
       return;
@@ -1007,7 +1020,8 @@ export class Calendar extends Component {
     if (!slot || !this.options.selectable) return;
     const date = this._dateFromTarget(slot);
     if (!date) return;
-    slot.setPointerCapture?.(event.pointerId);
+    event.preventDefault();
+    this._capturePointer(event.pointerId);
     this._pointer = {
       type: 'selection',
       pointerId: event.pointerId,
@@ -1041,7 +1055,13 @@ export class Calendar extends Component {
     const wrapper = pointer.control.closest('.zx-calendar__event');
     if (wrapper) {
       wrapper.dataset.state = 'dragging';
-      wrapper.style.transform = `translate(${event.clientX - pointer.startX}px, ${event.clientY - pointer.startY}px)`;
+      if (pointer.action === 'resize') {
+        wrapper.style.transform = '';
+        const height = this._timedPreviewHeight(proposed);
+        if (height) wrapper.style.blockSize = height;
+      } else {
+        wrapper.style.transform = `translate(${event.clientX - pointer.startX}px, ${event.clientY - pointer.startY}px)`;
+      }
       wrapper.dataset.preview = this._eventTime(proposed, proposed.start);
     }
     this._announce(this.msg('editPreview', proposed.title,
@@ -1053,6 +1073,7 @@ export class Calendar extends Component {
     const pointer = this._pointer;
     if (!pointer || pointer.pointerId !== event.pointerId) return;
     this._pointer = null;
+    this._releasePointerCapture(pointer.pointerId);
     this._clearSelectionPreview();
     if (!pointer.moved) return;
     event.preventDefault();
@@ -1071,6 +1092,7 @@ export class Calendar extends Component {
   _cancelPointer(event) {
     if (!this._pointer || this._pointer.pointerId !== event.pointerId) return;
     const control = this._pointer.control;
+    this._releasePointerCapture(this._pointer.pointerId);
     this._pointer = null;
     this._clearSelectionPreview();
     control.closest?.('.zx-calendar__event')?.removeAttribute('data-state');
@@ -1079,13 +1101,14 @@ export class Calendar extends Component {
 
   /** @param {CalendarEvent} event @param {'move'|'resize'} action @param {number} x @param {number} y @returns {CalendarEvent|null} */
   _proposalAtPoint(event, action, x, y) {
-    const timed = this._timeAtPoint(x, y);
+    const resizeTimed = action === 'resize' && !calendarEventSpansDays(event);
+    const timed = this._timeAtPoint(x, y, resizeTimed ? event.start : null);
     if (timed && !calendarEventSpansDays(event)) {
       if (action === 'move') {
         const duration = event.end.getTime() - event.start.getTime();
         const next = cloneCalendarEvent(event);
-        next.start = timed;
-        next.end = new Date(timed.getTime() + duration);
+        next.start = addMinutes(timed, -Number(this._pointer?.timeOffsetMinutes ?? 0));
+        next.end = new Date(next.start.getTime() + duration);
         return next;
       }
       const next = cloneCalendarEvent(event);
@@ -1094,7 +1117,8 @@ export class Calendar extends Component {
     }
     const day = this._dayAtPoint(x, y);
     if (!day) return null;
-    const difference = calendarDayDifference(startOfCalendarDay(event.start), day);
+    const targetDay = addCalendarDays(day, -Number(this._pointer?.dayOffset ?? 0));
+    const difference = calendarDayDifference(startOfCalendarDay(event.start), targetDay);
     if (action === 'move') return shiftCalendarEvent(event, { days: difference, minutes: 0 });
     const next = cloneCalendarEvent(event);
     const endDay = addCalendarDays(day, 1);
@@ -1102,15 +1126,23 @@ export class Calendar extends Component {
     return next.end > next.start ? next : null;
   }
 
-  /** @param {number} x @param {number} y @returns {Date|null} */
-  _timeAtPoint(x, y) {
+  /** @param {number} x @param {number} y @param {Date|null} [fixedDay=null] @returns {Date|null} */
+  _timeAtPoint(x, y, fixedDay = null) {
     const slots = this.refs.body.querySelector('.zx-calendar__slots');
     if (!slots) return null;
     const rect = slots.getBoundingClientRect();
-    if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom || rect.width <= 0 || rect.height <= 0) return null;
+    const scroller = slots.closest('.zx-calendar__time-scroller');
+    const viewport = scroller?.getBoundingClientRect();
+    const left = viewport ? Math.max(rect.left, viewport.left) : rect.left;
+    const right = viewport ? Math.min(rect.right, viewport.right) : rect.right;
+    const top = viewport ? Math.max(rect.top, viewport.top) : rect.top;
+    const bottom = viewport ? Math.min(rect.bottom, viewport.bottom) : rect.bottom;
+    if (x < left || x > right || y < top || y > bottom || rect.width <= 0 || rect.height <= 0) return null;
     const columns = Number(slots.closest('[role="grid"]')?.getAttribute('aria-colcount')) || 1;
     const rows = Number(slots.closest('[role="grid"]')?.getAttribute('aria-rowcount')) || 1;
-    const column = Math.max(0, Math.min(columns - 1, Math.floor((x - rect.left) / rect.width * columns)));
+    const fixedColumn = fixedDay ? this._timeGridDayIndex(fixedDay) : -1;
+    const column = fixedColumn >= 0 ? fixedColumn
+      : Math.max(0, Math.min(columns - 1, Math.floor((x - rect.left) / rect.width * columns)));
     const row = Math.max(0, Math.min(rows - 1, Math.floor((y - rect.top) / rect.height * rows)));
     const target = slots.querySelector(`[data-row-index="${row}"][data-day-index="${column}"]`);
     return target ? this._dateFromTarget(target) : null;
@@ -1118,11 +1150,6 @@ export class Calendar extends Component {
 
   /** @param {number} x @param {number} y @returns {Date|null} */
   _dayAtPoint(x, y) {
-    const elements = typeof document.elementsFromPoint === 'function' ? document.elementsFromPoint(x, y) : [];
-    for (const element of elements) {
-      const date = element instanceof HTMLElement ? element.dataset.date : null;
-      if (date) return parseDayKey(date);
-    }
     const allDay = this.refs.body.querySelector('.zx-calendar__all-day-grid');
     if (allDay) {
       const rect = allDay.getBoundingClientRect();
@@ -1132,9 +1159,79 @@ export class Calendar extends Component {
         return parseDayKey(cells[index]?.dataset.date);
       }
     }
+    for (const monthEvents of this.refs.body.querySelectorAll('.zx-calendar__month-events')) {
+      const rect = monthEvents.getBoundingClientRect();
+      if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom || rect.width <= 0) continue;
+      const start = parseDayKey(monthEvents.closest('.zx-calendar__month-week')?.dataset.weekStart);
+      if (!start) continue;
+      const index = Math.max(0, Math.min(6, Math.floor((x - rect.left) / rect.width * 7)));
+      return addCalendarDays(start, index);
+    }
+    for (const agendaDay of this.refs.body.querySelectorAll('.zx-calendar__agenda-day')) {
+      const rect = agendaDay.getBoundingClientRect();
+      if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom) continue;
+      return parseDayKey(agendaDay.dataset.date);
+    }
+    const elements = typeof document.elementsFromPoint === 'function' ? document.elementsFromPoint(x, y) : [];
+    for (const element of elements) {
+      const dateTarget = element instanceof HTMLElement ? element.closest('[data-date]') : null;
+      const date = dateTarget instanceof HTMLElement ? dateTarget.dataset.date : null;
+      if (date) return parseDayKey(date);
+    }
     return null;
   }
 
+  /** @param {CalendarEvent} event @param {number} x @param {number} y @returns {{minutes: number, days: number}} */
+  _dragOffsetForEvent(event, x, y) {
+    if (!calendarEventSpansDays(event)) {
+      const timed = this._timeAtPoint(x, y);
+      if (timed) {
+        const slot = normalizeSlot(this.options.slotDuration);
+        const duration = Math.max(0, Math.round((event.end.getTime() - event.start.getTime()) / 60_000));
+        const maxOffset = Math.max(0, duration - slot);
+        const minutes = Math.round((timed.getTime() - event.start.getTime()) / 60_000);
+        return { minutes: Math.max(0, Math.min(maxOffset, minutes)), days: 0 };
+      }
+    }
+    const day = this._dayAtPoint(x, y);
+    const days = day ? calendarDayDifference(startOfCalendarDay(event.start), day) : 0;
+    return { minutes: 0, days: Math.max(0, days) };
+  }
+
+  /** @param {Date} day @returns {number} */
+  _timeGridDayIndex(day) {
+    const key = calendarDayKey(day);
+    const headings = [...this.refs.body.querySelectorAll('.zx-calendar__day-heading')];
+    return headings.findIndex((heading) => heading.dataset.date === key);
+  }
+
+  /** @param {CalendarEvent} event @returns {string|null} */
+  _timedPreviewHeight(event) {
+    const grid = this.refs.body.querySelector('.zx-calendar__time-grid');
+    if (!grid || calendarEventSpansDays(event)) return null;
+    const min = normalizeMinute(this.options.slotMinTime, 0);
+    const max = normalizeMinute(this.options.slotMaxTime, 1440, true);
+    const slot = normalizeSlot(this.options.slotDuration);
+    const start = event.start.getHours() * 60 + event.start.getMinutes();
+    const end = event.end.getHours() * 60 + event.end.getMinutes();
+    const minutes = Math.max(slot, Math.min(max, end) - Math.max(min, start));
+    return `${(minutes / (max - min)) * 100}%`;
+  }
+
+  /** @param {number} pointerId @returns {void} */
+  _capturePointer(pointerId) {
+    try {
+      this.el.setPointerCapture?.(pointerId);
+    } catch {
+      // Synthetic PointerEvents used by smoke tests do not create an active pointer capture target.
+    }
+  }
+
+  /** @param {number} pointerId @returns {void} */
+  _releasePointerCapture(pointerId) {
+    if (this.el.hasPointerCapture?.(pointerId)) this.el.releasePointerCapture?.(pointerId);
+  }
+
   /** @param {Date} start @param {Date} end @returns {void} */
   _previewSelection(start, end) {
     const low = Math.min(start.getTime(), end.getTime());
@@ -1240,13 +1337,9 @@ export class Calendar extends Component {
 
   /** @param {number} direction @returns {this} */
   _page(direction) {
-    const date = new Date(this._date.getTime());
-    if (this._view === 'day') date.setDate(date.getDate() + direction);
-    else if (this._view === 'agenda') date.setDate(date.getDate() + direction * this.options.agendaDays);
-    else if (this._view === 'week') date.setDate(date.getDate() + direction * 7);
-    else if (this._view === 'month') date.setMonth(date.getMonth() + direction);
-    else date.setFullYear(date.getFullYear() + direction);
-    return this.setDate(date);
+    return this.setDate(calendarPageDate(this._view, this._date, direction, {
+      agendaDays: this.options.agendaDays
+    }));
   }
 
   /** @param {{start: Date, end: Date}} range @returns {string} */