@k2b/ui 0.20.0 → 0.22.0

package/dist/browser/content/Calendar.js

@@ -2,7 +2,6 @@ import { template as _$template } from "solid-js/web";
 import { delegateEvents as _$delegateEvents } from "solid-js/web";
 import { use as _$use } from "solid-js/web";
 import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
-import { memo as _$memo } from "solid-js/web";
 import { className as _$className } from "solid-js/web";
 import { spread as _$spread } from "solid-js/web";
 import { mergeProps as _$mergeProps } from "solid-js/web";
@@ -11,65 +10,90 @@ import { setAttribute as _$setAttribute } from "solid-js/web";
 import { effect as _$effect } from "solid-js/web";
 import { runHydrationEvents as _$runHydrationEvents } from "solid-js/web";
 import { addEventListener as _$addEventListener } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
 import { getNextMarker as _$getNextMarker } from "solid-js/web";
-import { insert as _$insert } from "solid-js/web";
 import { createComponent as _$createComponent } from "solid-js/web";
 import { getNextElement as _$getNextElement } from "solid-js/web";
-var _tmpl$ = /*#__PURE__*/_$template(`<span class=k2b-calendar-event__marker aria-hidden=true>`),
-  _tmpl$2 = /*#__PURE__*/_$template(`<span class=k2b-calendar-event__title><!$><!/><!$><!/>`),
-  _tmpl$3 = /*#__PURE__*/_$template(`<span class=k2b-calendar-event__meta>`),
-  _tmpl$4 = /*#__PURE__*/_$template(`<span class=k2b-calendar-event__description>`),
-  _tmpl$5 = /*#__PURE__*/_$template(`<a class=k2b-calendar-event data-calendar-event>`),
-  _tmpl$6 = /*#__PURE__*/_$template(`<button type=button class=k2b-calendar-event data-calendar-event data-interactive=true>`),
-  _tmpl$7 = /*#__PURE__*/_$template(`<div class=k2b-calendar-event role=group data-calendar-event>`),
-  _tmpl$8 = /*#__PURE__*/_$template(`<a>`),
-  _tmpl$9 = /*#__PURE__*/_$template(`<div role=radiogroup aria-orientation=horizontal class="k2b-segmented-control k2b-calendar-view-switcher">`),
-  _tmpl$0 = /*#__PURE__*/_$template(`<i>`),
-  _tmpl$1 = /*#__PURE__*/_$template(`<button type=button class=k2b-calendar-header__nav-button><i>`),
-  _tmpl$10 = /*#__PURE__*/_$template(`<span class=k2b-button__label>`),
-  _tmpl$11 = /*#__PURE__*/_$template(`<span class=k2b-calendar-header__progress aria-hidden=true>`),
-  _tmpl$12 = /*#__PURE__*/_$template(`<header class=k2b-calendar-header><div class=k2b-calendar-header__navigation><!$><!/><!$><!/><div class=k2b-calendar-header__title></div></div><div class=k2b-calendar-header__actions><!$><!/><!$><!/><!$><!/></div><!$><!/>`),
-  _tmpl$13 = /*#__PURE__*/_$template(`<div class=k2b-calendar-month__weekday>`),
-  _tmpl$14 = /*#__PURE__*/_$template(`<div class=k2b-calendar-month><div class=k2b-calendar-month__weekdays><!$><!/><!$><!/></div><!$><!/>`),
-  _tmpl$15 = /*#__PURE__*/_$template(`<div class=k2b-calendar-month__week-number>`),
-  _tmpl$16 = /*#__PURE__*/_$template(`<div class=k2b-calendar-month__week><!$><!/><!$><!/>`),
-  _tmpl$17 = /*#__PURE__*/_$template(`<button type=button class=k2b-calendar-month__day-target data-interactive=true>`),
-  _tmpl$18 = /*#__PURE__*/_$template(`<div class=k2b-calendar-preview>`),
-  _tmpl$19 = /*#__PURE__*/_$template(`<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>`),
-  _tmpl$20 = /*#__PURE__*/_$template(`<span class=k2b-calendar-month__day-number>`),
-  _tmpl$21 = /*#__PURE__*/_$template(`<span class=k2b-calendar-month__badge><!$><!/><!$><!/>`),
-  _tmpl$22 = /*#__PURE__*/_$template(`<span class=k2b-calendar-dot>`),
-  _tmpl$23 = /*#__PURE__*/_$template(`<div class=k2b-calendar-time-grid__all-day><div class=k2b-calendar-time-grid__all-day-label></div><!$><!/>`),
-  _tmpl$24 = /*#__PURE__*/_$template(`<div class=k2b-calendar-time-grid><div class=k2b-calendar-time-grid__days><div></div><!$><!/></div><!$><!/><div class=k2b-calendar-time-grid__scroll><div class=k2b-calendar-time-grid__grid><div class=k2b-calendar-time-grid__gutter></div><!$><!/>`),
-  _tmpl$25 = /*#__PURE__*/_$template(`<span class=k2b-calendar-time-grid__day-label>`),
-  _tmpl$26 = /*#__PURE__*/_$template(`<span class=k2b-calendar-time-grid__badge><!$><!/><!$><!/>`),
-  _tmpl$27 = /*#__PURE__*/_$template(`<div class=k2b-calendar-time-grid__all-day-cell><div class=k2b-calendar-time-grid__all-day-events><!$><!/><!$><!/>`),
-  _tmpl$28 = /*#__PURE__*/_$template(`<div class=k2b-calendar-time-grid__hour><!$><!/>:00`),
-  _tmpl$29 = /*#__PURE__*/_$template(`<div class=k2b-calendar-time-grid__now>`),
-  _tmpl$30 = /*#__PURE__*/_$template(`<div class=k2b-calendar-time-grid__column><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`),
-  _tmpl$31 = /*#__PURE__*/_$template(`<div class=k2b-calendar-time-grid__slot>`),
-  _tmpl$32 = /*#__PURE__*/_$template(`<div class=k2b-calendar-preview__title>`),
-  _tmpl$33 = /*#__PURE__*/_$template(`<div class="k2b-calendar-preview k2b-calendar-preview--timed"><div class=k2b-calendar-preview__content><!$><!/><div class=k2b-calendar-preview__label><!$><!/> - <!$><!/>`),
-  _tmpl$34 = /*#__PURE__*/_$template(`<button type=button class=k2b-calendar-time-grid__resize><span class=k2b-calendar-time-grid__resize-icon aria-hidden=true>`),
-  _tmpl$35 = /*#__PURE__*/_$template(`<div class=k2b-calendar-time-grid__event-position><div class=k2b-calendar-time-grid__event-frame><!$><!/><!$><!/>`),
-  _tmpl$36 = /*#__PURE__*/_$template(`<button type=button class=k2b-calendar-time-grid__overflow><span class=k2b-calendar-time-grid__overflow-count>+<!$><!/>`),
-  _tmpl$37 = /*#__PURE__*/_$template(`<div class=k2b-calendar-time-grid__overflow-menu><div class=k2b-calendar-time-grid__overflow-title><!$><!/> - <!$><!/></div><!$><!/>`),
-  _tmpl$38 = /*#__PURE__*/_$template(`<div class=k2b-calendar-year>`),
-  _tmpl$39 = /*#__PURE__*/_$template(`<div class=k2b-calendar-year__month><div class=k2b-calendar-year__title></div><div class=k2b-calendar-year__grid>`),
-  _tmpl$40 = /*#__PURE__*/_$template(`<span class=k2b-calendar-year__indicator>`),
-  _tmpl$41 = /*#__PURE__*/_$template(`<div class=k2b-calendar-mobile-month__events>`),
-  _tmpl$42 = /*#__PURE__*/_$template(`<div class=k2b-calendar-mobile-month><!$><!/><div class=k2b-calendar-mobile-month__agenda><div class=k2b-calendar-mobile-month__title></div><!$><!/>`),
-  _tmpl$43 = /*#__PURE__*/_$template(`<div class=k2b-calendar-mobile-month__empty>`),
-  _tmpl$44 = /*#__PURE__*/_$template(`<div class=k2b-calendar-body>`),
-  _tmpl$45 = /*#__PURE__*/_$template(`<section><!$><!/><!$><!/><!$><!/>`);
+import { insert as _$insert } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<span class=k2b-calendar-event__time>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<span class=k2b-calendar-event__marker aria-hidden=true>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<span class=k2b-calendar-event__title><!$><!/><!$><!/>`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<span class=k2b-calendar-event__meta>`),
+  _tmpl$5 = /*#__PURE__*/_$template(`<span class=k2b-calendar-event__description>`),
+  _tmpl$6 = /*#__PURE__*/_$template(`<span class=k2b-calendar-event__hint data-edge=start aria-hidden=true>`),
+  _tmpl$7 = /*#__PURE__*/_$template(`<span class=k2b-calendar-event__hint data-edge=end aria-hidden=true>`),
+  _tmpl$8 = /*#__PURE__*/_$template(`<a class=k2b-calendar-event data-calendar-event>`),
+  _tmpl$9 = /*#__PURE__*/_$template(`<button type=button class=k2b-calendar-event data-calendar-event data-interactive=true>`),
+  _tmpl$0 = /*#__PURE__*/_$template(`<div class=k2b-calendar-event role=group data-calendar-event>`),
+  _tmpl$1 = /*#__PURE__*/_$template(`<a>`),
+  _tmpl$10 = /*#__PURE__*/_$template(`<div role=radiogroup aria-orientation=horizontal class="k2b-segmented-control k2b-calendar-view-switcher">`),
+  _tmpl$11 = /*#__PURE__*/_$template(`<i>`),
+  _tmpl$12 = /*#__PURE__*/_$template(`<button type=button class=k2b-calendar-header__nav-button><i>`),
+  _tmpl$13 = /*#__PURE__*/_$template(`<span class=k2b-button__label>`),
+  _tmpl$14 = /*#__PURE__*/_$template(`<div class=k2b-calendar-header__content>`),
+  _tmpl$15 = /*#__PURE__*/_$template(`<span class=k2b-calendar-header__progress aria-hidden=true>`),
+  _tmpl$16 = /*#__PURE__*/_$template(`<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><!$><!/>`),
+  _tmpl$17 = /*#__PURE__*/_$template(`<span class=k2b-calendar-header__title-size aria-hidden=true>`),
+  _tmpl$18 = /*#__PURE__*/_$template(`<div class=k2b-calendar-month__weekday>`),
+  _tmpl$19 = /*#__PURE__*/_$template(`<div class=k2b-calendar-month><div class=k2b-calendar-month__weekdays><!$><!/><!$><!/></div><!$><!/>`),
+  _tmpl$20 = /*#__PURE__*/_$template(`<div class=k2b-calendar-month__week-number>`),
+  _tmpl$21 = /*#__PURE__*/_$template(`<div class=k2b-calendar-month__week><!$><!/><!$><!/>`),
+  _tmpl$22 = /*#__PURE__*/_$template(`<button type=button class=k2b-calendar-month__day-target data-interactive=true>`),
+  _tmpl$23 = /*#__PURE__*/_$template(`<div class=k2b-calendar-preview>`),
+  _tmpl$24 = /*#__PURE__*/_$template(`<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>`),
+  _tmpl$25 = /*#__PURE__*/_$template(`<span class=k2b-calendar-month__day-number>`),
+  _tmpl$26 = /*#__PURE__*/_$template(`<span class=k2b-calendar-month__badge><!$><!/><!$><!/>`),
+  _tmpl$27 = /*#__PURE__*/_$template(`<span class=k2b-calendar-dot>`),
+  _tmpl$28 = /*#__PURE__*/_$template(`<div class=k2b-calendar-month__weekday role=columnheader>`),
+  _tmpl$29 = /*#__PURE__*/_$template(`<div class=k2b-calendar-month role=grid aria-multiselectable=true data-lanes=true style=--k2b-calendar-lane:1.25rem;--k2b-calendar-lane-gap:0.125rem><div class=k2b-calendar-month__weekdays role=row><!$><!/><!$><!/></div><!$><!/>`),
+  _tmpl$30 = /*#__PURE__*/_$template(`<div class=k2b-calendar-month__week-number role=rowheader>`),
+  _tmpl$31 = /*#__PURE__*/_$template(`<div class=k2b-calendar-month__week role=row><!$><!/><!$><!/>`),
+  _tmpl$32 = /*#__PURE__*/_$template(`<button type=button class=k2b-calendar-month__week-link tabindex=-1>`),
+  _tmpl$33 = /*#__PURE__*/_$template(`<button type=button class=k2b-calendar-month__more tabindex=-1 aria-haspopup=dialog><span class=k2b-calendar-month__more-long></span><span class=k2b-calendar-month__more-short>+<!$><!/>`),
+  _tmpl$34 = /*#__PURE__*/_$template(`<div class=k2b-calendar-month__day role=gridcell><div class=k2b-calendar-month__day-header><span class=k2b-calendar-month__day-number></span><!$><!/></div><div class=k2b-calendar-month__lanes><!$><!/><!$><!/><!$><!/>`),
+  _tmpl$35 = /*#__PURE__*/_$template(`<div class=k2b-calendar-month__segment data-bar=true>`),
+  _tmpl$36 = /*#__PURE__*/_$template(`<div class=k2b-calendar-month__segment style=--k2b-calendar-span:1>`),
+  _tmpl$37 = /*#__PURE__*/_$template(`<ul class=k2b-calendar-day-list__events>`),
+  _tmpl$38 = /*#__PURE__*/_$template(`<i class="ti ti-plus"aria-hidden=true>`),
+  _tmpl$39 = /*#__PURE__*/_$template(`<div class=k2b-calendar-day-list><div class=k2b-calendar-day-list__title></div><!$><!/><div class=k2b-calendar-day-list__actions><!$><!/><!$><!/>`),
+  _tmpl$40 = /*#__PURE__*/_$template(`<p class=k2b-calendar-day-list__empty>`),
+  _tmpl$41 = /*#__PURE__*/_$template(`<li>`),
+  _tmpl$42 = /*#__PURE__*/_$template(`<i class="ti ti-zoom-in"aria-hidden=true>`),
+  _tmpl$43 = /*#__PURE__*/_$template(`<div class=k2b-calendar-popover popover=auto role=dialog>`),
+  _tmpl$44 = /*#__PURE__*/_$template(`<div class=k2b-calendar-time-grid__all-day><div class=k2b-calendar-time-grid__all-day-label></div><!$><!/>`),
+  _tmpl$45 = /*#__PURE__*/_$template(`<div class=k2b-calendar-time-grid><div class=k2b-calendar-time-grid__days><div></div><!$><!/></div><!$><!/><div class=k2b-calendar-time-grid__scroll><div class=k2b-calendar-time-grid__grid><div class=k2b-calendar-time-grid__gutter></div><!$><!/>`),
+  _tmpl$46 = /*#__PURE__*/_$template(`<span class=k2b-calendar-time-grid__day-label>`),
+  _tmpl$47 = /*#__PURE__*/_$template(`<span class=k2b-calendar-time-grid__badge><!$><!/><!$><!/>`),
+  _tmpl$48 = /*#__PURE__*/_$template(`<div class=k2b-calendar-time-grid__all-day-cell><div class=k2b-calendar-time-grid__all-day-events><!$><!/><!$><!/>`),
+  _tmpl$49 = /*#__PURE__*/_$template(`<div class=k2b-calendar-time-grid__hour><!$><!/>:00`),
+  _tmpl$50 = /*#__PURE__*/_$template(`<div class=k2b-calendar-time-grid__now>`),
+  _tmpl$51 = /*#__PURE__*/_$template(`<div class=k2b-calendar-time-grid__column><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`),
+  _tmpl$52 = /*#__PURE__*/_$template(`<div class=k2b-calendar-time-grid__slot>`),
+  _tmpl$53 = /*#__PURE__*/_$template(`<div class=k2b-calendar-preview__title>`),
+  _tmpl$54 = /*#__PURE__*/_$template(`<div class="k2b-calendar-preview k2b-calendar-preview--timed"><div class=k2b-calendar-preview__content><!$><!/><div class=k2b-calendar-preview__label><!$><!/> - <!$><!/>`),
+  _tmpl$55 = /*#__PURE__*/_$template(`<button type=button class=k2b-calendar-time-grid__resize><span class=k2b-calendar-time-grid__resize-icon aria-hidden=true>`),
+  _tmpl$56 = /*#__PURE__*/_$template(`<div class=k2b-calendar-time-grid__event-position><div class=k2b-calendar-time-grid__event-frame><!$><!/><!$><!/>`),
+  _tmpl$57 = /*#__PURE__*/_$template(`<button type=button class=k2b-calendar-time-grid__overflow><span class=k2b-calendar-time-grid__overflow-count>+<!$><!/>`),
+  _tmpl$58 = /*#__PURE__*/_$template(`<div class=k2b-calendar-time-grid__overflow-menu><div class=k2b-calendar-time-grid__overflow-title><!$><!/> - <!$><!/></div><!$><!/>`),
+  _tmpl$59 = /*#__PURE__*/_$template(`<div class=k2b-calendar-year>`),
+  _tmpl$60 = /*#__PURE__*/_$template(`<div class=k2b-calendar-year__month><div class=k2b-calendar-year__title></div><div class=k2b-calendar-year__grid>`),
+  _tmpl$61 = /*#__PURE__*/_$template(`<span class=k2b-calendar-year__indicator>`),
+  _tmpl$62 = /*#__PURE__*/_$template(`<div class=k2b-calendar-mobile-month__events>`),
+  _tmpl$63 = /*#__PURE__*/_$template(`<div class=k2b-calendar-mobile-month><!$><!/><div class=k2b-calendar-mobile-month__agenda><div class=k2b-calendar-mobile-month__title></div><!$><!/>`),
+  _tmpl$64 = /*#__PURE__*/_$template(`<div class=k2b-calendar-mobile-month__empty>`),
+  _tmpl$65 = /*#__PURE__*/_$template(`<div class=k2b-calendar-body>`),
+  _tmpl$66 = /*#__PURE__*/_$template(`<section><!$><!/><!$><!/>`);
 import { Link } from "@k2b/ssr/nav";
 import { dates as calendar } from "@k2b/stdlib";
-import { createMemo, createSignal, For, mergeProps, onCleanup, onMount, Show } from "solid-js";
+import { 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";
 import { useDateConfigLocale } from "../intl/locale";
 import { useUiMessages } from "../intl/messages";
 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";
 
 /** A view the application adds to the switcher; the calendar shows its header and toolbar, the application the body. */
@@ -231,7 +255,7 @@ const timedEventLayouts = events => {
   }));
 };
 const EventChip = props => {
-  const messages = useUiMessages();
+  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;
@@ -246,7 +270,7 @@ const EventChip = props => {
   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.event.allDay ? props.event.title : messages().calendarEventTime({
+    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())
@@ -260,53 +284,81 @@ const EventChip = props => {
     end: props.event.endDate,
     allDay: props.event.allDay ?? false,
     durationHours: durationHours(),
-    timeLabel: timeLabel()
+    timeLabel: timeLabel(),
+    leadingTime: props.leadingTime
   });
-  const defaultContent = [(() => {
-    var _el$ = _$getNextElement(_tmpl$2),
-      _el$3 = _el$.firstChild,
-      [_el$4, _co$] = _$getNextMarker(_el$3.nextSibling),
-      _el$5 = _el$4.nextSibling,
-      [_el$6, _co$2] = _$getNextMarker(_el$5.nextSibling);
-    _$insert(_el$, _$createComponent(Show, {
+  const defaultContent = [_$createComponent(Show, {
+    get when() {
+      return props.leadingTime;
+    },
+    get children() {
+      var _el$ = _$getNextElement(_tmpl$);
+      _$insert(_el$, () => props.leadingTime);
+      return _el$;
+    }
+  }), (() => {
+    var _el$2 = _$getNextElement(_tmpl$3),
+      _el$4 = _el$2.firstChild,
+      [_el$5, _co$] = _$getNextMarker(_el$4.nextSibling),
+      _el$6 = _el$5.nextSibling,
+      [_el$7, _co$2] = _$getNextMarker(_el$6.nextSibling);
+    _$insert(_el$2, _$createComponent(Show, {
       get when() {
         return props.event.display === "marker";
       },
       get children() {
-        return _$getNextElement(_tmpl$);
+        return _$getNextElement(_tmpl$2);
       }
-    }), _el$4, _co$);
-    _$insert(_el$, () => props.event.title, _el$6, _co$2);
-    return _el$;
+    }), _el$5, _co$);
+    _$insert(_el$2, () => props.event.title, _el$7, _co$2);
+    return _el$2;
   })(), _$createComponent(Show, {
     get when() {
       return showTime();
     },
     get children() {
-      var _el$7 = _$getNextElement(_tmpl$3);
-      _$insert(_el$7, timeLabel);
-      return _el$7;
+      var _el$8 = _$getNextElement(_tmpl$4);
+      _$insert(_el$8, timeLabel);
+      return _el$8;
     }
   }), _$createComponent(Show, {
     get when() {
       return showLocation();
     },
     get children() {
-      var _el$8 = _$getNextElement(_tmpl$3);
-      _$insert(_el$8, () => props.event.location);
-      return _el$8;
+      var _el$9 = _$getNextElement(_tmpl$4);
+      _$insert(_el$9, () => props.event.location);
+      return _el$9;
     }
   }), _$createComponent(Show, {
     get when() {
       return showDescription();
     },
     get children() {
-      var _el$9 = _$getNextElement(_tmpl$4);
-      _$insert(_el$9, () => props.event.description);
-      return _el$9;
+      var _el$0 = _$getNextElement(_tmpl$5);
+      _$insert(_el$0, () => props.event.description);
+      return _el$0;
+    }
+  })];
+  const content = () => [_$createComponent(Show, {
+    get when() {
+      return props.hintStart;
+    },
+    get children() {
+      var _el$1 = _$getNextElement(_tmpl$6);
+      _$insert(_el$1, () => props.hintStart);
+      return _el$1;
+    }
+  }), _$memo(() => renderedEvent() ?? defaultContent), _$createComponent(Show, {
+    get when() {
+      return props.hintEnd;
+    },
+    get children() {
+      var _el$10 = _$getNextElement(_tmpl$7);
+      _$insert(_el$10, () => props.hintEnd);
+      return _el$10;
     }
   })];
-  const content = () => renderedEvent() ?? defaultContent;
   const isActionable = () => isInteractive() || Boolean(props.onMovePointerDown);
   let suppressClickUntil = 0;
   const onClick = event => {
@@ -339,12 +391,12 @@ const EventChip = props => {
     });
   };
   return props.href ? (() => {
-    var _el$0 = _$getNextElement(_tmpl$5);
-    _el$0.$$pointerdown = onPointerDown;
-    _$addEventListener(_el$0, "dragstart", props.onMovePointerDown ? event => event.preventDefault() : undefined);
-    _el$0.$$dblclick = onDoubleClick;
-    _el$0.$$click = onClick;
-    _$insert(_el$0, content);
+    var _el$11 = _$getNextElement(_tmpl$8);
+    _el$11.$$pointerdown = onPointerDown;
+    _$addEventListener(_el$11, "dragstart", props.onMovePointerDown ? event => event.preventDefault() : undefined);
+    _el$11.$$dblclick = onDoubleClick;
+    _el$11.$$click = onClick;
+    _$insert(_el$11, content);
     _$effect(_p$ => {
       var _v$ = props.href,
         _v$2 = props.event.colorHex ? undefined : color(),
@@ -353,25 +405,31 @@ const EventChip = props => {
         _v$5 = props.fill ? "true" : undefined,
         _v$6 = short() ? "true" : undefined,
         _v$7 = props.moving ? "true" : undefined,
-        _v$8 = isInteractive() ? "true" : undefined,
-        _v$9 = props.event.display,
-        _v$0 = props.event.dataSpaceItemId,
-        _v$1 = style(),
-        _v$10 = props.onMovePointerDown ? false : undefined,
-        _v$11 = ariaLabel();
-      _v$ !== _p$.e && _$setAttribute(_el$0, "href", _p$.e = _v$);
-      _v$2 !== _p$.t && _$setAttribute(_el$0, "data-color", _p$.t = _v$2);
-      _v$3 !== _p$.a && _$setAttribute(_el$0, "data-selected", _p$.a = _v$3);
-      _v$4 !== _p$.o && _$setAttribute(_el$0, "data-compact", _p$.o = _v$4);
-      _v$5 !== _p$.i && _$setAttribute(_el$0, "data-fill", _p$.i = _v$5);
-      _v$6 !== _p$.n && _$setAttribute(_el$0, "data-short", _p$.n = _v$6);
-      _v$7 !== _p$.s && _$setAttribute(_el$0, "data-moving", _p$.s = _v$7);
-      _v$8 !== _p$.h && _$setAttribute(_el$0, "data-interactive", _p$.h = _v$8);
-      _v$9 !== _p$.r && _$setAttribute(_el$0, "data-display", _p$.r = _v$9);
-      _v$0 !== _p$.d && _$setAttribute(_el$0, "data-space-item-id", _p$.d = _v$0);
-      _p$.l = _$style(_el$0, _v$1, _p$.l);
-      _v$10 !== _p$.u && _$setAttribute(_el$0, "draggable", _p$.u = _v$10);
-      _v$11 !== _p$.c && _$setAttribute(_el$0, "aria-label", _p$.c = _v$11);
+        _v$8 = props.continuesBefore ? "true" : undefined,
+        _v$9 = props.continuesAfter ? "true" : undefined,
+        _v$0 = props.bar ? "true" : undefined,
+        _v$1 = isInteractive() ? "true" : undefined,
+        _v$10 = props.event.display,
+        _v$11 = props.event.dataSpaceItemId,
+        _v$12 = style(),
+        _v$13 = props.onMovePointerDown ? false : undefined,
+        _v$14 = ariaLabel();
+      _v$ !== _p$.e && _$setAttribute(_el$11, "href", _p$.e = _v$);
+      _v$2 !== _p$.t && _$setAttribute(_el$11, "data-color", _p$.t = _v$2);
+      _v$3 !== _p$.a && _$setAttribute(_el$11, "data-selected", _p$.a = _v$3);
+      _v$4 !== _p$.o && _$setAttribute(_el$11, "data-compact", _p$.o = _v$4);
+      _v$5 !== _p$.i && _$setAttribute(_el$11, "data-fill", _p$.i = _v$5);
+      _v$6 !== _p$.n && _$setAttribute(_el$11, "data-short", _p$.n = _v$6);
+      _v$7 !== _p$.s && _$setAttribute(_el$11, "data-moving", _p$.s = _v$7);
+      _v$8 !== _p$.h && _$setAttribute(_el$11, "data-continues-before", _p$.h = _v$8);
+      _v$9 !== _p$.r && _$setAttribute(_el$11, "data-continues-after", _p$.r = _v$9);
+      _v$0 !== _p$.d && _$setAttribute(_el$11, "data-bar", _p$.d = _v$0);
+      _v$1 !== _p$.l && _$setAttribute(_el$11, "data-interactive", _p$.l = _v$1);
+      _v$10 !== _p$.u && _$setAttribute(_el$11, "data-display", _p$.u = _v$10);
+      _v$11 !== _p$.c && _$setAttribute(_el$11, "data-space-item-id", _p$.c = _v$11);
+      _p$.w = _$style(_el$11, _v$12, _p$.w);
+      _v$13 !== _p$.m && _$setAttribute(_el$11, "draggable", _p$.m = _v$13);
+      _v$14 !== _p$.f && _$setAttribute(_el$11, "aria-label", _p$.f = _v$14);
       return _p$;
     }, {
       e: undefined,
@@ -386,36 +444,45 @@ const EventChip = props => {
       d: undefined,
       l: undefined,
       u: undefined,
-      c: undefined
+      c: undefined,
+      w: undefined,
+      m: undefined,
+      f: undefined
     });
     _$runHydrationEvents();
-    return _el$0;
+    return _el$11;
   })() : isActionable() ? (() => {
-    var _el$1 = _$getNextElement(_tmpl$6);
-    _el$1.$$keydown = onButtonKeyDown;
-    _el$1.$$pointerdown = onPointerDown;
-    _el$1.$$dblclick = onDoubleClick;
-    _el$1.$$click = onClick;
-    _$insert(_el$1, content);
+    var _el$12 = _$getNextElement(_tmpl$9);
+    _el$12.$$keydown = onButtonKeyDown;
+    _el$12.$$pointerdown = onPointerDown;
+    _el$12.$$dblclick = onDoubleClick;
+    _el$12.$$click = onClick;
+    _$insert(_el$12, content);
     _$effect(_p$ => {
-      var _v$12 = props.event.colorHex ? undefined : color(),
-        _v$13 = selected() ? "true" : undefined,
-        _v$14 = props.compact ? "true" : undefined,
-        _v$15 = props.fill ? "true" : undefined,
-        _v$16 = short() ? "true" : undefined,
-        _v$17 = props.moving ? "true" : undefined,
-        _v$18 = props.event.display,
-        _v$19 = style(),
-        _v$20 = ariaLabel();
-      _v$12 !== _p$.e && _$setAttribute(_el$1, "data-color", _p$.e = _v$12);
-      _v$13 !== _p$.t && _$setAttribute(_el$1, "data-selected", _p$.t = _v$13);
-      _v$14 !== _p$.a && _$setAttribute(_el$1, "data-compact", _p$.a = _v$14);
-      _v$15 !== _p$.o && _$setAttribute(_el$1, "data-fill", _p$.o = _v$15);
-      _v$16 !== _p$.i && _$setAttribute(_el$1, "data-short", _p$.i = _v$16);
-      _v$17 !== _p$.n && _$setAttribute(_el$1, "data-moving", _p$.n = _v$17);
-      _v$18 !== _p$.s && _$setAttribute(_el$1, "data-display", _p$.s = _v$18);
-      _p$.h = _$style(_el$1, _v$19, _p$.h);
-      _v$20 !== _p$.r && _$setAttribute(_el$1, "aria-label", _p$.r = _v$20);
+      var _v$15 = props.event.colorHex ? undefined : color(),
+        _v$16 = selected() ? "true" : undefined,
+        _v$17 = props.compact ? "true" : undefined,
+        _v$18 = props.fill ? "true" : undefined,
+        _v$19 = short() ? "true" : undefined,
+        _v$20 = props.moving ? "true" : undefined,
+        _v$21 = props.continuesBefore ? "true" : undefined,
+        _v$22 = props.continuesAfter ? "true" : undefined,
+        _v$23 = props.bar ? "true" : undefined,
+        _v$24 = props.event.display,
+        _v$25 = style(),
+        _v$26 = ariaLabel();
+      _v$15 !== _p$.e && _$setAttribute(_el$12, "data-color", _p$.e = _v$15);
+      _v$16 !== _p$.t && _$setAttribute(_el$12, "data-selected", _p$.t = _v$16);
+      _v$17 !== _p$.a && _$setAttribute(_el$12, "data-compact", _p$.a = _v$17);
+      _v$18 !== _p$.o && _$setAttribute(_el$12, "data-fill", _p$.o = _v$18);
+      _v$19 !== _p$.i && _$setAttribute(_el$12, "data-short", _p$.i = _v$19);
+      _v$20 !== _p$.n && _$setAttribute(_el$12, "data-moving", _p$.n = _v$20);
+      _v$21 !== _p$.s && _$setAttribute(_el$12, "data-continues-before", _p$.s = _v$21);
+      _v$22 !== _p$.h && _$setAttribute(_el$12, "data-continues-after", _p$.h = _v$22);
+      _v$23 !== _p$.r && _$setAttribute(_el$12, "data-bar", _p$.r = _v$23);
+      _v$24 !== _p$.d && _$setAttribute(_el$12, "data-display", _p$.d = _v$24);
+      _p$.l = _$style(_el$12, _v$25, _p$.l);
+      _v$26 !== _p$.u && _$setAttribute(_el$12, "aria-label", _p$.u = _v$26);
       return _p$;
     }, {
       e: undefined,
@@ -426,33 +493,42 @@ const EventChip = props => {
       n: undefined,
       s: undefined,
       h: undefined,
-      r: undefined
+      r: undefined,
+      d: undefined,
+      l: undefined,
+      u: undefined
     });
     _$runHydrationEvents();
-    return _el$1;
+    return _el$12;
   })() : (() => {
-    var _el$10 = _$getNextElement(_tmpl$7);
-    _$setAttribute(_el$10, "data-interactive", undefined);
-    _$insert(_el$10, content);
+    var _el$13 = _$getNextElement(_tmpl$0);
+    _$setAttribute(_el$13, "data-interactive", undefined);
+    _$insert(_el$13, content);
     _$effect(_p$ => {
-      var _v$21 = props.event.colorHex ? undefined : color(),
-        _v$22 = selected() ? "true" : undefined,
-        _v$23 = props.compact ? "true" : undefined,
-        _v$24 = props.fill ? "true" : undefined,
-        _v$25 = short() ? "true" : undefined,
-        _v$26 = props.moving ? "true" : undefined,
-        _v$27 = props.event.display,
-        _v$28 = style(),
-        _v$29 = ariaLabel();
-      _v$21 !== _p$.e && _$setAttribute(_el$10, "data-color", _p$.e = _v$21);
-      _v$22 !== _p$.t && _$setAttribute(_el$10, "data-selected", _p$.t = _v$22);
-      _v$23 !== _p$.a && _$setAttribute(_el$10, "data-compact", _p$.a = _v$23);
-      _v$24 !== _p$.o && _$setAttribute(_el$10, "data-fill", _p$.o = _v$24);
-      _v$25 !== _p$.i && _$setAttribute(_el$10, "data-short", _p$.i = _v$25);
-      _v$26 !== _p$.n && _$setAttribute(_el$10, "data-moving", _p$.n = _v$26);
-      _v$27 !== _p$.s && _$setAttribute(_el$10, "data-display", _p$.s = _v$27);
-      _p$.h = _$style(_el$10, _v$28, _p$.h);
-      _v$29 !== _p$.r && _$setAttribute(_el$10, "aria-label", _p$.r = _v$29);
+      var _v$27 = props.event.colorHex ? undefined : color(),
+        _v$28 = selected() ? "true" : undefined,
+        _v$29 = props.compact ? "true" : undefined,
+        _v$30 = props.fill ? "true" : undefined,
+        _v$31 = short() ? "true" : undefined,
+        _v$32 = props.moving ? "true" : undefined,
+        _v$33 = props.continuesBefore ? "true" : undefined,
+        _v$34 = props.continuesAfter ? "true" : undefined,
+        _v$35 = props.bar ? "true" : undefined,
+        _v$36 = props.event.display,
+        _v$37 = style(),
+        _v$38 = ariaLabel();
+      _v$27 !== _p$.e && _$setAttribute(_el$13, "data-color", _p$.e = _v$27);
+      _v$28 !== _p$.t && _$setAttribute(_el$13, "data-selected", _p$.t = _v$28);
+      _v$29 !== _p$.a && _$setAttribute(_el$13, "data-compact", _p$.a = _v$29);
+      _v$30 !== _p$.o && _$setAttribute(_el$13, "data-fill", _p$.o = _v$30);
+      _v$31 !== _p$.i && _$setAttribute(_el$13, "data-short", _p$.i = _v$31);
+      _v$32 !== _p$.n && _$setAttribute(_el$13, "data-moving", _p$.n = _v$32);
+      _v$33 !== _p$.s && _$setAttribute(_el$13, "data-continues-before", _p$.s = _v$33);
+      _v$34 !== _p$.h && _$setAttribute(_el$13, "data-continues-after", _p$.h = _v$34);
+      _v$35 !== _p$.r && _$setAttribute(_el$13, "data-bar", _p$.r = _v$35);
+      _v$36 !== _p$.d && _$setAttribute(_el$13, "data-display", _p$.d = _v$36);
+      _p$.l = _$style(_el$13, _v$37, _p$.l);
+      _v$38 !== _p$.u && _$setAttribute(_el$13, "aria-label", _p$.u = _v$38);
       return _p$;
     }, {
       e: undefined,
@@ -463,9 +539,12 @@ const EventChip = props => {
       n: undefined,
       s: undefined,
       h: undefined,
-      r: undefined
+      r: undefined,
+      d: undefined,
+      l: undefined,
+      u: undefined
     });
-    return _el$10;
+    return _el$13;
   })();
 };
 const slotInteractionProps = (owner, slot, suppressed, nativeControl = false) => {
@@ -508,8 +587,8 @@ const CalendarNavigationLink = props => {
     props.owner.onNavigateHref?.(props.href);
   };
   return props.owner.onNavigateHref ? (() => {
-    var _el$11 = _$getNextElement(_tmpl$8);
-    _$spread(_el$11, _$mergeProps(() => props.anchorProps, {
+    var _el$14 = _$getNextElement(_tmpl$1);
+    _$spread(_el$14, _$mergeProps(() => props.anchorProps, {
       get href() {
         return props.href;
       },
@@ -517,9 +596,9 @@ const CalendarNavigationLink = props => {
       "onPointerEnter": preload,
       "onFocus": preload
     }), false, true);
-    _$insert(_el$11, () => props.children);
+    _$insert(_el$14, () => props.children);
     _$runHydrationEvents();
-    return _el$11;
+    return _el$14;
   })() : props.owner.onNavigate ? _$createComponent(Link, _$mergeProps(() => props.anchorProps, {
     get href() {
       return props.href;
@@ -534,21 +613,21 @@ const CalendarNavigationLink = props => {
       return props.children;
     }
   })) : (() => {
-    var _el$12 = _$getNextElement(_tmpl$8);
-    _$spread(_el$12, _$mergeProps(() => props.anchorProps, {
+    var _el$15 = _$getNextElement(_tmpl$1);
+    _$spread(_el$15, _$mergeProps(() => props.anchorProps, {
       get href() {
         return props.href;
       },
       "onPointerEnter": preload,
       "onFocus": preload
     }), false, true);
-    _$insert(_el$12, () => props.children);
+    _$insert(_el$15, () => props.children);
     _$runHydrationEvents();
-    return _el$12;
+    return _el$15;
   })();
 };
 const CalendarViewLinks = props => {
-  const messages = useUiMessages();
+  const calendarMessages = useCalendarMessages();
   const refs = [];
   const selectRelative = (currentIndex, direction) => {
     if (props.options.length === 0) return;
@@ -567,14 +646,18 @@ const CalendarViewLinks = props => {
     }
   };
   return (() => {
-    var _el$13 = _$getNextElement(_tmpl$9);
-    _$insert(_el$13, _$createComponent(For, {
+    var _el$16 = _$getNextElement(_tmpl$10);
+    _$insert(_el$16, _$createComponent(For, {
       get each() {
         return props.options;
       },
       children: (option, index) => {
         const active = () => (props.view === "mobile-month" ? "month" : props.view) === option.value;
-        const href = () => props.owner.getViewHref?.(option.value) ?? "#";
+        const href = () => {
+          const day = props.focusDay;
+          const atDay = day && !active() ? props.owner.getDateHref?.(day, option.value) : undefined;
+          return atDay ?? props.owner.getViewHref?.(option.value) ?? "#";
+        };
         return _$createComponent(CalendarNavigationLink, {
           get owner() {
             return props.owner;
@@ -601,19 +684,35 @@ const CalendarViewLinks = props => {
         });
       }
     }));
-    _$effect(() => _$setAttribute(_el$13, "aria-label", messages().calendarView));
-    return _el$13;
+    _$effect(() => _$setAttribute(_el$16, "aria-label", calendarMessages().calendarView));
+    return _el$16;
   })();
 };
 
+/**
+ * The same day some months later, or the last day of that month when it is shorter: a step from January 31 lands on
+ * February 28, never in March. stdlib's `addMonths` runs over into the next month.
+ */
+const addMonthsClamped = (date, months, dateConfig) => {
+  const moved = calendar.addMonths(date, months, dateConfig);
+  if (calendar.formatDateKey(moved, dateConfig).slice(8) === calendar.formatDateKey(date, dateConfig).slice(8)) return moved;
+  return calendar.addDays(calendar.startOfMonth(moved, dateConfig), -1, dateConfig);
+};
+
 /** Custom views page by day, like the day view. */
 const adjacentCalendarDate = (date, view, direction, dateConfig) => {
-  if (view === "year") return calendar.addMonths(date, direction * 12, dateConfig);
-  if (view === "month" || view === "mobile-month") return calendar.addMonths(date, direction, dateConfig);
+  if (view === "year") return addMonthsClamped(date, direction * 12, dateConfig);
+  if (view === "month" || view === "mobile-month") return addMonthsClamped(date, direction, dateConfig);
   return calendar.addDays(date, direction * (view === "week" ? 7 : 1), dateConfig);
 };
+
+/** Opens a view at a day through the host's callbacks. Hosts may keep the view and the date apart, so both hear it. */
+const openViewAt = (owner, date, view) => {
+  owner.onViewChange?.(view);
+  owner.onDateChange?.(date, view);
+};
 const CalendarHeader = props => {
-  const messages = useUiMessages();
+  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());
@@ -632,8 +731,51 @@ const CalendarHeader = props => {
     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());
   };
+  /**
+   * 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.
+   */
+  const titleWidths = createMemo(() => {
+    const context = dateConfig();
+    if (props.view === "year") return [];
+    const {
+      year
+    } = zonedYearMonth(props.date, context);
+    if (props.view === "month" || props.view === "mobile-month") return Array.from({
+      length: 12
+    }, (_, month) => formatMonth(zonedMonthDate(year, month, context), context));
+    if (props.view === "week") {
+      const first = calendar.startOfWeek(calendar.startOfMonth(props.date, context), context);
+      return Array.from({
+        length: 6
+      }, (_, week) => {
+        const start = calendar.addDays(first, week * 7, context);
+        return `${formatDay(start, context)} - ${formatDay(calendar.addDays(start, 6, context), context)}`;
+      });
+    }
+    return Array.from({
+      length: 12
+    }, (_, month) => month).flatMap(month => {
+      const first = zonedMonthDate(year, month, context);
+      return Array.from({
+        length: 7
+      }, (_, offset) => calendar.addDays(first, 21 + offset, context).toLocaleDateString(context.locale ?? "en", {
+        weekday: "long",
+        month: "long",
+        day: "numeric",
+        year: "numeric",
+        timeZone: context.timeZone
+      }));
+    });
+  });
   const goDate = date => props.owner.onDateChange?.(date, props.view);
   const goView = view => {
+    // Like the switcher's links, the other views open at the day selected in the month view.
+    const day = props.focusDay;
+    if (day && props.owner.onDateChange && view !== props.view) {
+      openViewAt(props.owner, day, view);
+      return;
+    }
     if (props.owner.onViewChange) {
       props.owner.onViewChange(view);
       return;
@@ -654,18 +796,18 @@ const CalendarHeader = props => {
         class: "k2b-calendar-header__nav-button"
       },
       get children() {
-        var _el$14 = _$getNextElement(_tmpl$0);
-        _$className(_el$14, `ti ${icon}`);
-        return _el$14;
+        var _el$17 = _$getNextElement(_tmpl$11);
+        _$className(_el$17, `ti ${icon}`);
+        return _el$17;
       }
     }) : props.owner.onDateChange ? (() => {
-      var _el$15 = _$getNextElement(_tmpl$1),
-        _el$16 = _el$15.firstChild;
-      _el$15.$$click = () => goDate(date);
-      _$setAttribute(_el$15, "aria-label", label);
-      _$className(_el$16, `ti ${icon}`);
+      var _el$18 = _$getNextElement(_tmpl$12),
+        _el$19 = _el$18.firstChild;
+      _el$18.$$click = () => goDate(date);
+      _$setAttribute(_el$18, "aria-label", label);
+      _$className(_el$19, `ti ${icon}`);
       _$runHydrationEvents();
-      return _el$15;
+      return _el$18;
     })() : _$createComponent(CalendarNavigationLink, {
       get owner() {
         return props.owner;
@@ -677,9 +819,9 @@ const CalendarHeader = props => {
         class: "k2b-calendar-header__nav-button"
       },
       get children() {
-        var _el$17 = _$getNextElement(_tmpl$0);
-        _$className(_el$17, `ti ${icon}`);
-        return _el$17;
+        var _el$20 = _$getNextElement(_tmpl$11);
+        _$className(_el$20, `ti ${icon}`);
+        return _el$20;
       }
     });
   };
@@ -687,9 +829,9 @@ const CalendarHeader = props => {
     const today = calendar.today(dateConfig());
     const href = props.owner.getDateHref?.(today, props.view);
     const label = (() => {
-      var _el$18 = _$getNextElement(_tmpl$10);
-      _$insert(_el$18, () => props.labels.today);
-      return _el$18;
+      var _el$21 = _$getNextElement(_tmpl$13);
+      _$insert(_el$21, () => props.labels.today);
+      return _el$21;
     })();
     return (props.owner.onNavigateHref || props.owner.onNavigate) && href ? _$createComponent(CalendarNavigationLink, {
       get owner() {
@@ -738,27 +880,52 @@ const CalendarHeader = props => {
     label: props.labels.year
   }].filter(option => !props.owner.views || props.owner.views.includes(option.value)), ...(props.owner.customViews ?? [])]);
   return (() => {
-    var _el$19 = _$getNextElement(_tmpl$12),
-      _el$20 = _el$19.firstChild,
-      _el$22 = _el$20.firstChild,
-      [_el$23, _co$3] = _$getNextMarker(_el$22.nextSibling),
-      _el$24 = _el$23.nextSibling,
-      [_el$25, _co$4] = _$getNextMarker(_el$24.nextSibling),
-      _el$21 = _el$25.nextSibling,
-      _el$26 = _el$20.nextSibling,
-      _el$27 = _el$26.firstChild,
-      [_el$28, _co$5] = _$getNextMarker(_el$27.nextSibling),
-      _el$29 = _el$28.nextSibling,
-      [_el$30, _co$6] = _$getNextMarker(_el$29.nextSibling),
-      _el$31 = _el$30.nextSibling,
-      [_el$32, _co$7] = _$getNextMarker(_el$31.nextSibling),
-      _el$34 = _el$26.nextSibling,
-      [_el$35, _co$8] = _$getNextMarker(_el$34.nextSibling);
-    _$insert(_el$20, () => navButton(previous(), "ti-chevron-left", props.labels.previous), _el$23, _co$3);
-    _$insert(_el$20, () => navButton(next(), "ti-chevron-right", props.labels.next), _el$25, _co$4);
-    _$insert(_el$21, title);
-    _$insert(_el$26, todayButton, _el$28, _co$5);
-    _$insert(_el$26, _$createComponent(Show, {
+    var _el$22 = _$getNextElement(_tmpl$16),
+      _el$23 = _el$22.firstChild,
+      _el$28 = _el$23.firstChild,
+      [_el$29, _co$4] = _$getNextMarker(_el$28.nextSibling),
+      _el$30 = _el$29.nextSibling,
+      [_el$31, _co$5] = _$getNextMarker(_el$30.nextSibling),
+      _el$24 = _el$31.nextSibling,
+      _el$25 = _el$24.firstChild,
+      _el$26 = _el$25.nextSibling,
+      [_el$27, _co$3] = _$getNextMarker(_el$26.nextSibling),
+      _el$41 = _el$23.nextSibling,
+      [_el$42, _co$9] = _$getNextMarker(_el$41.nextSibling),
+      _el$33 = _el$42.nextSibling,
+      _el$34 = _el$33.firstChild,
+      [_el$35, _co$6] = _$getNextMarker(_el$34.nextSibling),
+      _el$36 = _el$35.nextSibling,
+      [_el$37, _co$7] = _$getNextMarker(_el$36.nextSibling),
+      _el$38 = _el$37.nextSibling,
+      [_el$39, _co$8] = _$getNextMarker(_el$38.nextSibling),
+      _el$43 = _el$33.nextSibling,
+      [_el$44, _co$0] = _$getNextMarker(_el$43.nextSibling);
+    _$insert(_el$23, () => navButton(previous(), "ti-chevron-left", props.labels.previous), _el$29, _co$4);
+    _$insert(_el$23, () => navButton(next(), "ti-chevron-right", props.labels.next), _el$31, _co$5);
+    _$insert(_el$25, title);
+    _$insert(_el$24, _$createComponent(For, {
+      get each() {
+        return titleWidths();
+      },
+      children: candidate => (() => {
+        var _el$45 = _$getNextElement(_tmpl$17);
+        _$insert(_el$45, candidate);
+        return _el$45;
+      })()
+    }), _el$27, _co$3);
+    _$insert(_el$22, _$createComponent(Show, {
+      get when() {
+        return props.owner.toolbarContent;
+      },
+      get children() {
+        var _el$32 = _$getNextElement(_tmpl$14);
+        _$insert(_el$32, () => props.owner.toolbarContent);
+        return _el$32;
+      }
+    }), _el$42, _co$9);
+    _$insert(_el$33, todayButton, _el$35, _co$6);
+    _$insert(_el$33, _$createComponent(Show, {
       get when() {
         return _$memo(() => !!!props.owner.onViewChange)() && props.owner.getViewHref;
       },
@@ -767,7 +934,7 @@ const CalendarHeader = props => {
           value: () => props.view === "mobile-month" ? "month" : props.view,
           onValueChange: goView,
           get ariaLabel() {
-            return messages().calendarView;
+            return calendarMessages().calendarView;
           },
           get options() {
             return viewOptions();
@@ -784,24 +951,29 @@ const CalendarHeader = props => {
           },
           get options() {
             return viewOptions();
+          },
+          get focusDay() {
+            return props.focusDay;
           }
         });
       }
-    }), _el$30, _co$6);
-    _$insert(_el$26, () => props.owner.toolbarActions, _el$32, _co$7);
-    _$insert(_el$19, _$createComponent(Show, {
+    }), _el$37, _co$7);
+    _$insert(_el$33, () => props.owner.toolbarActions, _el$39, _co$8);
+    _$insert(_el$22, _$createComponent(Show, {
       get when() {
         return props.owner.navigationPending;
       },
       get children() {
-        return _$getNextElement(_tmpl$11);
+        return _$getNextElement(_tmpl$15);
       }
-    }), _el$35, _co$8);
-    return _el$19;
+    }), _el$44, _co$0);
+    return _el$22;
   })();
 };
-const MonthView = props => {
-  const messages = useUiMessages();
+
+/** The compact month of `mobile-month`: a picker whose days link to their agenda. */
+const MonthPickerView = props => {
+  const calendarMessages = useCalendarMessages();
   const dateConfig = createMemo(() => ownerDateConfig(props.owner));
   const [movePreview, setMovePreview] = createSignal(null);
   const [movingEventId, setMovingEventId] = createSignal("");
@@ -855,55 +1027,55 @@ const MonthView = props => {
   };
   onCleanup(() => cancelInteraction?.());
   return (() => {
-    var _el$36 = _$getNextElement(_tmpl$14),
-      _el$37 = _el$36.firstChild,
-      _el$39 = _el$37.firstChild,
-      [_el$40, _co$9] = _$getNextMarker(_el$39.nextSibling),
-      _el$41 = _el$40.nextSibling,
-      [_el$42, _co$0] = _$getNextMarker(_el$41.nextSibling),
-      _el$43 = _el$37.nextSibling,
-      [_el$44, _co$1] = _$getNextMarker(_el$43.nextSibling);
-    _$insert(_el$37, _$createComponent(Show, {
+    var _el$46 = _$getNextElement(_tmpl$19),
+      _el$47 = _el$46.firstChild,
+      _el$49 = _el$47.firstChild,
+      [_el$50, _co$1] = _$getNextMarker(_el$49.nextSibling),
+      _el$51 = _el$50.nextSibling,
+      [_el$52, _co$10] = _$getNextMarker(_el$51.nextSibling),
+      _el$53 = _el$47.nextSibling,
+      [_el$54, _co$11] = _$getNextMarker(_el$53.nextSibling);
+    _$insert(_el$47, _$createComponent(Show, {
       get when() {
         return props.owner.withWeekNumbers;
       },
       get children() {
-        var _el$38 = _$getNextElement(_tmpl$13);
-        _$insert(_el$38, () => messages().weekShort);
-        return _el$38;
+        var _el$48 = _$getNextElement(_tmpl$18);
+        _$insert(_el$48, () => calendarMessages().weekShort);
+        return _el$48;
       }
-    }), _el$40, _co$9);
-    _$insert(_el$37, _$createComponent(For, {
+    }), _el$50, _co$1);
+    _$insert(_el$47, _$createComponent(For, {
       get each() {
         return weekdays();
       },
       children: day => (() => {
-        var _el$45 = _$getNextElement(_tmpl$13);
-        _$insert(_el$45, day);
-        return _el$45;
+        var _el$55 = _$getNextElement(_tmpl$18);
+        _$insert(_el$55, day);
+        return _el$55;
       })()
-    }), _el$42, _co$0);
-    _$insert(_el$36, _$createComponent(For, {
+    }), _el$52, _co$10);
+    _$insert(_el$46, _$createComponent(For, {
       get each() {
         return weeks();
       },
       children: week => (() => {
-        var _el$46 = _$getNextElement(_tmpl$16),
-          _el$48 = _el$46.firstChild,
-          [_el$49, _co$10] = _$getNextMarker(_el$48.nextSibling),
-          _el$50 = _el$49.nextSibling,
-          [_el$51, _co$11] = _$getNextMarker(_el$50.nextSibling);
-        _$insert(_el$46, _$createComponent(Show, {
+        var _el$56 = _$getNextElement(_tmpl$21),
+          _el$58 = _el$56.firstChild,
+          [_el$59, _co$12] = _$getNextMarker(_el$58.nextSibling),
+          _el$60 = _el$59.nextSibling,
+          [_el$61, _co$13] = _$getNextMarker(_el$60.nextSibling);
+        _$insert(_el$56, _$createComponent(Show, {
           get when() {
             return props.owner.withWeekNumbers;
           },
           get children() {
-            var _el$47 = _$getNextElement(_tmpl$15);
-            _$insert(_el$47, () => zonedWeekNumber(week[0], dateConfig()));
-            return _el$47;
+            var _el$57 = _$getNextElement(_tmpl$20);
+            _$insert(_el$57, () => zonedWeekNumber(week[0], dateConfig()));
+            return _el$57;
           }
-        }), _el$49, _co$10);
-        _$insert(_el$46, _$createComponent(For, {
+        }), _el$59, _co$12);
+        _$insert(_el$56, _$createComponent(For, {
           each: week,
           children: day => {
             const dayKey = calendar.formatDateKey(day, dateConfig());
@@ -931,25 +1103,25 @@ const MonthView = props => {
               };
             });
             return (() => {
-              var _el$52 = _$getNextElement(_tmpl$19),
-                _el$68 = _el$52.firstChild,
-                [_el$69, _co$17] = _$getNextMarker(_el$68.nextSibling),
-                _el$54 = _el$69.nextSibling,
-                _el$55 = _el$54.firstChild,
-                [_el$56, _co$12] = _$getNextMarker(_el$55.nextSibling),
-                _el$57 = _el$56.nextSibling,
-                [_el$58, _co$13] = _$getNextMarker(_el$57.nextSibling),
-                _el$59 = _el$54.nextSibling,
-                _el$61 = _el$59.firstChild,
-                [_el$62, _co$14] = _$getNextMarker(_el$61.nextSibling),
-                _el$63 = _el$62.nextSibling,
-                [_el$64, _co$15] = _$getNextMarker(_el$63.nextSibling),
-                _el$65 = _el$64.nextSibling,
-                [_el$66, _co$16] = _$getNextMarker(_el$65.nextSibling),
-                _el$67 = _el$59.nextSibling;
-              _$setAttribute(_el$52, "data-calendar-day-key", dayKey);
-              _$setAttribute(_el$52, "data-outside", !sameMonth ? "true" : undefined);
-              _$insert(_el$52, _$createComponent(Show, {
+              var _el$62 = _$getNextElement(_tmpl$24),
+                _el$78 = _el$62.firstChild,
+                [_el$79, _co$19] = _$getNextMarker(_el$78.nextSibling),
+                _el$64 = _el$79.nextSibling,
+                _el$65 = _el$64.firstChild,
+                [_el$66, _co$14] = _$getNextMarker(_el$65.nextSibling),
+                _el$67 = _el$66.nextSibling,
+                [_el$68, _co$15] = _$getNextMarker(_el$67.nextSibling),
+                _el$69 = _el$64.nextSibling,
+                _el$71 = _el$69.firstChild,
+                [_el$72, _co$16] = _$getNextMarker(_el$71.nextSibling),
+                _el$73 = _el$72.nextSibling,
+                [_el$74, _co$17] = _$getNextMarker(_el$73.nextSibling),
+                _el$75 = _el$74.nextSibling,
+                [_el$76, _co$18] = _$getNextMarker(_el$75.nextSibling),
+                _el$77 = _el$69.nextSibling;
+              _$setAttribute(_el$62, "data-calendar-day-key", dayKey);
+              _$setAttribute(_el$62, "data-outside", !sameMonth ? "true" : undefined);
+              _$insert(_el$62, _$createComponent(Show, {
                 get when() {
                   return props.owner.onSlotActivate;
                 },
@@ -966,7 +1138,7 @@ const MonthView = props => {
                       get anchorProps() {
                         return {
                           class: "k2b-calendar-month__day-target",
-                          "aria-label": messages().openDate({
+                          "aria-label": calendarMessages().openDate({
                             label: dayLabel
                           })
                         };
@@ -975,10 +1147,10 @@ const MonthView = props => {
                   });
                 },
                 get children() {
-                  var _el$53 = _$getNextElement(_tmpl$17);
-                  _$spread(_el$53, _$mergeProps({
+                  var _el$63 = _$getNextElement(_tmpl$22);
+                  _$spread(_el$63, _$mergeProps({
                     get ["aria-label"]() {
-                      return messages().createEventOn({
+                      return calendarMessages().createEventOn({
                         label: dayLabel
                       });
                     }
@@ -991,20 +1163,20 @@ const MonthView = props => {
                     };
                   }, () => performance.now() < suppressSlotClickUntil, true)), false, false);
                   _$runHydrationEvents();
-                  return _el$53;
+                  return _el$63;
                 }
-              }), _el$69, _co$17);
-              _$insert(_el$54, _$createComponent(Show, {
+              }), _el$79, _co$19);
+              _$insert(_el$64, _$createComponent(Show, {
                 get when() {
                   return props.owner.onSlotActivate && href;
                 },
                 get fallback() {
                   return (() => {
-                    var _el$70 = _$getNextElement(_tmpl$20);
-                    _$setAttribute(_el$70, "data-today", isToday ? "true" : undefined);
-                    _$setAttribute(_el$70, "data-outside", !sameMonth ? "true" : undefined);
-                    _$insert(_el$70, () => calendar.formatDayNumber(day, dateConfig()));
-                    return _el$70;
+                    var _el$80 = _$getNextElement(_tmpl$25);
+                    _$setAttribute(_el$80, "data-today", isToday ? "true" : undefined);
+                    _$setAttribute(_el$80, "data-outside", !sameMonth ? "true" : undefined);
+                    _$insert(_el$80, () => calendar.formatDayNumber(day, dateConfig()));
+                    return _el$80;
                   })();
                 },
                 children: dayHref => _$createComponent(CalendarNavigationLink, {
@@ -1019,7 +1191,7 @@ const MonthView = props => {
                       class: "k2b-calendar-month__day-number",
                       "data-today": isToday ? "true" : undefined,
                       "data-outside": !sameMonth ? "true" : undefined,
-                      "aria-label": messages().openDate({
+                      "aria-label": calendarMessages().openDate({
                         label: dayLabel
                       })
                     };
@@ -1028,40 +1200,40 @@ const MonthView = props => {
                     return calendar.formatDayNumber(day, dateConfig());
                   }
                 })
-              }), _el$56, _co$12);
-              _$insert(_el$54, _$createComponent(Show, {
+              }), _el$66, _co$14);
+              _$insert(_el$64, _$createComponent(Show, {
                 when: dayBadge,
                 children: badge => (() => {
-                  var _el$71 = _$getNextElement(_tmpl$21),
-                    _el$72 = _el$71.firstChild,
-                    [_el$73, _co$18] = _$getNextMarker(_el$72.nextSibling),
-                    _el$74 = _el$73.nextSibling,
-                    [_el$75, _co$19] = _$getNextMarker(_el$74.nextSibling);
-                  _$insert(_el$71, _$createComponent(Show, {
+                  var _el$81 = _$getNextElement(_tmpl$26),
+                    _el$82 = _el$81.firstChild,
+                    [_el$83, _co$20] = _$getNextMarker(_el$82.nextSibling),
+                    _el$84 = _el$83.nextSibling,
+                    [_el$85, _co$21] = _$getNextMarker(_el$84.nextSibling);
+                  _$insert(_el$81, _$createComponent(Show, {
                     get when() {
                       return badge().icon;
                     },
                     children: icon => (() => {
-                      var _el$76 = _$getNextElement(_tmpl$0);
-                      _$effect(() => _$className(_el$76, `k2b-calendar-month__badge-icon ti ti-${icon()}`));
-                      return _el$76;
+                      var _el$86 = _$getNextElement(_tmpl$11);
+                      _$effect(() => _$className(_el$86, `k2b-calendar-month__badge-icon ti ti-${icon()}`));
+                      return _el$86;
                     })()
-                  }), _el$73, _co$18);
-                  _$insert(_el$71, () => badge().label, _el$75, _co$19);
-                  return _el$71;
+                  }), _el$83, _co$20);
+                  _$insert(_el$81, () => badge().label, _el$85, _co$21);
+                  return _el$81;
                 })()
-              }), _el$58, _co$13);
-              _$insert(_el$59, _$createComponent(Show, {
+              }), _el$68, _co$15);
+              _$insert(_el$69, _$createComponent(Show, {
                 get when() {
                   return eventStack().preview;
                 },
                 get children() {
-                  var _el$60 = _$getNextElement(_tmpl$18);
-                  _$insert(_el$60, () => props.events.find(event => event.id === eventStack().preview.id)?.title ?? messages().moveEvent);
-                  return _el$60;
+                  var _el$70 = _$getNextElement(_tmpl$23);
+                  _$insert(_el$70, () => props.events.find(event => event.id === eventStack().preview.id)?.title ?? calendarMessages().moveEvent);
+                  return _el$70;
                 }
-              }), _el$62, _co$14);
-              _$insert(_el$59, _$createComponent(For, {
+              }), _el$72, _co$16);
+              _$insert(_el$69, _$createComponent(For, {
                 get each() {
                   return eventStack().visibleEvents;
                 },
@@ -1081,8 +1253,8 @@ const MonthView = props => {
                     return props.owner.onEventDrop ? (pointerEvent, markDragged) => startMove(pointerEvent, event, markDragged) : undefined;
                   }
                 })
-              }), _el$64, _co$15);
-              _$insert(_el$59, _$createComponent(Show, {
+              }), _el$74, _co$17);
+              _$insert(_el$69, _$createComponent(Show, {
                 get when() {
                   return eventStack().hiddenCount > 0;
                 },
@@ -1096,56 +1268,1265 @@ const MonthView = props => {
                       class: "k2b-calendar-month__more"
                     },
                     get children() {
-                      return ["+", _$memo(() => eventStack().hiddenCount), " more"];
+                      return calendarMessages().calendarMoreEvents({
+                        count: eventStack().hiddenCount
+                      });
                     }
                   });
                 }
-              }), _el$66, _co$16);
-              _$insert(_el$67, _$createComponent(For, {
+              }), _el$76, _co$18);
+              _$insert(_el$77, _$createComponent(For, {
                 get each() {
                   return events.slice(0, 4);
                 },
                 children: event => (() => {
-                  var _el$77 = _$getNextElement(_tmpl$22);
+                  var _el$87 = _$getNextElement(_tmpl$27);
                   _$effect(_p$ => {
-                    var _v$32 = event.colorHex ? undefined : event.color ?? "blue",
-                      _v$33 = event.colorHex ? {
+                    var _v$41 = event.colorHex ? undefined : event.color ?? "blue",
+                      _v$42 = event.colorHex ? {
                         "background-color": event.colorHex
                       } : undefined;
-                    _v$32 !== _p$.e && _$setAttribute(_el$77, "data-color", _p$.e = _v$32);
-                    _p$.t = _$style(_el$77, _v$33, _p$.t);
+                    _v$41 !== _p$.e && _$setAttribute(_el$87, "data-color", _p$.e = _v$41);
+                    _p$.t = _$style(_el$87, _v$42, _p$.t);
                     return _p$;
                   }, {
                     e: undefined,
                     t: undefined
                   });
-                  return _el$77;
+                  return _el$87;
                 })()
               }));
-              _$effect(() => _$setAttribute(_el$52, "data-drop-preview", movePreview()?.start && calendar.formatDateKey(movePreview().start, dateConfig()) === dayKey ? "true" : undefined));
-              return _el$52;
+              _$effect(() => _$setAttribute(_el$62, "data-drop-preview", movePreview()?.start && calendar.formatDateKey(movePreview().start, dateConfig()) === dayKey ? "true" : undefined));
+              return _el$62;
             })();
           }
-        }), _el$51, _co$11);
-        _$effect(() => _$setAttribute(_el$46, "data-week-numbers", props.owner.withWeekNumbers ? "true" : undefined));
-        return _el$46;
+        }), _el$61, _co$13);
+        _$effect(() => _$setAttribute(_el$56, "data-week-numbers", props.owner.withWeekNumbers ? "true" : undefined));
+        return _el$56;
       })()
-    }), _el$44, _co$1);
+    }), _el$54, _co$11);
     _$effect(_p$ => {
-      var _v$30 = `auto repeat(${weeks().length}, ${props.compact ? "minmax(2.75rem, auto)" : "minmax(5rem, 1fr)"})`,
-        _v$31 = props.owner.withWeekNumbers ? "true" : undefined;
-      _v$30 !== _p$.e && _$setStyleProperty(_el$36, "grid-template-rows", _p$.e = _v$30);
-      _v$31 !== _p$.t && _$setAttribute(_el$37, "data-week-numbers", _p$.t = _v$31);
+      var _v$39 = `auto repeat(${weeks().length}, ${props.compact ? "minmax(2.75rem, auto)" : "minmax(5rem, 1fr)"})`,
+        _v$40 = props.owner.withWeekNumbers ? "true" : undefined;
+      _v$39 !== _p$.e && _$setStyleProperty(_el$46, "grid-template-rows", _p$.e = _v$39);
+      _v$40 !== _p$.t && _$setAttribute(_el$47, "data-week-numbers", _p$.t = _v$40);
       return _p$;
     }, {
       e: undefined,
       t: undefined
     });
-    return _el$36;
+    return _el$46;
+  })();
+};
+
+/** One entry of the month grid: its whole range, and the days it covers as `YYYY-MM-DD` keys. */
+
+/** 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;
+/** Rows drawn before the browser has measured the cells, as in the server response. */
+const MONTH_DEFAULT_LANES = 3;
+/** Room a bar keeps beside its title and date hint: padding, torn edge, gap, and an icon such as a task box or a flag. */
+const MONTH_HINT_SLACK_REM = 2.25;
+const dayKeyNumber = key => {
+  const [year = "1970", month = "1", day = "1"] = key.split("-");
+  return Date.UTC(Number(year), Number(month) - 1, Number(day)) / 86_400_000;
+};
+const orderedSelection = (anchor, focus) => anchor <= focus ? {
+  first: anchor,
+  last: focus
+} : {
+  first: focus,
+  last: anchor
+};
+
+/** Groups the per-day pieces of the events back into one entry each: bars first, then the others by time. */
+const monthItems = events => {
+  const items = new Map();
+  for (const piece of events) {
+    const key = `${piece.id}\u0000${piece.sourceStartDate.getTime()}`;
+    const item = items.get(key);
+    if (item) {
+      if (piece.dayKey < item.firstKey) item.firstKey = piece.dayKey;
+      if (piece.dayKey > item.lastKey) item.lastKey = piece.dayKey;
+      item.days.set(piece.dayKey, piece);
+      continue;
+    }
+    items.set(key, {
+      key,
+      event: {
+        ...piece,
+        startDate: piece.sourceStartDate,
+        endDate: piece.sourceEndDate
+      },
+      firstKey: piece.dayKey,
+      lastKey: piece.dayKey,
+      bar: false,
+      days: new Map([[piece.dayKey, piece]])
+    });
+  }
+  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;
+
+/**
+ * The month grid. A click selects a day and never navigates, a drag or Shift selects a range, and the arrow keys move
+ * the selection. The quick create opens at the selection: quietly after a click, with the focus after a drag, a
+ * double-click, Enter, or N. Every event is one bar per week row in a lane it keeps on each of its days, and each
+ * cell shows as many entries as its height holds.
+ */
+const MonthView = props => {
+  const calendarMessages = useCalendarMessages();
+  const dateConfig = createMemo(() => ownerDateConfig(props.owner));
+  // 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, {
+    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 => ({
+    day,
+    key: calendar.formatDateKey(day, dateConfig())
+  }))), undefined, {
+    equals: (previous, next) => previous.map(week => week[0]?.key).join() === next.map(week => week[0]?.key).join()
+  });
+  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 [popover, setPopover] = createSignal(null);
+  /** Whether the quick create holds the focus; until then the grid keeps it. */
+  const [createActive, setCreateActive] = createSignal(false);
+  const [linkedItem, setLinkedItem] = createSignal("");
+  const [movePreview, setMovePreview] = createSignal(null);
+  const [movingEventId, setMovingEventId] = createSignal("");
+  const cells = new Map();
+  let popoverElement;
+  let cancelInteraction;
+  let suppressClickUntil = 0;
+  let lastPointer = "mouse";
+  let menuKey = null;
+  /** The day to select once paging with Page Up or Page Down has shown its month. */
+  let pendingKey = null;
+  const selection = createMemo(() => {
+    const anchor = anchorKey();
+    const focus = focusKey();
+    return anchor && focus ? orderedSelection(anchor, focus) : null;
+  });
+  const parseKey = key => calendar.parseCalendarDate(key, dateConfig());
+  const rangeOf = range => ({
+    start: parseKey(range.first),
+    end: calendar.addDays(parseKey(range.last), 1, dateConfig()),
+    allDay: true
+  });
+  const visibleKeys = createMemo(() => weeks().flatMap(week => week.map(entry => entry.key)));
+  const rovingKey = createMemo(() => {
+    const keys = visibleKeys();
+    const focus = focusKey();
+    if (focus && keys.includes(focus)) return focus;
+    if (keys.includes(todayKey())) return todayKey();
+    return calendar.formatDateKey(zonedMonthDate(month().year, month().month, dateConfig()), dateConfig());
+  });
+  const dropRange = createMemo(() => {
+    const preview = movePreview();
+    if (!preview) return null;
+    const keys = previewSegments(preview, visibleKeys().map(parseKey), dateConfig()).map(piece => piece.dayKey);
+    if (keys.length === 0) return null;
+    keys.sort();
+    return {
+      first: keys[0],
+      last: keys[keys.length - 1]
+    };
+  });
+  const within = (range, key) => Boolean(range && key >= range.first && key <= range.last);
+  /** Where a day sits in the selection: alone, at its start or end, or in between. */
+  const selectionPart = key => {
+    const range = selection();
+    if (!range || !within(range, key)) return undefined;
+    if (range.first === range.last) return "single";
+    return key === range.first ? "start" : key === range.last ? "end" : "middle";
+  };
+  const select = (anchor, focus = anchor) => {
+    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.
+  createEffect(on(selection, range => props.owner.onSelectionChange?.(range ? rangeOf(range) : null), {
+    defer: true
+  }));
+  onCleanup(() => {
+    if (untrack(selection)) props.owner.onSelectionChange?.(null);
+  });
+  createEffect(on(selection, range => props.onFocusDay?.(range ? parseKey(range.first) : null)));
+  createEffect(on(month, () => {
+    setPopover(null);
+    const key = pendingKey;
+    pendingKey = null;
+    if (key && visibleKeys().includes(key)) {
+      select(key);
+      queueMicrotask(() => focusCell(key));
+    } else select(null);
+  }, {
+    defer: true
+  }));
+  const dayLabel = day => day.toLocaleDateString(dateConfig().locale ?? "en", {
+    weekday: "long",
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    timeZone: dateConfig().timeZone
+  });
+  const shortDayLabel = (key, withMonth = true) => parseKey(key).toLocaleDateString(dateConfig().locale ?? "en", {
+    day: "numeric",
+    ...(withMonth ? {
+      month: "short"
+    } : {}),
+    timeZone: dateConfig().timeZone
+  });
+  const monthDayLabel = (date, withTime) => date.toLocaleString(dateConfig().locale ?? "en", {
+    month: "long",
+    day: "numeric",
+    ...(withTime ? {
+      hour: "2-digit",
+      minute: "2-digit"
+    } : {}),
+    timeZone: dateConfig().timeZone
+  });
+  /** A long event names the days it spans; a one-day event keeps the chip's own title and time. */
+  const itemLabel = item => {
+    if (item.firstKey === item.lastKey) return undefined;
+    const allDay = Boolean(item.event.allDay);
+    return calendarMessages().calendarEventTime({
+      title: item.event.title,
+      start: monthDayLabel(allDay ? parseKey(item.firstKey) : item.event.sourceStartDate, !allDay),
+      end: monthDayLabel(allDay ? parseKey(item.lastKey) : item.event.sourceEndDate, !allDay)
+    });
+  };
+  /** The start time before the title of a one-day entry; bars and all-day entries show none. */
+  const leadingTime = item => item.bar || item.event.allDay ? undefined : formatTime(item.event.sourceStartDate, dateConfig());
+  /** The day at a torn end of a bar, with its month when that day lies outside the shown month. */
+  const hintDate = target => ({
+    day: Number(target.slice(8, 10)),
+    month: Number(target.slice(0, 4)) === month().year && Number(target.slice(5, 7)) === month().month + 1 ? undefined : parseKey(target).toLocaleDateString(dateConfig().locale ?? "en", {
+      month: "short",
+      timeZone: dateConfig().timeZone
+    }).replace(/\.$/, "")
+  });
+  const selectionHeading = range => {
+    if (range.first === range.last) return parseKey(range.first).toLocaleDateString(dateConfig().locale ?? "en", {
+      weekday: "long",
+      month: "long",
+      day: "numeric",
+      timeZone: dateConfig().timeZone
+    });
+    const days = dayKeyNumber(range.last) - dayKeyNumber(range.first) + 1;
+    return calendarMessages().calendarSelectedDays({
+      start: shortDayLabel(range.first),
+      end: shortDayLabel(range.last),
+      count: days
+    });
+  };
+  const viewAvailable = view => !props.owner.views || props.owner.views.includes(view);
+  const viewHref = (key, view) => viewAvailable(view) ? props.owner.getDateHref?.(parseKey(key), view) : undefined;
+  /** Whether the calendar can open another view at a day: through a link, or through the host's date change. */
+  const canOpenView = view => viewAvailable(view) && Boolean(props.owner.getDateHref || props.owner.onDateChange);
+  const openView = (key, view) => {
+    const href = viewHref(key, view);
+    if (href) followCalendarHref(props.owner, href);else openViewAt(props.owner, parseKey(key), view);
+  };
+  /** The calendar's own entries of the day menu, Open day and Open week, need no application entries. */
+  const hasMenu = () => Boolean(props.owner.selectionMenu) || canOpenView("day") || canOpenView("week");
+
+  /** The day cell under a point, from the cells' boxes: a bar lies over days that are not its parent. */
+  const dayKeyAtPoint = (clientX, clientY) => {
+    for (const [key, cell] of cells) {
+      if (!cell.isConnected) continue;
+      const rect = cell.getBoundingClientRect();
+      if (clientX >= rect.left && clientX < rect.right && clientY >= rect.top && clientY < rect.bottom) return key;
+    }
+    return null;
+  };
+  const focusCell = key => cells.get(key)?.focus({
+    preventScroll: true
+  });
+  const closePopover = (restoreFocus = true) => {
+    if (!popover()) return;
+    setPopover(null);
+    setCreateActive(false);
+    if (restoreFocus) focusCell(rovingKey());
+  };
+  const popoverFocusable = () => popoverElement?.querySelector("input,textarea,select,button,a[href],[tabindex]:not([tabindex='-1'])") ?? null;
+
+  /**
+   * Opens the quick create at the selection. Quietly, it only shows beside the grid, which keeps the focus until the
+   * person types or tabs into it; otherwise it takes the focus at once.
+   */
+  const openCreate = (range, options) => {
+    if (!props.owner.renderQuickCreate) return false;
+    const anchor = cells.get(focusKey() && within(range, focusKey()) ? focusKey() : range.last);
+    if (!anchor) return false;
+    setCreateActive(options.active);
+    setPopover({
+      kind: "create",
+      range,
+      anchor,
+      create: options.create
+    });
+    return true;
+  };
+  const activateCreate = () => {
+    if (popover()?.kind !== "create") return false;
+    setCreateActive(true);
+    popoverFocusable()?.focus();
+    return true;
+  };
+  /** 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();
+    if (!range) return;
+    if (openCreate(range, {
+      active: true
+    })) return;
+    if (props.owner.onSlotActivate) props.owner.onSlotActivate(rangeOf(range));
+  };
+  const openDayList = key => {
+    const anchor = cells.get(key);
+    if (!anchor) return;
+    setCreateActive(true);
+    setPopover({
+      kind: "day",
+      dayKey: key,
+      anchor
+    });
+  };
+  /** A quiet quick create follows the selection; any other popover closes when the selection changes. */
+  const followSelection = () => {
+    const current = popover();
+    const range = selection();
+    if (!current) return;
+    if (current.kind === "create" && !createActive() && range) openCreate(range, {
+      active: false
+    });else closePopover(false);
+  };
+  const pageTo = target => {
+    const date = parseKey(target);
+    const href = props.owner.getDateHref?.(date, "month");
+    // Only a month that is on its way may select the day, so a host that cannot page never leaves one behind.
+    if (props.owner.onDateChange) {
+      pendingKey = target;
+      props.owner.onDateChange(date, "month");
+    } else if (href) {
+      pendingKey = target;
+      followCalendarHref(props.owner, href);
+    }
+  };
+  const moveFocus = (key, extend) => {
+    if (!visibleKeys().includes(key)) {
+      pageTo(key);
+      return;
+    }
+    if (extend) select(anchorKey() ?? focusKey() ?? key, key);else select(key);
+    focusCell(key);
+    followSelection();
+  };
+  const onCellKeyDown = (event, key) => {
+    if (event.target !== event.currentTarget || event.ctrlKey || event.metaKey || event.altKey) return;
+    const current = popover();
+    const quiet = current?.kind === "create" && !createActive();
+    // The quiet quick create takes over once the person types or tabs into it. Space stays the grid's key for the day
+    // list; N is a title's first letter like any other, as the quick create it would open is already there.
+    if (quiet && (event.key === "Tab" && !event.shiftKey || PRINTABLE_KEY.test(event.key) && event.key !== " ")) {
+      const field = popoverFocusable();
+      if (field) {
+        if (event.key === "Tab") event.preventDefault();
+        setCreateActive(true);
+        field.focus();
+        return;
+      }
+    }
+    const day = parseKey(key);
+    const shift = days => calendar.formatDateKey(calendar.addDays(day, days, dateConfig()), dateConfig());
+    const weekday = (dayKeyNumber(key) - dayKeyNumber(calendar.formatDateKey(calendar.startOfWeek(day, dateConfig()), dateConfig()))) % 7;
+    const target = event.key === "ArrowLeft" ? shift(-1) : event.key === "ArrowRight" ? shift(1) : event.key === "ArrowUp" ? shift(-7) : event.key === "ArrowDown" ? shift(7) : event.key === "Home" ? shift(-weekday) : event.key === "End" ? shift(6 - weekday) : null;
+    if (target) {
+      event.preventDefault();
+      moveFocus(target, event.shiftKey);
+      return;
+    }
+    if (event.key === "PageUp" || event.key === "PageDown") {
+      event.preventDefault();
+      pageTo(calendar.formatDateKey(addMonthsClamped(day, event.key === "PageUp" ? -1 : 1, dateConfig()), dateConfig()));
+      return;
+    }
+    if (event.key === "Enter" || (event.key === "n" || event.key === "N") && !event.shiftKey) {
+      event.preventDefault();
+      if (!within(selection(), key)) select(key);
+      createOnSelection();
+      return;
+    }
+    if (event.key === " ") {
+      event.preventDefault();
+      if (!within(selection(), key)) select(key);
+      openDayList(key);
+      return;
+    }
+    if (event.key === "Escape") {
+      if (current) closePopover(false);else if (selection()) select(null);else return;
+      event.preventDefault();
+      return;
+    }
+    // The keyboard opens the day's menu where the day is, as a right-click there would.
+    if (hasMenu() && (event.key === "ContextMenu" || event.shiftKey && event.key === "F10")) {
+      event.preventDefault();
+      event.stopPropagation();
+      menuKey = key;
+      const rect = event.currentTarget.getBoundingClientRect();
+      event.currentTarget?.dispatchEvent(new MouseEvent("contextmenu", {
+        bubbles: true,
+        cancelable: true,
+        clientX: rect.left + 12,
+        clientY: rect.top + 12
+      }));
+    }
+  };
+  const fromControl = event => event.target instanceof Element && Boolean(event.target.closest("a,button,[data-calendar-event],.k2b-calendar-month__lanes > *"));
+  const onCellClick = (event, key) => {
+    if (fromControl(event) || performance.now() < suppressClickUntil) return;
+    // A second tap on the one selected day opens the quick create, as a double-click does with a mouse.
+    if (lastPointer === "touch") {
+      const range = selection();
+      if (range && range.first === key && range.last === key && openCreate(range, {
+        active: true
+      })) return;
+      select(key);
+      closePopover(false);
+      return;
+    }
+    if (event.shiftKey && anchorKey()) select(anchorKey(), key);else select(key);
+    focusCell(key);
+    const range = selection();
+    if (range) openCreate(range, {
+      active: false
+    });
+  };
+  const onCellDoubleClick = (event, key) => {
+    if (fromControl(event) || lastPointer === "touch") return;
+    event.preventDefault();
+    if (!within(selection(), key)) select(key);
+    if (popover()?.kind === "create") activateCreate();else createOnSelection();
+  };
+  /** The day under the pointer: a bar that spans several days sits in the cell of its first day. */
+  const pressedKey = (event, key) => dayKeyAtPoint(event.clientX, event.clientY) ?? key;
+  const onCellPointerDown = (event, key) => {
+    lastPointer = event.pointerType;
+    // The menu acts on the pressed day, or on the selection when the press is inside it.
+    menuKey = pressedKey(event, key);
+    if (event.pointerType !== "mouse" || event.button !== 0 || event.shiftKey || fromControl(event)) return;
+    cancelInteraction?.();
+    cancelInteraction = startCalendarPointerSession({
+      event,
+      resolve: (clientX, clientY) => dayKeyAtPoint(clientX, clientY),
+      onActivate: () => {
+        suppressClickUntil = performance.now() + 400;
+        closePopover(false);
+        select(key);
+      },
+      onPreview: current => select(key, current),
+      onCommit: current => {
+        select(key, current);
+        focusCell(current);
+        const range = orderedSelection(key, current);
+        openCreate(range, {
+          active: range.first !== range.last
+        });
+      },
+      onCancel: () => select(key)
+    });
+  };
+  const onMenuOpen = () => {
+    closePopover(false);
+    const key = menuKey;
+    if (key && !within(selection(), key)) select(key);
+  };
+  // Until a day is selected, the menu acts on the day that takes focus, so it is never empty.
+  const menuItems = createMemo(() => {
+    if (!hasMenu()) return [];
+    const range = selection() ?? {
+      first: rovingKey(),
+      last: rovingKey()
+    };
+    const own = props.owner.selectionMenu?.(rangeOf(range), {
+      quickCreate: create => {
+        select(range.first, range.last);
+        if (!openCreate(range, {
+          active: true,
+          create
+        })) props.owner.onSlotActivate?.(rangeOf(range));
+      }
+    }) ?? [];
+    const actions = own.filter(item => !("items" in item));
+    const sections = own.filter(item => "items" in item);
+    const navigation = [...(canOpenView("day") ? [{
+      label: calendarMessages().calendarOpenDay,
+      icon: "ti ti-zoom-in",
+      action: () => openView(range.first, "day")
+    }] : []), ...(canOpenView("week") ? [{
+      label: calendarMessages().calendarOpenWeek,
+      icon: "ti ti-calendar-week",
+      action: () => openView(range.first, "week")
+    }] : []), ...(range.first !== range.last ? [{
+      label: calendarMessages().calendarClearSelection,
+      icon: "ti ti-x",
+      action: () => select(null)
+    }] : [])];
+    const groups = [{
+      items: actions
+    }, ...sections, {
+      items: navigation
+    }].filter(section => section.items.length > 0);
+    // The first group names the days the menu acts on, also when the calendar's own entries are all it has.
+    const [first, ...rest] = groups;
+    return first && !first.sectionLabel ? [{
+      ...first,
+      sectionLabel: selectionHeading(range)
+    }, ...rest] : groups;
+  });
+  const clearMove = () => {
+    setMovePreview(null);
+    setMovingEventId("");
+  };
+  const startMove = (pointerEvent, item, markDragged) => {
+    if (!props.owner.onEventDrop) return;
+    const event = item.event;
+    const grabbed = dayKeyAtPoint(pointerEvent.clientX, pointerEvent.clientY) ?? item.firstKey;
+    const firstDay = startOfDay(event.sourceStartDate, dateConfig());
+    cancelInteraction?.();
+    cancelInteraction = startCalendarPointerSession({
+      event: pointerEvent,
+      resolve: (clientX, clientY) => {
+        const key = dayKeyAtPoint(clientX, clientY);
+        if (!key) return null;
+        // The event moves by as many days as the pointer, wherever on the bar it was grabbed.
+        const day = calendar.addDays(firstDay, dayKeyNumber(key) - dayKeyNumber(grabbed), dateConfig());
+        return {
+          id: event.id,
+          title: event.title,
+          ...moveEventToDay(event, day, dateConfig())
+        };
+      },
+      onActivate: () => {
+        markDragged();
+        suppressClickUntil = performance.now() + 400;
+        closePopover(false);
+        setMovingEventId(event.id);
+      },
+      onPreview: setMovePreview,
+      onCommit: next => {
+        clearMove();
+        if (eventTimeChanged(event, next)) props.owner.onEventDrop?.(event, next);
+      },
+      onCancel: clearMove
+    });
+  };
+
+  // Each week row measures the room below its day numbers; the rows only resize with the grid, never with content.
+  let observer;
+  const lanesOf = new WeakMap();
+  const measure = (element, week) => {
+    const style = getComputedStyle(element);
+    const rootSize = Number.parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+    const capacity = monthLaneCapacity(element.clientHeight, MONTH_LANE_REM * rootSize, MONTH_LANE_GAP_REM * rootSize);
+    setCapacities(current => {
+      if (current[week] === capacity) return current;
+      const next = [...current];
+      next[week] = capacity;
+      return next;
+    });
+    if (week === 0) {
+      setCellWidth(element.clientWidth);
+      setBarFont(`600 ${0.6875 * rootSize}px ${style.fontFamily}`);
+    }
+  };
+  const observeLanes = (element, week) => {
+    lanesOf.set(element, week);
+    if (typeof ResizeObserver === "undefined") return;
+    observer ??= new ResizeObserver(entries => {
+      for (const entry of entries) {
+        const index = lanesOf.get(entry.target);
+        if (index !== undefined) measure(entry.target, index);
+      }
+    });
+    observer.observe(element);
+    onCleanup(() => observer?.unobserve(element));
+  };
+  /** A date hint shows only when the bar holds its title and the hint whole; screen readers get the range anyway. */
+  const hintFits = (title, hint, span) => {
+    const width = cellWidth();
+    const font = barFont();
+    if (width <= 0 || !font) return false;
+    const rootSize = Number.parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+    return textWidth(title, font) + textWidth(hint, font) + MONTH_HINT_SLACK_REM * rootSize <= span * width;
+  };
+  createEffect(() => {
+    const current = popover();
+    const element = popoverElement;
+    if (!element) return;
+    if (!current) {
+      if (element.matches(":popover-open")) element.hidePopover();
+      return;
+    }
+    if (!element.matches(":popover-open")) element.showPopover();
+    const focus = untrack(createActive);
+    queueMicrotask(() => {
+      if (popover() !== current || !element.isConnected) return;
+      placeCalendarPopover(current.anchor, element);
+      if (focus) popoverFocusable()?.focus();
+    });
+  });
+  onMount(() => {
+    const reposition = () => {
+      const current = popover();
+      if (current && popoverElement) placeCalendarPopover(current.anchor, popoverElement);
+    };
+    window.addEventListener("resize", reposition);
+    window.addEventListener("scroll", reposition, true);
+    onCleanup(() => {
+      window.removeEventListener("resize", reposition);
+      window.removeEventListener("scroll", reposition, true);
+    });
+  });
+  onCleanup(() => {
+    cancelInteraction?.();
+    observer?.disconnect();
+  });
+  const dayEntries = dayKey => items().filter(item => item.days.has(dayKey));
+  /** Every bar of a long entry lights up with the one under the pointer. */
+  const linkProps = item => ({
+    onPointerEnter: event => {
+      if (event.pointerType === "mouse") setLinkedItem(item.key);
+    },
+    onPointerLeave: () => {
+      if (linkedItem() === item.key) setLinkedItem("");
+    }
+  });
+  const grid = () => (() => {
+    var _el$88 = _$getNextElement(_tmpl$29),
+      _el$89 = _el$88.firstChild,
+      _el$91 = _el$89.firstChild,
+      [_el$92, _co$22] = _$getNextMarker(_el$91.nextSibling),
+      _el$93 = _el$92.nextSibling,
+      [_el$94, _co$23] = _$getNextMarker(_el$93.nextSibling),
+      _el$95 = _el$89.nextSibling,
+      [_el$96, _co$24] = _$getNextMarker(_el$95.nextSibling);
+    _$insert(_el$89, _$createComponent(Show, {
+      get when() {
+        return props.owner.withWeekNumbers;
+      },
+      get children() {
+        var _el$90 = _$getNextElement(_tmpl$28);
+        _$insert(_el$90, () => calendarMessages().weekShort);
+        return _el$90;
+      }
+    }), _el$92, _co$22);
+    _$insert(_el$89, _$createComponent(For, {
+      get each() {
+        return weekdays();
+      },
+      children: (day, index) => (() => {
+        var _el$97 = _$getNextElement(_tmpl$28);
+        _$insert(_el$97, day);
+        _$effect(() => _$setAttribute(_el$97, "data-weekend", index() > 4 ? "true" : undefined));
+        return _el$97;
+      })()
+    }), _el$94, _co$23);
+    _$insert(_el$88, _$createComponent(For, {
+      get each() {
+        return weeks();
+      },
+      children: (week, weekIndex) => {
+        const fit = createMemo(() => fitMonthWeek(weekLayouts()[weekIndex()] ?? {
+          bars: [],
+          singles: []
+        }, capacities()[weekIndex()] ?? MONTH_DEFAULT_LANES));
+        const weekHref = () => viewHref(week[0].key, "week");
+        const weekNumber = () => zonedWeekNumber(week[0].day, dateConfig());
+        return (() => {
+          var _el$98 = _$getNextElement(_tmpl$31),
+            _el$100 = _el$98.firstChild,
+            [_el$101, _co$25] = _$getNextMarker(_el$100.nextSibling),
+            _el$102 = _el$101.nextSibling,
+            [_el$103, _co$26] = _$getNextMarker(_el$102.nextSibling);
+          _$insert(_el$98, _$createComponent(Show, {
+            get when() {
+              return props.owner.withWeekNumbers;
+            },
+            get children() {
+              var _el$99 = _$getNextElement(_tmpl$30);
+              _$insert(_el$99, _$createComponent(Show, {
+                get when() {
+                  return weekHref();
+                },
+                get fallback() {
+                  return _$createComponent(Show, {
+                    get when() {
+                      return canOpenView("week");
+                    },
+                    get fallback() {
+                      return weekNumber();
+                    },
+                    get children() {
+                      var _el$104 = _$getNextElement(_tmpl$32);
+                      _el$104.$$click = () => openView(week[0].key, "week");
+                      _$insert(_el$104, weekNumber);
+                      _$effect(_p$ => {
+                        var _v$46 = calendarMessages().calendarOpenWeekNumber({
+                            week: weekNumber()
+                          }),
+                          _v$47 = calendarMessages().calendarOpenWeekNumber({
+                            week: weekNumber()
+                          });
+                        _v$46 !== _p$.e && _$setAttribute(_el$104, "title", _p$.e = _v$46);
+                        _v$47 !== _p$.t && _$setAttribute(_el$104, "aria-label", _p$.t = _v$47);
+                        return _p$;
+                      }, {
+                        e: undefined,
+                        t: undefined
+                      });
+                      _$runHydrationEvents();
+                      return _el$104;
+                    }
+                  });
+                },
+                children: href => _$createComponent(CalendarNavigationLink, {
+                  get owner() {
+                    return props.owner;
+                  },
+                  get href() {
+                    return href();
+                  },
+                  get anchorProps() {
+                    return {
+                      class: "k2b-calendar-month__week-link",
+                      tabIndex: -1,
+                      title: calendarMessages().calendarOpenWeekNumber({
+                        week: weekNumber()
+                      }),
+                      "aria-label": calendarMessages().calendarOpenWeekNumber({
+                        week: weekNumber()
+                      })
+                    };
+                  },
+                  get children() {
+                    return weekNumber();
+                  }
+                })
+              }));
+              return _el$99;
+            }
+          }), _el$101, _co$25);
+          _$insert(_el$98, _$createComponent(For, {
+            each: week,
+            children: ({
+              day,
+              key
+            }, column) => {
+              const dayBadge = props.owner.dayBadges?.[key];
+              const sameMonth = calendar.isSameMonth(day, props.date, dateConfig());
+              const label = dayLabel(day);
+              const bars = createMemo(() => fit().bars.filter(bar => bar.startColumn === column()));
+              const cell = () => fit().cells[column()] ?? {
+                top: 0,
+                shown: [],
+                hidden: 0
+              };
+              return (() => {
+                var _el$105 = _$getNextElement(_tmpl$34),
+                  _el$106 = _el$105.firstChild,
+                  _el$107 = _el$106.firstChild,
+                  _el$108 = _el$107.nextSibling,
+                  [_el$109, _co$27] = _$getNextMarker(_el$108.nextSibling),
+                  _el$110 = _el$106.nextSibling,
+                  _el$117 = _el$110.firstChild,
+                  [_el$118, _co$29] = _$getNextMarker(_el$117.nextSibling),
+                  _el$119 = _el$118.nextSibling,
+                  [_el$120, _co$30] = _$getNextMarker(_el$119.nextSibling),
+                  _el$121 = _el$120.nextSibling,
+                  [_el$122, _co$31] = _$getNextMarker(_el$121.nextSibling);
+                _el$105.$$keydown = event => onCellKeyDown(event, key);
+                _el$105.$$contextmenu = event => {
+                  // The pressed day takes the focus, so closing the menu with Escape returns there.
+                  menuKey = pressedKey(event, key);
+                  if (hasMenu()) focusCell(menuKey);
+                };
+                _el$105.$$pointerdown = event => onCellPointerDown(event, key);
+                _el$105.$$dblclick = event => onCellDoubleClick(event, key);
+                _el$105.$$click = event => onCellClick(event, key);
+                _$use(element => cells.set(key, element), _el$105);
+                _$setAttribute(_el$105, "aria-label", label);
+                _$setAttribute(_el$105, "data-calendar-day-key", key);
+                _$setAttribute(_el$105, "data-outside", !sameMonth ? "true" : undefined);
+                _$setAttribute(_el$107, "data-outside", !sameMonth ? "true" : undefined);
+                _$insert(_el$107, () => calendar.formatDayNumber(day, dateConfig()));
+                _$insert(_el$106, _$createComponent(Show, {
+                  when: dayBadge,
+                  children: badge => (() => {
+                    var _el$123 = _$getNextElement(_tmpl$26),
+                      _el$124 = _el$123.firstChild,
+                      [_el$125, _co$32] = _$getNextMarker(_el$124.nextSibling),
+                      _el$126 = _el$125.nextSibling,
+                      [_el$127, _co$33] = _$getNextMarker(_el$126.nextSibling);
+                    _$insert(_el$123, _$createComponent(Show, {
+                      get when() {
+                        return badge().icon;
+                      },
+                      children: icon => (() => {
+                        var _el$128 = _$getNextElement(_tmpl$11);
+                        _$effect(() => _$className(_el$128, `k2b-calendar-month__badge-icon ti ti-${icon()}`));
+                        return _el$128;
+                      })()
+                    }), _el$125, _co$32);
+                    _$insert(_el$123, () => badge().label, _el$127, _co$33);
+                    return _el$123;
+                  })()
+                }), _el$109, _co$27);
+                _$use(element => {
+                  if (column() === 0) observeLanes(element, weekIndex());
+                }, _el$110);
+                _$insert(_el$110, _$createComponent(For, {
+                  get each() {
+                    return bars();
+                  },
+                  children: bar => {
+                    const span = bar.endColumn - bar.startColumn + 1;
+                    const startHint = () => {
+                      if (!bar.continuesBefore) return undefined;
+                      const hint = calendarMessages().calendarContinuesFrom(hintDate(bar.item.firstKey));
+                      return hintFits(bar.item.event.title, hint, span) ? hint : undefined;
+                    };
+                    const endHint = () => {
+                      if (!bar.continuesAfter) return undefined;
+                      const hint = calendarMessages().calendarContinuesUntil(hintDate(bar.item.lastKey));
+                      return hintFits(`${bar.item.event.title}${startHint() ?? ""}`, hint, span) ? hint : undefined;
+                    };
+                    return (() => {
+                      var _el$129 = _$getNextElement(_tmpl$35);
+                      _$spread(_el$129, _$mergeProps({
+                        get style() {
+                          return {
+                            "--k2b-calendar-span": String(span),
+                            "--k2b-calendar-row": String(bar.lane)
+                          };
+                        },
+                        get ["data-linked"]() {
+                          return linkedItem() === bar.item.key && bar.item.firstKey !== bar.item.lastKey ? "true" : undefined;
+                        },
+                        get ["data-continues-before"]() {
+                          return bar.continuesBefore ? "true" : undefined;
+                        },
+                        get ["data-continues-after"]() {
+                          return bar.continuesAfter ? "true" : undefined;
+                        }
+                      }, () => linkProps(bar.item)), false, true);
+                      _$insert(_el$129, _$createComponent(EventChip, {
+                        get event() {
+                          return bar.item.event;
+                        },
+                        get owner() {
+                          return props.owner;
+                        },
+                        get href() {
+                          return eventHref(props.owner, bar.item.event);
+                        },
+                        get label() {
+                          return itemLabel(bar.item);
+                        },
+                        compact: true,
+                        bar: true,
+                        get continuesBefore() {
+                          return bar.continuesBefore;
+                        },
+                        get continuesAfter() {
+                          return bar.continuesAfter;
+                        },
+                        get hintStart() {
+                          return startHint();
+                        },
+                        get hintEnd() {
+                          return endHint();
+                        },
+                        get moving() {
+                          return movingEventId() === bar.item.event.id;
+                        },
+                        get onMovePointerDown() {
+                          return props.owner.onEventDrop ? (pointerEvent, markDragged) => startMove(pointerEvent, bar.item, markDragged) : undefined;
+                        }
+                      }));
+                      _$runHydrationEvents();
+                      return _el$129;
+                    })();
+                  }
+                }), _el$118, _co$29);
+                _$insert(_el$110, _$createComponent(For, {
+                  get each() {
+                    return cell().shown;
+                  },
+                  children: (item, index) => (() => {
+                    var _el$130 = _$getNextElement(_tmpl$36);
+                    _$insert(_el$130, _$createComponent(EventChip, {
+                      get event() {
+                        return item.event;
+                      },
+                      get owner() {
+                        return props.owner;
+                      },
+                      get href() {
+                        return eventHref(props.owner, item.event);
+                      },
+                      compact: true,
+                      get leadingTime() {
+                        return leadingTime(item);
+                      },
+                      get moving() {
+                        return movingEventId() === item.event.id;
+                      },
+                      get onMovePointerDown() {
+                        return props.owner.onEventDrop ? (pointerEvent, markDragged) => startMove(pointerEvent, item, markDragged) : undefined;
+                      }
+                    }));
+                    _$effect(_$p => _$setStyleProperty(_el$130, "--k2b-calendar-row", String(cell().top + index())));
+                    return _el$130;
+                  })()
+                }), _el$120, _co$30);
+                _$insert(_el$110, _$createComponent(Show, {
+                  get when() {
+                    return cell().hidden > 0;
+                  },
+                  get children() {
+                    var _el$111 = _$getNextElement(_tmpl$33),
+                      _el$112 = _el$111.firstChild,
+                      _el$113 = _el$112.nextSibling,
+                      _el$114 = _el$113.firstChild,
+                      _el$115 = _el$114.nextSibling,
+                      [_el$116, _co$28] = _$getNextMarker(_el$115.nextSibling);
+                    _el$111.$$click = () => {
+                      const current = popover();
+                      if (current?.kind === "day" && current.dayKey === key) closePopover(false);else openDayList(key);
+                    };
+                    _$insert(_el$112, () => calendarMessages().calendarMoreEvents({
+                      count: cell().hidden
+                    }));
+                    _$insert(_el$113, () => cell().hidden, _el$116, _co$28);
+                    _$effect(_p$ => {
+                      var _v$48 = String(cell().top + cell().shown.length),
+                        _v$49 = calendarMessages().calendarMoreEventsOn({
+                          count: cell().hidden,
+                          label
+                        }),
+                        _v$50 = (() => {
+                          const current = popover();
+                          return current?.kind === "day" && current.dayKey === key;
+                        })();
+                      _v$48 !== _p$.e && _$setStyleProperty(_el$111, "--k2b-calendar-row", _p$.e = _v$48);
+                      _v$49 !== _p$.t && _$setAttribute(_el$111, "aria-label", _p$.t = _v$49);
+                      _v$50 !== _p$.a && _$setAttribute(_el$111, "aria-expanded", _p$.a = _v$50);
+                      return _p$;
+                    }, {
+                      e: undefined,
+                      t: undefined,
+                      a: undefined
+                    });
+                    _$runHydrationEvents();
+                    return _el$111;
+                  }
+                }), _el$122, _co$31);
+                _$effect(_p$ => {
+                  var _v$51 = rovingKey() === key ? 0 : -1,
+                    _v$52 = within(selection(), key) ? "true" : "false",
+                    _v$53 = key === todayKey() ? "date" : undefined,
+                    _v$54 = column() > 4 ? "true" : undefined,
+                    _v$55 = key < todayKey() ? "true" : undefined,
+                    _v$56 = selectionPart(key),
+                    _v$57 = within(dropRange(), key) ? "true" : undefined,
+                    _v$58 = key === todayKey() ? "true" : undefined;
+                  _v$51 !== _p$.e && _$setAttribute(_el$105, "tabindex", _p$.e = _v$51);
+                  _v$52 !== _p$.t && _$setAttribute(_el$105, "aria-selected", _p$.t = _v$52);
+                  _v$53 !== _p$.a && _$setAttribute(_el$105, "aria-current", _p$.a = _v$53);
+                  _v$54 !== _p$.o && _$setAttribute(_el$105, "data-weekend", _p$.o = _v$54);
+                  _v$55 !== _p$.i && _$setAttribute(_el$105, "data-past", _p$.i = _v$55);
+                  _v$56 !== _p$.n && _$setAttribute(_el$105, "data-selected", _p$.n = _v$56);
+                  _v$57 !== _p$.s && _$setAttribute(_el$105, "data-drop-preview", _p$.s = _v$57);
+                  _v$58 !== _p$.h && _$setAttribute(_el$107, "data-today", _p$.h = _v$58);
+                  return _p$;
+                }, {
+                  e: undefined,
+                  t: undefined,
+                  a: undefined,
+                  o: undefined,
+                  i: undefined,
+                  n: undefined,
+                  s: undefined,
+                  h: undefined
+                });
+                _$runHydrationEvents();
+                return _el$105;
+              })();
+            }
+          }), _el$103, _co$26);
+          _$effect(() => _$setAttribute(_el$98, "data-week-numbers", props.owner.withWeekNumbers ? "true" : undefined));
+          return _el$98;
+        })();
+      }
+    }), _el$96, _co$24);
+    _$effect(_p$ => {
+      var _v$43 = formatMonth(props.date, dateConfig()),
+        _v$44 = `auto repeat(${weeks().length}, minmax(5rem, 1fr))`,
+        _v$45 = props.owner.withWeekNumbers ? "true" : undefined;
+      _v$43 !== _p$.e && _$setAttribute(_el$88, "aria-label", _p$.e = _v$43);
+      _v$44 !== _p$.t && _$setStyleProperty(_el$88, "grid-template-rows", _p$.t = _v$44);
+      _v$45 !== _p$.a && _$setAttribute(_el$89, "data-week-numbers", _p$.a = _v$45);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined
+    });
+    return _el$88;
   })();
+  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 (() => {
+      var _el$131 = _$getNextElement(_tmpl$39),
+        _el$132 = _el$131.firstChild,
+        _el$140 = _el$132.nextSibling,
+        [_el$141, _co$36] = _$getNextMarker(_el$140.nextSibling),
+        _el$134 = _el$141.nextSibling,
+        _el$136 = _el$134.firstChild,
+        [_el$137, _co$34] = _$getNextMarker(_el$136.nextSibling),
+        _el$138 = _el$137.nextSibling,
+        [_el$139, _co$35] = _$getNextMarker(_el$138.nextSibling);
+      _$insert(_el$132, () => dayLabel(day));
+      _$insert(_el$131, _$createComponent(Show, {
+        get when() {
+          return entries().length > 0;
+        },
+        get fallback() {
+          return (() => {
+            var _el$142 = _$getNextElement(_tmpl$40);
+            _$insert(_el$142, () => calendarMessages().calendarNothingPlanned);
+            return _el$142;
+          })();
+        },
+        get children() {
+          var _el$133 = _$getNextElement(_tmpl$37);
+          _$insert(_el$133, _$createComponent(For, {
+            get each() {
+              return entries();
+            },
+            children: item => (() => {
+              var _el$143 = _$getNextElement(_tmpl$41);
+              _$insert(_el$143, _$createComponent(EventChip, {
+                get event() {
+                  return item.event;
+                },
+                get owner() {
+                  return props.owner;
+                },
+                get href() {
+                  return eventHref(props.owner, item.event);
+                },
+                get label() {
+                  return itemLabel(item);
+                },
+                compact: true,
+                get bar() {
+                  return item.bar;
+                },
+                get leadingTime() {
+                  return leadingTime(item);
+                }
+              }));
+              return _el$143;
+            })()
+          }));
+          return _el$133;
+        }
+      }), _el$141, _co$36);
+      _$insert(_el$134, _$createComponent(Show, {
+        when: href,
+        get fallback() {
+          return _$createComponent(Show, {
+            get when() {
+              return canOpenView("day");
+            },
+            get children() {
+              return _$createComponent(Button, {
+                type: "button",
+                variant: "ghost",
+                size: "sm",
+                onClick: () => openView(dayKey, "day"),
+                get children() {
+                  return [_$getNextElement(_tmpl$42), _$memo(() => calendarMessages().calendarOpenDay)];
+                }
+              });
+            }
+          });
+        },
+        children: dayHref => _$createComponent(CalendarNavigationLink, {
+          get owner() {
+            return props.owner;
+          },
+          get href() {
+            return dayHref();
+          },
+          anchorProps: {
+            class: "k2b-button",
+            "data-variant": "ghost",
+            "data-size": "sm"
+          },
+          get children() {
+            return [_$getNextElement(_tmpl$42), _$memo(() => calendarMessages().calendarOpenDay)];
+          }
+        })
+      }), _el$137, _co$34);
+      _$insert(_el$134, _$createComponent(Show, {
+        get when() {
+          return props.owner.renderQuickCreate;
+        },
+        get children() {
+          return _$createComponent(Button, {
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            onClick: () => {
+              select(dayKey);
+              openCreate({
+                first: dayKey,
+                last: dayKey
+              }, {
+                active: true
+              });
+            },
+            get children() {
+              return [_$getNextElement(_tmpl$38), _$memo(() => calendarMessages().calendarNewEvent)];
+            }
+          });
+        }
+      }), _el$139, _co$35);
+      return _el$131;
+    })();
+  };
+  return [_$createComponent(Show, {
+    get when() {
+      return hasMenu();
+    },
+    get fallback() {
+      return grid();
+    },
+    get children() {
+      return _$createComponent(GestureMenu, {
+        get items() {
+          return menuItems();
+        },
+        get label() {
+          return calendarMessages().calendarSelectionActions;
+        },
+        tabIndex: -1,
+        onOpen: onMenuOpen,
+        "class": "k2b-calendar-month-menu",
+        get children() {
+          return grid();
+        }
+      });
+    }
+  }), (() => {
+    var _el$146 = _$getNextElement(_tmpl$43);
+    _el$146.addEventListener("toggle", event => {
+      // A late close of the popover that another opening already replaced keeps the new one. Focus returns to the
+      // grid only from inside the popover, never from what a click outside it chose.
+      if (event.newState !== "closed" || !popover() || event.currentTarget.matches(":popover-open")) return;
+      const inside = event.currentTarget.contains(document.activeElement) || document.activeElement === document.body;
+      closePopover(inside);
+    });
+    _el$146.$$focusin = () => setCreateActive(true);
+    var _ref$ = popoverElement;
+    typeof _ref$ === "function" ? _$use(_ref$, _el$146) : popoverElement = _el$146;
+    _$insert(_el$146, _$createComponent(Show, {
+      get when() {
+        return popover();
+      },
+      keyed: true,
+      children: value => value.kind === "create" ? props.owner.renderQuickCreate?.(rangeOf(value.range), {
+        create: value.create,
+        close: () => {
+          if (popover() === value) closePopover();
+        }
+      }) : dayList(value.dayKey)
+    }));
+    _$effect(_p$ => {
+      var _v$59 = (() => {
+          const current = popover();
+          if (current?.kind === "day") return dayLabel(parseKey(current.dayKey));
+          return calendarMessages().calendarQuickCreate;
+        })(),
+        _v$60 = popover()?.kind,
+        _v$61 = popover()?.kind === "create" && !createActive() ? "true" : undefined;
+      _v$59 !== _p$.e && _$setAttribute(_el$146, "aria-label", _p$.e = _v$59);
+      _v$60 !== _p$.t && _$setAttribute(_el$146, "data-kind", _p$.t = _v$60);
+      _v$61 !== _p$.a && _$setAttribute(_el$146, "data-quiet", _p$.a = _v$61);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined
+    });
+    _$runHydrationEvents();
+    return _el$146;
+  })()];
 };
 const TimeGridView = props => {
-  const messages = useUiMessages();
+  const calendarMessages = useCalendarMessages();
   const dateConfig = createMemo(() => ownerDateConfig(props.owner));
   const gridStartHour = () => props.owner.visibleStartHour ?? 0;
   const gridEndHour = () => props.owner.visibleEndHour ?? 23;
@@ -1356,19 +2737,19 @@ const TimeGridView = props => {
     });
   });
   return (() => {
-    var _el$78 = _$getNextElement(_tmpl$24),
-      _el$79 = _el$78.firstChild,
-      _el$80 = _el$79.firstChild,
-      _el$81 = _el$80.nextSibling,
-      [_el$82, _co$20] = _$getNextMarker(_el$81.nextSibling),
-      _el$92 = _el$79.nextSibling,
-      [_el$93, _co$23] = _$getNextMarker(_el$92.nextSibling),
-      _el$87 = _el$93.nextSibling,
-      _el$88 = _el$87.firstChild,
-      _el$89 = _el$88.firstChild,
-      _el$90 = _el$89.nextSibling,
-      [_el$91, _co$22] = _$getNextMarker(_el$90.nextSibling);
-    _$insert(_el$79, _$createComponent(For, {
+    var _el$147 = _$getNextElement(_tmpl$45),
+      _el$148 = _el$147.firstChild,
+      _el$149 = _el$148.firstChild,
+      _el$150 = _el$149.nextSibling,
+      [_el$151, _co$37] = _$getNextMarker(_el$150.nextSibling),
+      _el$161 = _el$148.nextSibling,
+      [_el$162, _co$40] = _$getNextMarker(_el$161.nextSibling),
+      _el$156 = _el$162.nextSibling,
+      _el$157 = _el$156.firstChild,
+      _el$158 = _el$157.firstChild,
+      _el$159 = _el$158.nextSibling,
+      [_el$160, _co$39] = _$getNextMarker(_el$159.nextSibling);
+    _$insert(_el$148, _$createComponent(For, {
       get each() {
         return props.days;
       },
@@ -1387,47 +2768,47 @@ const TimeGridView = props => {
           },
           get children() {
             return [(() => {
-              var _el$94 = _$getNextElement(_tmpl$25);
-              _$insert(_el$94, () => formatDay(day, dateConfig()));
-              _$effect(() => _$setAttribute(_el$94, "data-today", today() ? "true" : undefined));
-              return _el$94;
+              var _el$163 = _$getNextElement(_tmpl$46);
+              _$insert(_el$163, () => formatDay(day, dateConfig()));
+              _$effect(() => _$setAttribute(_el$163, "data-today", today() ? "true" : undefined));
+              return _el$163;
             })(), _$createComponent(Show, {
               when: dayBadge,
               children: badge => (() => {
-                var _el$95 = _$getNextElement(_tmpl$26),
-                  _el$96 = _el$95.firstChild,
-                  [_el$97, _co$24] = _$getNextMarker(_el$96.nextSibling),
-                  _el$98 = _el$97.nextSibling,
-                  [_el$99, _co$25] = _$getNextMarker(_el$98.nextSibling);
-                _$insert(_el$95, _$createComponent(Show, {
+                var _el$164 = _$getNextElement(_tmpl$47),
+                  _el$165 = _el$164.firstChild,
+                  [_el$166, _co$41] = _$getNextMarker(_el$165.nextSibling),
+                  _el$167 = _el$166.nextSibling,
+                  [_el$168, _co$42] = _$getNextMarker(_el$167.nextSibling);
+                _$insert(_el$164, _$createComponent(Show, {
                   get when() {
                     return badge().icon;
                   },
                   children: icon => (() => {
-                    var _el$100 = _$getNextElement(_tmpl$0);
-                    _$effect(() => _$className(_el$100, `k2b-calendar-time-grid__badge-icon ti ti-${icon()}`));
-                    return _el$100;
+                    var _el$169 = _$getNextElement(_tmpl$11);
+                    _$effect(() => _$className(_el$169, `k2b-calendar-time-grid__badge-icon ti ti-${icon()}`));
+                    return _el$169;
                   })()
-                }), _el$97, _co$24);
-                _$insert(_el$95, () => badge().label, _el$99, _co$25);
-                return _el$95;
+                }), _el$166, _co$41);
+                _$insert(_el$164, () => badge().label, _el$168, _co$42);
+                return _el$164;
               })()
             })];
           }
         });
       }
-    }), _el$82, _co$20);
-    _$insert(_el$78, _$createComponent(Show, {
+    }), _el$151, _co$37);
+    _$insert(_el$147, _$createComponent(Show, {
       get when() {
         return !props.owner.hideAllDay;
       },
       get children() {
-        var _el$83 = _$getNextElement(_tmpl$23),
-          _el$84 = _el$83.firstChild,
-          _el$85 = _el$84.nextSibling,
-          [_el$86, _co$21] = _$getNextMarker(_el$85.nextSibling);
-        _$insert(_el$84, () => props.labels.allDay);
-        _$insert(_el$83, _$createComponent(For, {
+        var _el$152 = _$getNextElement(_tmpl$44),
+          _el$153 = _el$152.firstChild,
+          _el$154 = _el$153.nextSibling,
+          [_el$155, _co$38] = _$getNextMarker(_el$154.nextSibling);
+        _$insert(_el$153, () => props.labels.allDay);
+        _$insert(_el$152, _$createComponent(For, {
           get each() {
             return props.days;
           },
@@ -1436,14 +2817,14 @@ const TimeGridView = props => {
             const allDay = () => eventsByDay().get(dayKey)?.allDay ?? [];
             const previewAllDay = previewEvents().filter(event => event.dayKey === dayKey && event.allDay);
             return (() => {
-              var _el$101 = _$getNextElement(_tmpl$27),
-                _el$102 = _el$101.firstChild,
-                _el$103 = _el$102.firstChild,
-                [_el$104, _co$26] = _$getNextMarker(_el$103.nextSibling),
-                _el$105 = _el$104.nextSibling,
-                [_el$106, _co$27] = _$getNextMarker(_el$105.nextSibling);
-              _$setAttribute(_el$101, "data-calendar-day-key", dayKey);
-              _$spread(_el$101, _$mergeProps({
+              var _el$170 = _$getNextElement(_tmpl$48),
+                _el$171 = _el$170.firstChild,
+                _el$172 = _el$171.firstChild,
+                [_el$173, _co$43] = _$getNextMarker(_el$172.nextSibling),
+                _el$174 = _el$173.nextSibling,
+                [_el$175, _co$44] = _$getNextMarker(_el$174.nextSibling);
+              _$setAttribute(_el$170, "data-calendar-day-key", dayKey);
+              _$spread(_el$170, _$mergeProps({
                 get ["data-drop-preview"]() {
                   return timePreview()?.allDay && calendar.formatDateKey(timePreview().start, dateConfig()) === dayKey ? "true" : undefined;
                 },
@@ -1458,15 +2839,15 @@ const TimeGridView = props => {
                   allDay: true
                 };
               }, () => performance.now() < suppressSlotClickUntil)), false, true);
-              _$insert(_el$102, _$createComponent(For, {
+              _$insert(_el$171, _$createComponent(For, {
                 each: previewAllDay,
                 children: event => (() => {
-                  var _el$107 = _$getNextElement(_tmpl$18);
-                  _$insert(_el$107, () => event.title);
-                  return _el$107;
+                  var _el$176 = _$getNextElement(_tmpl$23);
+                  _$insert(_el$176, () => event.title);
+                  return _el$176;
                 })()
-              }), _el$104, _co$26);
-              _$insert(_el$102, _$createComponent(For, {
+              }), _el$173, _co$43);
+              _$insert(_el$171, _$createComponent(For, {
                 get each() {
                   return allDay();
                 },
@@ -1486,49 +2867,49 @@ const TimeGridView = props => {
                     return props.owner.onEventDrop ? (pointerEvent, markDragged) => startAllDayMove(pointerEvent, event, markDragged) : undefined;
                   }
                 })
-              }), _el$106, _co$27);
+              }), _el$175, _co$44);
               _$runHydrationEvents();
-              return _el$101;
+              return _el$170;
             })();
           }
-        }), _el$86, _co$21);
+        }), _el$155, _co$38);
         _$effect(_p$ => {
-          var _v$34 = `4rem repeat(${props.days.length}, minmax(0, 1fr))`,
-            _v$35 = `${props.owner.allDayMaxHeightRem ?? 7}rem`;
-          _v$34 !== _p$.e && _$setStyleProperty(_el$83, "grid-template-columns", _p$.e = _v$34);
-          _v$35 !== _p$.t && _$setStyleProperty(_el$83, "max-height", _p$.t = _v$35);
+          var _v$62 = `4rem repeat(${props.days.length}, minmax(0, 1fr))`,
+            _v$63 = `${props.owner.allDayMaxHeightRem ?? 7}rem`;
+          _v$62 !== _p$.e && _$setStyleProperty(_el$152, "grid-template-columns", _p$.e = _v$62);
+          _v$63 !== _p$.t && _$setStyleProperty(_el$152, "max-height", _p$.t = _v$63);
           return _p$;
         }, {
           e: undefined,
           t: undefined
         });
-        return _el$83;
+        return _el$152;
       }
-    }), _el$93, _co$23);
-    var _ref$ = scrollContainer;
-    typeof _ref$ === "function" ? _$use(_ref$, _el$87) : scrollContainer = _el$87;
-    var _ref$2 = timeGrid;
-    typeof _ref$2 === "function" ? _$use(_ref$2, _el$88) : timeGrid = _el$88;
-    var _ref$3 = timeGutter;
-    typeof _ref$3 === "function" ? _$use(_ref$3, _el$89) : timeGutter = _el$89;
-    _$insert(_el$89, _$createComponent(For, {
+    }), _el$162, _co$40);
+    var _ref$2 = scrollContainer;
+    typeof _ref$2 === "function" ? _$use(_ref$2, _el$156) : scrollContainer = _el$156;
+    var _ref$3 = timeGrid;
+    typeof _ref$3 === "function" ? _$use(_ref$3, _el$157) : timeGrid = _el$157;
+    var _ref$4 = timeGutter;
+    typeof _ref$4 === "function" ? _$use(_ref$4, _el$158) : timeGutter = _el$158;
+    _$insert(_el$158, _$createComponent(For, {
       get each() {
         return hours();
       },
       children: hour => (() => {
-        var _el$108 = _$getNextElement(_tmpl$28),
-          _el$110 = _el$108.firstChild,
-          [_el$111, _co$28] = _$getNextMarker(_el$110.nextSibling),
-          _el$109 = _el$111.nextSibling;
+        var _el$177 = _$getNextElement(_tmpl$49),
+          _el$179 = _el$177.firstChild,
+          [_el$180, _co$45] = _$getNextMarker(_el$179.nextSibling),
+          _el$178 = _el$180.nextSibling;
         _$use(element => {
           if (hour === businessStartHour()) defaultHourMarker = element;
-        }, _el$108);
-        _$insert(_el$108, () => `${hour}`.padStart(2, "0"), _el$111, _co$28);
-        _$effect(() => _$setAttribute(_el$108, "data-outside-business", hour < businessStartHour() || hour > businessEndHour() ? "true" : undefined));
-        return _el$108;
+        }, _el$177);
+        _$insert(_el$177, () => `${hour}`.padStart(2, "0"), _el$180, _co$45);
+        _$effect(() => _$setAttribute(_el$177, "data-outside-business", hour < businessStartHour() || hour > businessEndHour() ? "true" : undefined));
+        return _el$177;
       })()
     }));
-    _$insert(_el$88, _$createComponent(For, {
+    _$insert(_el$157, _$createComponent(For, {
       get each() {
         return props.days;
       },
@@ -1536,34 +2917,34 @@ const TimeGridView = props => {
         const dayKey = calendar.formatDateKey(day, dateConfig());
         const layouts = createMemo(() => timedEventLayouts(eventsByDay().get(dayKey)?.timed ?? []));
         return (() => {
-          var _el$112 = _$getNextElement(_tmpl$30),
-            _el$114 = _el$112.firstChild,
-            [_el$115, _co$29] = _$getNextMarker(_el$114.nextSibling),
-            _el$116 = _el$115.nextSibling,
-            [_el$117, _co$30] = _$getNextMarker(_el$116.nextSibling),
-            _el$118 = _el$117.nextSibling,
-            [_el$119, _co$31] = _$getNextMarker(_el$118.nextSibling),
-            _el$120 = _el$119.nextSibling,
-            [_el$121, _co$32] = _$getNextMarker(_el$120.nextSibling),
-            _el$122 = _el$121.nextSibling,
-            [_el$123, _co$33] = _$getNextMarker(_el$122.nextSibling);
-          _$insert(_el$112, _$createComponent(Show, {
+          var _el$181 = _$getNextElement(_tmpl$51),
+            _el$183 = _el$181.firstChild,
+            [_el$184, _co$46] = _$getNextMarker(_el$183.nextSibling),
+            _el$185 = _el$184.nextSibling,
+            [_el$186, _co$47] = _$getNextMarker(_el$185.nextSibling),
+            _el$187 = _el$186.nextSibling,
+            [_el$188, _co$48] = _$getNextMarker(_el$187.nextSibling),
+            _el$189 = _el$188.nextSibling,
+            [_el$190, _co$49] = _$getNextMarker(_el$189.nextSibling),
+            _el$191 = _el$190.nextSibling,
+            [_el$192, _co$50] = _$getNextMarker(_el$191.nextSibling);
+          _$insert(_el$181, _$createComponent(Show, {
             get when() {
               return currentTimeLine(day) !== null;
             },
             get children() {
-              var _el$113 = _$getNextElement(_tmpl$29);
-              _$effect(_$p => _$setStyleProperty(_el$113, "top", `${currentTimeLine(day) ?? 0}%`));
-              return _el$113;
+              var _el$182 = _$getNextElement(_tmpl$50);
+              _$effect(_$p => _$setStyleProperty(_el$182, "top", `${currentTimeLine(day) ?? 0}%`));
+              return _el$182;
             }
-          }), _el$115, _co$29);
-          _$insert(_el$112, _$createComponent(For, {
+          }), _el$184, _co$46);
+          _$insert(_el$181, _$createComponent(For, {
             get each() {
               return hours();
             },
             children: hour => (() => {
-              var _el$124 = _$getNextElement(_tmpl$31);
-              _$spread(_el$124, _$mergeProps({
+              var _el$193 = _$getNextElement(_tmpl$52);
+              _$spread(_el$193, _$mergeProps({
                 get ["data-outside-business"]() {
                   return hour < businessStartHour() || hour > businessEndHour() ? "true" : undefined;
                 },
@@ -1581,10 +2962,10 @@ const TimeGridView = props => {
                 "onPointerDown": startRange
               }), false, false);
               _$runHydrationEvents();
-              return _el$124;
+              return _el$193;
             })()
-          }), _el$117, _co$30);
-          _$insert(_el$112, _$createComponent(For, {
+          }), _el$186, _co$47);
+          _$insert(_el$181, _$createComponent(For, {
             get each() {
               return previewEvents().filter(event => event.dayKey === dayKey && !event.allDay);
             },
@@ -1592,44 +2973,44 @@ const TimeGridView = props => {
               const layout = eventLayout(event);
               const short = event.endDate.getTime() - event.startDate.getTime() < 60 * 60_000;
               return (() => {
-                var _el$125 = _$getNextElement(_tmpl$33),
-                  _el$126 = _el$125.firstChild,
-                  _el$134 = _el$126.firstChild,
-                  [_el$135, _co$36] = _$getNextMarker(_el$134.nextSibling),
-                  _el$128 = _el$135.nextSibling,
-                  _el$130 = _el$128.firstChild,
-                  [_el$131, _co$34] = _$getNextMarker(_el$130.nextSibling),
-                  _el$129 = _el$131.nextSibling,
-                  _el$132 = _el$129.nextSibling,
-                  [_el$133, _co$35] = _$getNextMarker(_el$132.nextSibling);
-                _$setAttribute(_el$125, "data-short", short ? "true" : undefined);
-                _$insert(_el$126, _$createComponent(Show, {
+                var _el$194 = _$getNextElement(_tmpl$54),
+                  _el$195 = _el$194.firstChild,
+                  _el$203 = _el$195.firstChild,
+                  [_el$204, _co$53] = _$getNextMarker(_el$203.nextSibling),
+                  _el$197 = _el$204.nextSibling,
+                  _el$199 = _el$197.firstChild,
+                  [_el$200, _co$51] = _$getNextMarker(_el$199.nextSibling),
+                  _el$198 = _el$200.nextSibling,
+                  _el$201 = _el$198.nextSibling,
+                  [_el$202, _co$52] = _$getNextMarker(_el$201.nextSibling);
+                _$setAttribute(_el$194, "data-short", short ? "true" : undefined);
+                _$insert(_el$195, _$createComponent(Show, {
                   get when() {
                     return event.title;
                   },
                   get children() {
-                    var _el$127 = _$getNextElement(_tmpl$32);
-                    _$insert(_el$127, () => event.title);
-                    return _el$127;
+                    var _el$196 = _$getNextElement(_tmpl$53);
+                    _$insert(_el$196, () => event.title);
+                    return _el$196;
                   }
-                }), _el$135, _co$36);
-                _$insert(_el$128, () => formatTime(event.startDate, dateConfig()), _el$131, _co$34);
-                _$insert(_el$128, () => formatTime(event.endDate, dateConfig()), _el$133, _co$35);
+                }), _el$204, _co$53);
+                _$insert(_el$197, () => formatTime(event.startDate, dateConfig()), _el$200, _co$51);
+                _$insert(_el$197, () => formatTime(event.endDate, dateConfig()), _el$202, _co$52);
                 _$effect(_p$ => {
-                  var _v$41 = `${layout.top}%`,
-                    _v$42 = `${layout.height}%`;
-                  _v$41 !== _p$.e && _$setStyleProperty(_el$125, "top", _p$.e = _v$41);
-                  _v$42 !== _p$.t && _$setStyleProperty(_el$125, "height", _p$.t = _v$42);
+                  var _v$69 = `${layout.top}%`,
+                    _v$70 = `${layout.height}%`;
+                  _v$69 !== _p$.e && _$setStyleProperty(_el$194, "top", _p$.e = _v$69);
+                  _v$70 !== _p$.t && _$setStyleProperty(_el$194, "height", _p$.t = _v$70);
                   return _p$;
                 }, {
                   e: undefined,
                   t: undefined
                 });
-                return _el$125;
+                return _el$194;
               })();
             }
-          }), _el$119, _co$31);
-          _$insert(_el$112, _$createComponent(For, {
+          }), _el$188, _co$48);
+          _$insert(_el$181, _$createComponent(For, {
             get each() {
               return layouts();
             },
@@ -1672,13 +3053,13 @@ const TimeGridView = props => {
                 });
               };
               return (() => {
-                var _el$136 = _$getNextElement(_tmpl$35),
-                  _el$137 = _el$136.firstChild,
-                  _el$139 = _el$137.firstChild,
-                  [_el$140, _co$37] = _$getNextMarker(_el$139.nextSibling),
-                  _el$141 = _el$140.nextSibling,
-                  [_el$142, _co$38] = _$getNextMarker(_el$141.nextSibling);
-                _$insert(_el$137, _$createComponent(EventChip, {
+                var _el$205 = _$getNextElement(_tmpl$56),
+                  _el$206 = _el$205.firstChild,
+                  _el$208 = _el$206.firstChild,
+                  [_el$209, _co$54] = _$getNextMarker(_el$208.nextSibling),
+                  _el$210 = _el$209.nextSibling,
+                  [_el$211, _co$55] = _$getNextMarker(_el$210.nextSibling);
+                _$insert(_el$206, _$createComponent(EventChip, {
                   event: event,
                   get owner() {
                     return props.owner;
@@ -1693,32 +3074,32 @@ const TimeGridView = props => {
                   get onMovePointerDown() {
                     return props.owner.onEventDrop ? (pointerEvent, markDragged) => startTimedMove(pointerEvent, event, markDragged) : undefined;
                   }
-                }), _el$140, _co$37);
-                _$insert(_el$137, _$createComponent(Show, {
+                }), _el$209, _co$54);
+                _$insert(_el$206, _$createComponent(Show, {
                   get when() {
                     return props.owner.onEventResize;
                   },
                   get children() {
-                    var _el$138 = _$getNextElement(_tmpl$34);
-                    _el$138.addEventListener("dragstart", event => event.preventDefault());
-                    _el$138.$$pointerdown = resizeStart;
-                    _$setAttribute(_el$138, "draggable", false);
-                    _$effect(() => _$setAttribute(_el$138, "aria-label", messages().resizeEvent));
+                    var _el$207 = _$getNextElement(_tmpl$55);
+                    _el$207.addEventListener("dragstart", event => event.preventDefault());
+                    _el$207.$$pointerdown = resizeStart;
+                    _$setAttribute(_el$207, "draggable", false);
+                    _$effect(() => _$setAttribute(_el$207, "aria-label", calendarMessages().resizeEvent));
                     _$runHydrationEvents();
-                    return _el$138;
+                    return _el$207;
                   }
-                }), _el$142, _co$38);
+                }), _el$211, _co$55);
                 _$effect(_p$ => {
-                  var _v$43 = `${layout.top}%`,
-                    _v$44 = `${layout.height}%`,
-                    _v$45 = position.left,
-                    _v$46 = position.width,
-                    _v$47 = String(20 + layoutItem.lane);
-                  _v$43 !== _p$.e && _$setStyleProperty(_el$136, "top", _p$.e = _v$43);
-                  _v$44 !== _p$.t && _$setStyleProperty(_el$136, "height", _p$.t = _v$44);
-                  _v$45 !== _p$.a && _$setStyleProperty(_el$136, "left", _p$.a = _v$45);
-                  _v$46 !== _p$.o && _$setStyleProperty(_el$136, "width", _p$.o = _v$46);
-                  _v$47 !== _p$.i && _$setStyleProperty(_el$136, "z-index", _p$.i = _v$47);
+                  var _v$71 = `${layout.top}%`,
+                    _v$72 = `${layout.height}%`,
+                    _v$73 = position.left,
+                    _v$74 = position.width,
+                    _v$75 = String(20 + layoutItem.lane);
+                  _v$71 !== _p$.e && _$setStyleProperty(_el$205, "top", _p$.e = _v$71);
+                  _v$72 !== _p$.t && _$setStyleProperty(_el$205, "height", _p$.t = _v$72);
+                  _v$73 !== _p$.a && _$setStyleProperty(_el$205, "left", _p$.a = _v$73);
+                  _v$74 !== _p$.o && _$setStyleProperty(_el$205, "width", _p$.o = _v$74);
+                  _v$75 !== _p$.i && _$setStyleProperty(_el$205, "z-index", _p$.i = _v$75);
                   return _p$;
                 }, {
                   e: undefined,
@@ -1727,11 +3108,11 @@ const TimeGridView = props => {
                   o: undefined,
                   i: undefined
                 });
-                return _el$136;
+                return _el$205;
               })();
             }
-          }), _el$121, _co$32);
-          _$insert(_el$112, _$createComponent(For, {
+          }), _el$190, _co$49);
+          _$insert(_el$181, _$createComponent(For, {
             get each() {
               return overflowLayouts(layouts());
             },
@@ -1740,27 +3121,27 @@ const TimeGridView = props => {
               const key = `${dayKey}-${overflow.groupId}`;
               const hiddenTitle = () => overflow.hiddenEvents.map(event => `${formatTime(event.startDate, dateConfig())} ${event.title}`).join("\n");
               return [(() => {
-                var _el$143 = _$getNextElement(_tmpl$36),
-                  _el$144 = _el$143.firstChild,
-                  _el$145 = _el$144.firstChild,
-                  _el$146 = _el$145.nextSibling,
-                  [_el$147, _co$39] = _$getNextMarker(_el$146.nextSibling);
-                _el$143.$$click = event => {
+                var _el$212 = _$getNextElement(_tmpl$57),
+                  _el$213 = _el$212.firstChild,
+                  _el$214 = _el$213.firstChild,
+                  _el$215 = _el$214.nextSibling,
+                  [_el$216, _co$56] = _$getNextMarker(_el$215.nextSibling);
+                _el$212.$$click = event => {
                   event.stopPropagation();
                   setExpandedOverflow(expandedOverflow() === key ? "" : key);
                 };
-                _$insert(_el$144, () => overflow.hiddenEvents.length, _el$147, _co$39);
+                _$insert(_el$213, () => overflow.hiddenEvents.length, _el$216, _co$56);
                 _$effect(_p$ => {
-                  var _v$48 = `${layout.top}%`,
-                    _v$49 = `${layout.height}%`,
-                    _v$50 = hiddenTitle(),
-                    _v$51 = messages().hiddenOverlappingEvents({
+                  var _v$76 = `${layout.top}%`,
+                    _v$77 = `${layout.height}%`,
+                    _v$78 = hiddenTitle(),
+                    _v$79 = calendarMessages().hiddenOverlappingEvents({
                       count: overflow.hiddenEvents.length
                     });
-                  _v$48 !== _p$.e && _$setStyleProperty(_el$143, "top", _p$.e = _v$48);
-                  _v$49 !== _p$.t && _$setStyleProperty(_el$143, "height", _p$.t = _v$49);
-                  _v$50 !== _p$.a && _$setAttribute(_el$143, "title", _p$.a = _v$50);
-                  _v$51 !== _p$.o && _$setAttribute(_el$143, "aria-label", _p$.o = _v$51);
+                  _v$76 !== _p$.e && _$setStyleProperty(_el$212, "top", _p$.e = _v$76);
+                  _v$77 !== _p$.t && _$setStyleProperty(_el$212, "height", _p$.t = _v$77);
+                  _v$78 !== _p$.a && _$setAttribute(_el$212, "title", _p$.a = _v$78);
+                  _v$79 !== _p$.o && _$setAttribute(_el$212, "aria-label", _p$.o = _v$79);
                   return _p$;
                 }, {
                   e: undefined,
@@ -1769,24 +3150,24 @@ const TimeGridView = props => {
                   o: undefined
                 });
                 _$runHydrationEvents();
-                return _el$143;
+                return _el$212;
               })(), _$createComponent(Show, {
                 get when() {
                   return expandedOverflow() === key;
                 },
                 get children() {
-                  var _el$148 = _$getNextElement(_tmpl$37),
-                    _el$149 = _el$148.firstChild,
-                    _el$151 = _el$149.firstChild,
-                    [_el$152, _co$40] = _$getNextMarker(_el$151.nextSibling),
-                    _el$150 = _el$152.nextSibling,
-                    _el$153 = _el$150.nextSibling,
-                    [_el$154, _co$41] = _$getNextMarker(_el$153.nextSibling),
-                    _el$155 = _el$149.nextSibling,
-                    [_el$156, _co$42] = _$getNextMarker(_el$155.nextSibling);
-                  _$insert(_el$149, () => formatTime(overflow.groupStartDate, dateConfig()), _el$152, _co$40);
-                  _$insert(_el$149, () => formatTime(overflow.groupEndDate, dateConfig()), _el$154, _co$41);
-                  _$insert(_el$148, _$createComponent(For, {
+                  var _el$217 = _$getNextElement(_tmpl$58),
+                    _el$218 = _el$217.firstChild,
+                    _el$220 = _el$218.firstChild,
+                    [_el$221, _co$57] = _$getNextMarker(_el$220.nextSibling),
+                    _el$219 = _el$221.nextSibling,
+                    _el$222 = _el$219.nextSibling,
+                    [_el$223, _co$58] = _$getNextMarker(_el$222.nextSibling),
+                    _el$224 = _el$218.nextSibling,
+                    [_el$225, _co$59] = _$getNextMarker(_el$224.nextSibling);
+                  _$insert(_el$218, () => formatTime(overflow.groupStartDate, dateConfig()), _el$221, _co$57);
+                  _$insert(_el$218, () => formatTime(overflow.groupEndDate, dateConfig()), _el$223, _co$58);
+                  _$insert(_el$217, _$createComponent(For, {
                     get each() {
                       return overflow.hiddenEvents;
                     },
@@ -1800,41 +3181,41 @@ const TimeGridView = props => {
                       },
                       compact: true
                     })
-                  }), _el$156, _co$42);
-                  _$effect(_$p => _$setStyleProperty(_el$148, "top", `${layout.top}%`));
-                  return _el$148;
+                  }), _el$225, _co$59);
+                  _$effect(_$p => _$setStyleProperty(_el$217, "top", `${layout.top}%`));
+                  return _el$217;
                 }
               })];
             }
-          }), _el$123, _co$33);
+          }), _el$192, _co$50);
           _$effect(_p$ => {
-            var _v$39 = dayColumnMinWidth(layouts()),
-              _v$40 = `repeat(${hours().length}, minmax(4rem, 1fr))`;
-            _v$39 !== _p$.e && _$setStyleProperty(_el$112, "min-width", _p$.e = _v$39);
-            _v$40 !== _p$.t && _$setStyleProperty(_el$112, "grid-template-rows", _p$.t = _v$40);
+            var _v$67 = dayColumnMinWidth(layouts()),
+              _v$68 = `repeat(${hours().length}, minmax(4rem, 1fr))`;
+            _v$67 !== _p$.e && _$setStyleProperty(_el$181, "min-width", _p$.e = _v$67);
+            _v$68 !== _p$.t && _$setStyleProperty(_el$181, "grid-template-rows", _p$.t = _v$68);
             return _p$;
           }, {
             e: undefined,
             t: undefined
           });
-          return _el$112;
+          return _el$181;
         })();
       }
-    }), _el$91, _co$22);
+    }), _el$160, _co$39);
     _$effect(_p$ => {
-      var _v$36 = `4rem repeat(${props.days.length}, minmax(0, 1fr))`,
-        _v$37 = `4rem repeat(${props.days.length}, minmax(0, 1fr))`,
-        _v$38 = `repeat(${hours().length}, minmax(4rem, 1fr))`;
-      _v$36 !== _p$.e && _$setStyleProperty(_el$79, "grid-template-columns", _p$.e = _v$36);
-      _v$37 !== _p$.t && _$setStyleProperty(_el$88, "grid-template-columns", _p$.t = _v$37);
-      _v$38 !== _p$.a && _$setStyleProperty(_el$89, "grid-template-rows", _p$.a = _v$38);
+      var _v$64 = `4rem repeat(${props.days.length}, minmax(0, 1fr))`,
+        _v$65 = `4rem repeat(${props.days.length}, minmax(0, 1fr))`,
+        _v$66 = `repeat(${hours().length}, minmax(4rem, 1fr))`;
+      _v$64 !== _p$.e && _$setStyleProperty(_el$148, "grid-template-columns", _p$.e = _v$64);
+      _v$65 !== _p$.t && _$setStyleProperty(_el$157, "grid-template-columns", _p$.t = _v$65);
+      _v$66 !== _p$.a && _$setStyleProperty(_el$158, "grid-template-rows", _p$.a = _v$66);
       return _p$;
     }, {
       e: undefined,
       t: undefined,
       a: undefined
     });
-    return _el$78;
+    return _el$147;
   })();
 };
 const YearView = props => {
@@ -1875,17 +3256,17 @@ const YearView = props => {
     });
   });
   return (() => {
-    var _el$157 = _$getNextElement(_tmpl$38);
-    _$insert(_el$157, _$createComponent(For, {
+    var _el$226 = _$getNextElement(_tmpl$59);
+    _$insert(_el$226, _$createComponent(For, {
       get each() {
         return months();
       },
       children: month => (() => {
-        var _el$158 = _$getNextElement(_tmpl$39),
-          _el$159 = _el$158.firstChild,
-          _el$160 = _el$159.nextSibling;
-        _$insert(_el$159, () => month.label);
-        _$insert(_el$160, _$createComponent(For, {
+        var _el$227 = _$getNextElement(_tmpl$60),
+          _el$228 = _el$227.firstChild,
+          _el$229 = _el$228.nextSibling;
+        _$insert(_el$228, () => month.label);
+        _$insert(_el$229, _$createComponent(For, {
           get each() {
             return month.days;
           },
@@ -1909,32 +3290,32 @@ const YearView = props => {
                   return day.events[0];
                 },
                 children: event => (() => {
-                  var _el$161 = _$getNextElement(_tmpl$40);
+                  var _el$230 = _$getNextElement(_tmpl$61);
                   _$effect(_p$ => {
-                    var _v$52 = event().colorHex ? undefined : event().color ?? "blue",
-                      _v$53 = day.isToday ? "true" : undefined,
-                      _v$54 = event().colorHex ? {
+                    var _v$80 = event().colorHex ? undefined : event().color ?? "blue",
+                      _v$81 = day.isToday ? "true" : undefined,
+                      _v$82 = event().colorHex ? {
                         "background-color": day.isToday ? "white" : event().colorHex
                       } : undefined;
-                    _v$52 !== _p$.e && _$setAttribute(_el$161, "data-color", _p$.e = _v$52);
-                    _v$53 !== _p$.t && _$setAttribute(_el$161, "data-today", _p$.t = _v$53);
-                    _p$.a = _$style(_el$161, _v$54, _p$.a);
+                    _v$80 !== _p$.e && _$setAttribute(_el$230, "data-color", _p$.e = _v$80);
+                    _v$81 !== _p$.t && _$setAttribute(_el$230, "data-today", _p$.t = _v$81);
+                    _p$.a = _$style(_el$230, _v$82, _p$.a);
                     return _p$;
                   }, {
                     e: undefined,
                     t: undefined,
                     a: undefined
                   });
-                  return _el$161;
+                  return _el$230;
                 })()
               })];
             }
           })
         }));
-        return _el$158;
+        return _el$227;
       })()
     }));
-    return _el$157;
+    return _el$226;
   })();
 };
 const MobileMonthView = props => {
@@ -1942,14 +3323,14 @@ const MobileMonthView = props => {
   const selectedDateKey = createMemo(() => calendar.formatDateKey(props.selectedDate, dateConfig()));
   const selectedEvents = createMemo(() => props.events.filter(event => event.dayKey === selectedDateKey()));
   return (() => {
-    var _el$162 = _$getNextElement(_tmpl$42),
-      _el$168 = _el$162.firstChild,
-      [_el$169, _co$44] = _$getNextMarker(_el$168.nextSibling),
-      _el$163 = _el$169.nextSibling,
-      _el$164 = _el$163.firstChild,
-      _el$166 = _el$164.nextSibling,
-      [_el$167, _co$43] = _$getNextMarker(_el$166.nextSibling);
-    _$insert(_el$162, _$createComponent(MonthView, {
+    var _el$231 = _$getNextElement(_tmpl$63),
+      _el$237 = _el$231.firstChild,
+      [_el$238, _co$61] = _$getNextMarker(_el$237.nextSibling),
+      _el$232 = _el$238.nextSibling,
+      _el$233 = _el$232.firstChild,
+      _el$235 = _el$233.nextSibling,
+      [_el$236, _co$60] = _$getNextMarker(_el$235.nextSibling);
+    _$insert(_el$231, _$createComponent(MonthPickerView, {
       get owner() {
         return {
           ...props.owner,
@@ -1969,27 +3350,27 @@ const MobileMonthView = props => {
         return props.labels;
       },
       compact: true
-    }), _el$169, _co$44);
-    _$insert(_el$164, () => props.selectedDate.toLocaleDateString(dateConfig().locale ?? "en", {
+    }), _el$238, _co$61);
+    _$insert(_el$233, () => props.selectedDate.toLocaleDateString(dateConfig().locale ?? "en", {
       weekday: "long",
       month: "long",
       day: "numeric",
       timeZone: dateConfig().timeZone
     }));
-    _$insert(_el$163, _$createComponent(Show, {
+    _$insert(_el$232, _$createComponent(Show, {
       get when() {
         return selectedEvents().length > 0;
       },
       get fallback() {
         return (() => {
-          var _el$170 = _$getNextElement(_tmpl$43);
-          _$insert(_el$170, () => props.labels.noEvents);
-          return _el$170;
+          var _el$239 = _$getNextElement(_tmpl$64);
+          _$insert(_el$239, () => props.labels.noEvents);
+          return _el$239;
         })();
       },
       get children() {
-        var _el$165 = _$getNextElement(_tmpl$41);
-        _$insert(_el$165, _$createComponent(For, {
+        var _el$234 = _$getNextElement(_tmpl$62);
+        _$insert(_el$234, _$createComponent(For, {
           get each() {
             return selectedEvents();
           },
@@ -2003,19 +3384,20 @@ const MobileMonthView = props => {
             }
           })
         }));
-        return _el$165;
+        return _el$234;
       }
-    }), _el$167, _co$43);
-    return _el$162;
+    }), _el$236, _co$60);
+    return _el$231;
   })();
 };
 const CalendarBody = props => (() => {
-  var _el$171 = _$getNextElement(_tmpl$44);
-  _$insert(_el$171, () => props.children);
-  return _el$171;
+  var _el$240 = _$getNextElement(_tmpl$65);
+  _$insert(_el$240, () => props.children);
+  return _el$240;
 })();
 const CalendarRoot = props => {
   const messages = useUiMessages();
+  const calendarMessages = useCalendarMessages();
   // Subviews derive their date config from the owner props, so the inherited
   // render locale is merged here once; an explicit dateConfig.locale wins.
   const localizedConfig = useDateConfigLocale(() => props.dateConfig);
@@ -2034,6 +3416,8 @@ const CalendarRoot = props => {
   const date = createMemo(() => safeDate(props.date));
   const selectedDate = createMemo(() => safeDate(props.selectedDate ?? props.date));
   const [now, setNow] = createSignal(new Date());
+  /** The first day selected in the month view, so the view switcher opens the other views at it. */
+  const [focusDay, setFocusDay] = createSignal(null);
   const normalizedEvents = createMemo(() => normalizeEvents(props.events, dateConfig()));
   const mergedLabels = createMemo(() => ({
     today: messages().today,
@@ -2042,7 +3426,7 @@ const CalendarRoot = props => {
     month: messages().month,
     year: messages().year,
     allDay: messages().allDay,
-    noEvents: messages().noEvents,
+    noEvents: calendarMessages().noEvents,
     previous: messages().previous,
     next: messages().next,
     ...props.labels
@@ -2061,14 +3445,12 @@ const CalendarRoot = props => {
     });
   });
   return (() => {
-    var _el$172 = _$getNextElement(_tmpl$45),
-      _el$173 = _el$172.firstChild,
-      [_el$174, _co$45] = _$getNextMarker(_el$173.nextSibling),
-      _el$175 = _el$174.nextSibling,
-      [_el$176, _co$46] = _$getNextMarker(_el$175.nextSibling),
-      _el$177 = _el$176.nextSibling,
-      [_el$178, _co$47] = _$getNextMarker(_el$177.nextSibling);
-    _$insert(_el$172, _$createComponent(CalendarHeader, {
+    var _el$241 = _$getNextElement(_tmpl$66),
+      _el$242 = _el$241.firstChild,
+      [_el$243, _co$62] = _$getNextMarker(_el$242.nextSibling),
+      _el$244 = _el$243.nextSibling,
+      [_el$245, _co$63] = _$getNextMarker(_el$244.nextSibling);
+    _$insert(_el$241, _$createComponent(CalendarHeader, {
       get date() {
         return date();
       },
@@ -2078,10 +3460,12 @@ const CalendarRoot = props => {
       get labels() {
         return mergedLabels();
       },
-      owner: owner
-    }), _el$174, _co$45);
-    _$insert(_el$172, () => props.toolbarContent, _el$176, _co$46);
-    _$insert(_el$172, _$createComponent(Show, {
+      owner: owner,
+      get focusDay() {
+        return _$memo(() => view() === "month")() ? focusDay() : null;
+      }
+    }), _el$243, _co$62);
+    _$insert(_el$241, _$createComponent(Show, {
       get when() {
         return !custom();
       },
@@ -2113,7 +3497,8 @@ const CalendarRoot = props => {
                   },
                   get labels() {
                     return mergedLabels();
-                  }
+                  },
+                  onFocusDay: setFocusDay
                 });
               }
             });
@@ -2196,18 +3581,18 @@ const CalendarRoot = props => {
           }
         });
       }
-    }), _el$178, _co$47);
+    }), _el$245, _co$63);
     _$effect(_p$ => {
-      var _v$55 = `k2b-content-calendar ${props.class ?? ""}`,
-        _v$56 = props.navigationPending ? "true" : undefined;
-      _v$55 !== _p$.e && _$className(_el$172, _p$.e = _v$55);
-      _v$56 !== _p$.t && _$setAttribute(_el$172, "aria-busy", _p$.t = _v$56);
+      var _v$83 = `k2b-content-calendar ${props.class ?? ""}`,
+        _v$84 = props.navigationPending ? "true" : undefined;
+      _v$83 !== _p$.e && _$className(_el$241, _p$.e = _v$83);
+      _v$84 !== _p$.t && _$setAttribute(_el$241, "aria-busy", _p$.t = _v$84);
       return _p$;
     }, {
       e: undefined,
       t: undefined
     });
-    return _el$172;
+    return _el$241;
   })();
 };
 
@@ -2217,5 +3602,5 @@ function Calendar(props) {
   return CalendarRoot(props);
 }
 export default Calendar;
-_$delegateEvents(["click", "dblclick", "pointerdown", "keydown"]);
+_$delegateEvents(["click", "dblclick", "pointerdown", "keydown", "contextmenu", "focusin"]);
 //# sourceMappingURL=Calendar.js.map