@k2b/ui 0.23.0 → 0.25.0

package/dist/ssr/content/Calendar.js

@@ -27,47 +27,49 @@ var _tmpl$ = ["<div role=\"radiogroup\"", " aria-orientation=\"horizontal\" clas
   _tmpl$16 = ["<span class=\"k2b-calendar-month__day-number\"", ">", "</span>"],
   _tmpl$17 = ["<span class=\"k2b-calendar-month__badge\">", "", "</span>"],
   _tmpl$18 = ["<span class=\"k2b-calendar-dot\"", " style=\"", "\"></span>"],
-  _tmpl$19 = ["<div class=\"k2b-calendar-month__weekday\" role=\"columnheader\">", "</div>"],
-  _tmpl$20 = ["<div class=\"k2b-calendar-month\" role=\"grid\"", " aria-multiselectable=\"true\" data-lanes=\"true\" style=\"", "\"><div class=\"k2b-calendar-month__weekdays\" role=\"row\"", ">", "", "</div>", "</div>"],
-  _tmpl$21 = ["<div class=\"k2b-calendar-month__weekday\" role=\"columnheader\"", ">", "</div>"],
-  _tmpl$22 = ["<div class=\"k2b-calendar-month__week-number\" role=\"rowheader\">", "</div>"],
-  _tmpl$23 = ["<div class=\"k2b-calendar-month__week\" role=\"row\"", ">", "", "</div>"],
-  _tmpl$24 = ["<button type=\"button\" class=\"k2b-calendar-month__week-link\" tabindex=\"-1\"", ">", "</button>"],
-  _tmpl$25 = ["<button type=\"button\" class=\"k2b-calendar-month__more\" tabindex=\"-1\" style=\"", "\"", " aria-haspopup=\"dialog\"", "><span class=\"k2b-calendar-month__more-long\">", "</span><span class=\"k2b-calendar-month__more-short\">+", "</span></button>"],
-  _tmpl$26 = ["<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\">", "", "", "</div></div>"],
-  _tmpl$27 = ["<div class=\"k2b-calendar-month__segment\" style=\"", "\">", "</div>"],
-  _tmpl$28 = ["<ul class=\"k2b-calendar-day-list__events\">", "</ul>"],
-  _tmpl$29 = "<i class=\"ti ti-plus\" aria-hidden=\"true\"></i>",
-  _tmpl$30 = ["<div class=\"k2b-calendar-day-list\"><div class=\"k2b-calendar-day-list__title\">", "</div>", "<div class=\"k2b-calendar-day-list__actions\">", "", "</div></div>"],
-  _tmpl$31 = ["<p class=\"k2b-calendar-day-list__empty\">", "</p>"],
-  _tmpl$32 = ["<li>", "</li>"],
-  _tmpl$33 = "<i class=\"ti ti-zoom-in\" aria-hidden=\"true\"></i>",
-  _tmpl$34 = ["<div class=\"k2b-calendar-popover\" popover=\"auto\" role=\"dialog\"", ">", "</div>"],
-  _tmpl$35 = ["<div class=\"k2b-calendar-time-grid__all-day\" style=\"", "\"><div class=\"k2b-calendar-time-grid__all-day-label\">", "</div>", "</div>"],
-  _tmpl$36 = ["<div class=\"k2b-calendar-time-grid k2b-detail-trail\"", "><div class=\"k2b-calendar-time-grid__days\" style=\"", "\"><div></div>", "</div>", "<div class=\"k2b-calendar-time-grid__scroll\"><div class=\"k2b-calendar-time-grid__grid\" style=\"", "\"><div class=\"k2b-calendar-time-grid__gutter\" style=\"", "\">", "</div>", "</div></div></div>"],
-  _tmpl$37 = ["<span class=\"k2b-calendar-time-grid__day-label\"", ">", "</span>"],
-  _tmpl$38 = ["<span class=\"k2b-calendar-time-grid__badge\">", "", "</span>"],
-  _tmpl$39 = ["<div class=\"k2b-calendar-time-grid__all-day-events\">", "", "</div>"],
-  _tmpl$40 = ["<div class=\"k2b-calendar-time-grid__hour\"", ">", ":00</div>"],
-  _tmpl$41 = ["<div class=\"k2b-calendar-time-grid__now\" style=\"", "\"></div>"],
-  _tmpl$42 = ["<div class=\"k2b-calendar-time-grid__column\" style=\"", "\">", "", "", "", "", "</div>"],
-  _tmpl$43 = ["<div class=\"k2b-calendar-preview__title\">", "</div>"],
-  _tmpl$44 = ["<div class=\"k2b-calendar-preview k2b-calendar-preview--timed\"", " style=\"", "\"><div class=\"k2b-calendar-preview__content\">", "<div class=\"k2b-calendar-preview__label\">", " - ", "</div></div></div>"],
-  _tmpl$45 = ["<button type=\"button\"", " draggable=\"false\" class=\"k2b-calendar-time-grid__resize\"><span class=\"k2b-calendar-time-grid__resize-icon\" aria-hidden=\"true\"></span></button>"],
-  _tmpl$46 = ["<div class=\"k2b-calendar-time-grid__event-position\" style=\"", "\"><div class=\"k2b-calendar-time-grid__event-frame\">", "", "</div></div>"],
-  _tmpl$47 = ["<button type=\"button\" class=\"k2b-calendar-time-grid__overflow\" style=\"", "\"", "><span class=\"k2b-calendar-time-grid__overflow-count\">+", "</span></button>"],
-  _tmpl$48 = ["<div class=\"k2b-calendar-time-grid__overflow-menu\" style=\"", "\"><div class=\"k2b-calendar-time-grid__overflow-title\">", " - ", "</div>", "</div>"],
-  _tmpl$49 = ["<div class=\"k2b-calendar-year\">", "</div>"],
-  _tmpl$50 = ["<div class=\"k2b-calendar-year__month\"><div class=\"k2b-calendar-year__title\">", "</div><div class=\"k2b-calendar-year__grid\">", "</div></div>"],
-  _tmpl$51 = ["<span class=\"k2b-calendar-year__indicator\"", " style=\"", "\"></span>"],
-  _tmpl$52 = ["<div class=\"k2b-calendar-mobile-month__events\">", "</div>"],
-  _tmpl$53 = ["<div class=\"k2b-calendar-mobile-month\">", "<div class=\"k2b-calendar-mobile-month__agenda\"><div class=\"k2b-calendar-mobile-month__title\">", "</div>", "</div></div>"],
-  _tmpl$54 = ["<div class=\"k2b-calendar-mobile-month__empty\">", "</div>"],
-  _tmpl$55 = ["<div class=\"k2b-calendar-body\">", "</div>"],
-  _tmpl$56 = ["<section class=\"", "\"", ">", "", "</section>"];
+  _tmpl$19 = ["<div class=\"k2b-calendar-month__week-number\" role=\"rowheader\">", "</div>"],
+  _tmpl$20 = ["<div class=\"k2b-calendar-month__week\" role=\"row\"", " style=\"", "\"", ">", "", "</div>"],
+  _tmpl$21 = ["<button type=\"button\" class=\"k2b-calendar-month__week-link\" tabindex=\"-1\"", ">", "</button>"],
+  _tmpl$22 = ["<button type=\"button\" class=\"k2b-calendar-month__more\" tabindex=\"-1\" style=\"", "\"", " aria-haspopup=\"dialog\"", "><span class=\"k2b-calendar-month__more-long\">", "</span><span class=\"k2b-calendar-month__more-short\">+", "</span></button>"],
+  _tmpl$23 = ["<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\">", "", "", "</div></div>"],
+  _tmpl$24 = ["<div class=\"k2b-calendar-month__segment\" style=\"", "\">", "</div>"],
+  _tmpl$25 = ["<div class=\"k2b-calendar-month__weekday\" role=\"columnheader\">", "</div>"],
+  _tmpl$26 = ["<div class=\"k2b-calendar-month__weekdays\" role=\"row\"", ">", "", "</div>"],
+  _tmpl$27 = ["<div class=\"k2b-calendar-month__weekday\" role=\"columnheader\"", ">", "</div>"],
+  _tmpl$28 = ["<div class=\"k2b-calendar-month\" role=\"grid\"", " aria-multiselectable=\"true\" data-lanes=\"true\" style=\"", "\">", "", "</div>"],
+  _tmpl$29 = ["<div class=\"k2b-calendar-month-viewport\"><div class=\"k2b-calendar-month\" role=\"grid\"", " aria-multiselectable=\"true\" data-lanes=\"true\" data-continuous=\"true\"", " style=\"", "\">", "<div class=\"k2b-calendar-month__track\" role=\"rowgroup\" style=\"", "\">", "</div></div><div class=\"k2b-calendar-month__scroll-label\" aria-hidden=\"true\"", ">", "</div></div>"],
+  _tmpl$30 = ["<ul class=\"k2b-calendar-day-list__events\">", "</ul>"],
+  _tmpl$31 = "<i class=\"ti ti-plus\" aria-hidden=\"true\"></i>",
+  _tmpl$32 = ["<div class=\"k2b-calendar-day-list\"><div class=\"k2b-calendar-day-list__title\">", "</div>", "<div class=\"k2b-calendar-day-list__actions\">", "", "</div></div>"],
+  _tmpl$33 = ["<p class=\"k2b-calendar-day-list__empty\">", "</p>"],
+  _tmpl$34 = ["<li>", "</li>"],
+  _tmpl$35 = "<i class=\"ti ti-zoom-in\" aria-hidden=\"true\"></i>",
+  _tmpl$36 = ["<div class=\"k2b-calendar-popover\" popover=\"auto\" role=\"dialog\"", ">", "</div>"],
+  _tmpl$37 = ["<div class=\"k2b-calendar-time-grid__all-day\" style=\"", "\"><div class=\"k2b-calendar-time-grid__all-day-label\">", "</div>", "</div>"],
+  _tmpl$38 = ["<div class=\"k2b-calendar-time-grid\"", "><div class=\"k2b-calendar-time-grid__days\" style=\"", "\"><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\" style=\"", "\"><div class=\"k2b-calendar-time-grid__gutter\" style=\"", "\">", "</div>", "</div></div></div>"],
+  _tmpl$39 = ["<span class=\"k2b-calendar-time-grid__day-label\"", ">", "</span>"],
+  _tmpl$40 = ["<span class=\"k2b-calendar-time-grid__badge\">", "", "</span>"],
+  _tmpl$41 = ["<div class=\"k2b-calendar-time-grid__all-day-events\">", "", "</div>"],
+  _tmpl$42 = ["<div class=\"k2b-calendar-time-grid__hour\"", ">", ":00</div>"],
+  _tmpl$43 = ["<div class=\"k2b-calendar-time-grid__now\" style=\"", "\"></div>"],
+  _tmpl$44 = ["<div class=\"k2b-calendar-time-grid__column\" style=\"", "\">", "", "", "", "", "</div>"],
+  _tmpl$45 = ["<div class=\"k2b-calendar-preview__title\">", "</div>"],
+  _tmpl$46 = ["<div class=\"k2b-calendar-preview k2b-calendar-preview--timed\"", " style=\"", "\"><div class=\"k2b-calendar-preview__content\">", "<div class=\"k2b-calendar-preview__label\">", " - ", "</div></div></div>"],
+  _tmpl$47 = ["<button type=\"button\"", " draggable=\"false\" class=\"k2b-calendar-time-grid__resize\"><span class=\"k2b-calendar-time-grid__resize-icon\" aria-hidden=\"true\"></span></button>"],
+  _tmpl$48 = ["<div class=\"k2b-calendar-time-grid__event-position\" style=\"", "\"><div class=\"k2b-calendar-time-grid__event-frame\">", "", "</div></div>"],
+  _tmpl$49 = ["<button type=\"button\" class=\"k2b-calendar-time-grid__overflow\" style=\"", "\"", "><span class=\"k2b-calendar-time-grid__overflow-count\">+", "</span></button>"],
+  _tmpl$50 = ["<div class=\"k2b-calendar-time-grid__overflow-menu\" style=\"", "\"><div class=\"k2b-calendar-time-grid__overflow-title\">", " - ", "</div>", "</div>"],
+  _tmpl$51 = ["<div class=\"k2b-calendar-year\">", "</div>"],
+  _tmpl$52 = ["<div class=\"k2b-calendar-year__month\"><div class=\"k2b-calendar-year__title\">", "</div><div class=\"k2b-calendar-year__grid\">", "</div></div>"],
+  _tmpl$53 = ["<span class=\"k2b-calendar-year__indicator\"", " style=\"", "\"></span>"],
+  _tmpl$54 = ["<div class=\"k2b-calendar-mobile-month__events\">", "</div>"],
+  _tmpl$55 = ["<div class=\"k2b-calendar-mobile-month\">", "<div class=\"k2b-calendar-mobile-month__agenda\"><div class=\"k2b-calendar-mobile-month__title\">", "</div>", "</div></div>"],
+  _tmpl$56 = ["<div class=\"k2b-calendar-mobile-month__empty\">", "</div>"],
+  _tmpl$57 = ["<div class=\"k2b-calendar-body\">", "</div>"],
+  _tmpl$58 = ["<section class=\"", "\"", ">", "", "</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";
@@ -75,13 +77,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. */
 
@@ -413,11 +417,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());
@@ -451,7 +457,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
@@ -515,37 +521,52 @@ 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() {
         return _$ssr(_tmpl$2, `ti ${_$escape(icon, true)}`);
       }
-    }) : props.owner.onDateChange ? _$ssr(_tmpl$3, _$ssrAttribute("aria-label", _$escape(label, true), false) + _$ssrAttribute("title", _$escape(title, true), false), `ti ${_$escape(icon, true)}`) : _$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() {
+            return _$ssr(_tmpl$3, _$ssrAttribute("aria-label", _$escape(label, true), false) + _$ssrAttribute("title", _$escape(title(), true), false), `ti ${_$escape(icon, true)}`);
+          }
+        });
       },
       get children() {
-        return _$ssr(_tmpl$2, `ti ${_$escape(icon, true)}`);
+        return link(() => href() ?? "#");
       }
     });
   };
@@ -553,7 +574,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() {
@@ -574,7 +595,7 @@ 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 = [todayIcon(), _$ssr(_tmpl$6, _$escape(props.labels.today))];
     return (props.owner.onNavigateHref || props.owner.onNavigate) && href ? _$createComponent(CalendarNavigationLink, {
@@ -641,7 +662,7 @@ const CalendarHeader = props => {
     value: "year",
     label: props.labels.year
   }].filter(option => !props.owner.views || props.owner.views.includes(option.value)), ...(props.owner.customViews ?? [])]);
-  return _$ssr(_tmpl$0, _$escape(navButton(previous(), "ti-chevron-left", props.labels.previous, -1)), _$escape(navButton(next(), "ti-chevron-right", props.labels.next, 1)), _$escape(title()), _$escape(_$createComponent(For, {
+  return _$ssr(_tmpl$0, _$escape(navButton(previous, "ti-chevron-left", props.labels.previous, -1)), _$escape(navButton(next, "ti-chevron-right", props.labels.next, 1)), _$escape(title()), _$escape(_$createComponent(For, {
     get each() {
       return titleWidths();
     },
@@ -950,7 +971,7 @@ const MonthPickerView = props => {
 
 /** 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;
@@ -1010,9 +1031,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 => ({
@@ -1024,17 +1049,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);
@@ -1060,13 +1080,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();
@@ -1091,8 +1577,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
   }));
@@ -1101,6 +1586,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;
@@ -1191,6 +1677,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);
@@ -1222,6 +1710,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();
@@ -1234,8 +1727,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, {
@@ -1244,10 +1737,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 => {
@@ -1282,12 +1783,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) => {
@@ -1316,7 +1820,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) {
@@ -1386,6 +1895,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;
@@ -1394,6 +1906,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);
@@ -1413,8 +1927,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 => {
@@ -1464,6 +1978,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;
@@ -1483,6 +1999,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);
       },
@@ -1570,235 +2089,264 @@ const MonthView = props => {
       if (linkedItem() === item.key) setLinkedItem("");
     }
   });
-  const grid = () => _$ssr(_tmpl$20, _$ssrAttribute("aria-label", _$escape(formatMonth(props.date, dateConfig()), true), false), _$ssrStyleProperty("grid-template-rows:", `auto repeat(${_$escape(weeks().length, true)}, minmax(5rem, 1fr))`) + _$ssrStyleProperty(";--k2b-calendar-lane:", "1.25rem") + _$ssrStyleProperty(";--k2b-calendar-lane-gap:", "0.125rem"), _$ssrAttribute("data-week-numbers", props.owner.withWeekNumbers ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
-    get when() {
-      return props.owner.withWeekNumbers;
-    },
-    get children() {
-      return _$ssr(_tmpl$19, _$escape(calendarMessages().weekShort));
-    }
-  })), _$escape(_$createComponent(For, {
-    get each() {
-      return weekdays();
-    },
-    children: (day, index) => _$ssr(_tmpl$21, _$ssrAttribute("data-weekend", index() > 4 ? "true" : _$escape(undefined, true), false), _$escape(day))
-  })), _$escape(_$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 _$ssr(_tmpl$23, _$ssrAttribute("data-week-numbers", props.owner.withWeekNumbers ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
-        get when() {
-          return props.owner.withWeekNumbers;
-        },
-        get children() {
-          return _$ssr(_tmpl$22, _$escape(_$createComponent(Show, {
-            get when() {
-              return weekHref();
-            },
-            get fallback() {
-              return _$createComponent(Show, {
-                get when() {
-                  return canOpenView("week");
-                },
-                get fallback() {
-                  return weekNumber();
-                },
-                get children() {
-                  return _$ssr(_tmpl$24, _$ssrAttribute("title", _$escape(calendarMessages().calendarOpenWeekNumber({
-                    week: weekNumber()
-                  }), true), false) + _$ssrAttribute("aria-label", _$escape(calendarMessages().calendarOpenWeekNumber({
-                    week: weekNumber()
-                  }), true), false), _$escape(weekNumber()));
-                }
-              });
-            },
-            children: href => _$createComponent(CalendarNavigationLink, {
-              get owner() {
-                return props.owner;
-              },
-              get href() {
-                return href();
+  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 _$ssr(_tmpl$20, _$ssrAttribute("data-week-key", continuous() ? _$escape(week()[0]?.key, true) : _$escape(undefined, true), false) + _$ssrAttribute("aria-rowindex", continuous() ? _$escape(weekIndex(), true) + 2 : _$escape(undefined, true), false), _$ssrStyle(continuous() ? {
+      "--k2b-calendar-week-index": String(weekIndex())
+    } : undefined), _$ssrAttribute("data-week-numbers", props.owner.withWeekNumbers ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+      get when() {
+        return props.owner.withWeekNumbers;
+      },
+      get children() {
+        return _$ssr(_tmpl$19, _$escape(_$createComponent(Show, {
+          get when() {
+            return weekHref();
+          },
+          get fallback() {
+            return _$createComponent(Show, {
+              get when() {
+                return canOpenView("week");
               },
-              get anchorProps() {
-                return {
-                  class: "k2b-calendar-month__week-link",
-                  tabIndex: -1,
-                  title: calendarMessages().calendarOpenWeekNumber({
-                    week: weekNumber()
-                  }),
-                  "aria-label": calendarMessages().calendarOpenWeekNumber({
-                    week: weekNumber()
-                  })
-                };
+              get fallback() {
+                return weekNumber();
               },
               get children() {
-                return weekNumber();
+                return _$ssr(_tmpl$21, _$ssrAttribute("title", _$escape(calendarMessages().calendarOpenWeekNumber({
+                  week: weekNumber()
+                }), true), false) + _$ssrAttribute("aria-label", _$escape(calendarMessages().calendarOpenWeekNumber({
+                  week: weekNumber()
+                }), true), false), _$escape(weekNumber()));
               }
-            })
-          })));
-        }
-      })), _$escape(_$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 _$ssr(_tmpl$26, _$ssrAttribute("tabindex", rovingKey() === key ? 0 : -1, false) + _$ssrAttribute("aria-label", _$escape(label, true), false) + _$ssrAttribute("aria-selected", within(selection(), key) ? "true" : "false", false) + _$ssrAttribute("aria-current", key === todayKey() ? "date" : _$escape(undefined, true), false) + _$ssrAttribute("data-calendar-day-key", _$escape(key, true), false) + _$ssrAttribute("data-outside", !sameMonth ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-weekend", column() > 4 ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-past", key < todayKey() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-selected", _$escape(selectionPart(key), true), false) + _$ssrAttribute("data-drop-preview", within(dropRange(), key) ? "true" : _$escape(undefined, true), false), _$ssrAttribute("data-today", key === todayKey() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-outside", !sameMonth ? "true" : _$escape(undefined, true), false), _$escape(calendar.formatDayNumber(day, dateConfig())), _$escape(_$createComponent(Show, {
-            when: dayBadge,
-            children: badge => _$ssr(_tmpl$17, _$escape(_$createComponent(Show, {
-              get when() {
-                return badge().icon;
-              },
-              children: icon => _$ssr(_tmpl$2, `k2b-calendar-month__badge-icon ti ti-${_$escape(icon(), true)}`)
-            })), _$escape(badge().label))
-          })), _$escape(_$createComponent(For, {
-            get each() {
-              return bars();
+            });
+          },
+          children: href => _$createComponent(CalendarNavigationLink, {
+            get owner() {
+              return props.owner;
             },
-            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;
+            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()
+                })
               };
-              return _$ssrElement("div", _$mergeProps({
-                "class": "k2b-calendar-month__segment",
-                get style() {
-                  return {
-                    "--k2b-calendar-span": String(span),
-                    "--k2b-calendar-row": String(bar.lane)
-                  };
-                },
-                "data-bar": "true",
-                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)), _$escape(_$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;
-                }
-              })), false);
+            },
+            get children() {
+              return weekNumber();
             }
-          })), _$escape(_$createComponent(For, {
-            get each() {
-              return cell().shown;
+          })
+        })));
+      }
+    })), _$escape(_$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 _$ssr(_tmpl$23, _$ssrAttribute("tabindex", rovingKey() === key ? 0 : -1, false) + _$ssrAttribute("aria-label", _$escape(label, true), false) + _$ssrAttribute("aria-selected", within(selection(), key) ? "true" : "false", false) + _$ssrAttribute("aria-current", key === todayKey() ? "date" : _$escape(undefined, true), false) + _$ssrAttribute("data-calendar-day-key", _$escape(key, true), false) + _$ssrAttribute("data-outside", !sameMonth() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-month-first", continuous() && key.endsWith("-01") ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-month-top", continuous() && Number(key.slice(8)) <= 7 ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-weekend", column() > 4 ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-past", key < todayKey() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-selected", _$escape(selectionPart(key), true), false) + _$ssrAttribute("data-drop-preview", within(dropRange(), key) ? "true" : _$escape(undefined, true), false), _$ssrAttribute("data-pulse", continuous() && pulseKey() === key ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-today", key === todayKey() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-outside", !sameMonth() ? "true" : _$escape(undefined, true), false), continuous() && key.endsWith("-01") ? _$escape(shortDayLabel(key).replace(/\.$/, "")) : _$escape(calendar.formatDayNumber(day, dateConfig())), _$escape(_$createComponent(Show, {
+          when: dayBadge,
+          children: badge => _$ssr(_tmpl$17, _$escape(_$createComponent(Show, {
+            get when() {
+              return badge().icon;
             },
-            children: (item, index) => _$ssr(_tmpl$27, _$ssrStyleProperty("--k2b-calendar-span:", "1") + _$ssrStyleProperty(";--k2b-calendar-row:", _$escape(String(cell().top + index()), true)), _$escape(_$createComponent(EventChip, {
+            children: icon => _$ssr(_tmpl$2, `k2b-calendar-month__badge-icon ti ti-${_$escape(icon(), true)}`)
+          })), _$escape(badge().label))
+        })), _$escape(_$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 _$ssrElement("div", _$mergeProps({
+              "class": "k2b-calendar-month__segment",
+              get style() {
+                return {
+                  "--k2b-calendar-span": String(span),
+                  "--k2b-calendar-row": String(bar.lane)
+                };
+              },
+              "data-bar": "true",
+              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)), _$escape(_$createComponent(EventChip, {
               get event() {
-                return item.event;
+                return bar.item.event;
               },
               get owner() {
                 return props.owner;
               },
               get href() {
-                return eventHref(props.owner, item.event);
+                return eventHref(props.owner, bar.item.event);
+              },
+              get label() {
+                return itemLabel(bar.item);
               },
               compact: true,
-              get leadingTime() {
-                return leadingTime(item);
+              bar: true,
+              get continuesBefore() {
+                return bar.continuesBefore;
+              },
+              get continuesAfter() {
+                return bar.continuesAfter;
+              },
+              get hintStart() {
+                return startHint();
+              },
+              get hintEnd() {
+                return endHint();
               },
               get moving() {
-                return movingEventId() === item.event.id;
+                return movingEventId() === bar.item.event.id;
               },
               get onMovePointerDown() {
-                return props.owner.onEventDrop ? (pointerEvent, markDragged) => startMove(pointerEvent, item, markDragged) : undefined;
+                return props.owner.onEventDrop ? (pointerEvent, markDragged) => startMove(pointerEvent, bar.item, markDragged) : undefined;
               }
-            })))
-          })), _$escape(_$createComponent(Show, {
-            get when() {
-              return cell().hidden > 0;
+            })), false);
+          }
+        })), _$escape(_$createComponent(For, {
+          get each() {
+            return cell().shown;
+          },
+          children: (item, index) => _$ssr(_tmpl$24, _$ssrStyleProperty("--k2b-calendar-span:", "1") + _$ssrStyleProperty(";--k2b-calendar-row:", _$escape(String(cell().top + index()), true)), _$escape(_$createComponent(EventChip, {
+            get event() {
+              return item.event;
             },
-            get children() {
-              return _$ssr(_tmpl$25, _$ssrStyleProperty("--k2b-calendar-row:", _$escape(String(cell().top + cell().shown.length), true)), _$ssrAttribute("aria-label", _$escape(calendarMessages().calendarMoreEventsOn({
-                count: cell().hidden,
-                label
-              }), true), false), _$ssrAttribute("aria-expanded", (() => {
-                const current = popover();
-                return current?.kind === "day" && _$escape(current.dayKey, true) === _$escape(key, true);
-              })(), false), _$escape(calendarMessages().calendarMoreEvents({
-                count: cell().hidden
-              })), _$escape(cell().hidden));
+            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;
             }
-          })));
-        }
-      })));
+          })))
+        })), _$escape(_$createComponent(Show, {
+          get when() {
+            return cell().hidden > 0;
+          },
+          get children() {
+            return _$ssr(_tmpl$22, _$ssrStyleProperty("--k2b-calendar-row:", _$escape(String(cell().top + cell().shown.length), true)), _$ssrAttribute("aria-label", _$escape(calendarMessages().calendarMoreEventsOn({
+              count: cell().hidden,
+              label
+            }), true), false), _$ssrAttribute("aria-expanded", (() => {
+              const current = popover();
+              return current?.kind === "day" && _$escape(current.dayKey, true) === _$escape(key, true);
+            })(), false), _$escape(calendarMessages().calendarMoreEvents({
+              count: cell().hidden
+            })), _$escape(cell().hidden));
+          }
+        })));
+      }
+    })));
+  };
+  const weekdayRow = () => _$ssr(_tmpl$26, _$ssrAttribute("data-week-numbers", props.owner.withWeekNumbers ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+    get when() {
+      return props.owner.withWeekNumbers;
+    },
+    get children() {
+      return _$ssr(_tmpl$25, _$escape(calendarMessages().weekShort));
     }
+  })), _$escape(_$createComponent(For, {
+    get each() {
+      return weekdays();
+    },
+    children: (day, index) => _$ssr(_tmpl$27, _$ssrAttribute("data-weekend", index() > 4 ? "true" : _$escape(undefined, true), false), _$escape(day))
+  })));
+  const grid = () => _$ssr(_tmpl$28, _$ssrAttribute("aria-label", _$escape(formatMonth(props.date, dateConfig()), true), false), _$ssrStyleProperty("grid-template-rows:", `auto repeat(${_$escape(weeks().length, true)}, minmax(5rem, 1fr))`) + _$ssrStyleProperty(";--k2b-calendar-lane:", "1.25rem") + _$ssrStyleProperty(";--k2b-calendar-lane-gap:", "0.125rem"), _$escape(weekdayRow()), _$escape(_$createComponent(For, {
+    get each() {
+      return weeks();
+    },
+    children: (week, index) => weekRow(() => week, index)
   })));
+  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 = () => _$ssr(_tmpl$29, _$ssrAttribute("aria-label", _$escape(formatMonth(parseKey(focusMonthKey()), dateConfig()), true), false), _$ssrAttribute("aria-rowcount", _$escape(trackWeeks().length, true) + 1, false), _$ssrStyleProperty("--k2b-calendar-lane:", "1.25rem") + _$ssrStyleProperty(";--k2b-calendar-lane-gap:", "0.125rem"), _$escape(weekdayRow()), _$ssrStyleProperty("--k2b-calendar-weeks:", _$escape(String(trackWeeks().length), true)), _$escape(_$createComponent(For, {
+    get each() {
+      return renderedWeeks();
+    },
+    children: continuousRow
+  })), _$ssrAttribute("data-show", labelShown() ? "true" : "false", false), _$escape(formatMonth(parseKey(focusMonthKey()), dateConfig())));
   const dayList = dayKey => {
     const day = parseKey(dayKey);
     const href = viewHref(dayKey, "day");
     // Read where it renders, so a refresh while the list is open updates it as it does the grid.
     const entries = () => dayEntries(dayKey);
-    return _$ssr(_tmpl$30, _$escape(dayLabel(day)), _$escape(_$createComponent(Show, {
+    return _$ssr(_tmpl$32, _$escape(dayLabel(day)), _$escape(_$createComponent(Show, {
       get when() {
         return entries().length > 0;
       },
       get fallback() {
-        return _$ssr(_tmpl$31, _$escape(calendarMessages().calendarNothingPlanned));
+        return _$ssr(_tmpl$33, _$escape(calendarMessages().calendarNothingPlanned));
       },
       get children() {
-        return _$ssr(_tmpl$28, _$escape(_$createComponent(For, {
+        return _$ssr(_tmpl$30, _$escape(_$createComponent(For, {
           get each() {
             return entries();
           },
-          children: item => _$ssr(_tmpl$32, _$escape(_$createComponent(EventChip, {
+          children: item => _$ssr(_tmpl$34, _$escape(_$createComponent(EventChip, {
             get event() {
               return item.event;
             },
@@ -1835,7 +2383,7 @@ const MonthView = props => {
               size: "sm",
               onClick: () => openView(dayKey, "day"),
               get children() {
-                return [_$ssr(_tmpl$33), calendarMessages().calendarOpenDay];
+                return [_$ssr(_tmpl$35), calendarMessages().calendarOpenDay];
               }
             });
           }
@@ -1854,7 +2402,7 @@ const MonthView = props => {
           "data-size": "sm"
         },
         get children() {
-          return [_$ssr(_tmpl$33), calendarMessages().calendarOpenDay];
+          return [_$ssr(_tmpl$35), calendarMessages().calendarOpenDay];
         }
       })
     })), _$escape(_$createComponent(Show, {
@@ -1876,18 +2424,19 @@ const MonthView = props => {
             });
           },
           get children() {
-            return [_$ssr(_tmpl$29), calendarMessages().calendarNewEvent];
+            return [_$ssr(_tmpl$31), calendarMessages().calendarNewEvent];
           }
         });
       }
     })));
   };
+  const viewGrid = () => continuous() ? continuousGrid() : grid();
   return [_$createComponent(Show, {
     get when() {
       return hasMenu();
     },
     get fallback() {
-      return grid();
+      return viewGrid();
     },
     get children() {
       return _$createComponent(GestureMenu, {
@@ -1901,11 +2450,11 @@ const MonthView = props => {
         onOpen: onMenuOpen,
         "class": "k2b-calendar-month-menu",
         get children() {
-          return grid();
+          return viewGrid();
         }
       });
     }
-  }), _$ssr(_tmpl$34, _$ssrAttribute("aria-label", (() => {
+  }), _$ssr(_tmpl$36, _$ssrAttribute("aria-label", (() => {
     const current = popover();
     if (current?.kind === "day") return dayLabel(parseKey(current.dayKey));
     return _$escape(calendarMessages().calendarQuickCreate, true);
@@ -1917,7 +2466,7 @@ 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)
   })))];
@@ -1938,6 +2487,8 @@ const TimeGridView = props => {
   let scrollContainer;
   let timeGrid;
   let timeGutter;
+  let daysRow;
+  let allDayRow;
   let defaultHourMarker;
   let cancelInteraction;
   let suppressSlotClickUntil = 0;
@@ -1968,7 +2519,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());
@@ -2094,12 +2648,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()) {
@@ -2135,7 +2705,7 @@ const TimeGridView = props => {
       });
     });
   });
-  return _$ssr(_tmpl$36, _$ssrAttribute("data-view", isDayView() ? "day" : "week", false), _$ssrStyleProperty("grid-template-columns:", `4rem repeat(${_$escape(props.days.length, true)}, minmax(0, 1fr))`), _$escape(_$createComponent(For, {
+  return _$ssr(_tmpl$38, _$ssrAttribute("data-view", isDayView() ? "day" : "week", false), _$ssrStyleProperty("grid-template-columns:", _$escape(columnTemplate(), true)), _$escape(_$createComponent(For, {
     get each() {
       return props.days;
     },
@@ -2153,9 +2723,9 @@ const TimeGridView = props => {
           class: "k2b-calendar-time-grid__day"
         },
         get children() {
-          return [_$ssr(_tmpl$37, _$ssrAttribute("data-today", today() ? "true" : _$escape(undefined, true), false), _$escape(formatDay(day, dateConfig()))), _$createComponent(Show, {
+          return [_$ssr(_tmpl$39, _$ssrAttribute("data-today", today() ? "true" : _$escape(undefined, true), false), _$escape(formatDay(day, dateConfig()))), _$createComponent(Show, {
             when: dayBadge,
-            children: badge => _$ssr(_tmpl$38, _$escape(_$createComponent(Show, {
+            children: badge => _$ssr(_tmpl$40, _$escape(_$createComponent(Show, {
               get when() {
                 return badge().icon;
               },
@@ -2170,7 +2740,7 @@ const TimeGridView = props => {
       return !props.owner.hideAllDay;
     },
     get children() {
-      return _$ssr(_tmpl$35, _$ssrStyleProperty("grid-template-columns:", `4rem repeat(${_$escape(props.days.length, true)}, minmax(0, 1fr))`) + _$ssrStyleProperty(";max-height:", `${_$escape(props.owner.allDayMaxHeightRem ?? 7, true)}rem`), _$escape(props.labels.allDay), _$escape(_$createComponent(For, {
+      return _$ssr(_tmpl$37, _$ssrStyleProperty("grid-template-columns:", _$escape(columnTemplate(), true)) + _$ssrStyleProperty(";max-height:", `${_$escape(props.owner.allDayMaxHeightRem ?? 7, true)}rem`), _$escape(props.labels.allDay), _$escape(_$createComponent(For, {
         get each() {
           return props.days;
         },
@@ -2194,7 +2764,7 @@ const TimeGridView = props => {
               end: calendar.addDays(start, 1, dateConfig()),
               allDay: true
             };
-          }, () => performance.now() < suppressSlotClickUntil)), _$ssr(_tmpl$39, _$escape(_$createComponent(For, {
+          }, () => performance.now() < suppressSlotClickUntil)), _$ssr(_tmpl$41, _$escape(_$createComponent(For, {
             each: previewAllDay,
             children: event => _$ssr(_tmpl$14, _$escape(event.title))
           })), _$escape(_$createComponent(For, {
@@ -2221,11 +2791,11 @@ const TimeGridView = props => {
         }
       })));
     }
-  })), _$ssrStyleProperty("grid-template-columns:", `4rem repeat(${_$escape(props.days.length, true)}, minmax(0, 1fr))`), _$ssrStyleProperty("grid-template-rows:", `repeat(${_$escape(hours().length, true)}, minmax(4rem, 1fr))`), _$escape(_$createComponent(For, {
+  })), _$ssrStyleProperty("grid-template-columns:", _$escape(columnTemplate(), true)), _$ssrStyleProperty("grid-template-rows:", `repeat(${_$escape(hours().length, true)}, minmax(4rem, 1fr))`), _$escape(_$createComponent(For, {
     get each() {
       return hours();
     },
-    children: hour => _$ssr(_tmpl$40, _$ssrAttribute("data-outside-business", hour < businessStartHour() || hour > businessEndHour() ? "true" : _$escape(undefined, true), false), _$escape(`${hour}`.padStart(2, "0")))
+    children: hour => _$ssr(_tmpl$42, _$ssrAttribute("data-outside-business", hour < businessStartHour() || hour > businessEndHour() ? "true" : _$escape(undefined, true), false), _$escape(`${hour}`.padStart(2, "0")))
   })), _$escape(_$createComponent(For, {
     get each() {
       return props.days;
@@ -2233,12 +2803,12 @@ const TimeGridView = props => {
     children: day => {
       const dayKey = calendar.formatDateKey(day, dateConfig());
       const layouts = createMemo(() => timedEventLayouts(eventsByDay().get(dayKey)?.timed ?? []));
-      return _$ssr(_tmpl$42, _$ssrStyleProperty("min-width:", _$escape(dayColumnMinWidth(layouts()), true)) + _$ssrStyleProperty(";grid-template-rows:", `repeat(${_$escape(hours().length, true)}, minmax(4rem, 1fr))`), _$escape(_$createComponent(Show, {
+      return _$ssr(_tmpl$44, _$ssrStyleProperty("grid-template-rows:", `repeat(${_$escape(hours().length, true)}, minmax(4rem, 1fr))`), _$escape(_$createComponent(Show, {
         get when() {
           return currentTimeLine(day) !== null;
         },
         get children() {
-          return _$ssr(_tmpl$41, _$ssrStyleProperty("top:", `${_$escape(currentTimeLine(day) ?? 0, true)}%`));
+          return _$ssr(_tmpl$43, _$ssrStyleProperty("top:", `${_$escape(currentTimeLine(day) ?? 0, true)}%`));
         }
       })), _$escape(_$createComponent(For, {
         get each() {
@@ -2267,12 +2837,12 @@ const TimeGridView = props => {
         children: event => {
           const layout = eventLayout(event);
           const short = event.endDate.getTime() - event.startDate.getTime() < 60 * 60_000;
-          return _$ssr(_tmpl$44, _$ssrAttribute("data-short", short ? "true" : _$escape(undefined, true), false), _$ssrStyleProperty("top:", `${_$escape(layout.top, true)}%`) + _$ssrStyleProperty(";height:", `${_$escape(layout.height, true)}%`), _$escape(_$createComponent(Show, {
+          return _$ssr(_tmpl$46, _$ssrAttribute("data-short", short ? "true" : _$escape(undefined, true), false), _$ssrStyleProperty("top:", `${_$escape(layout.top, true)}%`) + _$ssrStyleProperty(";height:", `${_$escape(layout.height, true)}%`), _$escape(_$createComponent(Show, {
             get when() {
               return event.title;
             },
             get children() {
-              return _$ssr(_tmpl$43, _$escape(event.title));
+              return _$ssr(_tmpl$45, _$escape(event.title));
             }
           })), _$escape(formatTime(event.startDate, dateConfig())), _$escape(formatTime(event.endDate, dateConfig())));
         }
@@ -2318,7 +2888,7 @@ const TimeGridView = props => {
               onCancel: clearInteraction
             });
           };
-          return _$ssr(_tmpl$46, _$ssrStyleProperty("top:", `${_$escape(layout.top, true)}%`) + _$ssrStyleProperty(";height:", `${_$escape(layout.height, true)}%`) + _$ssrStyleProperty(";left:", _$escape(position.left, true)) + _$ssrStyleProperty(";width:", _$escape(position.width, true)) + _$ssrStyleProperty(";z-index:", _$escape(String(20 + layoutItem.lane), true)), _$escape(_$createComponent(EventChip, {
+          return _$ssr(_tmpl$48, _$ssrStyleProperty("top:", `${_$escape(layout.top, true)}%`) + _$ssrStyleProperty(";height:", `${_$escape(layout.height, true)}%`) + _$ssrStyleProperty(";left:", _$escape(position.left, true)) + _$ssrStyleProperty(";width:", _$escape(position.width, true)) + _$ssrStyleProperty(";z-index:", _$escape(String(20 + layoutItem.lane), true)), _$escape(_$createComponent(EventChip, {
             event: event,
             get owner() {
               return props.owner;
@@ -2338,7 +2908,7 @@ const TimeGridView = props => {
               return props.owner.onEventResize;
             },
             get children() {
-              return _$ssr(_tmpl$45, _$ssrAttribute("aria-label", _$escape(calendarMessages().resizeEvent, true), false));
+              return _$ssr(_tmpl$47, _$ssrAttribute("aria-label", _$escape(calendarMessages().resizeEvent, true), false));
             }
           })));
         }
@@ -2350,14 +2920,14 @@ const TimeGridView = props => {
           const layout = timeRangeLayout(overflow.groupStartDate, overflow.groupEndDate);
           const key = `${dayKey}-${overflow.groupId}`;
           const hiddenTitle = () => overflow.hiddenEvents.map(event => `${formatTime(event.startDate, dateConfig())} ${event.title}`).join("\n");
-          return [_$ssr(_tmpl$47, _$ssrStyleProperty("top:", `${_$escape(layout.top, true)}%`) + _$ssrStyleProperty(";height:", `${_$escape(layout.height, true)}%`), _$ssrAttribute("title", _$escape(hiddenTitle(), true), false) + _$ssrAttribute("aria-label", _$escape(calendarMessages().hiddenOverlappingEvents({
+          return [_$ssr(_tmpl$49, _$ssrStyleProperty("top:", `${_$escape(layout.top, true)}%`) + _$ssrStyleProperty(";height:", `${_$escape(layout.height, true)}%`), _$ssrAttribute("title", _$escape(hiddenTitle(), true), false) + _$ssrAttribute("aria-label", _$escape(calendarMessages().hiddenOverlappingEvents({
             count: overflow.hiddenEvents.length
           }), true), false), _$escape(overflow.hiddenEvents.length)), _$createComponent(Show, {
             get when() {
               return expandedOverflow() === key;
             },
             get children() {
-              return _$ssr(_tmpl$48, _$ssrStyleProperty("top:", `${_$escape(layout.top, true)}%`), _$escape(formatTime(overflow.groupStartDate, dateConfig())), _$escape(formatTime(overflow.groupEndDate, dateConfig())), _$escape(_$createComponent(For, {
+              return _$ssr(_tmpl$50, _$ssrStyleProperty("top:", `${_$escape(layout.top, true)}%`), _$escape(formatTime(overflow.groupStartDate, dateConfig())), _$escape(formatTime(overflow.groupEndDate, dateConfig())), _$escape(_$createComponent(For, {
                 get each() {
                   return overflow.hiddenEvents;
                 },
@@ -2416,11 +2986,11 @@ const YearView = props => {
       };
     });
   });
-  return _$ssr(_tmpl$49, _$escape(_$createComponent(For, {
+  return _$ssr(_tmpl$51, _$escape(_$createComponent(For, {
     get each() {
       return months();
     },
-    children: month => _$ssr(_tmpl$50, _$escape(month.label), _$escape(_$createComponent(For, {
+    children: month => _$ssr(_tmpl$52, _$escape(month.label), _$escape(_$createComponent(For, {
       get each() {
         return month.days;
       },
@@ -2443,7 +3013,7 @@ const YearView = props => {
             get when() {
               return day.events[0];
             },
-            children: event => _$ssr(_tmpl$51, _$ssrAttribute("data-color", event().colorHex ? _$escape(undefined, true) : _$escape(event().color ?? "blue", true), false) + _$ssrAttribute("data-today", day.isToday ? "true" : _$escape(undefined, true), false), _$ssrStyle(event().colorHex ? {
+            children: event => _$ssr(_tmpl$53, _$ssrAttribute("data-color", event().colorHex ? _$escape(undefined, true) : _$escape(event().color ?? "blue", true), false) + _$ssrAttribute("data-today", day.isToday ? "true" : _$escape(undefined, true), false), _$ssrStyle(event().colorHex ? {
               "background-color": day.isToday ? "white" : event().colorHex
             } : undefined))
           })];
@@ -2456,7 +3026,7 @@ const MobileMonthView = props => {
   const dateConfig = createMemo(() => ownerDateConfig(props.owner));
   const selectedDateKey = createMemo(() => calendar.formatDateKey(props.selectedDate, dateConfig()));
   const selectedEvents = createMemo(() => props.events.filter(event => event.dayKey === selectedDateKey()));
-  return _$ssr(_tmpl$53, _$escape(_$createComponent(MonthPickerView, {
+  return _$ssr(_tmpl$55, _$escape(_$createComponent(MonthPickerView, {
     get owner() {
       return {
         ...props.owner,
@@ -2486,10 +3056,10 @@ const MobileMonthView = props => {
       return selectedEvents().length > 0;
     },
     get fallback() {
-      return _$ssr(_tmpl$54, _$escape(props.labels.noEvents));
+      return _$ssr(_tmpl$56, _$escape(props.labels.noEvents));
     },
     get children() {
-      return _$ssr(_tmpl$52, _$escape(_$createComponent(For, {
+      return _$ssr(_tmpl$54, _$escape(_$createComponent(For, {
         get each() {
           return selectedEvents();
         },
@@ -2506,7 +3076,7 @@ const MobileMonthView = props => {
     }
   })));
 };
-const CalendarBody = props => _$ssr(_tmpl$55, _$escape(props.children));
+const CalendarBody = props => _$ssr(_tmpl$57, _$escape(props.children));
 const CalendarRoot = props => {
   const messages = useUiMessages();
   const calendarMessages = useCalendarMessages();
@@ -2560,24 +3130,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 => {
@@ -2590,7 +3162,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({
@@ -2685,6 +3257,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() ? {} : {
@@ -2730,7 +3303,7 @@ const CalendarRoot = props => {
     },
     register: setTimeView
   });
-  return _$ssr(_tmpl$56, `k2b-content-calendar ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("aria-busy", props.navigationPending ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(CalendarHeader, {
+  return _$ssr(_tmpl$58, `k2b-content-calendar ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("aria-busy", props.navigationPending ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(CalendarHeader, {
     get date() {
       return date();
     },
@@ -2742,7 +3315,7 @@ 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
   })), _$escape(_$createComponent(Show, {
@@ -2779,6 +3352,7 @@ const CalendarRoot = props => {
                   return mergedLabels();
                 },
                 onFocusDay: setFocusDay,
+                goToDate: date => go(date, view()),
                 register: setMonthCreate
               });
             }