@k2b/ui 0.22.0 → 0.24.0

package/dist/ssr/content/Calendar.js

@@ -1,77 +1,70 @@
+import { ssrStyle as _$ssrStyle } from "solid-js/web";
 import { ssrStyleProperty as _$ssrStyleProperty } from "solid-js/web";
 import { memo as _$memo } from "solid-js/web";
-import { ssrElement as _$ssrElement } from "solid-js/web";
-import { mergeProps as _$mergeProps } from "solid-js/web";
-import { ssrStyle as _$ssrStyle } from "solid-js/web";
+import { ssr as _$ssr } from "solid-js/web";
 import { ssrAttribute as _$ssrAttribute } from "solid-js/web";
 import { createComponent as _$createComponent } from "solid-js/web";
-import { ssr as _$ssr } from "solid-js/web";
+import { ssrElement as _$ssrElement } from "solid-js/web";
+import { mergeProps as _$mergeProps } from "solid-js/web";
 import { escape as _$escape } from "solid-js/web";
-var _tmpl$ = ["<span class=\"k2b-calendar-event__time\">", "</span>"],
-  _tmpl$2 = "<span class=\"k2b-calendar-event__marker\" aria-hidden=\"true\"></span>",
-  _tmpl$3 = ["<span class=\"k2b-calendar-event__title\">", "", "</span>"],
-  _tmpl$4 = ["<span class=\"k2b-calendar-event__meta\">", "</span>"],
-  _tmpl$5 = ["<span class=\"k2b-calendar-event__description\">", "</span>"],
-  _tmpl$6 = ["<span class=\"k2b-calendar-event__hint\" data-edge=\"start\" aria-hidden=\"true\">", "</span>"],
-  _tmpl$7 = ["<span class=\"k2b-calendar-event__hint\" data-edge=\"end\" aria-hidden=\"true\">", "</span>"],
-  _tmpl$8 = ["<a", " class=\"k2b-calendar-event\" data-calendar-event", " style=\"", "\"", ">", "</a>"],
-  _tmpl$9 = ["<button type=\"button\" class=\"k2b-calendar-event\" data-calendar-event", " data-interactive=\"true\"", " style=\"", "\"", ">", "</button>"],
-  _tmpl$0 = ["<div class=\"k2b-calendar-event\" role=\"group\" data-calendar-event", " style=\"", "\"", ">", "</div>"],
-  _tmpl$1 = ["<div role=\"radiogroup\"", " aria-orientation=\"horizontal\" class=\"k2b-segmented-control k2b-calendar-view-switcher\">", "</div>"],
-  _tmpl$10 = ["<i class=\"", "\"></i>"],
-  _tmpl$11 = ["<button type=\"button\"", " class=\"k2b-calendar-header__nav-button\"><i class=\"", "\"></i></button>"],
-  _tmpl$12 = ["<span class=\"k2b-button__label\">", "</span>"],
-  _tmpl$13 = ["<div class=\"k2b-calendar-header__content\">", "</div>"],
-  _tmpl$14 = "<span class=\"k2b-calendar-header__progress\" aria-hidden=\"true\"></span>",
-  _tmpl$15 = ["<header class=\"k2b-calendar-header\"><div class=\"k2b-calendar-header__navigation\">", "", "<div class=\"k2b-calendar-header__title\"><span>", "</span>", "</div></div>", "<div class=\"k2b-calendar-header__actions\">", "", "", "</div>", "</header>"],
-  _tmpl$16 = ["<span class=\"k2b-calendar-header__title-size\" aria-hidden=\"true\">", "</span>"],
-  _tmpl$17 = ["<div class=\"k2b-calendar-month__weekday\">", "</div>"],
-  _tmpl$18 = ["<div class=\"k2b-calendar-month\" style=\"", "\"><div class=\"k2b-calendar-month__weekdays\"", ">", "", "</div>", "</div>"],
-  _tmpl$19 = ["<div class=\"k2b-calendar-month__week-number\">", "</div>"],
-  _tmpl$20 = ["<div class=\"k2b-calendar-month__week\"", ">", "", "</div>"],
-  _tmpl$21 = ["<div class=\"k2b-calendar-preview\">", "</div>"],
-  _tmpl$22 = ["<div class=\"k2b-calendar-month__day\"", ">", "<div class=\"k2b-calendar-month__day-header\">", "", "</div><div class=\"k2b-calendar-month__events\">", "", "", "</div><div class=\"k2b-calendar-month__dots\">", "</div></div>"],
-  _tmpl$23 = ["<span class=\"k2b-calendar-month__day-number\"", ">", "</span>"],
-  _tmpl$24 = ["<span class=\"k2b-calendar-month__badge\">", "", "</span>"],
-  _tmpl$25 = ["<span class=\"k2b-calendar-dot\"", " style=\"", "\"></span>"],
-  _tmpl$26 = ["<div class=\"k2b-calendar-month__weekday\" role=\"columnheader\">", "</div>"],
-  _tmpl$27 = ["<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$28 = ["<div class=\"k2b-calendar-month__weekday\" role=\"columnheader\"", ">", "</div>"],
-  _tmpl$29 = ["<div class=\"k2b-calendar-month__week-number\" role=\"rowheader\">", "</div>"],
-  _tmpl$30 = ["<div class=\"k2b-calendar-month__week\" role=\"row\"", ">", "", "</div>"],
-  _tmpl$31 = ["<button type=\"button\" class=\"k2b-calendar-month__week-link\" tabindex=\"-1\"", ">", "</button>"],
-  _tmpl$32 = ["<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$33 = ["<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$34 = ["<div class=\"k2b-calendar-month__segment\" style=\"", "\">", "</div>"],
-  _tmpl$35 = ["<ul class=\"k2b-calendar-day-list__events\">", "</ul>"],
-  _tmpl$36 = "<i class=\"ti ti-plus\" aria-hidden=\"true\"></i>",
-  _tmpl$37 = ["<div class=\"k2b-calendar-day-list\"><div class=\"k2b-calendar-day-list__title\">", "</div>", "<div class=\"k2b-calendar-day-list__actions\">", "", "</div></div>"],
-  _tmpl$38 = ["<p class=\"k2b-calendar-day-list__empty\">", "</p>"],
-  _tmpl$39 = ["<li>", "</li>"],
-  _tmpl$40 = "<i class=\"ti ti-zoom-in\" aria-hidden=\"true\"></i>",
-  _tmpl$41 = ["<div class=\"k2b-calendar-popover\" popover=\"auto\" role=\"dialog\"", ">", "</div>"],
-  _tmpl$42 = ["<div class=\"k2b-calendar-time-grid__all-day\" style=\"", "\"><div class=\"k2b-calendar-time-grid__all-day-label\">", "</div>", "</div>"],
-  _tmpl$43 = ["<div class=\"k2b-calendar-time-grid\"><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$44 = ["<span class=\"k2b-calendar-time-grid__day-label\"", ">", "</span>"],
-  _tmpl$45 = ["<span class=\"k2b-calendar-time-grid__badge\">", "", "</span>"],
-  _tmpl$46 = ["<div class=\"k2b-calendar-time-grid__all-day-events\">", "", "</div>"],
-  _tmpl$47 = ["<div class=\"k2b-calendar-time-grid__hour\"", ">", ":00</div>"],
-  _tmpl$48 = ["<div class=\"k2b-calendar-time-grid__now\" style=\"", "\"></div>"],
-  _tmpl$49 = ["<div class=\"k2b-calendar-time-grid__column\" style=\"", "\">", "", "", "", "", "</div>"],
-  _tmpl$50 = ["<div class=\"k2b-calendar-preview__title\">", "</div>"],
-  _tmpl$51 = ["<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$52 = ["<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$53 = ["<div class=\"k2b-calendar-time-grid__event-position\" style=\"", "\"><div class=\"k2b-calendar-time-grid__event-frame\">", "", "</div></div>"],
-  _tmpl$54 = ["<button type=\"button\" class=\"k2b-calendar-time-grid__overflow\" style=\"", "\"", "><span class=\"k2b-calendar-time-grid__overflow-count\">+", "</span></button>"],
-  _tmpl$55 = ["<div class=\"k2b-calendar-time-grid__overflow-menu\" style=\"", "\"><div class=\"k2b-calendar-time-grid__overflow-title\">", " - ", "</div>", "</div>"],
-  _tmpl$56 = ["<div class=\"k2b-calendar-year\">", "</div>"],
-  _tmpl$57 = ["<div class=\"k2b-calendar-year__month\"><div class=\"k2b-calendar-year__title\">", "</div><div class=\"k2b-calendar-year__grid\">", "</div></div>"],
-  _tmpl$58 = ["<span class=\"k2b-calendar-year__indicator\"", " style=\"", "\"></span>"],
-  _tmpl$59 = ["<div class=\"k2b-calendar-mobile-month__events\">", "</div>"],
-  _tmpl$60 = ["<div class=\"k2b-calendar-mobile-month\">", "<div class=\"k2b-calendar-mobile-month__agenda\"><div class=\"k2b-calendar-mobile-month__title\">", "</div>", "</div></div>"],
-  _tmpl$61 = ["<div class=\"k2b-calendar-mobile-month__empty\">", "</div>"],
-  _tmpl$62 = ["<div class=\"k2b-calendar-body\">", "</div>"],
-  _tmpl$63 = ["<section class=\"", "\"", ">", "", "</section>"];
+var _tmpl$ = ["<div role=\"radiogroup\"", " aria-orientation=\"horizontal\" class=\"k2b-segmented-control k2b-calendar-view-switcher\">", "</div>"],
+  _tmpl$2 = ["<i class=\"", "\"></i>"],
+  _tmpl$3 = ["<button type=\"button\"", " class=\"k2b-calendar-header__nav-button\"><i class=\"", "\"></i></button>"],
+  _tmpl$4 = "<i class=\"ti ti-arrow-narrow-right k2b-calendar-header__today-direction\" aria-hidden=\"true\"></i>",
+  _tmpl$5 = "<i class=\"ti ti-point k2b-calendar-header__today-direction\" aria-hidden=\"true\"></i>",
+  _tmpl$6 = ["<span class=\"k2b-button__label\">", "</span>"],
+  _tmpl$7 = ["<div class=\"k2b-calendar-header__content\">", "</div>"],
+  _tmpl$8 = ["<button type=\"button\" class=\"k2b-calendar-header__shortcuts\"", "><i class=\"ti ti-keyboard\" aria-hidden=\"true\"></i></button>"],
+  _tmpl$9 = "<span class=\"k2b-calendar-header__progress\" aria-hidden=\"true\"></span>",
+  _tmpl$0 = ["<header class=\"k2b-calendar-header\"><div class=\"k2b-calendar-header__navigation\">", "", "<div class=\"k2b-calendar-header__title\"><span>", "</span>", "</div></div>", "<div class=\"k2b-calendar-header__actions\">", "", "", "", "</div>", "</header>"],
+  _tmpl$1 = ["<span class=\"k2b-calendar-header__title-size\" aria-hidden=\"true\">", "</span>"],
+  _tmpl$10 = ["<div class=\"k2b-calendar-month__weekday\">", "</div>"],
+  _tmpl$11 = ["<div class=\"k2b-calendar-month\" style=\"", "\"><div class=\"k2b-calendar-month__weekdays\"", ">", "", "</div>", "</div>"],
+  _tmpl$12 = ["<div class=\"k2b-calendar-month__week-number\">", "</div>"],
+  _tmpl$13 = ["<div class=\"k2b-calendar-month__week\"", ">", "", "</div>"],
+  _tmpl$14 = ["<div class=\"k2b-calendar-preview\">", "</div>"],
+  _tmpl$15 = ["<div class=\"k2b-calendar-month__day\"", ">", "<div class=\"k2b-calendar-month__day-header\">", "", "</div><div class=\"k2b-calendar-month__events\">", "", "", "</div><div class=\"k2b-calendar-month__dots\">", "</div></div>"],
+  _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\"", "><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$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>"];
 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";
@@ -80,31 +73,29 @@ import { GestureMenu } from "../actions/GestureMenu";
 import SegmentedControl from "../actions/SegmentedControl";
 import { useDateConfigLocale } from "../intl/locale";
 import { useUiMessages } from "../intl/messages";
+import { CalendarDayView } from "./CalendarDayView";
+import { CalendarWeekView } from "./CalendarWeekView";
+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 { 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";
 
-/** A view the application adds to the switcher; the calendar shows its header and toolbar, the application the body. */
+/** The days a host loaded events for, from the first day `from` up to `to`, both `YYYY-MM-DD` or dates. */
 
-/** What the built-in views read from the props: they only ever link to built-in views. */
+/**
+ * An action the calendar offers for keyboard shortcuts, the command palette, and its shortcuts dialog. The calendar
+ * publishes its own through `onCommandsChange`; the host registers them with its shortcut dispatcher.
+ */
+
+/** An entry dragged into the day or week view from outside the calendar, such as a task from a list below it. */
+
+/** Actions of the calendar that the host starts from its own controls. */
+
+/** A view the application adds to the switcher; the calendar shows its header and toolbar, the application the body. */
 
-const ownerDateConfig = owner => ({
-  ...owner.dateConfig,
-  timeZone: owner.timeZone ?? owner.dateConfig?.timeZone,
-  firstDayOfWeek: owner.firstDayOfWeek ?? owner.dateConfig?.firstDayOfWeek ?? owner.dateConfig?.weekStartsOn ?? 1
-});
-const dateOnlyPattern = /^\d{4}-\d{2}-\d{2}$/;
-const parseDate = (value, context) => {
-  if (value instanceof Date) return new Date(value);
-  if (dateOnlyPattern.test(value)) return calendar.parseCalendarDate(value, context);
-  const normalized = value.includes("T") ? value : value.replace(" ", "T");
-  const parsed = new Date(normalized);
-  if (!Number.isNaN(parsed.getTime())) return parsed;
-  const [year, month = "1", day = "1"] = value.split("-");
-  return new Date(Number(year), Number(month) - 1, Number(day), 12);
-};
-const validDate = value => !Number.isNaN(value.getTime());
 const weekNumber = date => {
   const target = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
   const day = target.getUTCDay() || 7;
@@ -117,7 +108,6 @@ const zonedWeekNumber = (date, context) => {
   const [year = "1970", month = "1", day = "1"] = calendar.formatDateKey(date, context).split("-");
   return weekNumber(new Date(Date.UTC(Number(year), Number(month) - 1, Number(day))));
 };
-const formatTime = (date, context) => calendar.formatTime(date, context);
 const formatDay = (date, context) => date.toLocaleDateString(context?.locale ?? "en", {
   weekday: "short",
   day: "numeric",
@@ -196,7 +186,6 @@ const normalizeEvents = (events, context) => events.flatMap(event => {
   }
   return days;
 });
-const eventHref = (props, event) => props.getEventHref?.(event) ?? event.href;
 const moveEventTo = (event, target, allDay = false, context) => {
   const duration = Math.max(30 * 60 * 1000, event.sourceEndDate.getTime() - event.sourceStartDate.getTime());
   const start = allDay ? startOfDay(target, context) : new Date(target);
@@ -243,123 +232,6 @@ const timedEventLayouts = events => {
     groupEndDate: new Date(groupEnd)
   }));
 };
-const EventChip = props => {
-  const calendarMessages = useCalendarMessages();
-  const dateConfig = createMemo(() => ownerDateConfig(props.owner));
-  const color = () => props.event.color ?? "blue";
-  const selected = () => Boolean(props.owner.selectedEventId) && props.owner.selectedEventId === props.event.id;
-  const style = () => props.event.colorHex ? {
-    "--k2b-calendar-accent": props.event.colorHex
-  } : undefined;
-  const isInteractive = () => Boolean(props.owner.onEventActivate);
-  const durationHours = () => (props.event.endDate.getTime() - props.event.startDate.getTime()) / 3_600_000;
-  const short = () => Boolean(props.fill && !props.event.allDay && durationHours() < 0.75);
-  const showTime = () => !props.event.allDay && !props.compact && durationHours() >= 0.75;
-  const showLocation = () => Boolean(props.event.location && !props.compact && durationHours() >= 1.25);
-  const showDescription = () => Boolean(props.event.description?.trim() && props.fill && !props.event.allDay && !props.compact && durationHours() >= 1.5);
-  const timeLabel = () => `${formatTime(props.event.startDate, dateConfig())} - ${formatTime(props.event.endDate, dateConfig())}`;
-  const ariaLabel = () => {
-    const label = props.label ? props.label : props.event.allDay ? props.event.title : calendarMessages().calendarEventTime({
-      title: props.event.title,
-      start: formatTime(props.event.startDate, dateConfig()),
-      end: formatTime(props.event.endDate, dateConfig())
-    });
-    return props.event.accessibleDetail ? `${label}, ${props.event.accessibleDetail}` : label;
-  };
-  const renderedEvent = () => props.owner.renderEvent?.(props.event, {
-    compact: props.compact ?? false,
-    fill: props.fill ?? false,
-    start: props.event.startDate,
-    end: props.event.endDate,
-    allDay: props.event.allDay ?? false,
-    durationHours: durationHours(),
-    timeLabel: timeLabel(),
-    leadingTime: props.leadingTime
-  });
-  const defaultContent = [_$createComponent(Show, {
-    get when() {
-      return props.leadingTime;
-    },
-    get children() {
-      return _$ssr(_tmpl$, _$escape(props.leadingTime));
-    }
-  }), _$ssr(_tmpl$3, _$escape(_$createComponent(Show, {
-    get when() {
-      return props.event.display === "marker";
-    },
-    get children() {
-      return _$ssr(_tmpl$2);
-    }
-  })), _$escape(props.event.title)), _$createComponent(Show, {
-    get when() {
-      return showTime();
-    },
-    get children() {
-      return _$ssr(_tmpl$4, _$escape(timeLabel()));
-    }
-  }), _$createComponent(Show, {
-    get when() {
-      return showLocation();
-    },
-    get children() {
-      return _$ssr(_tmpl$4, _$escape(props.event.location));
-    }
-  }), _$createComponent(Show, {
-    get when() {
-      return showDescription();
-    },
-    get children() {
-      return _$ssr(_tmpl$5, _$escape(props.event.description));
-    }
-  })];
-  const content = () => [_$createComponent(Show, {
-    get when() {
-      return props.hintStart;
-    },
-    get children() {
-      return _$ssr(_tmpl$6, _$escape(props.hintStart));
-    }
-  }), renderedEvent() ?? defaultContent, _$createComponent(Show, {
-    get when() {
-      return props.hintEnd;
-    },
-    get children() {
-      return _$ssr(_tmpl$7, _$escape(props.hintEnd));
-    }
-  })];
-  const isActionable = () => isInteractive() || Boolean(props.onMovePointerDown);
-  let suppressClickUntil = 0;
-  const onClick = event => {
-    if (performance.now() < suppressClickUntil) {
-      event.preventDefault();
-      event.stopPropagation();
-      return;
-    }
-    if (!props.owner.onEventActivate || props.owner.eventActivation === "double") return;
-    event.preventDefault();
-    event.stopPropagation();
-    props.owner.onEventActivate(props.event);
-  };
-  const onDoubleClick = event => {
-    if (!props.owner.onEventActivate || props.owner.eventActivation !== "double") return;
-    event.preventDefault();
-    event.stopPropagation();
-    props.owner.onEventActivate(props.event);
-  };
-  const onButtonKeyDown = event => {
-    if (!isInteractive() || event.key !== "Enter" && event.key !== " ") return;
-    event.preventDefault();
-    props.owner.onEventActivate?.(props.event);
-  };
-  const onPointerDown = event => {
-    if (event.pointerType === "touch") return;
-    if (props.onMovePointerDown) event.stopPropagation();
-    props.onMovePointerDown?.(event, () => {
-      suppressClickUntil = performance.now() + 400;
-    });
-  };
-  return props.href ? _$ssr(_tmpl$8, _$ssrAttribute("href", _$escape(props.href, true), false), _$ssrAttribute("data-color", props.event.colorHex ? _$escape(undefined, true) : _$escape(color(), true), false) + _$ssrAttribute("data-selected", selected() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-compact", props.compact ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-fill", props.fill ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-short", short() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-moving", props.moving ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-continues-before", props.continuesBefore ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-continues-after", props.continuesAfter ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-bar", props.bar ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-interactive", isInteractive() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-display", _$escape(props.event.display, true), false) + _$ssrAttribute("data-space-item-id", _$escape(props.event.dataSpaceItemId, true), false), _$ssrStyle(style()), _$ssrAttribute("draggable", props.onMovePointerDown ? _$escape(false, true) : _$escape(undefined, true), false) + _$ssrAttribute("aria-label", _$escape(ariaLabel(), true), false), _$escape(content())) : isActionable() ? _$ssr(_tmpl$9, _$ssrAttribute("data-color", props.event.colorHex ? _$escape(undefined, true) : _$escape(color(), true), false) + _$ssrAttribute("data-selected", selected() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-compact", props.compact ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-fill", props.fill ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-short", short() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-moving", props.moving ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-continues-before", props.continuesBefore ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-continues-after", props.continuesAfter ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-bar", props.bar ? "true" : _$escape(undefined, true), false), _$ssrAttribute("data-display", _$escape(props.event.display, true), false), _$ssrStyle(style()), _$ssrAttribute("aria-label", _$escape(ariaLabel(), true), false), _$escape(content())) : _$ssr(_tmpl$0, _$ssrAttribute("data-color", props.event.colorHex ? _$escape(undefined, true) : _$escape(color(), true), false) + _$ssrAttribute("data-selected", selected() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-compact", props.compact ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-fill", props.fill ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-short", short() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-moving", props.moving ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-continues-before", props.continuesBefore ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-continues-after", props.continuesAfter ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-bar", props.bar ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-interactive", _$escape(undefined, true), false) + _$ssrAttribute("data-display", _$escape(props.event.display, true), false), _$ssrStyle(style()), _$ssrAttribute("aria-label", _$escape(ariaLabel(), true), false), _$escape(content()));
-};
 const slotInteractionProps = (owner, slot, suppressed, nativeControl = false) => {
   const isSlotChild = event => {
     if (!(event.target instanceof Element)) return false;
@@ -388,12 +260,20 @@ const slotInteractionProps = (owner, slot, suppressed, nativeControl = false) =>
     }
   };
 };
+const plainClick = event => !event.defaultPrevented && event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey;
+
 /** A real anchor is the baseline; the optional handler only enhances it after hydration. */
 const CalendarNavigationLink = props => {
   const preload = () => props.owner.onPrefetch?.(props.href);
+  const intercepted = event => {
+    if (!props.intercept || !plainClick(event) || !props.intercept()) return false;
+    event.preventDefault();
+    return true;
+  };
   const navigateHref = event => {
+    if (intercepted(event)) return;
     const anchor = event.currentTarget;
-    if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || anchor.target && anchor.target !== "_self" || anchor.hasAttribute("download") || new URL(anchor.href).origin !== window.location.origin) {
+    if (!plainClick(event) || anchor.target && anchor.target !== "_self" || anchor.hasAttribute("download") || new URL(anchor.href).origin !== window.location.origin) {
       return;
     }
     event.preventDefault();
@@ -411,6 +291,7 @@ const CalendarNavigationLink = props => {
     get onNavigate() {
       return props.owner.onNavigate;
     },
+    onClick: event => void intercepted(event),
     onPointerEnter: preload,
     onFocus: preload,
     get children() {
@@ -441,7 +322,7 @@ const CalendarViewLinks = props => {
       refs[event.key === "Home" ? 0 : props.options.length - 1]?.click();
     }
   };
-  return _$ssr(_tmpl$1, _$ssrAttribute("aria-label", _$escape(calendarMessages().calendarView, true), false), _$escape(_$createComponent(For, {
+  return _$ssr(_tmpl$, _$ssrAttribute("aria-label", _$escape(calendarMessages().calendarView, true), false), _$escape(_$createComponent(For, {
     get each() {
       return props.options;
     },
@@ -502,12 +383,62 @@ const openViewAt = (owner, date, view) => {
   owner.onViewChange?.(view);
   owner.onDateChange?.(date, view);
 };
+
+/** What the header reads from the active view beyond the props: the days a day or week view shows, and its moves. */
+
+const dayTitleOptions = {
+  weekday: "short",
+  day: "numeric",
+  month: "short",
+  year: "numeric"
+};
+const weekTitleOptions = {
+  day: "numeric",
+  month: "short",
+  year: "numeric"
+};
+
+/** Where today lies from the shown day or week before its view measured: the arrow of the Today button, or nothing. */
+const todayDirectionOf = (view, date, context) => {
+  const today = calendar.formatDateKey(new Date(), context);
+  if (view === "week") {
+    const start = calendar.formatDateKey(calendar.startOfWeek(date, context), context);
+    const end = calendar.formatDateKey(calendar.addDays(calendar.startOfWeek(date, context), 6, context), context);
+    return today < start ? "left" : today > end ? "right" : "";
+  }
+  const shown = calendar.formatDateKey(date, context);
+  return today < shown ? "up" : today > shown ? "down" : "";
+};
 const CalendarHeader = props => {
   const calendarMessages = useCalendarMessages();
   const dateConfig = () => ownerDateConfig(props.owner);
-  const previous = () => adjacentCalendarDate(props.date, props.view, -1, dateConfig());
-  const next = () => adjacentCalendarDate(props.date, props.view, 1, dateConfig());
+  const timeView = () => props.nav.timeView();
+  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;
+  };
+  const previous = () => adjacentCalendarDate(base(), props.view, -1, dateConfig());
+  const next = () => adjacentCalendarDate(base(), props.view, 1, dateConfig());
+  /** The day view's title, such as "Fri, Oct 9, 2026" or "Fr, 9. Okt 2026". */
+  const formatDayTitle = date => compactGermanDate(new Intl.DateTimeFormat(dateConfig().locale ?? "en", {
+    ...dayTitleOptions,
+    timeZone: dateConfig().timeZone
+  }).format(date), dateConfig().locale, true);
+  const formatRange = (from, to) => compactGermanDate(new Intl.DateTimeFormat(dateConfig().locale ?? "en", {
+    ...weekTitleOptions,
+    timeZone: dateConfig().timeZone
+  }).formatRange(from, to), dateConfig().locale);
+  /** The day and week views with `dayHours` name the days they show, also on the server before they measured. */
+  const timeMode = () => Boolean(props.owner.dayHours) && (props.view === "day" || props.view === "week");
   const title = () => {
+    const shown = timeView()?.visibleKeys();
+    if (timeMode() && props.view === "day") return formatDayTitle(shown ? parseKey(shown.first) : props.date);
+    if (timeMode()) {
+      const start = shown ? parseKey(shown.first) : calendar.startOfWeek(props.date, dateConfig());
+      return formatRange(start, shown ? parseKey(shown.last) : calendar.addDays(start, 6, dateConfig()));
+    }
     if (props.view === "year") return new Intl.DateTimeFormat(dateConfig().locale ?? "en", {
       year: "numeric",
       timeZone: dateConfig().timeZone
@@ -523,8 +454,8 @@ const CalendarHeader = props => {
     return formatMonth(props.date, dateConfig());
   };
   /**
-   * The titles this view can show around the current date: the months of the year, the weeks of the month, or a day
-   * of each weekday in every month. Their widest one sets the title's width.
+   * The titles this view can show around the current date: the months of the year, the weeks of the month and across
+   * each month boundary, or a day of each weekday in every month. Their widest one sets the title's width.
    */
   const titleWidths = createMemo(() => {
     const context = dateConfig();
@@ -537,12 +468,22 @@ const CalendarHeader = props => {
     }, (_, month) => formatMonth(zonedMonthDate(year, month, context), context));
     if (props.view === "week") {
       const first = calendar.startOfWeek(calendar.startOfMonth(props.date, context), context);
-      return Array.from({
+      const weeks = Array.from({
         length: 6
       }, (_, week) => {
         const start = calendar.addDays(first, week * 7, context);
+        if (timeMode()) return formatRange(start, calendar.addDays(start, 6, context));
         return `${formatDay(start, context)} - ${formatDay(calendar.addDays(start, 6, context), context)}`;
       });
+      if (timeMode()) {
+        return [...weeks, ...Array.from({
+          length: 12
+        }, (_, month) => {
+          const day28 = calendar.addDays(zonedMonthDate(year, month, context), 27, context);
+          return formatRange(day28, calendar.addDays(day28, 6, context));
+        })];
+      }
+      return weeks;
     }
     return Array.from({
       length: 12
@@ -550,7 +491,7 @@ const CalendarHeader = props => {
       const first = zonedMonthDate(year, month, context);
       return Array.from({
         length: 7
-      }, (_, offset) => calendar.addDays(first, 21 + offset, context).toLocaleDateString(context.locale ?? "en", {
+      }, (_, offset) => timeMode() ? formatDayTitle(calendar.addDays(first, 21 + offset, context)) : calendar.addDays(first, 21 + offset, context).toLocaleDateString(context.locale ?? "en", {
         weekday: "long",
         month: "long",
         day: "numeric",
@@ -574,49 +515,82 @@ const CalendarHeader = props => {
     const href = props.owner.getViewHref?.(view);
     if (href) window.location.href = href;
   };
-  const navButton = (date, icon, label) => {
+  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, {
       get owner() {
         return props.owner;
       },
       href: href,
+      intercept: step,
       anchorProps: {
         "aria-label": label,
-        title: label,
+        title,
         class: "k2b-calendar-header__nav-button"
       },
       get children() {
-        return _$ssr(_tmpl$10, `ti ${_$escape(icon, true)}`);
+        return _$ssr(_tmpl$2, `ti ${_$escape(icon, true)}`);
       }
-    }) : props.owner.onDateChange ? _$ssr(_tmpl$11, _$ssrAttribute("aria-label", _$escape(label, true), false), `ti ${_$escape(icon, true)}`) : _$createComponent(CalendarNavigationLink, {
+    }) : 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;
       },
       href: href ?? "#",
+      intercept: step,
       anchorProps: {
         "aria-label": label,
-        title: label,
+        title,
         class: "k2b-calendar-header__nav-button"
       },
       get children() {
-        return _$ssr(_tmpl$10, `ti ${_$escape(icon, true)}`);
+        return _$ssr(_tmpl$2, `ti ${_$escape(icon, true)}`);
       }
     });
   };
+  /**
+   * 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;
+  /** One arrow that the stylesheet turns toward today, or the dot while today shows. */
+  const todayIcon = () => _$createComponent(Show, {
+    get when() {
+      return direction();
+    },
+    children: current => _$createComponent(Show, {
+      get when() {
+        return current() !== "here";
+      },
+      get fallback() {
+        return _$ssr(_tmpl$5);
+      },
+      get children() {
+        return _$ssr(_tmpl$4);
+      }
+    })
+  });
   const todayButton = () => {
     const today = calendar.today(dateConfig());
     const href = props.owner.getDateHref?.(today, props.view);
-    const label = _$ssr(_tmpl$12, _$escape(props.labels.today));
+    const intercept = () => timeView()?.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, {
       get owner() {
         return props.owner;
       },
       href: href,
-      anchorProps: {
-        class: "k2b-button k2b-calendar-header__today",
-        "data-size": "sm",
-        "data-variant": "input"
+      intercept: intercept,
+      get anchorProps() {
+        return {
+          class: "k2b-button k2b-calendar-header__today",
+          "data-size": "sm",
+          "data-variant": "input",
+          "data-direction": direction(),
+          title: title()
+        };
       },
       children: label
     }) : props.owner.onDateChange ? _$createComponent(Button, {
@@ -624,19 +598,32 @@ const CalendarHeader = props => {
       variant: "input",
       size: "sm",
       "class": "k2b-calendar-header__today",
-      onClick: () => goDate(today),
+      get ["data-direction"]() {
+        return direction();
+      },
+      get title() {
+        return title();
+      },
+      onClick: () => {
+        if (!intercept()) goDate(today);
+      },
       get children() {
-        return props.labels.today;
+        return [todayIcon(), props.labels.today];
       }
     }) : _$createComponent(CalendarNavigationLink, {
       get owner() {
         return props.owner;
       },
       href: href ?? "#",
-      anchorProps: {
-        class: "k2b-button k2b-calendar-header__today",
-        "data-size": "sm",
-        "data-variant": "input"
+      intercept: intercept,
+      get anchorProps() {
+        return {
+          class: "k2b-button k2b-calendar-header__today",
+          "data-size": "sm",
+          "data-variant": "input",
+          "data-direction": direction(),
+          title: title()
+        };
       },
       children: label
     });
@@ -654,17 +641,17 @@ 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$15, _$escape(navButton(previous(), "ti-chevron-left", props.labels.previous)), _$escape(navButton(next(), "ti-chevron-right", props.labels.next)), _$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();
     },
-    children: candidate => _$ssr(_tmpl$16, _$escape(candidate))
+    children: candidate => _$ssr(_tmpl$1, _$escape(candidate))
   })), _$escape(_$createComponent(Show, {
     get when() {
       return props.owner.toolbarContent;
     },
     get children() {
-      return _$ssr(_tmpl$13, _$escape(props.owner.toolbarContent));
+      return _$ssr(_tmpl$7, _$escape(props.owner.toolbarContent));
     }
   })), _$escape(todayButton()), _$escape(_$createComponent(Show, {
     get when() {
@@ -672,6 +659,7 @@ const CalendarHeader = props => {
     },
     get fallback() {
       return _$createComponent(SegmentedControl, {
+        "class": "k2b-calendar-view-switcher",
         value: () => props.view === "mobile-month" ? "month" : props.view,
         onValueChange: goView,
         get ariaLabel() {
@@ -699,11 +687,18 @@ const CalendarHeader = props => {
       });
     }
   })), _$escape(props.owner.toolbarActions), _$escape(_$createComponent(Show, {
+    get when() {
+      return props.nav.commands().length > 0;
+    },
+    get children() {
+      return _$ssr(_tmpl$8, _$ssrAttribute("aria-label", _$escape(calendarMessages().calendarShortcuts, true), false) + _$ssrAttribute("title", _$escape(calendarMessages().calendarShortcuts, true), false));
+    }
+  })), _$escape(_$createComponent(Show, {
     get when() {
       return props.owner.navigationPending;
     },
     get children() {
-      return _$ssr(_tmpl$14);
+      return _$ssr(_tmpl$9);
     }
   })));
 };
@@ -763,28 +758,28 @@ const MonthPickerView = props => {
     });
   };
   onCleanup(() => cancelInteraction?.());
-  return _$ssr(_tmpl$18, _$ssrStyleProperty("grid-template-rows:", `auto repeat(${_$escape(weeks().length, true)}, ${props.compact ? "minmax(2.75rem, auto)" : "minmax(5rem, 1fr)"})`), _$ssrAttribute("data-week-numbers", props.owner.withWeekNumbers ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+  return _$ssr(_tmpl$11, _$ssrStyleProperty("grid-template-rows:", `auto repeat(${_$escape(weeks().length, true)}, ${props.compact ? "minmax(2.75rem, auto)" : "minmax(5rem, 1fr)"})`), _$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$17, _$escape(calendarMessages().weekShort));
+      return _$ssr(_tmpl$10, _$escape(calendarMessages().weekShort));
     }
   })), _$escape(_$createComponent(For, {
     get each() {
       return weekdays();
     },
-    children: day => _$ssr(_tmpl$17, _$escape(day))
+    children: day => _$ssr(_tmpl$10, _$escape(day))
   })), _$escape(_$createComponent(For, {
     get each() {
       return weeks();
     },
-    children: week => _$ssr(_tmpl$20, _$ssrAttribute("data-week-numbers", props.owner.withWeekNumbers ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+    children: week => _$ssr(_tmpl$13, _$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(zonedWeekNumber(week[0], dateConfig())));
+        return _$ssr(_tmpl$12, _$escape(zonedWeekNumber(week[0], dateConfig())));
       }
     })), _$escape(_$createComponent(For, {
       each: week,
@@ -813,7 +808,7 @@ const MonthPickerView = props => {
             hiddenCount: Math.max(0, candidates.length - visibleLimit)
           };
         });
-        return _$ssr(_tmpl$22, _$ssrAttribute("data-calendar-day-key", _$escape(dayKey, true), false) + _$ssrAttribute("data-outside", !sameMonth ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-drop-preview", movePreview()?.start && calendar.formatDateKey(movePreview().start, dateConfig()) === dayKey ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+        return _$ssr(_tmpl$15, _$ssrAttribute("data-calendar-day-key", _$escape(dayKey, true), false) + _$ssrAttribute("data-outside", !sameMonth ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-drop-preview", movePreview()?.start && calendar.formatDateKey(movePreview().start, dateConfig()) === dayKey ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
           get when() {
             return props.owner.onSlotActivate;
           },
@@ -862,7 +857,7 @@ const MonthPickerView = props => {
             return props.owner.onSlotActivate && href;
           },
           get fallback() {
-            return _$ssr(_tmpl$23, _$ssrAttribute("data-today", isToday ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-outside", !sameMonth ? "true" : _$escape(undefined, true), false), _$escape(calendar.formatDayNumber(day, dateConfig())));
+            return _$ssr(_tmpl$16, _$ssrAttribute("data-today", isToday ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-outside", !sameMonth ? "true" : _$escape(undefined, true), false), _$escape(calendar.formatDayNumber(day, dateConfig())));
           },
           children: dayHref => _$createComponent(CalendarNavigationLink, {
             get owner() {
@@ -887,18 +882,18 @@ const MonthPickerView = props => {
           })
         })), _$escape(_$createComponent(Show, {
           when: dayBadge,
-          children: badge => _$ssr(_tmpl$24, _$escape(_$createComponent(Show, {
+          children: badge => _$ssr(_tmpl$17, _$escape(_$createComponent(Show, {
             get when() {
               return badge().icon;
             },
-            children: icon => _$ssr(_tmpl$10, `k2b-calendar-month__badge-icon ti ti-${_$escape(icon(), true)}`)
+            children: icon => _$ssr(_tmpl$2, `k2b-calendar-month__badge-icon ti ti-${_$escape(icon(), true)}`)
           })), _$escape(badge().label))
         })), _$escape(_$createComponent(Show, {
           get when() {
             return eventStack().preview;
           },
           get children() {
-            return _$ssr(_tmpl$21, _$escape(props.events.find(event => event.id === eventStack().preview.id)?.title ?? calendarMessages().moveEvent));
+            return _$ssr(_tmpl$14, _$escape(props.events.find(event => event.id === eventStack().preview.id)?.title ?? calendarMessages().moveEvent));
           }
         })), _$escape(_$createComponent(For, {
           get each() {
@@ -944,7 +939,7 @@ const MonthPickerView = props => {
           get each() {
             return events.slice(0, 4);
           },
-          children: event => _$ssr(_tmpl$25, _$ssrAttribute("data-color", event.colorHex ? _$escape(undefined, true) : _$escape(event.color ?? "blue", true), false), _$ssrStyle(event.colorHex ? {
+          children: event => _$ssr(_tmpl$18, _$ssrAttribute("data-color", event.colorHex ? _$escape(undefined, true) : _$escape(event.color ?? "blue", true), false), _$ssrStyle(event.colorHex ? {
             "background-color": event.colorHex
           } : undefined))
         })));
@@ -955,6 +950,8 @@ 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. */
+
 /** 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;
 const MONTH_LANE_GAP_REM = 0.125;
@@ -1002,34 +999,6 @@ const monthItems = events => {
   for (const item of items.values()) item.bar = item.firstKey !== item.lastKey || Boolean(item.event.allDay && item.event.display !== "marker");
   return [...items.values()].sort((left, right) => Number(right.bar) - Number(left.bar) || left.event.sourceStartDate.getTime() - right.event.sourceStartDate.getTime() || left.event.title.localeCompare(right.event.title));
 };
-
-/** Places a calendar popover below its anchor when there is room and above it otherwise, inside the viewport. */
-const placeCalendarPopover = (anchor, popover) => {
-  const margin = 8;
-  const gap = 4;
-  const rect = anchor.getBoundingClientRect();
-  const width = Math.min(popover.offsetWidth || 288, window.innerWidth - margin * 2);
-  const height = popover.offsetHeight;
-  const left = Math.max(margin, Math.min(rect.left, window.innerWidth - width - margin));
-  const roomBelow = window.innerHeight - rect.bottom - gap - margin;
-  const above = height > roomBelow && rect.top - gap - margin > roomBelow;
-  const top = above ? Math.max(margin, rect.top - height - gap) : Math.min(rect.bottom + gap, window.innerHeight - height - margin);
-  popover.style.left = `${left}px`;
-  popover.style.top = `${Math.max(margin, top)}px`;
-};
-let measureContext;
-/** The width of a text in a font, from a canvas, so a bar can tell whether its title leaves room for a date hint. */
-const textWidth = (text, font) => {
-  measureContext ??= typeof document === "undefined" ? null : document.createElement("canvas").getContext("2d");
-  if (!measureContext) return Number.POSITIVE_INFINITY;
-  measureContext.font = font;
-  return measureContext.measureText(text).width;
-};
-
-/** Follows a calendar link the way the calendar's own links do: through the host's navigation when it has one. */
-const followCalendarHref = (owner, href) => {
-  if (owner.onNavigateHref) owner.onNavigateHref(href);else window.location.assign(href);
-};
 const PRINTABLE_KEY = /^.$/u;
 
 /**
@@ -1222,6 +1191,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);
@@ -1262,6 +1233,25 @@ const MonthView = props => {
     })) return;
     if (props.owner.onSlotActivate) props.owner.onSlotActivate(rangeOf(range));
   };
+  onMount(() => props.register?.({
+    quickCreate: create => {
+      const range = selection() ?? {
+        first: rovingKey(),
+        last: rovingKey()
+      };
+      select(range.first, range.last);
+      if (!openCreate(range, {
+        active: true,
+        create
+      })) props.owner.onSlotActivate?.(rangeOf(range));
+    },
+    createTarget: () => rangeOf(selection() ?? {
+      first: rovingKey(),
+      last: rovingKey()
+    }),
+    typing: () => popover()?.kind === "create" && !createActive()
+  }));
+  onCleanup(() => props.register?.(null));
   const openDayList = key => {
     const anchor = cells.get(key);
     if (!anchor) return;
@@ -1582,18 +1572,18 @@ const MonthView = props => {
       if (linkedItem() === item.key) setLinkedItem("");
     }
   });
-  const grid = () => _$ssr(_tmpl$27, _$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, {
+  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$26, _$escape(calendarMessages().weekShort));
+      return _$ssr(_tmpl$19, _$escape(calendarMessages().weekShort));
     }
   })), _$escape(_$createComponent(For, {
     get each() {
       return weekdays();
     },
-    children: (day, index) => _$ssr(_tmpl$28, _$ssrAttribute("data-weekend", index() > 4 ? "true" : _$escape(undefined, true), false), _$escape(day))
+    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();
@@ -1605,12 +1595,12 @@ const MonthView = props => {
       }, capacities()[weekIndex()] ?? MONTH_DEFAULT_LANES));
       const weekHref = () => viewHref(week[0].key, "week");
       const weekNumber = () => zonedWeekNumber(week[0].day, dateConfig());
-      return _$ssr(_tmpl$30, _$ssrAttribute("data-week-numbers", props.owner.withWeekNumbers ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+      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$29, _$escape(_$createComponent(Show, {
+          return _$ssr(_tmpl$22, _$escape(_$createComponent(Show, {
             get when() {
               return weekHref();
             },
@@ -1623,7 +1613,7 @@ const MonthView = props => {
                   return weekNumber();
                 },
                 get children() {
-                  return _$ssr(_tmpl$31, _$ssrAttribute("title", _$escape(calendarMessages().calendarOpenWeekNumber({
+                  return _$ssr(_tmpl$24, _$ssrAttribute("title", _$escape(calendarMessages().calendarOpenWeekNumber({
                     week: weekNumber()
                   }), true), false) + _$ssrAttribute("aria-label", _$escape(calendarMessages().calendarOpenWeekNumber({
                     week: weekNumber()
@@ -1671,13 +1661,13 @@ const MonthView = props => {
             shown: [],
             hidden: 0
           };
-          return _$ssr(_tmpl$33, _$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, {
+          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$24, _$escape(_$createComponent(Show, {
+            children: badge => _$ssr(_tmpl$17, _$escape(_$createComponent(Show, {
               get when() {
                 return badge().icon;
               },
-              children: icon => _$ssr(_tmpl$10, `k2b-calendar-month__badge-icon ti ti-${_$escape(icon(), true)}`)
+              children: icon => _$ssr(_tmpl$2, `k2b-calendar-month__badge-icon ti ti-${_$escape(icon(), true)}`)
             })), _$escape(badge().label))
           })), _$escape(_$createComponent(For, {
             get each() {
@@ -1752,7 +1742,7 @@ const MonthView = props => {
             get each() {
               return cell().shown;
             },
-            children: (item, index) => _$ssr(_tmpl$34, _$ssrStyleProperty("--k2b-calendar-span:", "1") + _$ssrStyleProperty(";--k2b-calendar-row:", _$escape(String(cell().top + index()), true)), _$escape(_$createComponent(EventChip, {
+            children: (item, index) => _$ssr(_tmpl$27, _$ssrStyleProperty("--k2b-calendar-span:", "1") + _$ssrStyleProperty(";--k2b-calendar-row:", _$escape(String(cell().top + index()), true)), _$escape(_$createComponent(EventChip, {
               get event() {
                 return item.event;
               },
@@ -1778,7 +1768,7 @@ const MonthView = props => {
               return cell().hidden > 0;
             },
             get children() {
-              return _$ssr(_tmpl$32, _$ssrStyleProperty("--k2b-calendar-row:", _$escape(String(cell().top + cell().shown.length), true)), _$ssrAttribute("aria-label", _$escape(calendarMessages().calendarMoreEventsOn({
+              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", (() => {
@@ -1798,19 +1788,19 @@ const MonthView = props => {
     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$37, _$escape(dayLabel(day)), _$escape(_$createComponent(Show, {
+    return _$ssr(_tmpl$30, _$escape(dayLabel(day)), _$escape(_$createComponent(Show, {
       get when() {
         return entries().length > 0;
       },
       get fallback() {
-        return _$ssr(_tmpl$38, _$escape(calendarMessages().calendarNothingPlanned));
+        return _$ssr(_tmpl$31, _$escape(calendarMessages().calendarNothingPlanned));
       },
       get children() {
-        return _$ssr(_tmpl$35, _$escape(_$createComponent(For, {
+        return _$ssr(_tmpl$28, _$escape(_$createComponent(For, {
           get each() {
             return entries();
           },
-          children: item => _$ssr(_tmpl$39, _$escape(_$createComponent(EventChip, {
+          children: item => _$ssr(_tmpl$32, _$escape(_$createComponent(EventChip, {
             get event() {
               return item.event;
             },
@@ -1847,7 +1837,7 @@ const MonthView = props => {
               size: "sm",
               onClick: () => openView(dayKey, "day"),
               get children() {
-                return [_$ssr(_tmpl$40), calendarMessages().calendarOpenDay];
+                return [_$ssr(_tmpl$33), calendarMessages().calendarOpenDay];
               }
             });
           }
@@ -1866,7 +1856,7 @@ const MonthView = props => {
           "data-size": "sm"
         },
         get children() {
-          return [_$ssr(_tmpl$40), calendarMessages().calendarOpenDay];
+          return [_$ssr(_tmpl$33), calendarMessages().calendarOpenDay];
         }
       })
     })), _$escape(_$createComponent(Show, {
@@ -1888,7 +1878,7 @@ const MonthView = props => {
             });
           },
           get children() {
-            return [_$ssr(_tmpl$36), calendarMessages().calendarNewEvent];
+            return [_$ssr(_tmpl$29), calendarMessages().calendarNewEvent];
           }
         });
       }
@@ -1917,7 +1907,7 @@ const MonthView = props => {
         }
       });
     }
-  }), _$ssr(_tmpl$41, _$ssrAttribute("aria-label", (() => {
+  }), _$ssr(_tmpl$34, _$ssrAttribute("aria-label", (() => {
     const current = popover();
     if (current?.kind === "day") return dayLabel(parseKey(current.dayKey));
     return _$escape(calendarMessages().calendarQuickCreate, true);
@@ -1929,7 +1919,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)
   })))];
@@ -1950,6 +1940,8 @@ const TimeGridView = props => {
   let scrollContainer;
   let timeGrid;
   let timeGutter;
+  let daysRow;
+  let allDayRow;
   let defaultHourMarker;
   let cancelInteraction;
   let suppressSlotClickUntil = 0;
@@ -1980,7 +1972,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());
@@ -2106,10 +2101,28 @@ const TimeGridView = props => {
     }
     return [...groups.values()];
   };
-  const dayColumnMinWidth = layouts => {
-    if (!isDayView()) return undefined;
-    const lanes = Math.max(1, ...layouts.map(layout => layout.lanes));
-    return `${Math.max(32, 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()) {
@@ -2145,7 +2158,7 @@ const TimeGridView = props => {
       });
     });
   });
-  return _$ssr(_tmpl$43, _$ssrStyleProperty("grid-template-columns:", `4rem repeat(${_$escape(props.days.length, true)}, minmax(0, 1fr))`), _$escape(_$createComponent(For, {
+  return _$ssr(_tmpl$36, _$ssrAttribute("data-view", isDayView() ? "day" : "week", false), _$ssrStyleProperty("grid-template-columns:", _$escape(columnTemplate(), true)), _$escape(_$createComponent(For, {
     get each() {
       return props.days;
     },
@@ -2163,13 +2176,13 @@ const TimeGridView = props => {
           class: "k2b-calendar-time-grid__day"
         },
         get children() {
-          return [_$ssr(_tmpl$44, _$ssrAttribute("data-today", today() ? "true" : _$escape(undefined, true), false), _$escape(formatDay(day, dateConfig()))), _$createComponent(Show, {
+          return [_$ssr(_tmpl$37, _$ssrAttribute("data-today", today() ? "true" : _$escape(undefined, true), false), _$escape(formatDay(day, dateConfig()))), _$createComponent(Show, {
             when: dayBadge,
-            children: badge => _$ssr(_tmpl$45, _$escape(_$createComponent(Show, {
+            children: badge => _$ssr(_tmpl$38, _$escape(_$createComponent(Show, {
               get when() {
                 return badge().icon;
               },
-              children: icon => _$ssr(_tmpl$10, `k2b-calendar-time-grid__badge-icon ti ti-${_$escape(icon(), true)}`)
+              children: icon => _$ssr(_tmpl$2, `k2b-calendar-time-grid__badge-icon ti ti-${_$escape(icon(), true)}`)
             })), _$escape(badge().label))
           })];
         }
@@ -2180,7 +2193,7 @@ const TimeGridView = props => {
       return !props.owner.hideAllDay;
     },
     get children() {
-      return _$ssr(_tmpl$42, _$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$35, _$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;
         },
@@ -2204,9 +2217,9 @@ const TimeGridView = props => {
               end: calendar.addDays(start, 1, dateConfig()),
               allDay: true
             };
-          }, () => performance.now() < suppressSlotClickUntil)), _$ssr(_tmpl$46, _$escape(_$createComponent(For, {
+          }, () => performance.now() < suppressSlotClickUntil)), _$ssr(_tmpl$39, _$escape(_$createComponent(For, {
             each: previewAllDay,
-            children: event => _$ssr(_tmpl$21, _$escape(event.title))
+            children: event => _$ssr(_tmpl$14, _$escape(event.title))
           })), _$escape(_$createComponent(For, {
             get each() {
               return allDay();
@@ -2231,11 +2244,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$47, _$ssrAttribute("data-outside-business", hour < businessStartHour() || hour > businessEndHour() ? "true" : _$escape(undefined, true), false), _$escape(`${hour}`.padStart(2, "0")))
+    children: hour => _$ssr(_tmpl$40, _$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;
@@ -2243,12 +2256,12 @@ const TimeGridView = props => {
     children: day => {
       const dayKey = calendar.formatDateKey(day, dateConfig());
       const layouts = createMemo(() => timedEventLayouts(eventsByDay().get(dayKey)?.timed ?? []));
-      return _$ssr(_tmpl$49, _$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$42, _$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$48, _$ssrStyleProperty("top:", `${_$escape(currentTimeLine(day) ?? 0, true)}%`));
+          return _$ssr(_tmpl$41, _$ssrStyleProperty("top:", `${_$escape(currentTimeLine(day) ?? 0, true)}%`));
         }
       })), _$escape(_$createComponent(For, {
         get each() {
@@ -2277,12 +2290,12 @@ const TimeGridView = props => {
         children: event => {
           const layout = eventLayout(event);
           const short = event.endDate.getTime() - event.startDate.getTime() < 60 * 60_000;
-          return _$ssr(_tmpl$51, _$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$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, {
             get when() {
               return event.title;
             },
             get children() {
-              return _$ssr(_tmpl$50, _$escape(event.title));
+              return _$ssr(_tmpl$43, _$escape(event.title));
             }
           })), _$escape(formatTime(event.startDate, dateConfig())), _$escape(formatTime(event.endDate, dateConfig())));
         }
@@ -2328,7 +2341,7 @@ const TimeGridView = props => {
               onCancel: clearInteraction
             });
           };
-          return _$ssr(_tmpl$53, _$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$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, {
             event: event,
             get owner() {
               return props.owner;
@@ -2348,7 +2361,7 @@ const TimeGridView = props => {
               return props.owner.onEventResize;
             },
             get children() {
-              return _$ssr(_tmpl$52, _$ssrAttribute("aria-label", _$escape(calendarMessages().resizeEvent, true), false));
+              return _$ssr(_tmpl$45, _$ssrAttribute("aria-label", _$escape(calendarMessages().resizeEvent, true), false));
             }
           })));
         }
@@ -2360,14 +2373,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$54, _$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$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({
             count: overflow.hiddenEvents.length
           }), true), false), _$escape(overflow.hiddenEvents.length)), _$createComponent(Show, {
             get when() {
               return expandedOverflow() === key;
             },
             get children() {
-              return _$ssr(_tmpl$55, _$ssrStyleProperty("top:", `${_$escape(layout.top, true)}%`), _$escape(formatTime(overflow.groupStartDate, dateConfig())), _$escape(formatTime(overflow.groupEndDate, dateConfig())), _$escape(_$createComponent(For, {
+              return _$ssr(_tmpl$48, _$ssrStyleProperty("top:", `${_$escape(layout.top, true)}%`), _$escape(formatTime(overflow.groupStartDate, dateConfig())), _$escape(formatTime(overflow.groupEndDate, dateConfig())), _$escape(_$createComponent(For, {
                 get each() {
                   return overflow.hiddenEvents;
                 },
@@ -2426,11 +2439,11 @@ const YearView = props => {
       };
     });
   });
-  return _$ssr(_tmpl$56, _$escape(_$createComponent(For, {
+  return _$ssr(_tmpl$49, _$escape(_$createComponent(For, {
     get each() {
       return months();
     },
-    children: month => _$ssr(_tmpl$57, _$escape(month.label), _$escape(_$createComponent(For, {
+    children: month => _$ssr(_tmpl$50, _$escape(month.label), _$escape(_$createComponent(For, {
       get each() {
         return month.days;
       },
@@ -2453,7 +2466,7 @@ const YearView = props => {
             get when() {
               return day.events[0];
             },
-            children: event => _$ssr(_tmpl$58, _$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$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 ? {
               "background-color": day.isToday ? "white" : event().colorHex
             } : undefined))
           })];
@@ -2466,7 +2479,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$60, _$escape(_$createComponent(MonthPickerView, {
+  return _$ssr(_tmpl$53, _$escape(_$createComponent(MonthPickerView, {
     get owner() {
       return {
         ...props.owner,
@@ -2496,10 +2509,10 @@ const MobileMonthView = props => {
       return selectedEvents().length > 0;
     },
     get fallback() {
-      return _$ssr(_tmpl$61, _$escape(props.labels.noEvents));
+      return _$ssr(_tmpl$54, _$escape(props.labels.noEvents));
     },
     get children() {
-      return _$ssr(_tmpl$59, _$escape(_$createComponent(For, {
+      return _$ssr(_tmpl$52, _$escape(_$createComponent(For, {
         get each() {
           return selectedEvents();
         },
@@ -2516,7 +2529,7 @@ const MobileMonthView = props => {
     }
   })));
 };
-const CalendarBody = props => _$ssr(_tmpl$62, _$escape(props.children));
+const CalendarBody = props => _$ssr(_tmpl$55, _$escape(props.children));
 const CalendarRoot = props => {
   const messages = useUiMessages();
   const calendarMessages = useCalendarMessages();
@@ -2566,7 +2579,181 @@ const CalendarRoot = props => {
       document.removeEventListener("visibilitychange", updateNow);
     });
   });
-  return _$ssr(_tmpl$63, `k2b-content-calendar ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("aria-busy", props.navigationPending ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(CalendarHeader, {
+
+  // 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 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;
+  };
+  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());
+  };
+  const goToday = () => {
+    if (timeView()?.today()) return;
+    go(calendar.today(dateConfig()), view());
+  };
+  const goView = nextView => {
+    const day = shownDay();
+    if (day) {
+      go(day, nextView);
+      return;
+    }
+    const href = props.getViewHref?.(nextView);
+    if (href) followCalendarHref(owner, href);else props.onViewChange?.(nextView);
+  };
+  const goToKey = key => {
+    if (timeView()?.goTo(key)) return;
+    go(parseKey(key), view());
+  };
+  const openGoTo = () => void openCalendarGoTo({
+    messages: calendarMessages(),
+    today: calendar.formatDateKey(new Date(), dateConfig()),
+    describe: key => parseKey(key).toLocaleDateString(dateConfig().locale ?? "en", {
+      weekday: "long",
+      day: "numeric",
+      month: "long",
+      year: "numeric",
+      timeZone: dateConfig().timeZone
+    }),
+    onGo: goToKey
+  });
+  const ownCommands = createMemo(() => {
+    const text = calendarMessages();
+    const available = ["day", "week", "month", "year"].filter(option => !props.views || props.views.includes(option));
+    const viewLabels = {
+      day: mergedLabels().day,
+      week: mergedLabels().week,
+      month: mergedLabels().month,
+      year: mergedLabels().year
+    };
+    return [{
+      id: "calendar.today",
+      label: text.calendarCommandToday,
+      description: text.calendarCommandTodayDescription,
+      shortcut: "h",
+      icon: "ti ti-calendar-event",
+      run: goToday
+    }, {
+      id: "calendar.next",
+      label: text.calendarCommandNext,
+      description: text.calendarCommandNextDescription,
+      shortcut: "j",
+      icon: "ti ti-chevron-right",
+      run: () => step(1)
+    }, {
+      id: "calendar.previous",
+      label: text.calendarCommandPrevious,
+      description: text.calendarCommandPreviousDescription,
+      shortcut: "k",
+      icon: "ti ti-chevron-left",
+      run: () => step(-1)
+    }, ...available.map((option, index) => ({
+      id: `calendar.view.${option}`,
+      label: text.calendarCommandView({
+        view: viewLabels[option]
+      }),
+      description: text.calendarCommandViewDescription({
+        view: viewLabels[option]
+      }),
+      shortcut: String(index + 1),
+      icon: "ti ti-layout-columns",
+      run: () => goView(option)
+    })), {
+      id: "calendar.goto",
+      label: text.calendarCommandGoTo,
+      description: text.calendarCommandGoToDescription,
+      shortcut: "g",
+      icon: "ti ti-calendar-search",
+      run: openGoTo
+    }];
+  });
+  const allCommands = createMemo(() => [...ownCommands(), ...(props.commands ?? [])]);
+  /** While the month's quiet quick create waits for typing, a single key is the first letter of a title. */
+  const typing = () => view() === "month" && (monthCreate()?.typing() ?? false);
+  createEffect(() => {
+    const commands = typing() ? allCommands().map(command => command.shortcut && singleKey(command.shortcut) ? {
+      ...command,
+      shortcut: undefined
+    } : command) : allCommands();
+    untrack(() => props.onCommandsChange?.(commands));
+  });
+  // The arrow keys page like J and K while the keyboard is in the calendar or nowhere, unless something there uses
+  // them, such as the grid of the week or the month.
+  let root;
+  onMount(() => {
+    const onKeyDown = event => {
+      if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
+      if (event.defaultPrevented || event.isComposing || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;
+      if (!props.onCommandsChange || custom() || document.querySelector('dialog[open], [role="dialog"][aria-modal="true"]')) return;
+      const target = event.target;
+      const inCalendar = target instanceof Element && Boolean(root?.contains(target));
+      if (!inCalendar && target !== document.body && target !== document.documentElement) return;
+      if (target instanceof Element && target.closest("input, textarea, select, [contenteditable]:not([contenteditable=false]), [role=textbox], [popover], [role=dialog]")) return;
+      event.preventDefault();
+      step(event.key === "ArrowRight" ? 1 : -1);
+    };
+    window.addEventListener("keydown", onKeyDown);
+    onCleanup(() => window.removeEventListener("keydown", onKeyDown));
+  });
+  const headerNav = {
+    timeView,
+    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() ? {} : {
+      "calendar.next": "arrowright",
+      "calendar.previous": "arrowleft"
+    })
+  };
+  const controller = {
+    quickCreate: create => {
+      const active = timeView();
+      if (active) active.controller.quickCreate(create);else monthCreate()?.quickCreate(create);
+    },
+    createTarget: () => {
+      const active = timeView()?.controller.createTarget() ?? monthCreate()?.createTarget();
+      if (active) return active;
+      const start = calendar.today(dateConfig());
+      return {
+        start,
+        end: calendar.addDays(start, 1, dateConfig()),
+        allDay: true
+      };
+    },
+    dragIn: (event, item, onDrop) => timeView()?.controller.dragIn(event, item, onDrop)
+  };
+  onMount(() => props.controller?.(controller));
+  const timeProps = timeViewName => ({
+    owner,
+    view: timeViewName,
+    get date() {
+      return date();
+    },
+    get now() {
+      return now();
+    },
+    get events() {
+      return props.events;
+    },
+    get labels() {
+      return mergedLabels();
+    },
+    get hours() {
+      return props.dayHours ?? [0, 24];
+    },
+    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, {
     get date() {
       return date();
     },
@@ -2578,8 +2765,9 @@ const CalendarRoot = props => {
     },
     owner: owner,
     get focusDay() {
-      return _$memo(() => view() === "month")() ? focusDay() : null;
-    }
+      return _$memo(() => view() === "month")() ? focusDay() : _$memo(() => !!timeView())() ? shownDay() : null;
+    },
+    nav: headerNav
   })), _$escape(_$createComponent(Show, {
     get when() {
       return !custom();
@@ -2613,7 +2801,8 @@ const CalendarRoot = props => {
                 get labels() {
                   return mergedLabels();
                 },
-                onFocusDay: setFocusDay
+                onFocusDay: setFocusDay,
+                register: setMonthCreate
               });
             }
           });
@@ -2671,22 +2860,42 @@ const CalendarRoot = props => {
                   });
                 },
                 get children() {
-                  return _$createComponent(TimeGridView, {
-                    owner: owner,
-                    get date() {
-                      return date();
-                    },
-                    get now() {
-                      return now();
-                    },
-                    get events() {
-                      return normalizedEvents();
+                  return _$createComponent(Show, {
+                    get when() {
+                      return timeMode();
                     },
-                    get labels() {
-                      return mergedLabels();
+                    get fallback() {
+                      return _$createComponent(TimeGridView, {
+                        owner: owner,
+                        get date() {
+                          return date();
+                        },
+                        get now() {
+                          return now();
+                        },
+                        get events() {
+                          return normalizedEvents();
+                        },
+                        get labels() {
+                          return mergedLabels();
+                        },
+                        get days() {
+                          return days();
+                        }
+                      });
                     },
-                    get days() {
-                      return days();
+                    get children() {
+                      return _$createComponent(Show, {
+                        get when() {
+                          return view() === "day";
+                        },
+                        get fallback() {
+                          return _$createComponent(CalendarWeekView, _$mergeProps(() => timeProps("week")));
+                        },
+                        get children() {
+                          return _$createComponent(CalendarDayView, _$mergeProps(() => timeProps("day")));
+                        }
+                      });
                     }
                   });
                 }
@@ -2699,6 +2908,9 @@ const CalendarRoot = props => {
   })));
 };
 
+/** A shortcut without Ctrl, Meta, or Mod, which typing would set off. */
+const singleKey = shortcut => !/(^|\+)(ctrl|meta|mod)\+/i.test(shortcut);
+
 /** JSX infers the values of `customViews`; inference from the last signature, as in `createComponent`, sees plain props. */
 
 function Calendar(props) {