@k2b/ui 0.23.0 → 0.25.0

package/dist/browser/content/Calendar.js

@@ -36,48 +36,50 @@ var _tmpl$ = /*#__PURE__*/_$template(`<a>`),
   _tmpl$18 = /*#__PURE__*/_$template(`<span class=k2b-calendar-month__day-number>`),
   _tmpl$19 = /*#__PURE__*/_$template(`<span class=k2b-calendar-month__badge><!$><!/><!$><!/>`),
   _tmpl$20 = /*#__PURE__*/_$template(`<span class=k2b-calendar-dot>`),
-  _tmpl$21 = /*#__PURE__*/_$template(`<div class=k2b-calendar-month__weekday role=columnheader>`),
-  _tmpl$22 = /*#__PURE__*/_$template(`<div class=k2b-calendar-month role=grid aria-multiselectable=true data-lanes=true style=--k2b-calendar-lane:1.25rem;--k2b-calendar-lane-gap:0.125rem><div class=k2b-calendar-month__weekdays role=row><!$><!/><!$><!/></div><!$><!/>`),
-  _tmpl$23 = /*#__PURE__*/_$template(`<div class=k2b-calendar-month__week-number role=rowheader>`),
-  _tmpl$24 = /*#__PURE__*/_$template(`<div class=k2b-calendar-month__week role=row><!$><!/><!$><!/>`),
-  _tmpl$25 = /*#__PURE__*/_$template(`<button type=button class=k2b-calendar-month__week-link tabindex=-1>`),
-  _tmpl$26 = /*#__PURE__*/_$template(`<button type=button class=k2b-calendar-month__more tabindex=-1 aria-haspopup=dialog><span class=k2b-calendar-month__more-long></span><span class=k2b-calendar-month__more-short>+<!$><!/>`),
-  _tmpl$27 = /*#__PURE__*/_$template(`<div class=k2b-calendar-month__day role=gridcell><div class=k2b-calendar-month__day-header><span class=k2b-calendar-month__day-number></span><!$><!/></div><div class=k2b-calendar-month__lanes><!$><!/><!$><!/><!$><!/>`),
-  _tmpl$28 = /*#__PURE__*/_$template(`<div class=k2b-calendar-month__segment data-bar=true>`),
-  _tmpl$29 = /*#__PURE__*/_$template(`<div class=k2b-calendar-month__segment style=--k2b-calendar-span:1>`),
-  _tmpl$30 = /*#__PURE__*/_$template(`<ul class=k2b-calendar-day-list__events>`),
-  _tmpl$31 = /*#__PURE__*/_$template(`<i class="ti ti-plus"aria-hidden=true>`),
-  _tmpl$32 = /*#__PURE__*/_$template(`<div class=k2b-calendar-day-list><div class=k2b-calendar-day-list__title></div><!$><!/><div class=k2b-calendar-day-list__actions><!$><!/><!$><!/>`),
-  _tmpl$33 = /*#__PURE__*/_$template(`<p class=k2b-calendar-day-list__empty>`),
-  _tmpl$34 = /*#__PURE__*/_$template(`<li>`),
-  _tmpl$35 = /*#__PURE__*/_$template(`<i class="ti ti-zoom-in"aria-hidden=true>`),
-  _tmpl$36 = /*#__PURE__*/_$template(`<div class=k2b-calendar-popover popover=auto role=dialog>`),
-  _tmpl$37 = /*#__PURE__*/_$template(`<div class=k2b-calendar-time-grid__all-day><div class=k2b-calendar-time-grid__all-day-label></div><!$><!/>`),
-  _tmpl$38 = /*#__PURE__*/_$template(`<div class="k2b-calendar-time-grid k2b-detail-trail"><div class=k2b-calendar-time-grid__days><div></div><!$><!/></div><!$><!/><div class=k2b-calendar-time-grid__scroll><div class=k2b-calendar-time-grid__grid><div class=k2b-calendar-time-grid__gutter></div><!$><!/>`),
-  _tmpl$39 = /*#__PURE__*/_$template(`<span class=k2b-calendar-time-grid__day-label>`),
-  _tmpl$40 = /*#__PURE__*/_$template(`<span class=k2b-calendar-time-grid__badge><!$><!/><!$><!/>`),
-  _tmpl$41 = /*#__PURE__*/_$template(`<div class=k2b-calendar-time-grid__all-day-cell><div class=k2b-calendar-time-grid__all-day-events><!$><!/><!$><!/>`),
-  _tmpl$42 = /*#__PURE__*/_$template(`<div class=k2b-calendar-time-grid__hour><!$><!/>:00`),
-  _tmpl$43 = /*#__PURE__*/_$template(`<div class=k2b-calendar-time-grid__now>`),
-  _tmpl$44 = /*#__PURE__*/_$template(`<div class=k2b-calendar-time-grid__column><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`),
-  _tmpl$45 = /*#__PURE__*/_$template(`<div class=k2b-calendar-time-grid__slot>`),
-  _tmpl$46 = /*#__PURE__*/_$template(`<div class=k2b-calendar-preview__title>`),
-  _tmpl$47 = /*#__PURE__*/_$template(`<div class="k2b-calendar-preview k2b-calendar-preview--timed"><div class=k2b-calendar-preview__content><!$><!/><div class=k2b-calendar-preview__label><!$><!/> - <!$><!/>`),
-  _tmpl$48 = /*#__PURE__*/_$template(`<button type=button class=k2b-calendar-time-grid__resize><span class=k2b-calendar-time-grid__resize-icon aria-hidden=true>`),
-  _tmpl$49 = /*#__PURE__*/_$template(`<div class=k2b-calendar-time-grid__event-position><div class=k2b-calendar-time-grid__event-frame><!$><!/><!$><!/>`),
-  _tmpl$50 = /*#__PURE__*/_$template(`<button type=button class=k2b-calendar-time-grid__overflow><span class=k2b-calendar-time-grid__overflow-count>+<!$><!/>`),
-  _tmpl$51 = /*#__PURE__*/_$template(`<div class=k2b-calendar-time-grid__overflow-menu><div class=k2b-calendar-time-grid__overflow-title><!$><!/> - <!$><!/></div><!$><!/>`),
-  _tmpl$52 = /*#__PURE__*/_$template(`<div class=k2b-calendar-year>`),
-  _tmpl$53 = /*#__PURE__*/_$template(`<div class=k2b-calendar-year__month><div class=k2b-calendar-year__title></div><div class=k2b-calendar-year__grid>`),
-  _tmpl$54 = /*#__PURE__*/_$template(`<span class=k2b-calendar-year__indicator>`),
-  _tmpl$55 = /*#__PURE__*/_$template(`<div class=k2b-calendar-mobile-month__events>`),
-  _tmpl$56 = /*#__PURE__*/_$template(`<div class=k2b-calendar-mobile-month><!$><!/><div class=k2b-calendar-mobile-month__agenda><div class=k2b-calendar-mobile-month__title></div><!$><!/>`),
-  _tmpl$57 = /*#__PURE__*/_$template(`<div class=k2b-calendar-mobile-month__empty>`),
-  _tmpl$58 = /*#__PURE__*/_$template(`<div class=k2b-calendar-body>`),
-  _tmpl$59 = /*#__PURE__*/_$template(`<section><!$><!/><!$><!/>`);
+  _tmpl$21 = /*#__PURE__*/_$template(`<div class=k2b-calendar-month__week-number role=rowheader>`),
+  _tmpl$22 = /*#__PURE__*/_$template(`<div class=k2b-calendar-month__week role=row><!$><!/><!$><!/>`),
+  _tmpl$23 = /*#__PURE__*/_$template(`<button type=button class=k2b-calendar-month__week-link tabindex=-1>`),
+  _tmpl$24 = /*#__PURE__*/_$template(`<button type=button class=k2b-calendar-month__more tabindex=-1 aria-haspopup=dialog><span class=k2b-calendar-month__more-long></span><span class=k2b-calendar-month__more-short>+<!$><!/>`),
+  _tmpl$25 = /*#__PURE__*/_$template(`<div class=k2b-calendar-month__day role=gridcell><div class=k2b-calendar-month__day-header><span class=k2b-calendar-month__day-number></span><!$><!/></div><div class=k2b-calendar-month__lanes><!$><!/><!$><!/><!$><!/>`),
+  _tmpl$26 = /*#__PURE__*/_$template(`<div class=k2b-calendar-month__segment data-bar=true>`),
+  _tmpl$27 = /*#__PURE__*/_$template(`<div class=k2b-calendar-month__segment style=--k2b-calendar-span:1>`),
+  _tmpl$28 = /*#__PURE__*/_$template(`<div class=k2b-calendar-month__weekday role=columnheader>`),
+  _tmpl$29 = /*#__PURE__*/_$template(`<div class=k2b-calendar-month__weekdays role=row><!$><!/><!$><!/>`),
+  _tmpl$30 = /*#__PURE__*/_$template(`<div class=k2b-calendar-month role=grid aria-multiselectable=true data-lanes=true style=--k2b-calendar-lane:1.25rem;--k2b-calendar-lane-gap:0.125rem><!$><!/><!$><!/>`),
+  _tmpl$31 = /*#__PURE__*/_$template(`<div class=k2b-calendar-month-viewport><div class=k2b-calendar-month role=grid aria-multiselectable=true data-lanes=true data-continuous=true style=--k2b-calendar-lane:1.25rem;--k2b-calendar-lane-gap:0.125rem><!$><!/><div class=k2b-calendar-month__track role=rowgroup></div></div><div class=k2b-calendar-month__scroll-label aria-hidden=true>`),
+  _tmpl$32 = /*#__PURE__*/_$template(`<ul class=k2b-calendar-day-list__events>`),
+  _tmpl$33 = /*#__PURE__*/_$template(`<i class="ti ti-plus"aria-hidden=true>`),
+  _tmpl$34 = /*#__PURE__*/_$template(`<div class=k2b-calendar-day-list><div class=k2b-calendar-day-list__title></div><!$><!/><div class=k2b-calendar-day-list__actions><!$><!/><!$><!/>`),
+  _tmpl$35 = /*#__PURE__*/_$template(`<p class=k2b-calendar-day-list__empty>`),
+  _tmpl$36 = /*#__PURE__*/_$template(`<li>`),
+  _tmpl$37 = /*#__PURE__*/_$template(`<i class="ti ti-zoom-in"aria-hidden=true>`),
+  _tmpl$38 = /*#__PURE__*/_$template(`<div class=k2b-calendar-popover popover=auto role=dialog>`),
+  _tmpl$39 = /*#__PURE__*/_$template(`<div class=k2b-calendar-time-grid__all-day><div class=k2b-calendar-time-grid__all-day-label></div><!$><!/>`),
+  _tmpl$40 = /*#__PURE__*/_$template(`<div class=k2b-calendar-time-grid><div class=k2b-calendar-time-grid__days><div class=k2b-calendar-time-grid__corner></div><!$><!/></div><!$><!/><div class="k2b-calendar-time-grid__scroll k2b-detail-trail"><div class=k2b-calendar-time-grid__grid><div class=k2b-calendar-time-grid__gutter></div><!$><!/>`),
+  _tmpl$41 = /*#__PURE__*/_$template(`<span class=k2b-calendar-time-grid__day-label>`),
+  _tmpl$42 = /*#__PURE__*/_$template(`<span class=k2b-calendar-time-grid__badge><!$><!/><!$><!/>`),
+  _tmpl$43 = /*#__PURE__*/_$template(`<div class=k2b-calendar-time-grid__all-day-cell><div class=k2b-calendar-time-grid__all-day-events><!$><!/><!$><!/>`),
+  _tmpl$44 = /*#__PURE__*/_$template(`<div class=k2b-calendar-time-grid__hour><!$><!/>:00`),
+  _tmpl$45 = /*#__PURE__*/_$template(`<div class=k2b-calendar-time-grid__now>`),
+  _tmpl$46 = /*#__PURE__*/_$template(`<div class=k2b-calendar-time-grid__column><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`),
+  _tmpl$47 = /*#__PURE__*/_$template(`<div class=k2b-calendar-time-grid__slot>`),
+  _tmpl$48 = /*#__PURE__*/_$template(`<div class=k2b-calendar-preview__title>`),
+  _tmpl$49 = /*#__PURE__*/_$template(`<div class="k2b-calendar-preview k2b-calendar-preview--timed"><div class=k2b-calendar-preview__content><!$><!/><div class=k2b-calendar-preview__label><!$><!/> - <!$><!/>`),
+  _tmpl$50 = /*#__PURE__*/_$template(`<button type=button class=k2b-calendar-time-grid__resize><span class=k2b-calendar-time-grid__resize-icon aria-hidden=true>`),
+  _tmpl$51 = /*#__PURE__*/_$template(`<div class=k2b-calendar-time-grid__event-position><div class=k2b-calendar-time-grid__event-frame><!$><!/><!$><!/>`),
+  _tmpl$52 = /*#__PURE__*/_$template(`<button type=button class=k2b-calendar-time-grid__overflow><span class=k2b-calendar-time-grid__overflow-count>+<!$><!/>`),
+  _tmpl$53 = /*#__PURE__*/_$template(`<div class=k2b-calendar-time-grid__overflow-menu><div class=k2b-calendar-time-grid__overflow-title><!$><!/> - <!$><!/></div><!$><!/>`),
+  _tmpl$54 = /*#__PURE__*/_$template(`<div class=k2b-calendar-year>`),
+  _tmpl$55 = /*#__PURE__*/_$template(`<div class=k2b-calendar-year__month><div class=k2b-calendar-year__title></div><div class=k2b-calendar-year__grid>`),
+  _tmpl$56 = /*#__PURE__*/_$template(`<span class=k2b-calendar-year__indicator>`),
+  _tmpl$57 = /*#__PURE__*/_$template(`<div class=k2b-calendar-mobile-month__events>`),
+  _tmpl$58 = /*#__PURE__*/_$template(`<div class=k2b-calendar-mobile-month><!$><!/><div class=k2b-calendar-mobile-month__agenda><div class=k2b-calendar-mobile-month__title></div><!$><!/>`),
+  _tmpl$59 = /*#__PURE__*/_$template(`<div class=k2b-calendar-mobile-month__empty>`),
+  _tmpl$60 = /*#__PURE__*/_$template(`<div class=k2b-calendar-body>`),
+  _tmpl$61 = /*#__PURE__*/_$template(`<section><!$><!/><!$><!/>`);
 import { Link } from "@k2b/ssr/nav";
 import { dates as calendar } from "@k2b/stdlib";
-import { createEffect, createMemo, createSignal, For, mergeProps, on, onCleanup, onMount, Show, untrack } from "solid-js";
+import { createComputed, createEffect, createMemo, createSignal, For, mergeProps, on, onCleanup, onMount, Show, untrack } from "solid-js";
 import { Button } from "../actions/Button";
 import { GestureMenu } from "../actions/GestureMenu";
 import SegmentedControl from "../actions/SegmentedControl";
@@ -85,13 +87,15 @@ import { useDateConfigLocale } from "../intl/locale";
 import { useUiMessages } from "../intl/messages";
 import { CalendarDayView } from "./CalendarDayView";
 import { CalendarWeekView } from "./CalendarWeekView";
+import { addDayKeys } from "./calendar-days";
 import { openCalendarGoTo, openCalendarShortcuts } from "./calendar-dialogs";
 import { layoutCalendarIntervals } from "./calendar-event-layout";
 import { useCalendarMessages } from "./calendar-messages";
 import { fitMonthWeek, layoutMonthWeek, monthLaneCapacity } from "./calendar-month-layout";
+import { MONTH_ROW_BLOCK, MONTH_ROWS_IN_VIEW, monthFocusRow, monthOfWeek, monthRenderWindow, monthRevealTop, monthRowOf, monthTodayDirection, monthVisibleRows, monthWeekKeys } from "./calendar-month-scroll";
 import { calendarDayIndexAtPoint, calendarMinuteAtPoint, startCalendarPointerSession } from "./calendar-pointer";
 import { EventChip, eventHref, followCalendarHref, formatTime, ownerDateConfig, parseDate, placeCalendarPopover, textWidth, validDate } from "./calendar-shared";
-import { compactGermanDate } from "./calendar-time-view";
+import { compactGermanDate, reducedMotion } from "./calendar-time-view";
 
 /** The days a host loaded events for, from the first day `from` up to `to`, both `YYYY-MM-DD` or dates. */
 
@@ -446,11 +450,13 @@ const CalendarHeader = props => {
   const calendarMessages = useCalendarMessages();
   const dateConfig = () => ownerDateConfig(props.owner);
   const timeView = () => props.nav.timeView();
+  const monthView = () => props.nav.monthView();
+  const scrollingView = () => timeView() ?? monthView();
   const parseKey = key => calendar.parseCalendarDate(key, dateConfig());
   /** The date the header pages from: the first day a day or week view shows, else the date. */
   const base = () => {
     const shown = timeView()?.visibleKeys().first;
-    return shown ? parseKey(shown) : props.date;
+    return shown ? parseKey(shown) : monthView()?.stepFrom() ?? props.date;
   };
   const previous = () => adjacentCalendarDate(base(), props.view, -1, dateConfig());
   const next = () => adjacentCalendarDate(base(), props.view, 1, dateConfig());
@@ -484,7 +490,7 @@ const CalendarHeader = props => {
       timeZone: dateConfig().timeZone
     });
     if (props.view === "week") return `${formatDay(calendar.startOfWeek(props.date, dateConfig()), dateConfig())} - ${formatDay(calendar.addDays(calendar.startOfWeek(props.date, dateConfig()), 6, dateConfig()), dateConfig())}`;
-    return formatMonth(props.date, dateConfig());
+    return formatMonth(monthView()?.focusMonth() ?? props.date, dateConfig());
   };
   /**
    * The titles this view can show around the current date: the months of the year, the weeks of the month and across
@@ -548,52 +554,63 @@ const CalendarHeader = props => {
     const href = props.owner.getViewHref?.(view);
     if (href) window.location.href = href;
   };
+  /**
+   * A previous or next button. Its element stays while its target changes, such as with each step through the months,
+   * so a repeated click or Enter lands on the same button and keeps its focus.
+   */
   const navButton = (date, icon, label, direction) => {
-    const href = props.owner.getDateHref?.(date, props.view);
-    const step = () => timeView()?.step(direction) ?? false;
-    const title = props.nav.commands().length > 0 ? `${label} (${direction > 0 ? "J" : "K"})` : label;
-    return (props.owner.onNavigateHref || props.owner.onNavigate) && href ? _$createComponent(CalendarNavigationLink, {
+    const href = () => props.owner.getDateHref?.(date(), props.view);
+    const step = () => scrollingView()?.step(direction) ?? false;
+    const title = () => props.nav.commands().length > 0 ? `${label} (${direction > 0 ? "J" : "K"})` : label;
+    const link = target => _$createComponent(CalendarNavigationLink, {
       get owner() {
         return props.owner;
       },
-      href: href,
+      get href() {
+        return target();
+      },
       intercept: step,
-      anchorProps: {
-        "aria-label": label,
-        title,
-        class: "k2b-calendar-header__nav-button"
+      get anchorProps() {
+        return {
+          "aria-label": label,
+          title: title(),
+          class: "k2b-calendar-header__nav-button"
+        };
       },
       get children() {
         var _el$4 = _$getNextElement(_tmpl$3);
         _$className(_el$4, `ti ${icon}`);
         return _el$4;
       }
-    }) : props.owner.onDateChange ? (() => {
-      var _el$5 = _$getNextElement(_tmpl$4),
-        _el$6 = _el$5.firstChild;
-      _el$5.$$click = () => {
-        if (!step()) goDate(date);
-      };
-      _$setAttribute(_el$5, "aria-label", label);
-      _$setAttribute(_el$5, "title", title);
-      _$className(_el$6, `ti ${icon}`);
-      _$runHydrationEvents();
-      return _el$5;
-    })() : _$createComponent(CalendarNavigationLink, {
-      get owner() {
-        return props.owner;
+    });
+    return _$createComponent(Show, {
+      get when() {
+        return Boolean((props.owner.onNavigateHref || props.owner.onNavigate) && href());
       },
-      href: href ?? "#",
-      intercept: step,
-      anchorProps: {
-        "aria-label": label,
-        title,
-        class: "k2b-calendar-header__nav-button"
+      get fallback() {
+        return _$createComponent(Show, {
+          get when() {
+            return props.owner.onDateChange;
+          },
+          get fallback() {
+            return link(() => href() ?? "#");
+          },
+          get children() {
+            var _el$5 = _$getNextElement(_tmpl$4),
+              _el$6 = _el$5.firstChild;
+            _el$5.$$click = () => {
+              if (!step()) goDate(date());
+            };
+            _$setAttribute(_el$5, "aria-label", label);
+            _$className(_el$6, `ti ${icon}`);
+            _$effect(() => _$setAttribute(_el$5, "title", title()));
+            _$runHydrationEvents();
+            return _el$5;
+          }
+        });
       },
       get children() {
-        var _el$7 = _$getNextElement(_tmpl$3);
-        _$className(_el$7, `ti ${icon}`);
-        return _el$7;
+        return link(() => href() ?? "#");
       }
     });
   };
@@ -601,7 +618,7 @@ const CalendarHeader = props => {
    * In the day and week views that scroll through their days, Today points where today lies, or shows a calm dot while
    * it is on screen; the icon keeps its place either way. The other views name their period in the title.
    */
-  const direction = () => timeMode() ? (timeView()?.todayDirection() ?? todayDirectionOf(String(props.view), props.date, dateConfig())) || "here" : undefined;
+  const direction = () => timeMode() || monthView() ? (scrollingView()?.todayDirection() ?? todayDirectionOf(String(props.view), props.date, dateConfig())) || "here" : undefined;
   /** One arrow that the stylesheet turns toward today, or the dot while today shows. */
   const todayIcon = () => _$createComponent(Show, {
     get when() {
@@ -622,12 +639,12 @@ const CalendarHeader = props => {
   const todayButton = () => {
     const today = calendar.today(dateConfig());
     const href = props.owner.getDateHref?.(today, props.view);
-    const intercept = () => timeView()?.today() ?? false;
+    const intercept = () => scrollingView()?.today() ?? false;
     const title = () => props.nav.commands().length > 0 ? `${props.labels.today} (H)` : undefined;
     const label = [_$memo(todayIcon), (() => {
-      var _el$0 = _$getNextElement(_tmpl$7);
-      _$insert(_el$0, () => props.labels.today);
-      return _el$0;
+      var _el$9 = _$getNextElement(_tmpl$7);
+      _$insert(_el$9, () => props.labels.today);
+      return _el$9;
     })()];
     return (props.owner.onNavigateHref || props.owner.onNavigate) && href ? _$createComponent(CalendarNavigationLink, {
       get owner() {
@@ -694,54 +711,54 @@ const CalendarHeader = props => {
     label: props.labels.year
   }].filter(option => !props.owner.views || props.owner.views.includes(option.value)), ...(props.owner.customViews ?? [])]);
   return (() => {
-    var _el$1 = _$getNextElement(_tmpl$1),
-      _el$10 = _el$1.firstChild,
-      _el$15 = _el$10.firstChild,
-      [_el$16, _co$2] = _$getNextMarker(_el$15.nextSibling),
-      _el$17 = _el$16.nextSibling,
-      [_el$18, _co$3] = _$getNextMarker(_el$17.nextSibling),
-      _el$11 = _el$18.nextSibling,
-      _el$12 = _el$11.firstChild,
-      _el$13 = _el$12.nextSibling,
-      [_el$14, _co$] = _$getNextMarker(_el$13.nextSibling),
-      _el$31 = _el$10.nextSibling,
-      [_el$32, _co$8] = _$getNextMarker(_el$31.nextSibling),
-      _el$20 = _el$32.nextSibling,
-      _el$22 = _el$20.firstChild,
-      [_el$23, _co$4] = _$getNextMarker(_el$22.nextSibling),
-      _el$24 = _el$23.nextSibling,
-      [_el$25, _co$5] = _$getNextMarker(_el$24.nextSibling),
-      _el$26 = _el$25.nextSibling,
-      [_el$27, _co$6] = _$getNextMarker(_el$26.nextSibling),
-      _el$28 = _el$27.nextSibling,
-      [_el$29, _co$7] = _$getNextMarker(_el$28.nextSibling),
-      _el$33 = _el$20.nextSibling,
-      [_el$34, _co$9] = _$getNextMarker(_el$33.nextSibling);
-    _$insert(_el$10, () => navButton(previous(), "ti-chevron-left", props.labels.previous, -1), _el$16, _co$2);
-    _$insert(_el$10, () => navButton(next(), "ti-chevron-right", props.labels.next, 1), _el$18, _co$3);
-    _$insert(_el$12, title);
-    _$insert(_el$11, _$createComponent(For, {
+    var _el$0 = _$getNextElement(_tmpl$1),
+      _el$1 = _el$0.firstChild,
+      _el$14 = _el$1.firstChild,
+      [_el$15, _co$2] = _$getNextMarker(_el$14.nextSibling),
+      _el$16 = _el$15.nextSibling,
+      [_el$17, _co$3] = _$getNextMarker(_el$16.nextSibling),
+      _el$10 = _el$17.nextSibling,
+      _el$11 = _el$10.firstChild,
+      _el$12 = _el$11.nextSibling,
+      [_el$13, _co$] = _$getNextMarker(_el$12.nextSibling),
+      _el$30 = _el$1.nextSibling,
+      [_el$31, _co$8] = _$getNextMarker(_el$30.nextSibling),
+      _el$19 = _el$31.nextSibling,
+      _el$21 = _el$19.firstChild,
+      [_el$22, _co$4] = _$getNextMarker(_el$21.nextSibling),
+      _el$23 = _el$22.nextSibling,
+      [_el$24, _co$5] = _$getNextMarker(_el$23.nextSibling),
+      _el$25 = _el$24.nextSibling,
+      [_el$26, _co$6] = _$getNextMarker(_el$25.nextSibling),
+      _el$27 = _el$26.nextSibling,
+      [_el$28, _co$7] = _$getNextMarker(_el$27.nextSibling),
+      _el$32 = _el$19.nextSibling,
+      [_el$33, _co$9] = _$getNextMarker(_el$32.nextSibling);
+    _$insert(_el$1, () => navButton(previous, "ti-chevron-left", props.labels.previous, -1), _el$15, _co$2);
+    _$insert(_el$1, () => navButton(next, "ti-chevron-right", props.labels.next, 1), _el$17, _co$3);
+    _$insert(_el$11, title);
+    _$insert(_el$10, _$createComponent(For, {
       get each() {
         return titleWidths();
       },
       children: candidate => (() => {
-        var _el$35 = _$getNextElement(_tmpl$10);
-        _$insert(_el$35, candidate);
-        return _el$35;
+        var _el$34 = _$getNextElement(_tmpl$10);
+        _$insert(_el$34, candidate);
+        return _el$34;
       })()
-    }), _el$14, _co$);
-    _$insert(_el$1, _$createComponent(Show, {
+    }), _el$13, _co$);
+    _$insert(_el$0, _$createComponent(Show, {
       get when() {
         return props.owner.toolbarContent;
       },
       get children() {
-        var _el$19 = _$getNextElement(_tmpl$8);
-        _$insert(_el$19, () => props.owner.toolbarContent);
-        return _el$19;
+        var _el$18 = _$getNextElement(_tmpl$8);
+        _$insert(_el$18, () => props.owner.toolbarContent);
+        return _el$18;
       }
-    }), _el$32, _co$8);
-    _$insert(_el$20, todayButton, _el$23, _co$4);
-    _$insert(_el$20, _$createComponent(Show, {
+    }), _el$31, _co$8);
+    _$insert(_el$19, todayButton, _el$22, _co$4);
+    _$insert(_el$19, _$createComponent(Show, {
       get when() {
         return _$memo(() => !!!props.owner.onViewChange)() && props.owner.getViewHref;
       },
@@ -774,38 +791,38 @@ const CalendarHeader = props => {
           }
         });
       }
-    }), _el$25, _co$5);
-    _$insert(_el$20, () => props.owner.toolbarActions, _el$27, _co$6);
-    _$insert(_el$20, _$createComponent(Show, {
+    }), _el$24, _co$5);
+    _$insert(_el$19, () => props.owner.toolbarActions, _el$26, _co$6);
+    _$insert(_el$19, _$createComponent(Show, {
       get when() {
         return props.nav.commands().length > 0;
       },
       get children() {
-        var _el$21 = _$getNextElement(_tmpl$9);
-        _el$21.$$click = () => props.nav.openShortcuts();
+        var _el$20 = _$getNextElement(_tmpl$9);
+        _el$20.$$click = () => props.nav.openShortcuts();
         _$effect(_p$ => {
           var _v$ = calendarMessages().calendarShortcuts,
             _v$2 = calendarMessages().calendarShortcuts;
-          _v$ !== _p$.e && _$setAttribute(_el$21, "aria-label", _p$.e = _v$);
-          _v$2 !== _p$.t && _$setAttribute(_el$21, "title", _p$.t = _v$2);
+          _v$ !== _p$.e && _$setAttribute(_el$20, "aria-label", _p$.e = _v$);
+          _v$2 !== _p$.t && _$setAttribute(_el$20, "title", _p$.t = _v$2);
           return _p$;
         }, {
           e: undefined,
           t: undefined
         });
         _$runHydrationEvents();
-        return _el$21;
+        return _el$20;
       }
-    }), _el$29, _co$7);
-    _$insert(_el$1, _$createComponent(Show, {
+    }), _el$28, _co$7);
+    _$insert(_el$0, _$createComponent(Show, {
       get when() {
         return props.owner.navigationPending;
       },
       get children() {
         return _$getNextElement(_tmpl$0);
       }
-    }), _el$34, _co$9);
-    return _el$1;
+    }), _el$33, _co$9);
+    return _el$0;
   })();
 };
 
@@ -865,55 +882,55 @@ const MonthPickerView = props => {
   };
   onCleanup(() => cancelInteraction?.());
   return (() => {
-    var _el$36 = _$getNextElement(_tmpl$12),
-      _el$37 = _el$36.firstChild,
-      _el$39 = _el$37.firstChild,
-      [_el$40, _co$0] = _$getNextMarker(_el$39.nextSibling),
-      _el$41 = _el$40.nextSibling,
-      [_el$42, _co$1] = _$getNextMarker(_el$41.nextSibling),
-      _el$43 = _el$37.nextSibling,
-      [_el$44, _co$10] = _$getNextMarker(_el$43.nextSibling);
-    _$insert(_el$37, _$createComponent(Show, {
+    var _el$35 = _$getNextElement(_tmpl$12),
+      _el$36 = _el$35.firstChild,
+      _el$38 = _el$36.firstChild,
+      [_el$39, _co$0] = _$getNextMarker(_el$38.nextSibling),
+      _el$40 = _el$39.nextSibling,
+      [_el$41, _co$1] = _$getNextMarker(_el$40.nextSibling),
+      _el$42 = _el$36.nextSibling,
+      [_el$43, _co$10] = _$getNextMarker(_el$42.nextSibling);
+    _$insert(_el$36, _$createComponent(Show, {
       get when() {
         return props.owner.withWeekNumbers;
       },
       get children() {
-        var _el$38 = _$getNextElement(_tmpl$11);
-        _$insert(_el$38, () => calendarMessages().weekShort);
-        return _el$38;
+        var _el$37 = _$getNextElement(_tmpl$11);
+        _$insert(_el$37, () => calendarMessages().weekShort);
+        return _el$37;
       }
-    }), _el$40, _co$0);
-    _$insert(_el$37, _$createComponent(For, {
+    }), _el$39, _co$0);
+    _$insert(_el$36, _$createComponent(For, {
       get each() {
         return weekdays();
       },
       children: day => (() => {
-        var _el$45 = _$getNextElement(_tmpl$11);
-        _$insert(_el$45, day);
-        return _el$45;
+        var _el$44 = _$getNextElement(_tmpl$11);
+        _$insert(_el$44, day);
+        return _el$44;
       })()
-    }), _el$42, _co$1);
-    _$insert(_el$36, _$createComponent(For, {
+    }), _el$41, _co$1);
+    _$insert(_el$35, _$createComponent(For, {
       get each() {
         return weeks();
       },
       children: week => (() => {
-        var _el$46 = _$getNextElement(_tmpl$14),
-          _el$48 = _el$46.firstChild,
-          [_el$49, _co$11] = _$getNextMarker(_el$48.nextSibling),
-          _el$50 = _el$49.nextSibling,
-          [_el$51, _co$12] = _$getNextMarker(_el$50.nextSibling);
-        _$insert(_el$46, _$createComponent(Show, {
+        var _el$45 = _$getNextElement(_tmpl$14),
+          _el$47 = _el$45.firstChild,
+          [_el$48, _co$11] = _$getNextMarker(_el$47.nextSibling),
+          _el$49 = _el$48.nextSibling,
+          [_el$50, _co$12] = _$getNextMarker(_el$49.nextSibling);
+        _$insert(_el$45, _$createComponent(Show, {
           get when() {
             return props.owner.withWeekNumbers;
           },
           get children() {
-            var _el$47 = _$getNextElement(_tmpl$13);
-            _$insert(_el$47, () => zonedWeekNumber(week[0], dateConfig()));
-            return _el$47;
+            var _el$46 = _$getNextElement(_tmpl$13);
+            _$insert(_el$46, () => zonedWeekNumber(week[0], dateConfig()));
+            return _el$46;
           }
-        }), _el$49, _co$11);
-        _$insert(_el$46, _$createComponent(For, {
+        }), _el$48, _co$11);
+        _$insert(_el$45, _$createComponent(For, {
           each: week,
           children: day => {
             const dayKey = calendar.formatDateKey(day, dateConfig());
@@ -941,25 +958,25 @@ const MonthPickerView = props => {
               };
             });
             return (() => {
-              var _el$52 = _$getNextElement(_tmpl$17),
-                _el$68 = _el$52.firstChild,
-                [_el$69, _co$18] = _$getNextMarker(_el$68.nextSibling),
-                _el$54 = _el$69.nextSibling,
-                _el$55 = _el$54.firstChild,
-                [_el$56, _co$13] = _$getNextMarker(_el$55.nextSibling),
-                _el$57 = _el$56.nextSibling,
-                [_el$58, _co$14] = _$getNextMarker(_el$57.nextSibling),
-                _el$59 = _el$54.nextSibling,
-                _el$61 = _el$59.firstChild,
-                [_el$62, _co$15] = _$getNextMarker(_el$61.nextSibling),
-                _el$63 = _el$62.nextSibling,
-                [_el$64, _co$16] = _$getNextMarker(_el$63.nextSibling),
-                _el$65 = _el$64.nextSibling,
-                [_el$66, _co$17] = _$getNextMarker(_el$65.nextSibling),
-                _el$67 = _el$59.nextSibling;
-              _$setAttribute(_el$52, "data-calendar-day-key", dayKey);
-              _$setAttribute(_el$52, "data-outside", !sameMonth ? "true" : undefined);
-              _$insert(_el$52, _$createComponent(Show, {
+              var _el$51 = _$getNextElement(_tmpl$17),
+                _el$67 = _el$51.firstChild,
+                [_el$68, _co$18] = _$getNextMarker(_el$67.nextSibling),
+                _el$53 = _el$68.nextSibling,
+                _el$54 = _el$53.firstChild,
+                [_el$55, _co$13] = _$getNextMarker(_el$54.nextSibling),
+                _el$56 = _el$55.nextSibling,
+                [_el$57, _co$14] = _$getNextMarker(_el$56.nextSibling),
+                _el$58 = _el$53.nextSibling,
+                _el$60 = _el$58.firstChild,
+                [_el$61, _co$15] = _$getNextMarker(_el$60.nextSibling),
+                _el$62 = _el$61.nextSibling,
+                [_el$63, _co$16] = _$getNextMarker(_el$62.nextSibling),
+                _el$64 = _el$63.nextSibling,
+                [_el$65, _co$17] = _$getNextMarker(_el$64.nextSibling),
+                _el$66 = _el$58.nextSibling;
+              _$setAttribute(_el$51, "data-calendar-day-key", dayKey);
+              _$setAttribute(_el$51, "data-outside", !sameMonth ? "true" : undefined);
+              _$insert(_el$51, _$createComponent(Show, {
                 get when() {
                   return props.owner.onSlotActivate;
                 },
@@ -985,8 +1002,8 @@ const MonthPickerView = props => {
                   });
                 },
                 get children() {
-                  var _el$53 = _$getNextElement(_tmpl$15);
-                  _$spread(_el$53, _$mergeProps({
+                  var _el$52 = _$getNextElement(_tmpl$15);
+                  _$spread(_el$52, _$mergeProps({
                     get ["aria-label"]() {
                       return calendarMessages().createEventOn({
                         label: dayLabel
@@ -1001,20 +1018,20 @@ const MonthPickerView = props => {
                     };
                   }, () => performance.now() < suppressSlotClickUntil, true)), false, false);
                   _$runHydrationEvents();
-                  return _el$53;
+                  return _el$52;
                 }
-              }), _el$69, _co$18);
-              _$insert(_el$54, _$createComponent(Show, {
+              }), _el$68, _co$18);
+              _$insert(_el$53, _$createComponent(Show, {
                 get when() {
                   return props.owner.onSlotActivate && href;
                 },
                 get fallback() {
                   return (() => {
-                    var _el$70 = _$getNextElement(_tmpl$18);
-                    _$setAttribute(_el$70, "data-today", isToday ? "true" : undefined);
-                    _$setAttribute(_el$70, "data-outside", !sameMonth ? "true" : undefined);
-                    _$insert(_el$70, () => calendar.formatDayNumber(day, dateConfig()));
-                    return _el$70;
+                    var _el$69 = _$getNextElement(_tmpl$18);
+                    _$setAttribute(_el$69, "data-today", isToday ? "true" : undefined);
+                    _$setAttribute(_el$69, "data-outside", !sameMonth ? "true" : undefined);
+                    _$insert(_el$69, () => calendar.formatDayNumber(day, dateConfig()));
+                    return _el$69;
                   })();
                 },
                 children: dayHref => _$createComponent(CalendarNavigationLink, {
@@ -1038,40 +1055,40 @@ const MonthPickerView = props => {
                     return calendar.formatDayNumber(day, dateConfig());
                   }
                 })
-              }), _el$56, _co$13);
-              _$insert(_el$54, _$createComponent(Show, {
+              }), _el$55, _co$13);
+              _$insert(_el$53, _$createComponent(Show, {
                 when: dayBadge,
                 children: badge => (() => {
-                  var _el$71 = _$getNextElement(_tmpl$19),
-                    _el$72 = _el$71.firstChild,
-                    [_el$73, _co$19] = _$getNextMarker(_el$72.nextSibling),
-                    _el$74 = _el$73.nextSibling,
-                    [_el$75, _co$20] = _$getNextMarker(_el$74.nextSibling);
-                  _$insert(_el$71, _$createComponent(Show, {
+                  var _el$70 = _$getNextElement(_tmpl$19),
+                    _el$71 = _el$70.firstChild,
+                    [_el$72, _co$19] = _$getNextMarker(_el$71.nextSibling),
+                    _el$73 = _el$72.nextSibling,
+                    [_el$74, _co$20] = _$getNextMarker(_el$73.nextSibling);
+                  _$insert(_el$70, _$createComponent(Show, {
                     get when() {
                       return badge().icon;
                     },
                     children: icon => (() => {
-                      var _el$76 = _$getNextElement(_tmpl$3);
-                      _$effect(() => _$className(_el$76, `k2b-calendar-month__badge-icon ti ti-${icon()}`));
-                      return _el$76;
+                      var _el$75 = _$getNextElement(_tmpl$3);
+                      _$effect(() => _$className(_el$75, `k2b-calendar-month__badge-icon ti ti-${icon()}`));
+                      return _el$75;
                     })()
-                  }), _el$73, _co$19);
-                  _$insert(_el$71, () => badge().label, _el$75, _co$20);
-                  return _el$71;
+                  }), _el$72, _co$19);
+                  _$insert(_el$70, () => badge().label, _el$74, _co$20);
+                  return _el$70;
                 })()
-              }), _el$58, _co$14);
-              _$insert(_el$59, _$createComponent(Show, {
+              }), _el$57, _co$14);
+              _$insert(_el$58, _$createComponent(Show, {
                 get when() {
                   return eventStack().preview;
                 },
                 get children() {
-                  var _el$60 = _$getNextElement(_tmpl$16);
-                  _$insert(_el$60, () => props.events.find(event => event.id === eventStack().preview.id)?.title ?? calendarMessages().moveEvent);
-                  return _el$60;
+                  var _el$59 = _$getNextElement(_tmpl$16);
+                  _$insert(_el$59, () => props.events.find(event => event.id === eventStack().preview.id)?.title ?? calendarMessages().moveEvent);
+                  return _el$59;
                 }
-              }), _el$62, _co$15);
-              _$insert(_el$59, _$createComponent(For, {
+              }), _el$61, _co$15);
+              _$insert(_el$58, _$createComponent(For, {
                 get each() {
                   return eventStack().visibleEvents;
                 },
@@ -1091,8 +1108,8 @@ const MonthPickerView = props => {
                     return props.owner.onEventDrop ? (pointerEvent, markDragged) => startMove(pointerEvent, event, markDragged) : undefined;
                   }
                 })
-              }), _el$64, _co$16);
-              _$insert(_el$59, _$createComponent(Show, {
+              }), _el$63, _co$16);
+              _$insert(_el$58, _$createComponent(Show, {
                 get when() {
                   return eventStack().hiddenCount > 0;
                 },
@@ -1112,54 +1129,54 @@ const MonthPickerView = props => {
                     }
                   });
                 }
-              }), _el$66, _co$17);
-              _$insert(_el$67, _$createComponent(For, {
+              }), _el$65, _co$17);
+              _$insert(_el$66, _$createComponent(For, {
                 get each() {
                   return events.slice(0, 4);
                 },
                 children: event => (() => {
-                  var _el$77 = _$getNextElement(_tmpl$20);
+                  var _el$76 = _$getNextElement(_tmpl$20);
                   _$effect(_p$ => {
                     var _v$5 = event.colorHex ? undefined : event.color ?? "blue",
                       _v$6 = event.colorHex ? {
                         "background-color": event.colorHex
                       } : undefined;
-                    _v$5 !== _p$.e && _$setAttribute(_el$77, "data-color", _p$.e = _v$5);
-                    _p$.t = _$style(_el$77, _v$6, _p$.t);
+                    _v$5 !== _p$.e && _$setAttribute(_el$76, "data-color", _p$.e = _v$5);
+                    _p$.t = _$style(_el$76, _v$6, _p$.t);
                     return _p$;
                   }, {
                     e: undefined,
                     t: undefined
                   });
-                  return _el$77;
+                  return _el$76;
                 })()
               }));
-              _$effect(() => _$setAttribute(_el$52, "data-drop-preview", movePreview()?.start && calendar.formatDateKey(movePreview().start, dateConfig()) === dayKey ? "true" : undefined));
-              return _el$52;
+              _$effect(() => _$setAttribute(_el$51, "data-drop-preview", movePreview()?.start && calendar.formatDateKey(movePreview().start, dateConfig()) === dayKey ? "true" : undefined));
+              return _el$51;
             })();
           }
-        }), _el$51, _co$12);
-        _$effect(() => _$setAttribute(_el$46, "data-week-numbers", props.owner.withWeekNumbers ? "true" : undefined));
-        return _el$46;
+        }), _el$50, _co$12);
+        _$effect(() => _$setAttribute(_el$45, "data-week-numbers", props.owner.withWeekNumbers ? "true" : undefined));
+        return _el$45;
       })()
-    }), _el$44, _co$10);
+    }), _el$43, _co$10);
     _$effect(_p$ => {
       var _v$3 = `auto repeat(${weeks().length}, ${props.compact ? "minmax(2.75rem, auto)" : "minmax(5rem, 1fr)"})`,
         _v$4 = props.owner.withWeekNumbers ? "true" : undefined;
-      _v$3 !== _p$.e && _$setStyleProperty(_el$36, "grid-template-rows", _p$.e = _v$3);
-      _v$4 !== _p$.t && _$setAttribute(_el$37, "data-week-numbers", _p$.t = _v$4);
+      _v$3 !== _p$.e && _$setStyleProperty(_el$35, "grid-template-rows", _p$.e = _v$3);
+      _v$4 !== _p$.t && _$setAttribute(_el$36, "data-week-numbers", _p$.t = _v$4);
       return _p$;
     }, {
       e: undefined,
       t: undefined
     });
-    return _el$36;
+    return _el$35;
   })();
 };
 
 /** One entry of the month grid: its whole range, and the days it covers as `YYYY-MM-DD` keys. */
 
-/** What the calendar's controller asks of the month view. */
+/** What the calendar's controller and header ask of the month view; the rest serves the month that scrolls. */
 
 /** Lane height and gap of the month entries, in rem; the stylesheet reads both from the grid's custom properties. */
 const MONTH_LANE_REM = 1.25;
@@ -1219,9 +1236,13 @@ const PRINTABLE_KEY = /^.$/u;
 const MonthView = props => {
   const calendarMessages = useCalendarMessages();
   const dateConfig = createMemo(() => ownerDateConfig(props.owner));
+  const continuous = createMemo(() => Boolean(props.owner.range));
+  const [mounted, setMounted] = createSignal(false);
+  const hostMonthKey = () => calendar.formatDateKey(calendar.startOfMonth(props.date, dateConfig()), dateConfig());
+  const [focusMonthKey, setFocusMonthKey] = createSignal(untrack(hostMonthKey));
   // The shown month and its grid change only with the month, so a refresh of the same month keeps every cell and its
   // focus.
-  const month = createMemo(() => zonedYearMonth(props.date, dateConfig()), undefined, {
+  const month = createMemo(() => zonedYearMonth(continuous() ? calendar.parseCalendarDate(focusMonthKey(), dateConfig()) : props.date, dateConfig()), undefined, {
     equals: (previous, next) => previous.year === next.year && previous.month === next.month
   });
   const weeks = createMemo(() => calendar.getMonthGrid(month().year, month().month, dateConfig()).map(week => week.map(day => ({
@@ -1233,17 +1254,12 @@ const MonthView = props => {
   const weekdays = createMemo(() => calendar.weekdays(dateConfig()));
   const todayKey = createMemo(() => calendar.formatDateKey(props.now, dateConfig()));
   const items = createMemo(() => monthItems(props.events));
-  const weekLayouts = createMemo(() => weeks().map(week => layoutMonthWeek(week.map(entry => entry.key), items().map(item => ({
-    item,
-    firstKey: item.firstKey,
-    lastKey: item.lastKey,
-    bar: item.bar
-  })))));
   const [capacities, setCapacities] = createSignal([]);
   const [cellWidth, setCellWidth] = createSignal(0);
   const [barFont, setBarFont] = createSignal("");
   const [anchorKey, setAnchorKey] = createSignal(null);
   const [focusKey, setFocusKey] = createSignal(null);
+  const [focusedCellKey, setFocusedCellKey] = createSignal(null);
   const [popover, setPopover] = createSignal(null);
   /** Whether the quick create holds the focus; until then the grid keeps it. */
   const [createActive, setCreateActive] = createSignal(false);
@@ -1269,13 +1285,479 @@ const MonthView = props => {
     end: calendar.addDays(parseKey(range.last), 1, dateConfig()),
     allDay: true
   });
-  const visibleKeys = createMemo(() => weeks().flatMap(week => week.map(entry => entry.key)));
+  const hostKey = () => calendar.formatDateKey(props.date, dateConfig());
+  const loadedRange = createMemo(() => {
+    const range = props.owner.range;
+    const keyOf = value => calendar.formatDateKey(parseDate(value, dateConfig()), dateConfig());
+    return range ? {
+      first: keyOf(range.from),
+      to: keyOf(range.to)
+    } : {
+      first: hostMonthKey(),
+      to: hostMonthKey()
+    };
+  });
+  const loadedWeeks = createMemo(() => monthWeekKeys(loadedRange().first, loadedRange().to, dateConfig().firstDayOfWeek ?? 1));
+  const loaded = key => key >= loadedRange().first && key < loadedRange().to;
+  // The first paint starts at the month's first week. Mount adds the earlier weeks and positions synchronously.
+  const trackWeeks = createMemo(() => {
+    const all = loadedWeeks();
+    const anchor = monthRowOf(all, hostMonthKey());
+    return mounted() || anchor === undefined ? all : all.slice(anchor);
+  });
+  const [scrollTop, setScrollTop] = createSignal(0);
+  const [rowHeight, setRowHeight] = createSignal(80);
+  const [viewHeight, setViewHeight] = createSignal(400);
+  const [labelShown, setLabelShown] = createSignal(false);
+  const [pulseKey, setPulseKey] = createSignal("");
+  let scroller;
+  let weekdayElement;
+  let ready = false;
+  let positioned = false;
+  let silentTop = null;
+  let frame = 0;
+  let labelTimer = 0;
+  let reportTimer = 0;
+  let queueTimer = 0;
+  let glideTimer = 0;
+  let arrivalTimer = 0;
+  let pulseTimer = 0;
+  /** The month that quick repeated steps head for; the next step and the arrows' links go on from it. */
+  const [queuedMonth, setQueuedMonth] = createSignal(null);
+  let pendingTarget = null;
+  let pendingOrigin = null;
+  let glideTarget = null;
+  let pulseOnArrival = false;
+  let reported = "";
+  let reportedFocus = "";
+  let askedEarlier = "";
+  let askedLater = "";
+  let exhaustedEarlier = "";
+  let exhaustedLater = "";
+  const scrollFocusDay = createMemo(() => {
+    const first = focusMonthKey();
+    const range = selection();
+    const selected = range && range.last >= first ? range.first > first ? range.first : first : null;
+    if (selected?.slice(0, 7) === first.slice(0, 7)) return selected;
+    if (hostKey().slice(0, 7) === first.slice(0, 7)) return hostKey();
+    return todayKey().slice(0, 7) === first.slice(0, 7) ? todayKey() : first;
+  });
+  const visibleRange = createMemo(() => {
+    const weeks = trackWeeks();
+    const rows = monthVisibleRows(scrollTop(), viewHeight(), rowHeight(), weeks.length);
+    const first = weeks[rows.first] ?? focusMonthKey();
+    return {
+      first,
+      last: addDayKeys(weeks[Math.max(rows.first, rows.end - 1)] ?? first, 6)
+    };
+  });
+  const renderWindow = createMemo(() => mounted() ? monthRenderWindow(scrollTop(), viewHeight(), rowHeight(), trackWeeks().length) : {
+    first: 0,
+    end: Math.min(trackWeeks().length, MONTH_ROW_BLOCK * 2)
+  }, undefined, {
+    equals: (left, right) => left.first === right.first && left.end === right.end
+  });
+  /** The window's weeks, and those of the focused day, the selection's moving end, and an open popover's day. */
+  const renderedWeeks = createMemo(() => {
+    const weeks = trackWeeks();
+    const window = renderWindow();
+    const keys = new Set(weeks.slice(window.first, window.end));
+    for (const key of [focusKey(), focusedCellKey(), popover()?.anchor.dataset.calendarDayKey]) {
+      const row = key ? monthRowOf(weeks, key) : undefined;
+      if (row !== undefined) keys.add(weeks[row]);
+    }
+    return [...keys].sort();
+  });
+  // Rows keep their elements, but the list moves a kept row when the window passes it, and a browser drops the focus
+  // from an element that moves. The focused element takes it back once the rows are in place.
+  let refocus = null;
+  createComputed(on(renderedWeeks, () => {
+    const active = typeof document === "undefined" ? null : document.activeElement;
+    refocus = active && scroller?.contains(active) ? active : null;
+  }, {
+    defer: true
+  }));
+  createEffect(on(renderedWeeks, () => {
+    const element = refocus;
+    refocus = null;
+    if (element instanceof HTMLElement && element.isConnected && document.activeElement !== element) element.focus({
+      preventScroll: true
+    });
+  }, {
+    defer: true
+  }));
+  const placeOfToday = () => {
+    const weeks = trackWeeks();
+    const row = monthRowOf(weeks, todayKey());
+    return row === undefined ? todayKey() < (weeks[0] ?? focusMonthKey()) ? "up" : "down" : monthTodayDirection(row, scrollTop(), viewHeight(), rowHeight());
+  };
+  const measureScroll = () => {
+    if (!scroller) return;
+    const row = scroller.querySelector(".k2b-calendar-month__week");
+    const height = row?.getBoundingClientRect().height;
+    if (height && height > 0) setRowHeight(height);
+    setViewHeight(Math.max(0, scroller.clientHeight - (weekdayElement?.getBoundingClientRect().height ?? 0)));
+  };
+  const loadMore = edge => {
+    if (!ready) return;
+    const range = loadedRange();
+    const asked = edge === "earlier" ? range.first : range.to;
+    const loader = edge === "earlier" ? props.owner.onLoadEarlier : props.owner.onLoadLater;
+    if (!loader || (edge === "earlier" ? askedEarlier === asked || exhaustedEarlier === asked : askedLater === asked || exhaustedLater === asked)) return;
+    if (edge === "earlier") askedEarlier = asked;else askedLater = asked;
+    const result = loader();
+    if (result !== null && (typeof result === "object" || typeof result === "function") && "then" in result && typeof result.then === "function") {
+      const settled = () => {
+        if (!ready || (edge === "earlier" ? loadedRange().first : loadedRange().to) !== asked) return;
+        if (edge === "earlier") exhaustedEarlier = asked;else exhaustedLater = asked;
+        const target = pendingOrigin === (edge === "earlier" ? -1 : 1) ? pendingTarget : null;
+        if (target) {
+          pendingTarget = null;
+          pendingOrigin = null;
+          setQueuedMonth(null);
+          window.clearTimeout(queueTimer);
+        }
+        if (edge === "later" && glideTarget?.expires === Number.POSITIVE_INFINITY) {
+          glideTarget = null;
+          pulseOnArrival = false;
+          setQueuedMonth(null);
+          for (const timer of [queueTimer, glideTimer, arrivalTimer]) window.clearTimeout(timer);
+          readScroll();
+        }
+        if (target) props.goToDate?.(parseKey(target));
+      };
+      void Promise.resolve(result).then(settled, settled);
+    }
+  };
+  /** Asks for more weeks near either end; weeks inserted above a running glide would move its way, so it waits. */
+  const loadNearEdges = () => {
+    if (!scroller) return;
+    if (!glideTarget && scroller.scrollTop < MONTH_ROWS_IN_VIEW * rowHeight()) loadMore("earlier");
+    if (scroller.scrollTop + viewHeight() > (trackWeeks().length - MONTH_ROWS_IN_VIEW * 2) * rowHeight()) loadMore("later");
+  };
+  const reportVisible = () => {
+    if (!ready) return;
+    const {
+      first,
+      last
+    } = untrack(visibleRange);
+    const focus = untrack(scrollFocusDay);
+    const value = `${first}/${last}/${focus}`;
+    if (reported === value) return;
+    reported = value;
+    window.clearTimeout(reportTimer);
+    reportTimer = window.setTimeout(() => {
+      reportedFocus = focus;
+      props.owner.onVisibleDateChange?.(parseKey(first), parseKey(last), parseKey(focus));
+    }, 250);
+  };
+  const keepLabel = () => {
+    window.clearTimeout(labelTimer);
+    labelTimer = window.setTimeout(() => setLabelShown(false), 650);
+  };
+  const readScroll = (showLabel = true) => {
+    if (!scroller) return;
+    const top = scroller.scrollTop;
+    setScrollTop(top);
+    const weeks = trackWeeks();
+    const week = weeks[monthFocusRow(top, viewHeight(), rowHeight(), weeks.length)];
+    if (week) {
+      const next = monthOfWeek(week);
+      if (next !== untrack(focusMonthKey)) {
+        setFocusMonthKey(next);
+        if (showLabel && ready) {
+          setLabelShown(true);
+          keepLabel();
+        }
+      }
+    }
+    reportVisible();
+  };
+  const pulseToday = () => {
+    if (reducedMotion()) return;
+    setPulseKey(todayKey());
+    window.clearTimeout(pulseTimer);
+    pulseTimer = window.setTimeout(() => setPulseKey(""), 1000);
+  };
+  const finishGlide = () => {
+    if (!scroller) return;
+    const target = glideTarget;
+    const row = target ? monthRowOf(trackWeeks(), target.week) : undefined;
+    // A clamped glide may still be waiting for more weeks below; scrollend is not arrival then.
+    if (target && row !== undefined && Math.abs(scroller.scrollTop - (row * rowHeight() + target.offset)) > 1) return;
+    glideTarget = null;
+    if (pendingOrigin !== -1 && pendingOrigin !== 1) {
+      setQueuedMonth(null);
+      window.clearTimeout(queueTimer);
+    }
+    window.clearTimeout(glideTimer);
+    window.clearTimeout(arrivalTimer);
+    readScroll();
+    // A glide that lands near an end asks for the next weeks there, as the reader's own scrolling does.
+    if (target) loadNearEdges();
+    if (pulseOnArrival) {
+      pulseOnArrival = false;
+      pulseToday();
+    }
+  };
+  const cancelGlide = () => {
+    if (!scroller) return;
+    if (pendingOrigin === -1 || pendingOrigin === 1) {
+      pendingTarget = null;
+      pendingOrigin = null;
+      setQueuedMonth(null);
+      window.clearTimeout(queueTimer);
+    }
+    if (!glideTarget) return;
+    // A reader's wheel or touch takes over from navigation, including any target waiting for more weeks.
+    glideTarget = null;
+    pulseOnArrival = false;
+    setQueuedMonth(null);
+    for (const timer of [queueTimer, glideTimer, arrivalTimer]) window.clearTimeout(timer);
+    scroller.scrollTo({
+      top: scroller.scrollTop,
+      behavior: "instant"
+    });
+  };
+  const issueGlide = (top, smooth) => {
+    if (!scroller) return;
+    const maximum = Math.max(0, scroller.scrollHeight - scroller.clientHeight);
+    const target = Math.max(0, Math.min(top, maximum));
+    if (smooth && !reducedMotion() && Math.abs(target - scroller.scrollTop) > viewHeight() * 3) {
+      scroller.scrollTop = target - Math.sign(target - scroller.scrollTop) * viewHeight();
+      readScroll();
+    }
+    scroller.scrollTo({
+      top: target,
+      behavior: smooth && !reducedMotion() ? "smooth" : "instant"
+    });
+    if (top > maximum + 1) loadMore("later");
+    if (!smooth || reducedMotion()) {
+      readScroll();
+      finishGlide();
+    }
+  };
+  const glide = (top, smooth = true) => {
+    if (!scroller) return;
+    const row = Math.max(0, Math.min(trackWeeks().length - 1, Math.floor(top / rowHeight())));
+    const week = trackWeeks()[row];
+    if (!week) return;
+    // A target past the loaded weeks waits for them however long they take; the reader's own scrolling ends the wait.
+    const waiting = top > scroller.scrollHeight - scroller.clientHeight + 1;
+    glideTarget = {
+      week,
+      offset: top - row * rowHeight(),
+      expires: waiting ? Number.POSITIVE_INFINITY : performance.now() + 1600
+    };
+    window.clearTimeout(glideTimer);
+    window.clearTimeout(arrivalTimer);
+    if (!waiting) glideTimer = window.setTimeout(() => {
+      glideTarget = null;
+      pulseOnArrival = false;
+    }, 1600);
+    arrivalTimer = window.setTimeout(finishGlide, 900);
+    issueGlide(top, smooth);
+  };
+  const positionMonth = (key, smooth = true, reveal = false) => {
+    if (!continuous() || !loaded(key) || !scroller) return false;
+    const weeks = trackWeeks();
+    const first = monthRowOf(weeks, `${key.slice(0, 7)}-01`);
+    const row = monthRowOf(weeks, key);
+    if (first === undefined || row === undefined) return false;
+    const top = first * rowHeight();
+    glide(reveal ? monthRevealTop(row, top, viewHeight(), rowHeight()) ?? top : top, smooth);
+    return true;
+  };
+  const goToMonth = key => positionMonth(key, true, true);
+  const stepMonth = direction => {
+    if (!continuous() || !scroller) return false;
+    const target = calendar.formatDateKey(calendar.addMonths(parseKey(queuedMonth() ?? focusMonthKey()), direction, dateConfig()), dateConfig());
+    if (loaded(target)) {
+      pendingTarget = null;
+      pendingOrigin = null;
+      if (!positionMonth(target)) return false;
+    } else {
+      // A month past the loaded weeks asks for them and waits; an end the host has reached goes through its navigation.
+      const range = loadedRange();
+      const later = direction === 1;
+      const edge = later ? range.to : range.first;
+      if (!(later ? props.owner.onLoadLater : props.owner.onLoadEarlier) || (later ? exhaustedLater : exhaustedEarlier) === edge) return false;
+      pendingTarget = target;
+      pendingOrigin = direction;
+      loadMore(later ? "later" : "earlier");
+    }
+    // Instant positioning may finish during positionMonth; queue afterwards so rapid clicks still accumulate.
+    setQueuedMonth(target);
+    window.clearTimeout(queueTimer);
+    // A glide that waits for more weeks keeps its month queued until it arrives or the reader scrolls.
+    queueTimer = window.setTimeout(() => {
+      if (pendingOrigin !== -1 && pendingOrigin !== 1 && glideTarget?.expires !== Number.POSITIVE_INFINITY) setQueuedMonth(null);
+    }, 1200);
+    return true;
+  };
+  const goToday = () => {
+    if (!continuous() || !loaded(todayKey()) || !scroller) return false;
+    pulseOnArrival = !reducedMotion();
+    if (positionMonth(todayKey(), true, true)) return true;
+    pulseOnArrival = false;
+    return false;
+  };
+  const revealDay = key => {
+    const row = monthRowOf(trackWeeks(), key);
+    if (row === undefined || !scroller) return;
+    const top = monthRevealTop(row, scroller.scrollTop, viewHeight(), rowHeight());
+    if (top !== undefined) glide(top);
+  };
+  const onScroll = () => {
+    if (!ready || !scroller) return;
+    // Initial positioning and range rebasing are not the reader asking for more weeks.
+    if (silentTop !== null && Math.abs(scroller.scrollTop - silentTop) < 1) return;
+    silentTop = null;
+    if (untrack(labelShown)) keepLabel();
+    if (!frame) frame = requestAnimationFrame(() => {
+      frame = 0;
+      readScroll();
+      if (!scroller) return;
+      loadNearEdges();
+    });
+  };
+  // Capture the old track before render effects change its height, then restore the same week and pixel below.
+  let previousWeeks = [];
+  let savedAnchor = null;
+  createComputed(on(loadedWeeks, weeks => {
+    if (!untrack(mounted) || !scroller) return;
+    const top = scroller.scrollTop;
+    const row = Math.floor(top / untrack(rowHeight));
+    const week = previousWeeks[row];
+    savedAnchor = week ? {
+      week,
+      delta: top - row * untrack(rowHeight)
+    } : null;
+    const next = week ? monthRowOf(weeks, week) : undefined;
+    // Move the render window before DOM updates, so even a larger rebase retains the visible rows' elements.
+    if (next !== undefined && savedAnchor) setScrollTop(next * untrack(rowHeight) + savedAnchor.delta);
+  }, {
+    defer: true
+  }));
+  createEffect(on(loadedWeeks, () => {
+    if (!untrack(mounted) || !scroller) return;
+    measureScroll();
+    previousWeeks = untrack(trackWeeks);
+    const row = savedAnchor ? monthRowOf(previousWeeks, savedAnchor.week) : undefined;
+    const top = row !== undefined && savedAnchor ? row * untrack(rowHeight) + savedAnchor.delta : scroller.scrollTop;
+    // Weeks added below move nothing, and writing the same position would stop a glide on its way.
+    const moved = Math.abs(scroller.scrollTop - top) >= 1;
+    if (moved) scroller.scrollTop = top;
+    if (pendingTarget && loaded(pendingTarget)) {
+      const key = pendingTarget;
+      pendingTarget = null;
+      pendingOrigin = null;
+      positioned = positionMonth(key, positioned) || positioned;
+      if (pendingKey === key) {
+        pendingKey = null;
+        select(key);
+        queueMicrotask(() => focusCell(key));
+      }
+    } else {
+      if (pendingTarget && (pendingOrigin === -1 || pendingOrigin === 1)) loadMore(pendingOrigin === -1 ? "earlier" : "later");
+      // A glide goes on after the weeks above moved it, and one that waited at the end goes on into the new weeks.
+      if (glideTarget && performance.now() < glideTarget.expires && (moved || glideTarget.expires === Number.POSITIVE_INFINITY)) {
+        const target = monthRowOf(previousWeeks, glideTarget.week);
+        if (target !== undefined) issueGlide(target * untrack(rowHeight) + glideTarget.offset, true);
+      }
+    }
+    savedAnchor = null;
+    silentTop = scroller.scrollTop;
+    readScroll(false);
+  }, {
+    defer: true
+  }));
+  createEffect(on(hostKey, key => {
+    if (!continuous() || !untrack(mounted) || !scroller) return;
+    if (key === reportedFocus) {
+      if (pendingOrigin === "host") {
+        pendingTarget = null;
+        pendingOrigin = null;
+      }
+      return;
+    }
+    pendingTarget = loaded(key) ? null : key;
+    pendingOrigin = pendingTarget ? "host" : null;
+    if (pendingTarget) return;
+    const visible = untrack(visibleRange);
+    if (key.slice(0, 7) !== untrack(focusMonthKey).slice(0, 7) || key < visible.first || key > visible.last) positionMonth(key);
+    if (pendingKey === key) {
+      pendingKey = null;
+      select(key);
+      queueMicrotask(() => focusCell(key));
+    }
+  }, {
+    defer: true
+  }));
+  createEffect(on(scrollFocusDay, () => {
+    if (continuous()) reportVisible();
+  }, {
+    defer: true
+  }));
+  // The scrolling starts once the grid is on the page, also when a host passes `range` only later.
+  createEffect(on(continuous, active => {
+    if (!active || !scroller) return;
+    setMounted(true);
+    measureScroll();
+    previousWeeks = trackWeeks();
+    const row = monthRowOf(previousWeeks, hostMonthKey());
+    if (row !== undefined && loaded(hostKey())) scroller.scrollTop = row * rowHeight();
+    // Too few weeks below the month, such as the days of another view while the month's own load, cannot put its
+    // first week on top yet; the month goes there once its weeks arrive.
+    positioned = row !== undefined && Math.abs(scroller.scrollTop - row * rowHeight()) < 1;
+    if (!positioned) {
+      pendingTarget = hostKey();
+      pendingOrigin = "mount";
+    }
+    readScroll(false);
+    silentTop = scroller.scrollTop;
+    ready = true;
+    reportVisible();
+    scroller.addEventListener("scrollend", finishGlide);
+    const resize = typeof ResizeObserver === "undefined" ? undefined : new ResizeObserver(() => {
+      if (!scroller) return;
+      const height = untrack(rowHeight);
+      const position = scroller.scrollTop / height;
+      measureScroll();
+      if (height !== untrack(rowHeight)) {
+        scroller.scrollTop = position * untrack(rowHeight);
+        if (glideTarget) {
+          const target = monthRowOf(untrack(trackWeeks), glideTarget.week);
+          if (target !== undefined) issueGlide(target * untrack(rowHeight) + glideTarget.offset, true);
+        }
+        silentTop = scroller.scrollTop;
+      }
+      readScroll(false);
+    });
+    resize?.observe(scroller);
+    const element = scroller;
+    onCleanup(() => {
+      resize?.disconnect();
+      element.removeEventListener("scrollend", finishGlide);
+      for (const timer of [labelTimer, reportTimer, queueTimer, glideTimer, arrivalTimer, pulseTimer]) window.clearTimeout(timer);
+      if (frame) cancelAnimationFrame(frame);
+      frame = 0;
+      ready = false;
+      setMounted(false);
+    });
+  }));
+  const visibleKeys = createMemo(() => continuous() ? renderedWeeks().flatMap(key => Array.from({
+    length: 7
+  }, (_, day) => addDayKeys(key, day))) : weeks().flatMap(week => week.map(entry => entry.key)));
   const rovingKey = createMemo(() => {
     const keys = visibleKeys();
-    const focus = focusKey();
+    const focus = focusKey() ?? (continuous() ? focusedCellKey() : null);
     if (focus && keys.includes(focus)) return focus;
-    if (keys.includes(todayKey())) return todayKey();
-    return calendar.formatDateKey(zonedMonthDate(month().year, month().month, dateConfig()), dateConfig());
+    if (keys.includes(todayKey()) && (!continuous() || todayKey() >= visibleRange().first && todayKey() <= visibleRange().last)) return todayKey();
+    const first = calendar.formatDateKey(zonedMonthDate(month().year, month().month, dateConfig()), dateConfig());
+    if (!continuous() || keys.includes(first)) return first;
+    const visible = visibleRange();
+    return keys.find(key => key.slice(0, 7) === first.slice(0, 7) && key >= visible.first && key <= visible.last) ?? keys.find(key => key >= visible.first && key <= visible.last) ?? keys[0] ?? first;
   });
   const dropRange = createMemo(() => {
     const preview = movePreview();
@@ -1300,8 +1782,7 @@ const MonthView = props => {
     setAnchorKey(anchor);
     setFocusKey(focus);
   };
-  // The host learns every change of the selected days, and a new month starts without a selection. The selection
-  // goes with the view, so switching to another view reports that nothing is selected.
+  // Selection survives scrolling; only paging starts a month without it. Switching views clears the host's selection.
   createEffect(on(selection, range => props.owner.onSelectionChange?.(range ? rangeOf(range) : null), {
     defer: true
   }));
@@ -1310,6 +1791,7 @@ const MonthView = props => {
   });
   createEffect(on(selection, range => props.onFocusDay?.(range ? parseKey(range.first) : null)));
   createEffect(on(month, () => {
+    if (continuous()) return;
     setPopover(null);
     const key = pendingKey;
     pendingKey = null;
@@ -1400,6 +1882,8 @@ const MonthView = props => {
   const focusCell = key => cells.get(key)?.focus({
     preventScroll: true
   });
+  /** Whether the focus is in the popover, or fell to the page as it hid: only then does a close return it. */
+  const focusInPopover = () => popoverElement?.contains(document.activeElement) || document.activeElement === document.body;
   const closePopover = (restoreFocus = true) => {
     if (!popover()) return;
     setPopover(null);
@@ -1431,6 +1915,11 @@ const MonthView = props => {
     popoverFocusable()?.focus();
     return true;
   };
+  /**
+   * The day to create on without a selection. The month that scrolls takes the day it stands for, today or the 1st of
+   * the month in focus, never a day the keyboard last visited in another month.
+   */
+  const unselectedKey = () => continuous() ? scrollFocusDay() : rovingKey();
   /** Enter, a double-click, and N create on the selection, with the quick create or the host's own create action. */
   const createOnSelection = () => {
     const range = selection();
@@ -1443,8 +1932,8 @@ const MonthView = props => {
   onMount(() => props.register?.({
     quickCreate: create => {
       const range = selection() ?? {
-        first: rovingKey(),
-        last: rovingKey()
+        first: unselectedKey(),
+        last: unselectedKey()
       };
       select(range.first, range.last);
       if (!openCreate(range, {
@@ -1453,10 +1942,18 @@ const MonthView = props => {
       })) props.owner.onSlotActivate?.(rangeOf(range));
     },
     createTarget: () => rangeOf(selection() ?? {
-      first: rovingKey(),
-      last: rovingKey()
+      first: unselectedKey(),
+      last: unselectedKey()
     }),
-    typing: () => popover()?.kind === "create" && !createActive()
+    typing: () => popover()?.kind === "create" && !createActive(),
+    continuous,
+    focusMonth: () => parseKey(focusMonthKey()),
+    stepFrom: () => parseKey(queuedMonth() ?? focusMonthKey()),
+    focusDay: () => parseKey(scrollFocusDay()),
+    step: stepMonth,
+    goTo: goToMonth,
+    today: goToday,
+    todayDirection: placeOfToday
   }));
   onCleanup(() => props.register?.(null));
   const openDayList = key => {
@@ -1491,12 +1988,15 @@ const MonthView = props => {
     }
   };
   const moveFocus = (key, extend) => {
-    if (!visibleKeys().includes(key)) {
+    if (continuous() ? !loaded(key) : !visibleKeys().includes(key)) {
       pageTo(key);
       return;
     }
     if (extend) select(anchorKey() ?? focusKey() ?? key, key);else select(key);
-    focusCell(key);
+    if (continuous()) {
+      revealDay(key);
+      queueMicrotask(() => focusCell(key));
+    } else focusCell(key);
     followSelection();
   };
   const onCellKeyDown = (event, key) => {
@@ -1525,7 +2025,12 @@ const MonthView = props => {
     }
     if (event.key === "PageUp" || event.key === "PageDown") {
       event.preventDefault();
-      pageTo(calendar.formatDateKey(addMonthsClamped(day, event.key === "PageUp" ? -1 : 1, dateConfig()), dateConfig()));
+      const target = calendar.formatDateKey(addMonthsClamped(day, event.key === "PageUp" ? -1 : 1, dateConfig()), dateConfig());
+      if (continuous() && loaded(target)) {
+        moveFocus(target, event.shiftKey);
+        // The month's first week goes on top, unless the day lies in a sixth week that would then stay out of view.
+        goToMonth(target);
+      } else pageTo(target);
       return;
     }
     if (event.key === "Enter" || (event.key === "n" || event.key === "N") && !event.shiftKey) {
@@ -1595,6 +2100,9 @@ const MonthView = props => {
     cancelInteraction?.();
     cancelInteraction = startCalendarPointerSession({
       event,
+      scrollContainer: continuous() ? scroller : undefined,
+      // A drag along the last row on screen selects its days; the view scrolls once the pointer came from inside.
+      armAutoScroll: true,
       resolve: (clientX, clientY) => dayKeyAtPoint(clientX, clientY),
       onActivate: () => {
         suppressClickUntil = performance.now() + 400;
@@ -1603,6 +2111,8 @@ const MonthView = props => {
       },
       onPreview: current => select(key, current),
       onCommit: current => {
+        // The click that ends a long drag, such as one that scrolled the view, must not select the pressed day again.
+        suppressClickUntil = performance.now() + 400;
         select(key, current);
         focusCell(current);
         const range = orderedSelection(key, current);
@@ -1622,8 +2132,8 @@ const MonthView = props => {
   const menuItems = createMemo(() => {
     if (!hasMenu()) return [];
     const range = selection() ?? {
-      first: rovingKey(),
-      last: rovingKey()
+      first: unselectedKey(),
+      last: unselectedKey()
     };
     const own = props.owner.selectionMenu?.(rangeOf(range), {
       quickCreate: create => {
@@ -1673,6 +2183,8 @@ const MonthView = props => {
     cancelInteraction?.();
     cancelInteraction = startCalendarPointerSession({
       event: pointerEvent,
+      scrollContainer: continuous() ? scroller : undefined,
+      armAutoScroll: true,
       resolve: (clientX, clientY) => {
         const key = dayKeyAtPoint(clientX, clientY);
         if (!key) return null;
@@ -1692,6 +2204,9 @@ const MonthView = props => {
       },
       onPreview: setMovePreview,
       onCommit: next => {
+        // The click that ends a long move, such as one that scrolled the view, must not open the entry.
+        markDragged();
+        suppressClickUntil = performance.now() + 400;
         clearMove();
         if (eventTimeChanged(event, next)) props.owner.onEventDrop?.(event, next);
       },
@@ -1779,388 +2294,497 @@ const MonthView = props => {
       if (linkedItem() === item.key) setLinkedItem("");
     }
   });
-  const grid = () => (() => {
-    var _el$78 = _$getNextElement(_tmpl$22),
-      _el$79 = _el$78.firstChild,
-      _el$81 = _el$79.firstChild,
-      [_el$82, _co$21] = _$getNextMarker(_el$81.nextSibling),
-      _el$83 = _el$82.nextSibling,
-      [_el$84, _co$22] = _$getNextMarker(_el$83.nextSibling),
-      _el$85 = _el$79.nextSibling,
-      [_el$86, _co$23] = _$getNextMarker(_el$85.nextSibling);
-    _$insert(_el$79, _$createComponent(Show, {
-      get when() {
-        return props.owner.withWeekNumbers;
-      },
-      get children() {
-        var _el$80 = _$getNextElement(_tmpl$21);
-        _$insert(_el$80, () => calendarMessages().weekShort);
-        return _el$80;
-      }
-    }), _el$82, _co$21);
-    _$insert(_el$79, _$createComponent(For, {
-      get each() {
-        return weekdays();
-      },
-      children: (day, index) => (() => {
-        var _el$87 = _$getNextElement(_tmpl$21);
-        _$insert(_el$87, day);
-        _$effect(() => _$setAttribute(_el$87, "data-weekend", index() > 4 ? "true" : undefined));
-        return _el$87;
-      })()
-    }), _el$84, _co$22);
-    _$insert(_el$78, _$createComponent(For, {
-      get each() {
-        return weeks();
-      },
-      children: (week, weekIndex) => {
-        const fit = createMemo(() => fitMonthWeek(weekLayouts()[weekIndex()] ?? {
-          bars: [],
-          singles: []
-        }, capacities()[weekIndex()] ?? MONTH_DEFAULT_LANES));
-        const weekHref = () => viewHref(week[0].key, "week");
-        const weekNumber = () => zonedWeekNumber(week[0].day, dateConfig());
-        return (() => {
-          var _el$88 = _$getNextElement(_tmpl$24),
-            _el$90 = _el$88.firstChild,
-            [_el$91, _co$24] = _$getNextMarker(_el$90.nextSibling),
-            _el$92 = _el$91.nextSibling,
-            [_el$93, _co$25] = _$getNextMarker(_el$92.nextSibling);
-          _$insert(_el$88, _$createComponent(Show, {
+  const weekRow = (week, weekIndex) => {
+    const layout = createMemo(() => layoutMonthWeek(week().map(entry => entry.key), items().map(item => ({
+      item,
+      firstKey: item.firstKey,
+      lastKey: item.lastKey,
+      bar: item.bar
+    }))));
+    // The continuous rows are all as high as the first, so they share its measured capacity.
+    const capacity = () => capacities()[continuous() ? 0 : weekIndex()] ?? MONTH_DEFAULT_LANES;
+    const fit = createMemo(() => fitMonthWeek(layout(), capacity()));
+    const weekHref = () => viewHref(week()[0].key, "week");
+    const weekNumber = () => zonedWeekNumber(week()[0].day, dateConfig());
+    return (() => {
+      var _el$77 = _$getNextElement(_tmpl$22),
+        _el$79 = _el$77.firstChild,
+        [_el$80, _co$21] = _$getNextMarker(_el$79.nextSibling),
+        _el$81 = _el$80.nextSibling,
+        [_el$82, _co$22] = _$getNextMarker(_el$81.nextSibling);
+      _$insert(_el$77, _$createComponent(Show, {
+        get when() {
+          return props.owner.withWeekNumbers;
+        },
+        get children() {
+          var _el$78 = _$getNextElement(_tmpl$21);
+          _$insert(_el$78, _$createComponent(Show, {
             get when() {
-              return props.owner.withWeekNumbers;
+              return weekHref();
             },
-            get children() {
-              var _el$89 = _$getNextElement(_tmpl$23);
-              _$insert(_el$89, _$createComponent(Show, {
+            get fallback() {
+              return _$createComponent(Show, {
                 get when() {
-                  return weekHref();
+                  return canOpenView("week");
                 },
                 get fallback() {
-                  return _$createComponent(Show, {
-                    get when() {
-                      return canOpenView("week");
+                  return weekNumber();
+                },
+                get children() {
+                  var _el$83 = _$getNextElement(_tmpl$23);
+                  _el$83.$$click = () => openView(week()[0].key, "week");
+                  _$insert(_el$83, weekNumber);
+                  _$effect(_p$ => {
+                    var _v$1 = calendarMessages().calendarOpenWeekNumber({
+                        week: weekNumber()
+                      }),
+                      _v$10 = calendarMessages().calendarOpenWeekNumber({
+                        week: weekNumber()
+                      });
+                    _v$1 !== _p$.e && _$setAttribute(_el$83, "title", _p$.e = _v$1);
+                    _v$10 !== _p$.t && _$setAttribute(_el$83, "aria-label", _p$.t = _v$10);
+                    return _p$;
+                  }, {
+                    e: undefined,
+                    t: undefined
+                  });
+                  _$runHydrationEvents();
+                  return _el$83;
+                }
+              });
+            },
+            children: href => _$createComponent(CalendarNavigationLink, {
+              get owner() {
+                return props.owner;
+              },
+              get href() {
+                return href();
+              },
+              get anchorProps() {
+                return {
+                  class: "k2b-calendar-month__week-link",
+                  tabIndex: -1,
+                  title: calendarMessages().calendarOpenWeekNumber({
+                    week: weekNumber()
+                  }),
+                  "aria-label": calendarMessages().calendarOpenWeekNumber({
+                    week: weekNumber()
+                  })
+                };
+              },
+              get children() {
+                return weekNumber();
+              }
+            })
+          }));
+          return _el$78;
+        }
+      }), _el$80, _co$21);
+      _$insert(_el$77, _$createComponent(For, {
+        get each() {
+          return week();
+        },
+        children: ({
+          day,
+          key
+        }, column) => {
+          const dayBadge = props.owner.dayBadges?.[key];
+          const sameMonth = () => calendar.isSameMonth(day, continuous() ? parseKey(focusMonthKey()) : props.date, dateConfig());
+          const label = dayLabel(day);
+          const bars = createMemo(() => fit().bars.filter(bar => bar.startColumn === column()));
+          const cell = () => fit().cells[column()] ?? {
+            top: 0,
+            shown: [],
+            hidden: 0
+          };
+          return (() => {
+            var _el$84 = _$getNextElement(_tmpl$25),
+              _el$85 = _el$84.firstChild,
+              _el$86 = _el$85.firstChild,
+              _el$87 = _el$86.nextSibling,
+              [_el$88, _co$23] = _$getNextMarker(_el$87.nextSibling),
+              _el$89 = _el$85.nextSibling,
+              _el$96 = _el$89.firstChild,
+              [_el$97, _co$25] = _$getNextMarker(_el$96.nextSibling),
+              _el$98 = _el$97.nextSibling,
+              [_el$99, _co$26] = _$getNextMarker(_el$98.nextSibling),
+              _el$100 = _el$99.nextSibling,
+              [_el$101, _co$27] = _$getNextMarker(_el$100.nextSibling);
+            _el$84.$$keydown = event => onCellKeyDown(event, key);
+            _el$84.$$contextmenu = event => {
+              // The pressed day takes the focus, so closing the menu with Escape returns there.
+              menuKey = pressedKey(event, key);
+              if (hasMenu()) focusCell(menuKey);
+            };
+            _el$84.$$pointerdown = event => onCellPointerDown(event, key);
+            _el$84.$$dblclick = event => onCellDoubleClick(event, key);
+            _el$84.$$click = event => onCellClick(event, key);
+            _$use(element => {
+              cells.set(key, element);
+              onCleanup(() => {
+                if (cells.get(key) === element) cells.delete(key);
+              });
+            }, _el$84);
+            _$setAttribute(_el$84, "aria-label", label);
+            _$setAttribute(_el$84, "data-calendar-day-key", key);
+            _$insert(_el$86, (() => {
+              var _c$ = _$memo(() => !!(continuous() && key.endsWith("-01")));
+              return () => _c$() ? shortDayLabel(key).replace(/\.$/, "") : calendar.formatDayNumber(day, dateConfig());
+            })());
+            _$insert(_el$85, _$createComponent(Show, {
+              when: dayBadge,
+              children: badge => (() => {
+                var _el$102 = _$getNextElement(_tmpl$19),
+                  _el$103 = _el$102.firstChild,
+                  [_el$104, _co$28] = _$getNextMarker(_el$103.nextSibling),
+                  _el$105 = _el$104.nextSibling,
+                  [_el$106, _co$29] = _$getNextMarker(_el$105.nextSibling);
+                _$insert(_el$102, _$createComponent(Show, {
+                  get when() {
+                    return badge().icon;
+                  },
+                  children: icon => (() => {
+                    var _el$107 = _$getNextElement(_tmpl$3);
+                    _$effect(() => _$className(_el$107, `k2b-calendar-month__badge-icon ti ti-${icon()}`));
+                    return _el$107;
+                  })()
+                }), _el$104, _co$28);
+                _$insert(_el$102, () => badge().label, _el$106, _co$29);
+                return _el$102;
+              })()
+            }), _el$88, _co$23);
+            _$use(element => {
+              if (column() === 0) observeLanes(element, continuous() ? 0 : weekIndex());
+            }, _el$89);
+            _$insert(_el$89, _$createComponent(For, {
+              get each() {
+                return bars();
+              },
+              children: bar => {
+                const span = bar.endColumn - bar.startColumn + 1;
+                const startHint = () => {
+                  if (!bar.continuesBefore) return undefined;
+                  const hint = calendarMessages().calendarContinuesFrom(hintDate(bar.item.firstKey));
+                  return hintFits(bar.item.event.title, hint, span) ? hint : undefined;
+                };
+                const endHint = () => {
+                  if (!bar.continuesAfter) return undefined;
+                  const hint = calendarMessages().calendarContinuesUntil(hintDate(bar.item.lastKey));
+                  return hintFits(`${bar.item.event.title}${startHint() ?? ""}`, hint, span) ? hint : undefined;
+                };
+                return (() => {
+                  var _el$108 = _$getNextElement(_tmpl$26);
+                  _$spread(_el$108, _$mergeProps({
+                    get style() {
+                      return {
+                        "--k2b-calendar-span": String(span),
+                        "--k2b-calendar-row": String(bar.lane)
+                      };
                     },
-                    get fallback() {
-                      return weekNumber();
+                    get ["data-linked"]() {
+                      return linkedItem() === bar.item.key && bar.item.firstKey !== bar.item.lastKey ? "true" : undefined;
                     },
-                    get children() {
-                      var _el$94 = _$getNextElement(_tmpl$25);
-                      _el$94.$$click = () => openView(week[0].key, "week");
-                      _$insert(_el$94, weekNumber);
-                      _$effect(_p$ => {
-                        var _v$0 = calendarMessages().calendarOpenWeekNumber({
-                            week: weekNumber()
-                          }),
-                          _v$1 = calendarMessages().calendarOpenWeekNumber({
-                            week: weekNumber()
-                          });
-                        _v$0 !== _p$.e && _$setAttribute(_el$94, "title", _p$.e = _v$0);
-                        _v$1 !== _p$.t && _$setAttribute(_el$94, "aria-label", _p$.t = _v$1);
-                        return _p$;
-                      }, {
-                        e: undefined,
-                        t: undefined
-                      });
-                      _$runHydrationEvents();
-                      return _el$94;
+                    get ["data-continues-before"]() {
+                      return bar.continuesBefore ? "true" : undefined;
+                    },
+                    get ["data-continues-after"]() {
+                      return bar.continuesAfter ? "true" : undefined;
                     }
-                  });
-                },
-                children: href => _$createComponent(CalendarNavigationLink, {
+                  }, () => linkProps(bar.item)), false, true);
+                  _$insert(_el$108, _$createComponent(EventChip, {
+                    get event() {
+                      return bar.item.event;
+                    },
+                    get owner() {
+                      return props.owner;
+                    },
+                    get href() {
+                      return eventHref(props.owner, bar.item.event);
+                    },
+                    get label() {
+                      return itemLabel(bar.item);
+                    },
+                    compact: true,
+                    bar: true,
+                    get continuesBefore() {
+                      return bar.continuesBefore;
+                    },
+                    get continuesAfter() {
+                      return bar.continuesAfter;
+                    },
+                    get hintStart() {
+                      return startHint();
+                    },
+                    get hintEnd() {
+                      return endHint();
+                    },
+                    get moving() {
+                      return movingEventId() === bar.item.event.id;
+                    },
+                    get onMovePointerDown() {
+                      return props.owner.onEventDrop ? (pointerEvent, markDragged) => startMove(pointerEvent, bar.item, markDragged) : undefined;
+                    }
+                  }));
+                  _$runHydrationEvents();
+                  return _el$108;
+                })();
+              }
+            }), _el$97, _co$25);
+            _$insert(_el$89, _$createComponent(For, {
+              get each() {
+                return cell().shown;
+              },
+              children: (item, index) => (() => {
+                var _el$109 = _$getNextElement(_tmpl$27);
+                _$insert(_el$109, _$createComponent(EventChip, {
+                  get event() {
+                    return item.event;
+                  },
                   get owner() {
                     return props.owner;
                   },
                   get href() {
-                    return href();
-                  },
-                  get anchorProps() {
-                    return {
-                      class: "k2b-calendar-month__week-link",
-                      tabIndex: -1,
-                      title: calendarMessages().calendarOpenWeekNumber({
-                        week: weekNumber()
-                      }),
-                      "aria-label": calendarMessages().calendarOpenWeekNumber({
-                        week: weekNumber()
-                      })
-                    };
-                  },
-                  get children() {
-                    return weekNumber();
-                  }
-                })
-              }));
-              return _el$89;
-            }
-          }), _el$91, _co$24);
-          _$insert(_el$88, _$createComponent(For, {
-            each: week,
-            children: ({
-              day,
-              key
-            }, column) => {
-              const dayBadge = props.owner.dayBadges?.[key];
-              const sameMonth = calendar.isSameMonth(day, props.date, dateConfig());
-              const label = dayLabel(day);
-              const bars = createMemo(() => fit().bars.filter(bar => bar.startColumn === column()));
-              const cell = () => fit().cells[column()] ?? {
-                top: 0,
-                shown: [],
-                hidden: 0
-              };
-              return (() => {
-                var _el$95 = _$getNextElement(_tmpl$27),
-                  _el$96 = _el$95.firstChild,
-                  _el$97 = _el$96.firstChild,
-                  _el$98 = _el$97.nextSibling,
-                  [_el$99, _co$26] = _$getNextMarker(_el$98.nextSibling),
-                  _el$100 = _el$96.nextSibling,
-                  _el$107 = _el$100.firstChild,
-                  [_el$108, _co$28] = _$getNextMarker(_el$107.nextSibling),
-                  _el$109 = _el$108.nextSibling,
-                  [_el$110, _co$29] = _$getNextMarker(_el$109.nextSibling),
-                  _el$111 = _el$110.nextSibling,
-                  [_el$112, _co$30] = _$getNextMarker(_el$111.nextSibling);
-                _el$95.$$keydown = event => onCellKeyDown(event, key);
-                _el$95.$$contextmenu = event => {
-                  // The pressed day takes the focus, so closing the menu with Escape returns there.
-                  menuKey = pressedKey(event, key);
-                  if (hasMenu()) focusCell(menuKey);
-                };
-                _el$95.$$pointerdown = event => onCellPointerDown(event, key);
-                _el$95.$$dblclick = event => onCellDoubleClick(event, key);
-                _el$95.$$click = event => onCellClick(event, key);
-                _$use(element => cells.set(key, element), _el$95);
-                _$setAttribute(_el$95, "aria-label", label);
-                _$setAttribute(_el$95, "data-calendar-day-key", key);
-                _$setAttribute(_el$95, "data-outside", !sameMonth ? "true" : undefined);
-                _$setAttribute(_el$97, "data-outside", !sameMonth ? "true" : undefined);
-                _$insert(_el$97, () => calendar.formatDayNumber(day, dateConfig()));
-                _$insert(_el$96, _$createComponent(Show, {
-                  when: dayBadge,
-                  children: badge => (() => {
-                    var _el$113 = _$getNextElement(_tmpl$19),
-                      _el$114 = _el$113.firstChild,
-                      [_el$115, _co$31] = _$getNextMarker(_el$114.nextSibling),
-                      _el$116 = _el$115.nextSibling,
-                      [_el$117, _co$32] = _$getNextMarker(_el$116.nextSibling);
-                    _$insert(_el$113, _$createComponent(Show, {
-                      get when() {
-                        return badge().icon;
-                      },
-                      children: icon => (() => {
-                        var _el$118 = _$getNextElement(_tmpl$3);
-                        _$effect(() => _$className(_el$118, `k2b-calendar-month__badge-icon ti ti-${icon()}`));
-                        return _el$118;
-                      })()
-                    }), _el$115, _co$31);
-                    _$insert(_el$113, () => badge().label, _el$117, _co$32);
-                    return _el$113;
-                  })()
-                }), _el$99, _co$26);
-                _$use(element => {
-                  if (column() === 0) observeLanes(element, weekIndex());
-                }, _el$100);
-                _$insert(_el$100, _$createComponent(For, {
-                  get each() {
-                    return bars();
+                    return eventHref(props.owner, item.event);
                   },
-                  children: bar => {
-                    const span = bar.endColumn - bar.startColumn + 1;
-                    const startHint = () => {
-                      if (!bar.continuesBefore) return undefined;
-                      const hint = calendarMessages().calendarContinuesFrom(hintDate(bar.item.firstKey));
-                      return hintFits(bar.item.event.title, hint, span) ? hint : undefined;
-                    };
-                    const endHint = () => {
-                      if (!bar.continuesAfter) return undefined;
-                      const hint = calendarMessages().calendarContinuesUntil(hintDate(bar.item.lastKey));
-                      return hintFits(`${bar.item.event.title}${startHint() ?? ""}`, hint, span) ? hint : undefined;
-                    };
-                    return (() => {
-                      var _el$119 = _$getNextElement(_tmpl$28);
-                      _$spread(_el$119, _$mergeProps({
-                        get style() {
-                          return {
-                            "--k2b-calendar-span": String(span),
-                            "--k2b-calendar-row": String(bar.lane)
-                          };
-                        },
-                        get ["data-linked"]() {
-                          return linkedItem() === bar.item.key && bar.item.firstKey !== bar.item.lastKey ? "true" : undefined;
-                        },
-                        get ["data-continues-before"]() {
-                          return bar.continuesBefore ? "true" : undefined;
-                        },
-                        get ["data-continues-after"]() {
-                          return bar.continuesAfter ? "true" : undefined;
-                        }
-                      }, () => linkProps(bar.item)), false, true);
-                      _$insert(_el$119, _$createComponent(EventChip, {
-                        get event() {
-                          return bar.item.event;
-                        },
-                        get owner() {
-                          return props.owner;
-                        },
-                        get href() {
-                          return eventHref(props.owner, bar.item.event);
-                        },
-                        get label() {
-                          return itemLabel(bar.item);
-                        },
-                        compact: true,
-                        bar: true,
-                        get continuesBefore() {
-                          return bar.continuesBefore;
-                        },
-                        get continuesAfter() {
-                          return bar.continuesAfter;
-                        },
-                        get hintStart() {
-                          return startHint();
-                        },
-                        get hintEnd() {
-                          return endHint();
-                        },
-                        get moving() {
-                          return movingEventId() === bar.item.event.id;
-                        },
-                        get onMovePointerDown() {
-                          return props.owner.onEventDrop ? (pointerEvent, markDragged) => startMove(pointerEvent, bar.item, markDragged) : undefined;
-                        }
-                      }));
-                      _$runHydrationEvents();
-                      return _el$119;
-                    })();
-                  }
-                }), _el$108, _co$28);
-                _$insert(_el$100, _$createComponent(For, {
-                  get each() {
-                    return cell().shown;
+                  compact: true,
+                  get leadingTime() {
+                    return leadingTime(item);
                   },
-                  children: (item, index) => (() => {
-                    var _el$120 = _$getNextElement(_tmpl$29);
-                    _$insert(_el$120, _$createComponent(EventChip, {
-                      get event() {
-                        return item.event;
-                      },
-                      get owner() {
-                        return props.owner;
-                      },
-                      get href() {
-                        return eventHref(props.owner, item.event);
-                      },
-                      compact: true,
-                      get leadingTime() {
-                        return leadingTime(item);
-                      },
-                      get moving() {
-                        return movingEventId() === item.event.id;
-                      },
-                      get onMovePointerDown() {
-                        return props.owner.onEventDrop ? (pointerEvent, markDragged) => startMove(pointerEvent, item, markDragged) : undefined;
-                      }
-                    }));
-                    _$effect(_$p => _$setStyleProperty(_el$120, "--k2b-calendar-row", String(cell().top + index())));
-                    return _el$120;
-                  })()
-                }), _el$110, _co$29);
-                _$insert(_el$100, _$createComponent(Show, {
-                  get when() {
-                    return cell().hidden > 0;
+                  get moving() {
+                    return movingEventId() === item.event.id;
                   },
-                  get children() {
-                    var _el$101 = _$getNextElement(_tmpl$26),
-                      _el$102 = _el$101.firstChild,
-                      _el$103 = _el$102.nextSibling,
-                      _el$104 = _el$103.firstChild,
-                      _el$105 = _el$104.nextSibling,
-                      [_el$106, _co$27] = _$getNextMarker(_el$105.nextSibling);
-                    _el$101.$$click = () => {
-                      const current = popover();
-                      if (current?.kind === "day" && current.dayKey === key) closePopover(false);else openDayList(key);
-                    };
-                    _$insert(_el$102, () => calendarMessages().calendarMoreEvents({
-                      count: cell().hidden
-                    }));
-                    _$insert(_el$103, () => cell().hidden, _el$106, _co$27);
-                    _$effect(_p$ => {
-                      var _v$10 = String(cell().top + cell().shown.length),
-                        _v$11 = calendarMessages().calendarMoreEventsOn({
-                          count: cell().hidden,
-                          label
-                        }),
-                        _v$12 = (() => {
-                          const current = popover();
-                          return current?.kind === "day" && current.dayKey === key;
-                        })();
-                      _v$10 !== _p$.e && _$setStyleProperty(_el$101, "--k2b-calendar-row", _p$.e = _v$10);
-                      _v$11 !== _p$.t && _$setAttribute(_el$101, "aria-label", _p$.t = _v$11);
-                      _v$12 !== _p$.a && _$setAttribute(_el$101, "aria-expanded", _p$.a = _v$12);
-                      return _p$;
-                    }, {
-                      e: undefined,
-                      t: undefined,
-                      a: undefined
-                    });
-                    _$runHydrationEvents();
-                    return _el$101;
+                  get onMovePointerDown() {
+                    return props.owner.onEventDrop ? (pointerEvent, markDragged) => startMove(pointerEvent, item, markDragged) : undefined;
                   }
-                }), _el$112, _co$30);
+                }));
+                _$effect(_$p => _$setStyleProperty(_el$109, "--k2b-calendar-row", String(cell().top + index())));
+                return _el$109;
+              })()
+            }), _el$99, _co$26);
+            _$insert(_el$89, _$createComponent(Show, {
+              get when() {
+                return cell().hidden > 0;
+              },
+              get children() {
+                var _el$90 = _$getNextElement(_tmpl$24),
+                  _el$91 = _el$90.firstChild,
+                  _el$92 = _el$91.nextSibling,
+                  _el$93 = _el$92.firstChild,
+                  _el$94 = _el$93.nextSibling,
+                  [_el$95, _co$24] = _$getNextMarker(_el$94.nextSibling);
+                _el$90.$$click = () => {
+                  const current = popover();
+                  if (current?.kind === "day" && current.dayKey === key) closePopover(false);else openDayList(key);
+                };
+                _$insert(_el$91, () => calendarMessages().calendarMoreEvents({
+                  count: cell().hidden
+                }));
+                _$insert(_el$92, () => cell().hidden, _el$95, _co$24);
                 _$effect(_p$ => {
-                  var _v$13 = rovingKey() === key ? 0 : -1,
-                    _v$14 = within(selection(), key) ? "true" : "false",
-                    _v$15 = key === todayKey() ? "date" : undefined,
-                    _v$16 = column() > 4 ? "true" : undefined,
-                    _v$17 = key < todayKey() ? "true" : undefined,
-                    _v$18 = selectionPart(key),
-                    _v$19 = within(dropRange(), key) ? "true" : undefined,
-                    _v$20 = key === todayKey() ? "true" : undefined;
-                  _v$13 !== _p$.e && _$setAttribute(_el$95, "tabindex", _p$.e = _v$13);
-                  _v$14 !== _p$.t && _$setAttribute(_el$95, "aria-selected", _p$.t = _v$14);
-                  _v$15 !== _p$.a && _$setAttribute(_el$95, "aria-current", _p$.a = _v$15);
-                  _v$16 !== _p$.o && _$setAttribute(_el$95, "data-weekend", _p$.o = _v$16);
-                  _v$17 !== _p$.i && _$setAttribute(_el$95, "data-past", _p$.i = _v$17);
-                  _v$18 !== _p$.n && _$setAttribute(_el$95, "data-selected", _p$.n = _v$18);
-                  _v$19 !== _p$.s && _$setAttribute(_el$95, "data-drop-preview", _p$.s = _v$19);
-                  _v$20 !== _p$.h && _$setAttribute(_el$97, "data-today", _p$.h = _v$20);
+                  var _v$11 = String(cell().top + cell().shown.length),
+                    _v$12 = calendarMessages().calendarMoreEventsOn({
+                      count: cell().hidden,
+                      label
+                    }),
+                    _v$13 = (() => {
+                      const current = popover();
+                      return current?.kind === "day" && current.dayKey === key;
+                    })();
+                  _v$11 !== _p$.e && _$setStyleProperty(_el$90, "--k2b-calendar-row", _p$.e = _v$11);
+                  _v$12 !== _p$.t && _$setAttribute(_el$90, "aria-label", _p$.t = _v$12);
+                  _v$13 !== _p$.a && _$setAttribute(_el$90, "aria-expanded", _p$.a = _v$13);
                   return _p$;
                 }, {
                   e: undefined,
                   t: undefined,
-                  a: undefined,
-                  o: undefined,
-                  i: undefined,
-                  n: undefined,
-                  s: undefined,
-                  h: undefined
+                  a: undefined
                 });
                 _$runHydrationEvents();
-                return _el$95;
-              })();
-            }
-          }), _el$93, _co$25);
-          _$effect(() => _$setAttribute(_el$88, "data-week-numbers", props.owner.withWeekNumbers ? "true" : undefined));
-          return _el$88;
-        })();
+                return _el$90;
+              }
+            }), _el$101, _co$27);
+            _$effect(_p$ => {
+              var _v$14 = rovingKey() === key ? 0 : -1,
+                _v$15 = within(selection(), key) ? "true" : "false",
+                _v$16 = key === todayKey() ? "date" : undefined,
+                _v$17 = !sameMonth() ? "true" : undefined,
+                _v$18 = continuous() && key.endsWith("-01") ? "true" : undefined,
+                _v$19 = continuous() && Number(key.slice(8)) <= 7 ? "true" : undefined,
+                _v$20 = column() > 4 ? "true" : undefined,
+                _v$21 = key < todayKey() ? "true" : undefined,
+                _v$22 = selectionPart(key),
+                _v$23 = within(dropRange(), key) ? "true" : undefined,
+                _v$24 = continuous() && pulseKey() === key ? "true" : undefined,
+                _v$25 = key === todayKey() ? "true" : undefined,
+                _v$26 = !sameMonth() ? "true" : undefined;
+              _v$14 !== _p$.e && _$setAttribute(_el$84, "tabindex", _p$.e = _v$14);
+              _v$15 !== _p$.t && _$setAttribute(_el$84, "aria-selected", _p$.t = _v$15);
+              _v$16 !== _p$.a && _$setAttribute(_el$84, "aria-current", _p$.a = _v$16);
+              _v$17 !== _p$.o && _$setAttribute(_el$84, "data-outside", _p$.o = _v$17);
+              _v$18 !== _p$.i && _$setAttribute(_el$84, "data-month-first", _p$.i = _v$18);
+              _v$19 !== _p$.n && _$setAttribute(_el$84, "data-month-top", _p$.n = _v$19);
+              _v$20 !== _p$.s && _$setAttribute(_el$84, "data-weekend", _p$.s = _v$20);
+              _v$21 !== _p$.h && _$setAttribute(_el$84, "data-past", _p$.h = _v$21);
+              _v$22 !== _p$.r && _$setAttribute(_el$84, "data-selected", _p$.r = _v$22);
+              _v$23 !== _p$.d && _$setAttribute(_el$84, "data-drop-preview", _p$.d = _v$23);
+              _v$24 !== _p$.l && _$setAttribute(_el$86, "data-pulse", _p$.l = _v$24);
+              _v$25 !== _p$.u && _$setAttribute(_el$86, "data-today", _p$.u = _v$25);
+              _v$26 !== _p$.c && _$setAttribute(_el$86, "data-outside", _p$.c = _v$26);
+              return _p$;
+            }, {
+              e: undefined,
+              t: undefined,
+              a: undefined,
+              o: undefined,
+              i: undefined,
+              n: undefined,
+              s: undefined,
+              h: undefined,
+              r: undefined,
+              d: undefined,
+              l: undefined,
+              u: undefined,
+              c: undefined
+            });
+            _$runHydrationEvents();
+            return _el$84;
+          })();
+        }
+      }), _el$82, _co$22);
+      _$effect(_p$ => {
+        var _v$7 = continuous() ? week()[0]?.key : undefined,
+          _v$8 = continuous() ? weekIndex() + 2 : undefined,
+          _v$9 = continuous() ? {
+            "--k2b-calendar-week-index": String(weekIndex())
+          } : undefined,
+          _v$0 = props.owner.withWeekNumbers ? "true" : undefined;
+        _v$7 !== _p$.e && _$setAttribute(_el$77, "data-week-key", _p$.e = _v$7);
+        _v$8 !== _p$.t && _$setAttribute(_el$77, "aria-rowindex", _p$.t = _v$8);
+        _p$.a = _$style(_el$77, _v$9, _p$.a);
+        _v$0 !== _p$.o && _$setAttribute(_el$77, "data-week-numbers", _p$.o = _v$0);
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined,
+        a: undefined,
+        o: undefined
+      });
+      return _el$77;
+    })();
+  };
+  const weekdayRow = () => (() => {
+    var _el$110 = _$getNextElement(_tmpl$29),
+      _el$112 = _el$110.firstChild,
+      [_el$113, _co$30] = _$getNextMarker(_el$112.nextSibling),
+      _el$114 = _el$113.nextSibling,
+      [_el$115, _co$31] = _$getNextMarker(_el$114.nextSibling);
+    var _ref$ = weekdayElement;
+    typeof _ref$ === "function" ? _$use(_ref$, _el$110) : weekdayElement = _el$110;
+    _$insert(_el$110, _$createComponent(Show, {
+      get when() {
+        return props.owner.withWeekNumbers;
+      },
+      get children() {
+        var _el$111 = _$getNextElement(_tmpl$28);
+        _$insert(_el$111, () => calendarMessages().weekShort);
+        return _el$111;
       }
-    }), _el$86, _co$23);
+    }), _el$113, _co$30);
+    _$insert(_el$110, _$createComponent(For, {
+      get each() {
+        return weekdays();
+      },
+      children: (day, index) => (() => {
+        var _el$116 = _$getNextElement(_tmpl$28);
+        _$insert(_el$116, day);
+        _$effect(() => _$setAttribute(_el$116, "data-weekend", index() > 4 ? "true" : undefined));
+        return _el$116;
+      })()
+    }), _el$115, _co$31);
+    _$effect(() => _$setAttribute(_el$110, "data-week-numbers", props.owner.withWeekNumbers ? "true" : undefined));
+    return _el$110;
+  })();
+  const grid = () => (() => {
+    var _el$117 = _$getNextElement(_tmpl$30),
+      _el$118 = _el$117.firstChild,
+      [_el$119, _co$32] = _$getNextMarker(_el$118.nextSibling),
+      _el$120 = _el$119.nextSibling,
+      [_el$121, _co$33] = _$getNextMarker(_el$120.nextSibling);
+    _$insert(_el$117, weekdayRow, _el$119, _co$32);
+    _$insert(_el$117, _$createComponent(For, {
+      get each() {
+        return weeks();
+      },
+      children: (week, index) => weekRow(() => week, index)
+    }), _el$121, _co$33);
+    _$effect(_p$ => {
+      var _v$27 = formatMonth(props.date, dateConfig()),
+        _v$28 = `auto repeat(${weeks().length}, minmax(5rem, 1fr))`;
+      _v$27 !== _p$.e && _$setAttribute(_el$117, "aria-label", _p$.e = _v$27);
+      _v$28 !== _p$.t && _$setStyleProperty(_el$117, "grid-template-rows", _p$.t = _v$28);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    return _el$117;
+  })();
+  const continuousRow = key => {
+    const days = createMemo(() => Array.from({
+      length: 7
+    }, (_, offset) => {
+      const dayKey = addDayKeys(key, offset);
+      return {
+        day: parseKey(dayKey),
+        key: dayKey
+      };
+    }));
+    return weekRow(days, () => monthRowOf(trackWeeks(), key) ?? 0);
+  };
+  const continuousGrid = () => (() => {
+    var _el$122 = _$getNextElement(_tmpl$31),
+      _el$123 = _el$122.firstChild,
+      _el$125 = _el$123.firstChild,
+      [_el$126, _co$34] = _$getNextMarker(_el$125.nextSibling),
+      _el$124 = _el$126.nextSibling,
+      _el$127 = _el$123.nextSibling;
+    _el$123.$$focusin = event => {
+      const target = event.target;
+      if (!(target instanceof Element)) return;
+      const key = target.closest("[data-calendar-day-key]")?.getAttribute("data-calendar-day-key");
+      if (key) setFocusedCellKey(key);
+    };
+    _el$123.$$pointerdown = cancelGlide;
+    _el$123.addEventListener("wheel", cancelGlide);
+    _el$123.addEventListener("scroll", onScroll);
+    var _ref$2 = scroller;
+    typeof _ref$2 === "function" ? _$use(_ref$2, _el$123) : scroller = _el$123;
+    _$insert(_el$123, weekdayRow, _el$126, _co$34);
+    _$insert(_el$124, _$createComponent(For, {
+      get each() {
+        return renderedWeeks();
+      },
+      children: continuousRow
+    }));
+    _$insert(_el$127, () => formatMonth(parseKey(focusMonthKey()), dateConfig()));
     _$effect(_p$ => {
-      var _v$7 = formatMonth(props.date, dateConfig()),
-        _v$8 = `auto repeat(${weeks().length}, minmax(5rem, 1fr))`,
-        _v$9 = props.owner.withWeekNumbers ? "true" : undefined;
-      _v$7 !== _p$.e && _$setAttribute(_el$78, "aria-label", _p$.e = _v$7);
-      _v$8 !== _p$.t && _$setStyleProperty(_el$78, "grid-template-rows", _p$.t = _v$8);
-      _v$9 !== _p$.a && _$setAttribute(_el$79, "data-week-numbers", _p$.a = _v$9);
+      var _v$29 = formatMonth(parseKey(focusMonthKey()), dateConfig()),
+        _v$30 = trackWeeks().length + 1,
+        _v$31 = String(trackWeeks().length),
+        _v$32 = labelShown() ? "true" : "false";
+      _v$29 !== _p$.e && _$setAttribute(_el$123, "aria-label", _p$.e = _v$29);
+      _v$30 !== _p$.t && _$setAttribute(_el$123, "aria-rowcount", _p$.t = _v$30);
+      _v$31 !== _p$.a && _$setStyleProperty(_el$124, "--k2b-calendar-weeks", _p$.a = _v$31);
+      _v$32 !== _p$.o && _$setAttribute(_el$127, "data-show", _p$.o = _v$32);
       return _p$;
     }, {
       e: undefined,
       t: undefined,
-      a: undefined
+      a: undefined,
+      o: undefined
     });
-    return _el$78;
+    _$runHydrationEvents();
+    return _el$122;
   })();
   const dayList = dayKey => {
     const day = parseKey(dayKey);
@@ -2168,36 +2792,36 @@ const MonthView = props => {
     // Read where it renders, so a refresh while the list is open updates it as it does the grid.
     const entries = () => dayEntries(dayKey);
     return (() => {
-      var _el$121 = _$getNextElement(_tmpl$32),
-        _el$122 = _el$121.firstChild,
-        _el$130 = _el$122.nextSibling,
-        [_el$131, _co$35] = _$getNextMarker(_el$130.nextSibling),
-        _el$124 = _el$131.nextSibling,
-        _el$126 = _el$124.firstChild,
-        [_el$127, _co$33] = _$getNextMarker(_el$126.nextSibling),
-        _el$128 = _el$127.nextSibling,
-        [_el$129, _co$34] = _$getNextMarker(_el$128.nextSibling);
-      _$insert(_el$122, () => dayLabel(day));
-      _$insert(_el$121, _$createComponent(Show, {
+      var _el$128 = _$getNextElement(_tmpl$34),
+        _el$129 = _el$128.firstChild,
+        _el$137 = _el$129.nextSibling,
+        [_el$138, _co$37] = _$getNextMarker(_el$137.nextSibling),
+        _el$131 = _el$138.nextSibling,
+        _el$133 = _el$131.firstChild,
+        [_el$134, _co$35] = _$getNextMarker(_el$133.nextSibling),
+        _el$135 = _el$134.nextSibling,
+        [_el$136, _co$36] = _$getNextMarker(_el$135.nextSibling);
+      _$insert(_el$129, () => dayLabel(day));
+      _$insert(_el$128, _$createComponent(Show, {
         get when() {
           return entries().length > 0;
         },
         get fallback() {
           return (() => {
-            var _el$132 = _$getNextElement(_tmpl$33);
-            _$insert(_el$132, () => calendarMessages().calendarNothingPlanned);
-            return _el$132;
+            var _el$139 = _$getNextElement(_tmpl$35);
+            _$insert(_el$139, () => calendarMessages().calendarNothingPlanned);
+            return _el$139;
           })();
         },
         get children() {
-          var _el$123 = _$getNextElement(_tmpl$30);
-          _$insert(_el$123, _$createComponent(For, {
+          var _el$130 = _$getNextElement(_tmpl$32);
+          _$insert(_el$130, _$createComponent(For, {
             get each() {
               return entries();
             },
             children: item => (() => {
-              var _el$133 = _$getNextElement(_tmpl$34);
-              _$insert(_el$133, _$createComponent(EventChip, {
+              var _el$140 = _$getNextElement(_tmpl$36);
+              _$insert(_el$140, _$createComponent(EventChip, {
                 get event() {
                   return item.event;
                 },
@@ -2218,13 +2842,13 @@ const MonthView = props => {
                   return leadingTime(item);
                 }
               }));
-              return _el$133;
+              return _el$140;
             })()
           }));
-          return _el$123;
+          return _el$130;
         }
-      }), _el$131, _co$35);
-      _$insert(_el$124, _$createComponent(Show, {
+      }), _el$138, _co$37);
+      _$insert(_el$131, _$createComponent(Show, {
         when: href,
         get fallback() {
           return _$createComponent(Show, {
@@ -2238,7 +2862,7 @@ const MonthView = props => {
                 size: "sm",
                 onClick: () => openView(dayKey, "day"),
                 get children() {
-                  return [_$getNextElement(_tmpl$35), _$memo(() => calendarMessages().calendarOpenDay)];
+                  return [_$getNextElement(_tmpl$37), _$memo(() => calendarMessages().calendarOpenDay)];
                 }
               });
             }
@@ -2257,11 +2881,11 @@ const MonthView = props => {
             "data-size": "sm"
           },
           get children() {
-            return [_$getNextElement(_tmpl$35), _$memo(() => calendarMessages().calendarOpenDay)];
+            return [_$getNextElement(_tmpl$37), _$memo(() => calendarMessages().calendarOpenDay)];
           }
         })
-      }), _el$127, _co$33);
-      _$insert(_el$124, _$createComponent(Show, {
+      }), _el$134, _co$35);
+      _$insert(_el$131, _$createComponent(Show, {
         get when() {
           return props.owner.renderQuickCreate;
         },
@@ -2280,20 +2904,21 @@ const MonthView = props => {
               });
             },
             get children() {
-              return [_$getNextElement(_tmpl$31), _$memo(() => calendarMessages().calendarNewEvent)];
+              return [_$getNextElement(_tmpl$33), _$memo(() => calendarMessages().calendarNewEvent)];
             }
           });
         }
-      }), _el$129, _co$34);
-      return _el$121;
+      }), _el$136, _co$36);
+      return _el$128;
     })();
   };
+  const viewGrid = () => continuous() ? continuousGrid() : grid();
   return [_$createComponent(Show, {
     get when() {
       return hasMenu();
     },
     get fallback() {
-      return grid();
+      return viewGrid();
     },
     get children() {
       return _$createComponent(GestureMenu, {
@@ -2307,23 +2932,22 @@ const MonthView = props => {
         onOpen: onMenuOpen,
         "class": "k2b-calendar-month-menu",
         get children() {
-          return grid();
+          return viewGrid();
         }
       });
     }
   }), (() => {
-    var _el$136 = _$getNextElement(_tmpl$36);
-    _el$136.addEventListener("toggle", event => {
+    var _el$143 = _$getNextElement(_tmpl$38);
+    _el$143.addEventListener("toggle", event => {
       // A late close of the popover that another opening already replaced keeps the new one. Focus returns to the
       // grid only from inside the popover, never from what a click outside it chose.
       if (event.newState !== "closed" || !popover() || event.currentTarget.matches(":popover-open")) return;
-      const inside = event.currentTarget.contains(document.activeElement) || document.activeElement === document.body;
-      closePopover(inside);
+      closePopover(focusInPopover());
     });
-    _el$136.$$focusin = () => setCreateActive(true);
-    var _ref$ = popoverElement;
-    typeof _ref$ === "function" ? _$use(_ref$, _el$136) : popoverElement = _el$136;
-    _$insert(_el$136, _$createComponent(Show, {
+    _el$143.$$focusin = () => setCreateActive(true);
+    var _ref$3 = popoverElement;
+    typeof _ref$3 === "function" ? _$use(_ref$3, _el$143) : popoverElement = _el$143;
+    _$insert(_el$143, _$createComponent(Show, {
       get when() {
         return popover();
       },
@@ -2331,21 +2955,21 @@ const MonthView = props => {
       children: value => value.kind === "create" ? props.owner.renderQuickCreate?.(rangeOf(value.range), {
         create: value.create,
         close: () => {
-          if (popover() === value) closePopover();
+          if (popover() === value) closePopover(focusInPopover());
         }
       }) : dayList(value.dayKey)
     }));
     _$effect(_p$ => {
-      var _v$21 = (() => {
+      var _v$33 = (() => {
           const current = popover();
           if (current?.kind === "day") return dayLabel(parseKey(current.dayKey));
           return calendarMessages().calendarQuickCreate;
         })(),
-        _v$22 = popover()?.kind,
-        _v$23 = popover()?.kind === "create" && !createActive() ? "true" : undefined;
-      _v$21 !== _p$.e && _$setAttribute(_el$136, "aria-label", _p$.e = _v$21);
-      _v$22 !== _p$.t && _$setAttribute(_el$136, "data-kind", _p$.t = _v$22);
-      _v$23 !== _p$.a && _$setAttribute(_el$136, "data-quiet", _p$.a = _v$23);
+        _v$34 = popover()?.kind,
+        _v$35 = popover()?.kind === "create" && !createActive() ? "true" : undefined;
+      _v$33 !== _p$.e && _$setAttribute(_el$143, "aria-label", _p$.e = _v$33);
+      _v$34 !== _p$.t && _$setAttribute(_el$143, "data-kind", _p$.t = _v$34);
+      _v$35 !== _p$.a && _$setAttribute(_el$143, "data-quiet", _p$.a = _v$35);
       return _p$;
     }, {
       e: undefined,
@@ -2353,7 +2977,7 @@ const MonthView = props => {
       a: undefined
     });
     _$runHydrationEvents();
-    return _el$136;
+    return _el$143;
   })()];
 };
 const TimeGridView = props => {
@@ -2372,6 +2996,8 @@ const TimeGridView = props => {
   let scrollContainer;
   let timeGrid;
   let timeGutter;
+  let daysRow;
+  let allDayRow;
   let defaultHourMarker;
   let cancelInteraction;
   let suppressSlotClickUntil = 0;
@@ -2402,7 +3028,10 @@ const TimeGridView = props => {
     if (!timeGrid || !timeGutter) return null;
     const gridRect = timeGrid.getBoundingClientRect();
     const gutterRect = timeGutter.getBoundingClientRect();
-    const dayIndex = calendarDayIndexAtPoint(clientX, gutterRect.right, gridRect.right - gutterRect.right, props.days.length);
+    // The gutter stays in view while the days scroll sideways under it, so the days start one gutter after the grid.
+    if (clientX < gutterRect.right) return null;
+    const daysLeft = gridRect.left + gutterRect.width;
+    const dayIndex = calendarDayIndexAtPoint(clientX, daysLeft, gridRect.right - daysLeft, props.days.length);
     if (dayIndex === null) return null;
     const minute = Math.min(gridEndHour() * 60 + 45, calendarMinuteAtPoint(clientY, gridRect.top, gridRect.height, gridStartHour(), gridEndHour()));
     return zonedMinuteSlot(props.days[dayIndex], minute, dateConfig());
@@ -2528,12 +3157,28 @@ const TimeGridView = props => {
     }
     return [...groups.values()];
   };
-  // 12 rem per lane. The 40 rem grid is wider than one or two lanes, so only
-  // three or more make the day scroll, and one lane fits beside a tablet drawer.
-  const dayColumnMinWidth = layouts => {
-    if (!isDayView()) return undefined;
-    const lanes = Math.max(1, ...layouts.map(layout => layout.lanes));
-    return `${lanes * 12}rem`;
+  // A week shares 36 rem between its days; a single day takes 12 rem per overlapping lane. The 40 rem grid is wider
+  // than one or two lanes, so only three or more make the day scroll, and one lane fits beside a tablet drawer.
+  const columnTemplate = createMemo(() => {
+    let dayMin = "var(--k2b-calendar-day-min)";
+    if (isDayView()) {
+      const day = props.days[0];
+      const layouts = timedEventLayouts(eventsByDay().get(calendar.formatDateKey(day, dateConfig()))?.timed ?? []);
+      dayMin = `${Math.max(1, ...layouts.map(layout => layout.lanes)) * 12}rem`;
+    }
+    return `4rem repeat(${props.days.length}, minmax(${dayMin}, 1fr))`;
+  });
+  // The hours scroll sideways themselves; the day and all-day rows follow, also when focus scrolls one of them.
+  // A row's scroll event from our own write arrives a frame late; echoing it back would undo a smooth scroll or fling.
+  const followed = new WeakMap();
+  const followColumns = source => {
+    if (followed.get(source) === source.scrollLeft) return;
+    followed.delete(source);
+    for (const row of [scrollContainer, daysRow, allDayRow]) {
+      if (!row || row === source || row.scrollLeft === source.scrollLeft) continue;
+      row.scrollLeft = source.scrollLeft;
+      followed.set(row, row.scrollLeft);
+    }
   };
   const laneStyle = layoutItem => {
     if (isDayView()) {
@@ -2570,19 +3215,22 @@ const TimeGridView = props => {
     });
   });
   return (() => {
-    var _el$137 = _$getNextElement(_tmpl$38),
-      _el$138 = _el$137.firstChild,
-      _el$139 = _el$138.firstChild,
-      _el$140 = _el$139.nextSibling,
-      [_el$141, _co$36] = _$getNextMarker(_el$140.nextSibling),
-      _el$151 = _el$138.nextSibling,
-      [_el$152, _co$39] = _$getNextMarker(_el$151.nextSibling),
-      _el$146 = _el$152.nextSibling,
-      _el$147 = _el$146.firstChild,
-      _el$148 = _el$147.firstChild,
-      _el$149 = _el$148.nextSibling,
-      [_el$150, _co$38] = _$getNextMarker(_el$149.nextSibling);
-    _$insert(_el$138, _$createComponent(For, {
+    var _el$144 = _$getNextElement(_tmpl$40),
+      _el$145 = _el$144.firstChild,
+      _el$146 = _el$145.firstChild,
+      _el$147 = _el$146.nextSibling,
+      [_el$148, _co$38] = _$getNextMarker(_el$147.nextSibling),
+      _el$158 = _el$145.nextSibling,
+      [_el$159, _co$41] = _$getNextMarker(_el$158.nextSibling),
+      _el$153 = _el$159.nextSibling,
+      _el$154 = _el$153.firstChild,
+      _el$155 = _el$154.firstChild,
+      _el$156 = _el$155.nextSibling,
+      [_el$157, _co$40] = _$getNextMarker(_el$156.nextSibling);
+    _el$145.addEventListener("scroll", event => followColumns(event.currentTarget));
+    var _ref$4 = daysRow;
+    typeof _ref$4 === "function" ? _$use(_ref$4, _el$145) : daysRow = _el$145;
+    _$insert(_el$145, _$createComponent(For, {
       get each() {
         return props.days;
       },
@@ -2601,47 +3249,50 @@ const TimeGridView = props => {
           },
           get children() {
             return [(() => {
-              var _el$153 = _$getNextElement(_tmpl$39);
-              _$insert(_el$153, () => formatDay(day, dateConfig()));
-              _$effect(() => _$setAttribute(_el$153, "data-today", today() ? "true" : undefined));
-              return _el$153;
+              var _el$160 = _$getNextElement(_tmpl$41);
+              _$insert(_el$160, () => formatDay(day, dateConfig()));
+              _$effect(() => _$setAttribute(_el$160, "data-today", today() ? "true" : undefined));
+              return _el$160;
             })(), _$createComponent(Show, {
               when: dayBadge,
               children: badge => (() => {
-                var _el$154 = _$getNextElement(_tmpl$40),
-                  _el$155 = _el$154.firstChild,
-                  [_el$156, _co$40] = _$getNextMarker(_el$155.nextSibling),
-                  _el$157 = _el$156.nextSibling,
-                  [_el$158, _co$41] = _$getNextMarker(_el$157.nextSibling);
-                _$insert(_el$154, _$createComponent(Show, {
+                var _el$161 = _$getNextElement(_tmpl$42),
+                  _el$162 = _el$161.firstChild,
+                  [_el$163, _co$42] = _$getNextMarker(_el$162.nextSibling),
+                  _el$164 = _el$163.nextSibling,
+                  [_el$165, _co$43] = _$getNextMarker(_el$164.nextSibling);
+                _$insert(_el$161, _$createComponent(Show, {
                   get when() {
                     return badge().icon;
                   },
                   children: icon => (() => {
-                    var _el$159 = _$getNextElement(_tmpl$3);
-                    _$effect(() => _$className(_el$159, `k2b-calendar-time-grid__badge-icon ti ti-${icon()}`));
-                    return _el$159;
+                    var _el$166 = _$getNextElement(_tmpl$3);
+                    _$effect(() => _$className(_el$166, `k2b-calendar-time-grid__badge-icon ti ti-${icon()}`));
+                    return _el$166;
                   })()
-                }), _el$156, _co$40);
-                _$insert(_el$154, () => badge().label, _el$158, _co$41);
-                return _el$154;
+                }), _el$163, _co$42);
+                _$insert(_el$161, () => badge().label, _el$165, _co$43);
+                return _el$161;
               })()
             })];
           }
         });
       }
-    }), _el$141, _co$36);
-    _$insert(_el$137, _$createComponent(Show, {
+    }), _el$148, _co$38);
+    _$insert(_el$144, _$createComponent(Show, {
       get when() {
         return !props.owner.hideAllDay;
       },
       get children() {
-        var _el$142 = _$getNextElement(_tmpl$37),
-          _el$143 = _el$142.firstChild,
-          _el$144 = _el$143.nextSibling,
-          [_el$145, _co$37] = _$getNextMarker(_el$144.nextSibling);
-        _$insert(_el$143, () => props.labels.allDay);
-        _$insert(_el$142, _$createComponent(For, {
+        var _el$149 = _$getNextElement(_tmpl$39),
+          _el$150 = _el$149.firstChild,
+          _el$151 = _el$150.nextSibling,
+          [_el$152, _co$39] = _$getNextMarker(_el$151.nextSibling);
+        _el$149.addEventListener("scroll", event => followColumns(event.currentTarget));
+        var _ref$5 = allDayRow;
+        typeof _ref$5 === "function" ? _$use(_ref$5, _el$149) : allDayRow = _el$149;
+        _$insert(_el$150, () => props.labels.allDay);
+        _$insert(_el$149, _$createComponent(For, {
           get each() {
             return props.days;
           },
@@ -2650,14 +3301,14 @@ const TimeGridView = props => {
             const allDay = () => eventsByDay().get(dayKey)?.allDay ?? [];
             const previewAllDay = previewEvents().filter(event => event.dayKey === dayKey && event.allDay);
             return (() => {
-              var _el$160 = _$getNextElement(_tmpl$41),
-                _el$161 = _el$160.firstChild,
-                _el$162 = _el$161.firstChild,
-                [_el$163, _co$42] = _$getNextMarker(_el$162.nextSibling),
-                _el$164 = _el$163.nextSibling,
-                [_el$165, _co$43] = _$getNextMarker(_el$164.nextSibling);
-              _$setAttribute(_el$160, "data-calendar-day-key", dayKey);
-              _$spread(_el$160, _$mergeProps({
+              var _el$167 = _$getNextElement(_tmpl$43),
+                _el$168 = _el$167.firstChild,
+                _el$169 = _el$168.firstChild,
+                [_el$170, _co$44] = _$getNextMarker(_el$169.nextSibling),
+                _el$171 = _el$170.nextSibling,
+                [_el$172, _co$45] = _$getNextMarker(_el$171.nextSibling);
+              _$setAttribute(_el$167, "data-calendar-day-key", dayKey);
+              _$spread(_el$167, _$mergeProps({
                 get ["data-drop-preview"]() {
                   return timePreview()?.allDay && calendar.formatDateKey(timePreview().start, dateConfig()) === dayKey ? "true" : undefined;
                 },
@@ -2672,15 +3323,15 @@ const TimeGridView = props => {
                   allDay: true
                 };
               }, () => performance.now() < suppressSlotClickUntil)), false, true);
-              _$insert(_el$161, _$createComponent(For, {
+              _$insert(_el$168, _$createComponent(For, {
                 each: previewAllDay,
                 children: event => (() => {
-                  var _el$166 = _$getNextElement(_tmpl$16);
-                  _$insert(_el$166, () => event.title);
-                  return _el$166;
+                  var _el$173 = _$getNextElement(_tmpl$16);
+                  _$insert(_el$173, () => event.title);
+                  return _el$173;
                 })()
-              }), _el$163, _co$42);
-              _$insert(_el$161, _$createComponent(For, {
+              }), _el$170, _co$44);
+              _$insert(_el$168, _$createComponent(For, {
                 get each() {
                   return allDay();
                 },
@@ -2700,49 +3351,50 @@ const TimeGridView = props => {
                     return props.owner.onEventDrop ? (pointerEvent, markDragged) => startAllDayMove(pointerEvent, event, markDragged) : undefined;
                   }
                 })
-              }), _el$165, _co$43);
+              }), _el$172, _co$45);
               _$runHydrationEvents();
-              return _el$160;
+              return _el$167;
             })();
           }
-        }), _el$145, _co$37);
+        }), _el$152, _co$39);
         _$effect(_p$ => {
-          var _v$24 = `4rem repeat(${props.days.length}, minmax(0, 1fr))`,
-            _v$25 = `${props.owner.allDayMaxHeightRem ?? 7}rem`;
-          _v$24 !== _p$.e && _$setStyleProperty(_el$142, "grid-template-columns", _p$.e = _v$24);
-          _v$25 !== _p$.t && _$setStyleProperty(_el$142, "max-height", _p$.t = _v$25);
+          var _v$36 = columnTemplate(),
+            _v$37 = `${props.owner.allDayMaxHeightRem ?? 7}rem`;
+          _v$36 !== _p$.e && _$setStyleProperty(_el$149, "grid-template-columns", _p$.e = _v$36);
+          _v$37 !== _p$.t && _$setStyleProperty(_el$149, "max-height", _p$.t = _v$37);
           return _p$;
         }, {
           e: undefined,
           t: undefined
         });
-        return _el$142;
+        return _el$149;
       }
-    }), _el$152, _co$39);
-    var _ref$2 = scrollContainer;
-    typeof _ref$2 === "function" ? _$use(_ref$2, _el$146) : scrollContainer = _el$146;
-    var _ref$3 = timeGrid;
-    typeof _ref$3 === "function" ? _$use(_ref$3, _el$147) : timeGrid = _el$147;
-    var _ref$4 = timeGutter;
-    typeof _ref$4 === "function" ? _$use(_ref$4, _el$148) : timeGutter = _el$148;
-    _$insert(_el$148, _$createComponent(For, {
+    }), _el$159, _co$41);
+    _el$153.addEventListener("scroll", event => followColumns(event.currentTarget));
+    var _ref$6 = scrollContainer;
+    typeof _ref$6 === "function" ? _$use(_ref$6, _el$153) : scrollContainer = _el$153;
+    var _ref$7 = timeGrid;
+    typeof _ref$7 === "function" ? _$use(_ref$7, _el$154) : timeGrid = _el$154;
+    var _ref$8 = timeGutter;
+    typeof _ref$8 === "function" ? _$use(_ref$8, _el$155) : timeGutter = _el$155;
+    _$insert(_el$155, _$createComponent(For, {
       get each() {
         return hours();
       },
       children: hour => (() => {
-        var _el$167 = _$getNextElement(_tmpl$42),
-          _el$169 = _el$167.firstChild,
-          [_el$170, _co$44] = _$getNextMarker(_el$169.nextSibling),
-          _el$168 = _el$170.nextSibling;
+        var _el$174 = _$getNextElement(_tmpl$44),
+          _el$176 = _el$174.firstChild,
+          [_el$177, _co$46] = _$getNextMarker(_el$176.nextSibling),
+          _el$175 = _el$177.nextSibling;
         _$use(element => {
           if (hour === businessStartHour()) defaultHourMarker = element;
-        }, _el$167);
-        _$insert(_el$167, () => `${hour}`.padStart(2, "0"), _el$170, _co$44);
-        _$effect(() => _$setAttribute(_el$167, "data-outside-business", hour < businessStartHour() || hour > businessEndHour() ? "true" : undefined));
-        return _el$167;
+        }, _el$174);
+        _$insert(_el$174, () => `${hour}`.padStart(2, "0"), _el$177, _co$46);
+        _$effect(() => _$setAttribute(_el$174, "data-outside-business", hour < businessStartHour() || hour > businessEndHour() ? "true" : undefined));
+        return _el$174;
       })()
     }));
-    _$insert(_el$147, _$createComponent(For, {
+    _$insert(_el$154, _$createComponent(For, {
       get each() {
         return props.days;
       },
@@ -2750,34 +3402,34 @@ const TimeGridView = props => {
         const dayKey = calendar.formatDateKey(day, dateConfig());
         const layouts = createMemo(() => timedEventLayouts(eventsByDay().get(dayKey)?.timed ?? []));
         return (() => {
-          var _el$171 = _$getNextElement(_tmpl$44),
-            _el$173 = _el$171.firstChild,
-            [_el$174, _co$45] = _$getNextMarker(_el$173.nextSibling),
-            _el$175 = _el$174.nextSibling,
-            [_el$176, _co$46] = _$getNextMarker(_el$175.nextSibling),
-            _el$177 = _el$176.nextSibling,
-            [_el$178, _co$47] = _$getNextMarker(_el$177.nextSibling),
-            _el$179 = _el$178.nextSibling,
-            [_el$180, _co$48] = _$getNextMarker(_el$179.nextSibling),
-            _el$181 = _el$180.nextSibling,
-            [_el$182, _co$49] = _$getNextMarker(_el$181.nextSibling);
-          _$insert(_el$171, _$createComponent(Show, {
+          var _el$178 = _$getNextElement(_tmpl$46),
+            _el$180 = _el$178.firstChild,
+            [_el$181, _co$47] = _$getNextMarker(_el$180.nextSibling),
+            _el$182 = _el$181.nextSibling,
+            [_el$183, _co$48] = _$getNextMarker(_el$182.nextSibling),
+            _el$184 = _el$183.nextSibling,
+            [_el$185, _co$49] = _$getNextMarker(_el$184.nextSibling),
+            _el$186 = _el$185.nextSibling,
+            [_el$187, _co$50] = _$getNextMarker(_el$186.nextSibling),
+            _el$188 = _el$187.nextSibling,
+            [_el$189, _co$51] = _$getNextMarker(_el$188.nextSibling);
+          _$insert(_el$178, _$createComponent(Show, {
             get when() {
               return currentTimeLine(day) !== null;
             },
             get children() {
-              var _el$172 = _$getNextElement(_tmpl$43);
-              _$effect(_$p => _$setStyleProperty(_el$172, "top", `${currentTimeLine(day) ?? 0}%`));
-              return _el$172;
+              var _el$179 = _$getNextElement(_tmpl$45);
+              _$effect(_$p => _$setStyleProperty(_el$179, "top", `${currentTimeLine(day) ?? 0}%`));
+              return _el$179;
             }
-          }), _el$174, _co$45);
-          _$insert(_el$171, _$createComponent(For, {
+          }), _el$181, _co$47);
+          _$insert(_el$178, _$createComponent(For, {
             get each() {
               return hours();
             },
             children: hour => (() => {
-              var _el$183 = _$getNextElement(_tmpl$45);
-              _$spread(_el$183, _$mergeProps({
+              var _el$190 = _$getNextElement(_tmpl$47);
+              _$spread(_el$190, _$mergeProps({
                 get ["data-outside-business"]() {
                   return hour < businessStartHour() || hour > businessEndHour() ? "true" : undefined;
                 },
@@ -2795,10 +3447,10 @@ const TimeGridView = props => {
                 "onPointerDown": startRange
               }), false, false);
               _$runHydrationEvents();
-              return _el$183;
+              return _el$190;
             })()
-          }), _el$176, _co$46);
-          _$insert(_el$171, _$createComponent(For, {
+          }), _el$183, _co$48);
+          _$insert(_el$178, _$createComponent(For, {
             get each() {
               return previewEvents().filter(event => event.dayKey === dayKey && !event.allDay);
             },
@@ -2806,44 +3458,44 @@ const TimeGridView = props => {
               const layout = eventLayout(event);
               const short = event.endDate.getTime() - event.startDate.getTime() < 60 * 60_000;
               return (() => {
-                var _el$184 = _$getNextElement(_tmpl$47),
-                  _el$185 = _el$184.firstChild,
-                  _el$193 = _el$185.firstChild,
-                  [_el$194, _co$52] = _$getNextMarker(_el$193.nextSibling),
-                  _el$187 = _el$194.nextSibling,
-                  _el$189 = _el$187.firstChild,
-                  [_el$190, _co$50] = _$getNextMarker(_el$189.nextSibling),
-                  _el$188 = _el$190.nextSibling,
-                  _el$191 = _el$188.nextSibling,
-                  [_el$192, _co$51] = _$getNextMarker(_el$191.nextSibling);
-                _$setAttribute(_el$184, "data-short", short ? "true" : undefined);
-                _$insert(_el$185, _$createComponent(Show, {
+                var _el$191 = _$getNextElement(_tmpl$49),
+                  _el$192 = _el$191.firstChild,
+                  _el$200 = _el$192.firstChild,
+                  [_el$201, _co$54] = _$getNextMarker(_el$200.nextSibling),
+                  _el$194 = _el$201.nextSibling,
+                  _el$196 = _el$194.firstChild,
+                  [_el$197, _co$52] = _$getNextMarker(_el$196.nextSibling),
+                  _el$195 = _el$197.nextSibling,
+                  _el$198 = _el$195.nextSibling,
+                  [_el$199, _co$53] = _$getNextMarker(_el$198.nextSibling);
+                _$setAttribute(_el$191, "data-short", short ? "true" : undefined);
+                _$insert(_el$192, _$createComponent(Show, {
                   get when() {
                     return event.title;
                   },
                   get children() {
-                    var _el$186 = _$getNextElement(_tmpl$46);
-                    _$insert(_el$186, () => event.title);
-                    return _el$186;
+                    var _el$193 = _$getNextElement(_tmpl$48);
+                    _$insert(_el$193, () => event.title);
+                    return _el$193;
                   }
-                }), _el$194, _co$52);
-                _$insert(_el$187, () => formatTime(event.startDate, dateConfig()), _el$190, _co$50);
-                _$insert(_el$187, () => formatTime(event.endDate, dateConfig()), _el$192, _co$51);
+                }), _el$201, _co$54);
+                _$insert(_el$194, () => formatTime(event.startDate, dateConfig()), _el$197, _co$52);
+                _$insert(_el$194, () => formatTime(event.endDate, dateConfig()), _el$199, _co$53);
                 _$effect(_p$ => {
-                  var _v$32 = `${layout.top}%`,
-                    _v$33 = `${layout.height}%`;
-                  _v$32 !== _p$.e && _$setStyleProperty(_el$184, "top", _p$.e = _v$32);
-                  _v$33 !== _p$.t && _$setStyleProperty(_el$184, "height", _p$.t = _v$33);
+                  var _v$42 = `${layout.top}%`,
+                    _v$43 = `${layout.height}%`;
+                  _v$42 !== _p$.e && _$setStyleProperty(_el$191, "top", _p$.e = _v$42);
+                  _v$43 !== _p$.t && _$setStyleProperty(_el$191, "height", _p$.t = _v$43);
                   return _p$;
                 }, {
                   e: undefined,
                   t: undefined
                 });
-                return _el$184;
+                return _el$191;
               })();
             }
-          }), _el$178, _co$47);
-          _$insert(_el$171, _$createComponent(For, {
+          }), _el$185, _co$49);
+          _$insert(_el$178, _$createComponent(For, {
             get each() {
               return layouts();
             },
@@ -2886,13 +3538,13 @@ const TimeGridView = props => {
                 });
               };
               return (() => {
-                var _el$195 = _$getNextElement(_tmpl$49),
-                  _el$196 = _el$195.firstChild,
-                  _el$198 = _el$196.firstChild,
-                  [_el$199, _co$53] = _$getNextMarker(_el$198.nextSibling),
-                  _el$200 = _el$199.nextSibling,
-                  [_el$201, _co$54] = _$getNextMarker(_el$200.nextSibling);
-                _$insert(_el$196, _$createComponent(EventChip, {
+                var _el$202 = _$getNextElement(_tmpl$51),
+                  _el$203 = _el$202.firstChild,
+                  _el$205 = _el$203.firstChild,
+                  [_el$206, _co$55] = _$getNextMarker(_el$205.nextSibling),
+                  _el$207 = _el$206.nextSibling,
+                  [_el$208, _co$56] = _$getNextMarker(_el$207.nextSibling);
+                _$insert(_el$203, _$createComponent(EventChip, {
                   event: event,
                   get owner() {
                     return props.owner;
@@ -2907,32 +3559,32 @@ const TimeGridView = props => {
                   get onMovePointerDown() {
                     return props.owner.onEventDrop ? (pointerEvent, markDragged) => startTimedMove(pointerEvent, event, markDragged) : undefined;
                   }
-                }), _el$199, _co$53);
-                _$insert(_el$196, _$createComponent(Show, {
+                }), _el$206, _co$55);
+                _$insert(_el$203, _$createComponent(Show, {
                   get when() {
                     return props.owner.onEventResize;
                   },
                   get children() {
-                    var _el$197 = _$getNextElement(_tmpl$48);
-                    _el$197.addEventListener("dragstart", event => event.preventDefault());
-                    _el$197.$$pointerdown = resizeStart;
-                    _$setAttribute(_el$197, "draggable", false);
-                    _$effect(() => _$setAttribute(_el$197, "aria-label", calendarMessages().resizeEvent));
+                    var _el$204 = _$getNextElement(_tmpl$50);
+                    _el$204.addEventListener("dragstart", event => event.preventDefault());
+                    _el$204.$$pointerdown = resizeStart;
+                    _$setAttribute(_el$204, "draggable", false);
+                    _$effect(() => _$setAttribute(_el$204, "aria-label", calendarMessages().resizeEvent));
                     _$runHydrationEvents();
-                    return _el$197;
+                    return _el$204;
                   }
-                }), _el$201, _co$54);
+                }), _el$208, _co$56);
                 _$effect(_p$ => {
-                  var _v$34 = `${layout.top}%`,
-                    _v$35 = `${layout.height}%`,
-                    _v$36 = position.left,
-                    _v$37 = position.width,
-                    _v$38 = String(20 + layoutItem.lane);
-                  _v$34 !== _p$.e && _$setStyleProperty(_el$195, "top", _p$.e = _v$34);
-                  _v$35 !== _p$.t && _$setStyleProperty(_el$195, "height", _p$.t = _v$35);
-                  _v$36 !== _p$.a && _$setStyleProperty(_el$195, "left", _p$.a = _v$36);
-                  _v$37 !== _p$.o && _$setStyleProperty(_el$195, "width", _p$.o = _v$37);
-                  _v$38 !== _p$.i && _$setStyleProperty(_el$195, "z-index", _p$.i = _v$38);
+                  var _v$44 = `${layout.top}%`,
+                    _v$45 = `${layout.height}%`,
+                    _v$46 = position.left,
+                    _v$47 = position.width,
+                    _v$48 = String(20 + layoutItem.lane);
+                  _v$44 !== _p$.e && _$setStyleProperty(_el$202, "top", _p$.e = _v$44);
+                  _v$45 !== _p$.t && _$setStyleProperty(_el$202, "height", _p$.t = _v$45);
+                  _v$46 !== _p$.a && _$setStyleProperty(_el$202, "left", _p$.a = _v$46);
+                  _v$47 !== _p$.o && _$setStyleProperty(_el$202, "width", _p$.o = _v$47);
+                  _v$48 !== _p$.i && _$setStyleProperty(_el$202, "z-index", _p$.i = _v$48);
                   return _p$;
                 }, {
                   e: undefined,
@@ -2941,11 +3593,11 @@ const TimeGridView = props => {
                   o: undefined,
                   i: undefined
                 });
-                return _el$195;
+                return _el$202;
               })();
             }
-          }), _el$180, _co$48);
-          _$insert(_el$171, _$createComponent(For, {
+          }), _el$187, _co$50);
+          _$insert(_el$178, _$createComponent(For, {
             get each() {
               return overflowLayouts(layouts());
             },
@@ -2954,27 +3606,27 @@ const TimeGridView = props => {
               const key = `${dayKey}-${overflow.groupId}`;
               const hiddenTitle = () => overflow.hiddenEvents.map(event => `${formatTime(event.startDate, dateConfig())} ${event.title}`).join("\n");
               return [(() => {
-                var _el$202 = _$getNextElement(_tmpl$50),
-                  _el$203 = _el$202.firstChild,
-                  _el$204 = _el$203.firstChild,
-                  _el$205 = _el$204.nextSibling,
-                  [_el$206, _co$55] = _$getNextMarker(_el$205.nextSibling);
-                _el$202.$$click = event => {
+                var _el$209 = _$getNextElement(_tmpl$52),
+                  _el$210 = _el$209.firstChild,
+                  _el$211 = _el$210.firstChild,
+                  _el$212 = _el$211.nextSibling,
+                  [_el$213, _co$57] = _$getNextMarker(_el$212.nextSibling);
+                _el$209.$$click = event => {
                   event.stopPropagation();
                   setExpandedOverflow(expandedOverflow() === key ? "" : key);
                 };
-                _$insert(_el$203, () => overflow.hiddenEvents.length, _el$206, _co$55);
+                _$insert(_el$210, () => overflow.hiddenEvents.length, _el$213, _co$57);
                 _$effect(_p$ => {
-                  var _v$39 = `${layout.top}%`,
-                    _v$40 = `${layout.height}%`,
-                    _v$41 = hiddenTitle(),
-                    _v$42 = calendarMessages().hiddenOverlappingEvents({
+                  var _v$49 = `${layout.top}%`,
+                    _v$50 = `${layout.height}%`,
+                    _v$51 = hiddenTitle(),
+                    _v$52 = calendarMessages().hiddenOverlappingEvents({
                       count: overflow.hiddenEvents.length
                     });
-                  _v$39 !== _p$.e && _$setStyleProperty(_el$202, "top", _p$.e = _v$39);
-                  _v$40 !== _p$.t && _$setStyleProperty(_el$202, "height", _p$.t = _v$40);
-                  _v$41 !== _p$.a && _$setAttribute(_el$202, "title", _p$.a = _v$41);
-                  _v$42 !== _p$.o && _$setAttribute(_el$202, "aria-label", _p$.o = _v$42);
+                  _v$49 !== _p$.e && _$setStyleProperty(_el$209, "top", _p$.e = _v$49);
+                  _v$50 !== _p$.t && _$setStyleProperty(_el$209, "height", _p$.t = _v$50);
+                  _v$51 !== _p$.a && _$setAttribute(_el$209, "title", _p$.a = _v$51);
+                  _v$52 !== _p$.o && _$setAttribute(_el$209, "aria-label", _p$.o = _v$52);
                   return _p$;
                 }, {
                   e: undefined,
@@ -2983,24 +3635,24 @@ const TimeGridView = props => {
                   o: undefined
                 });
                 _$runHydrationEvents();
-                return _el$202;
+                return _el$209;
               })(), _$createComponent(Show, {
                 get when() {
                   return expandedOverflow() === key;
                 },
                 get children() {
-                  var _el$207 = _$getNextElement(_tmpl$51),
-                    _el$208 = _el$207.firstChild,
-                    _el$210 = _el$208.firstChild,
-                    [_el$211, _co$56] = _$getNextMarker(_el$210.nextSibling),
-                    _el$209 = _el$211.nextSibling,
-                    _el$212 = _el$209.nextSibling,
-                    [_el$213, _co$57] = _$getNextMarker(_el$212.nextSibling),
-                    _el$214 = _el$208.nextSibling,
-                    [_el$215, _co$58] = _$getNextMarker(_el$214.nextSibling);
-                  _$insert(_el$208, () => formatTime(overflow.groupStartDate, dateConfig()), _el$211, _co$56);
-                  _$insert(_el$208, () => formatTime(overflow.groupEndDate, dateConfig()), _el$213, _co$57);
-                  _$insert(_el$207, _$createComponent(For, {
+                  var _el$214 = _$getNextElement(_tmpl$53),
+                    _el$215 = _el$214.firstChild,
+                    _el$217 = _el$215.firstChild,
+                    [_el$218, _co$58] = _$getNextMarker(_el$217.nextSibling),
+                    _el$216 = _el$218.nextSibling,
+                    _el$219 = _el$216.nextSibling,
+                    [_el$220, _co$59] = _$getNextMarker(_el$219.nextSibling),
+                    _el$221 = _el$215.nextSibling,
+                    [_el$222, _co$60] = _$getNextMarker(_el$221.nextSibling);
+                  _$insert(_el$215, () => formatTime(overflow.groupStartDate, dateConfig()), _el$218, _co$58);
+                  _$insert(_el$215, () => formatTime(overflow.groupEndDate, dateConfig()), _el$220, _co$59);
+                  _$insert(_el$214, _$createComponent(For, {
                     get each() {
                       return overflow.hiddenEvents;
                     },
@@ -3014,36 +3666,27 @@ const TimeGridView = props => {
                       },
                       compact: true
                     })
-                  }), _el$215, _co$58);
-                  _$effect(_$p => _$setStyleProperty(_el$207, "top", `${layout.top}%`));
-                  return _el$207;
+                  }), _el$222, _co$60);
+                  _$effect(_$p => _$setStyleProperty(_el$214, "top", `${layout.top}%`));
+                  return _el$214;
                 }
               })];
             }
-          }), _el$182, _co$49);
-          _$effect(_p$ => {
-            var _v$30 = dayColumnMinWidth(layouts()),
-              _v$31 = `repeat(${hours().length}, minmax(4rem, 1fr))`;
-            _v$30 !== _p$.e && _$setStyleProperty(_el$171, "min-width", _p$.e = _v$30);
-            _v$31 !== _p$.t && _$setStyleProperty(_el$171, "grid-template-rows", _p$.t = _v$31);
-            return _p$;
-          }, {
-            e: undefined,
-            t: undefined
-          });
-          return _el$171;
+          }), _el$189, _co$51);
+          _$effect(_$p => _$setStyleProperty(_el$178, "grid-template-rows", `repeat(${hours().length}, minmax(4rem, 1fr))`));
+          return _el$178;
         })();
       }
-    }), _el$150, _co$38);
+    }), _el$157, _co$40);
     _$effect(_p$ => {
-      var _v$26 = isDayView() ? "day" : "week",
-        _v$27 = `4rem repeat(${props.days.length}, minmax(0, 1fr))`,
-        _v$28 = `4rem repeat(${props.days.length}, minmax(0, 1fr))`,
-        _v$29 = `repeat(${hours().length}, minmax(4rem, 1fr))`;
-      _v$26 !== _p$.e && _$setAttribute(_el$137, "data-view", _p$.e = _v$26);
-      _v$27 !== _p$.t && _$setStyleProperty(_el$138, "grid-template-columns", _p$.t = _v$27);
-      _v$28 !== _p$.a && _$setStyleProperty(_el$147, "grid-template-columns", _p$.a = _v$28);
-      _v$29 !== _p$.o && _$setStyleProperty(_el$148, "grid-template-rows", _p$.o = _v$29);
+      var _v$38 = isDayView() ? "day" : "week",
+        _v$39 = columnTemplate(),
+        _v$40 = columnTemplate(),
+        _v$41 = `repeat(${hours().length}, minmax(4rem, 1fr))`;
+      _v$38 !== _p$.e && _$setAttribute(_el$144, "data-view", _p$.e = _v$38);
+      _v$39 !== _p$.t && _$setStyleProperty(_el$145, "grid-template-columns", _p$.t = _v$39);
+      _v$40 !== _p$.a && _$setStyleProperty(_el$154, "grid-template-columns", _p$.a = _v$40);
+      _v$41 !== _p$.o && _$setStyleProperty(_el$155, "grid-template-rows", _p$.o = _v$41);
       return _p$;
     }, {
       e: undefined,
@@ -3051,7 +3694,7 @@ const TimeGridView = props => {
       a: undefined,
       o: undefined
     });
-    return _el$137;
+    return _el$144;
   })();
 };
 const YearView = props => {
@@ -3092,17 +3735,17 @@ const YearView = props => {
     });
   });
   return (() => {
-    var _el$216 = _$getNextElement(_tmpl$52);
-    _$insert(_el$216, _$createComponent(For, {
+    var _el$223 = _$getNextElement(_tmpl$54);
+    _$insert(_el$223, _$createComponent(For, {
       get each() {
         return months();
       },
       children: month => (() => {
-        var _el$217 = _$getNextElement(_tmpl$53),
-          _el$218 = _el$217.firstChild,
-          _el$219 = _el$218.nextSibling;
-        _$insert(_el$218, () => month.label);
-        _$insert(_el$219, _$createComponent(For, {
+        var _el$224 = _$getNextElement(_tmpl$55),
+          _el$225 = _el$224.firstChild,
+          _el$226 = _el$225.nextSibling;
+        _$insert(_el$225, () => month.label);
+        _$insert(_el$226, _$createComponent(For, {
           get each() {
             return month.days;
           },
@@ -3126,32 +3769,32 @@ const YearView = props => {
                   return day.events[0];
                 },
                 children: event => (() => {
-                  var _el$220 = _$getNextElement(_tmpl$54);
+                  var _el$227 = _$getNextElement(_tmpl$56);
                   _$effect(_p$ => {
-                    var _v$43 = event().colorHex ? undefined : event().color ?? "blue",
-                      _v$44 = day.isToday ? "true" : undefined,
-                      _v$45 = event().colorHex ? {
+                    var _v$53 = event().colorHex ? undefined : event().color ?? "blue",
+                      _v$54 = day.isToday ? "true" : undefined,
+                      _v$55 = event().colorHex ? {
                         "background-color": day.isToday ? "white" : event().colorHex
                       } : undefined;
-                    _v$43 !== _p$.e && _$setAttribute(_el$220, "data-color", _p$.e = _v$43);
-                    _v$44 !== _p$.t && _$setAttribute(_el$220, "data-today", _p$.t = _v$44);
-                    _p$.a = _$style(_el$220, _v$45, _p$.a);
+                    _v$53 !== _p$.e && _$setAttribute(_el$227, "data-color", _p$.e = _v$53);
+                    _v$54 !== _p$.t && _$setAttribute(_el$227, "data-today", _p$.t = _v$54);
+                    _p$.a = _$style(_el$227, _v$55, _p$.a);
                     return _p$;
                   }, {
                     e: undefined,
                     t: undefined,
                     a: undefined
                   });
-                  return _el$220;
+                  return _el$227;
                 })()
               })];
             }
           })
         }));
-        return _el$217;
+        return _el$224;
       })()
     }));
-    return _el$216;
+    return _el$223;
   })();
 };
 const MobileMonthView = props => {
@@ -3159,14 +3802,14 @@ const MobileMonthView = props => {
   const selectedDateKey = createMemo(() => calendar.formatDateKey(props.selectedDate, dateConfig()));
   const selectedEvents = createMemo(() => props.events.filter(event => event.dayKey === selectedDateKey()));
   return (() => {
-    var _el$221 = _$getNextElement(_tmpl$56),
-      _el$227 = _el$221.firstChild,
-      [_el$228, _co$60] = _$getNextMarker(_el$227.nextSibling),
-      _el$222 = _el$228.nextSibling,
-      _el$223 = _el$222.firstChild,
-      _el$225 = _el$223.nextSibling,
-      [_el$226, _co$59] = _$getNextMarker(_el$225.nextSibling);
-    _$insert(_el$221, _$createComponent(MonthPickerView, {
+    var _el$228 = _$getNextElement(_tmpl$58),
+      _el$234 = _el$228.firstChild,
+      [_el$235, _co$62] = _$getNextMarker(_el$234.nextSibling),
+      _el$229 = _el$235.nextSibling,
+      _el$230 = _el$229.firstChild,
+      _el$232 = _el$230.nextSibling,
+      [_el$233, _co$61] = _$getNextMarker(_el$232.nextSibling);
+    _$insert(_el$228, _$createComponent(MonthPickerView, {
       get owner() {
         return {
           ...props.owner,
@@ -3186,27 +3829,27 @@ const MobileMonthView = props => {
         return props.labels;
       },
       compact: true
-    }), _el$228, _co$60);
-    _$insert(_el$223, () => props.selectedDate.toLocaleDateString(dateConfig().locale ?? "en", {
+    }), _el$235, _co$62);
+    _$insert(_el$230, () => props.selectedDate.toLocaleDateString(dateConfig().locale ?? "en", {
       weekday: "long",
       month: "long",
       day: "numeric",
       timeZone: dateConfig().timeZone
     }));
-    _$insert(_el$222, _$createComponent(Show, {
+    _$insert(_el$229, _$createComponent(Show, {
       get when() {
         return selectedEvents().length > 0;
       },
       get fallback() {
         return (() => {
-          var _el$229 = _$getNextElement(_tmpl$57);
-          _$insert(_el$229, () => props.labels.noEvents);
-          return _el$229;
+          var _el$236 = _$getNextElement(_tmpl$59);
+          _$insert(_el$236, () => props.labels.noEvents);
+          return _el$236;
         })();
       },
       get children() {
-        var _el$224 = _$getNextElement(_tmpl$55);
-        _$insert(_el$224, _$createComponent(For, {
+        var _el$231 = _$getNextElement(_tmpl$57);
+        _$insert(_el$231, _$createComponent(For, {
           get each() {
             return selectedEvents();
           },
@@ -3220,16 +3863,16 @@ const MobileMonthView = props => {
             }
           })
         }));
-        return _el$224;
+        return _el$231;
       }
-    }), _el$226, _co$59);
-    return _el$221;
+    }), _el$233, _co$61);
+    return _el$228;
   })();
 };
 const CalendarBody = props => (() => {
-  var _el$230 = _$getNextElement(_tmpl$58);
-  _$insert(_el$230, () => props.children);
-  return _el$230;
+  var _el$237 = _$getNextElement(_tmpl$60);
+  _$insert(_el$237, () => props.children);
+  return _el$237;
 })();
 const CalendarRoot = props => {
   const messages = useUiMessages();
@@ -3284,24 +3927,26 @@ const CalendarRoot = props => {
   // The day and week views with `dayHours` scroll through their days; the header and the commands ask them first.
   const [timeView, setTimeView] = createSignal(null);
   const [monthCreate, setMonthCreate] = createSignal(null);
+  const monthView = () => monthCreate()?.continuous() ? monthCreate() : null;
+  const scrollingView = () => timeView() ?? monthView();
   const timeMode = () => Boolean(props.dayHours) && (view() === "day" || view() === "week");
   const parseKey = key => calendar.parseCalendarDate(key, dateConfig());
   /** The first shown day of a day or week view, or the selected day of the month view, for the other views. */
   const shownDay = () => {
     const first = timeView()?.visibleKeys().first;
     if (first) return parseKey(first);
-    return view() === "month" ? focusDay() : null;
+    return view() === "month" ? focusDay() ?? monthView()?.focusDay() ?? null : null;
   };
   const go = (target, nextView) => {
     const href = props.getDateHref?.(target, nextView);
     if (href) followCalendarHref(owner, href);else openViewAt(props, target, nextView);
   };
   const step = direction => {
-    if (timeView()?.step(direction)) return;
-    go(adjacentCalendarDate(shownDay() ?? date(), view(), direction, dateConfig()), view());
+    if (scrollingView()?.step(direction)) return;
+    go(adjacentCalendarDate(monthView()?.stepFrom() ?? shownDay() ?? date(), view(), direction, dateConfig()), view());
   };
   const goToday = () => {
-    if (timeView()?.today()) return;
+    if (scrollingView()?.today()) return;
     go(calendar.today(dateConfig()), view());
   };
   const goView = nextView => {
@@ -3314,7 +3959,7 @@ const CalendarRoot = props => {
     if (href) followCalendarHref(owner, href);else props.onViewChange?.(nextView);
   };
   const goToKey = key => {
-    if (timeView()?.goTo(key)) return;
+    if (scrollingView()?.goTo(key)) return;
     go(parseKey(key), view());
   };
   const openGoTo = () => void openCalendarGoTo({
@@ -3409,6 +4054,7 @@ const CalendarRoot = props => {
   });
   const headerNav = {
     timeView,
+    monthView,
     commands: () => props.onCommandsChange ? allCommands() : [],
     // The arrow keys page like J and K, so the list names them beside those keys.
     openShortcuts: () => void openCalendarShortcuts(allCommands(), calendarMessages(), custom() ? {} : {
@@ -3455,14 +4101,14 @@ const CalendarRoot = props => {
     register: setTimeView
   });
   return (() => {
-    var _el$231 = _$getNextElement(_tmpl$59),
-      _el$232 = _el$231.firstChild,
-      [_el$233, _co$61] = _$getNextMarker(_el$232.nextSibling),
-      _el$234 = _el$233.nextSibling,
-      [_el$235, _co$62] = _$getNextMarker(_el$234.nextSibling);
-    var _ref$5 = root;
-    typeof _ref$5 === "function" ? _$use(_ref$5, _el$231) : root = _el$231;
-    _$insert(_el$231, _$createComponent(CalendarHeader, {
+    var _el$238 = _$getNextElement(_tmpl$61),
+      _el$239 = _el$238.firstChild,
+      [_el$240, _co$63] = _$getNextMarker(_el$239.nextSibling),
+      _el$241 = _el$240.nextSibling,
+      [_el$242, _co$64] = _$getNextMarker(_el$241.nextSibling);
+    var _ref$9 = root;
+    typeof _ref$9 === "function" ? _$use(_ref$9, _el$238) : root = _el$238;
+    _$insert(_el$238, _$createComponent(CalendarHeader, {
       get date() {
         return date();
       },
@@ -3474,11 +4120,11 @@ const CalendarRoot = props => {
       },
       owner: owner,
       get focusDay() {
-        return _$memo(() => view() === "month")() ? focusDay() : _$memo(() => !!timeView())() ? shownDay() : null;
+        return _$memo(() => !!(view() === "month" || timeView()))() ? shownDay() : null;
       },
       nav: headerNav
-    }), _el$233, _co$61);
-    _$insert(_el$231, _$createComponent(Show, {
+    }), _el$240, _co$63);
+    _$insert(_el$238, _$createComponent(Show, {
       get when() {
         return !custom();
       },
@@ -3512,6 +4158,7 @@ const CalendarRoot = props => {
                     return mergedLabels();
                   },
                   onFocusDay: setFocusDay,
+                  goToDate: date => go(date, view()),
                   register: setMonthCreate
                 });
               }
@@ -3615,18 +4262,18 @@ const CalendarRoot = props => {
           }
         });
       }
-    }), _el$235, _co$62);
+    }), _el$242, _co$64);
     _$effect(_p$ => {
-      var _v$46 = `k2b-content-calendar ${props.class ?? ""}`,
-        _v$47 = props.navigationPending ? "true" : undefined;
-      _v$46 !== _p$.e && _$className(_el$231, _p$.e = _v$46);
-      _v$47 !== _p$.t && _$setAttribute(_el$231, "aria-busy", _p$.t = _v$47);
+      var _v$56 = `k2b-content-calendar ${props.class ?? ""}`,
+        _v$57 = props.navigationPending ? "true" : undefined;
+      _v$56 !== _p$.e && _$className(_el$238, _p$.e = _v$56);
+      _v$57 !== _p$.t && _$setAttribute(_el$238, "aria-busy", _p$.t = _v$57);
       return _p$;
     }, {
       e: undefined,
       t: undefined
     });
-    return _el$231;
+    return _el$238;
   })();
 };