@k2b/ui 0.18.0 → 0.19.0

package/dist/browser/content/Calendar.js

@@ -3,7 +3,6 @@ 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 { getNextMarker as _$getNextMarker } 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";
@@ -12,55 +11,57 @@ 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 { 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";
-import { insert as _$insert } from "solid-js/web";
-var _tmpl$ = /*#__PURE__*/_$template(`<span class=k2b-calendar-event__title>`),
-  _tmpl$2 = /*#__PURE__*/_$template(`<span class=k2b-calendar-event__meta>`),
-  _tmpl$3 = /*#__PURE__*/_$template(`<span class=k2b-calendar-event__description>`),
-  _tmpl$4 = /*#__PURE__*/_$template(`<a class=k2b-calendar-event data-calendar-event>`),
-  _tmpl$5 = /*#__PURE__*/_$template(`<button type=button class=k2b-calendar-event data-calendar-event data-interactive=true>`),
-  _tmpl$6 = /*#__PURE__*/_$template(`<div class=k2b-calendar-event role=group data-calendar-event>`),
-  _tmpl$7 = /*#__PURE__*/_$template(`<a>`),
-  _tmpl$8 = /*#__PURE__*/_$template(`<div role=radiogroup aria-orientation=horizontal class="k2b-segmented-control k2b-calendar-view-switcher">`),
-  _tmpl$9 = /*#__PURE__*/_$template(`<i>`),
-  _tmpl$0 = /*#__PURE__*/_$template(`<button type=button class=k2b-calendar-header__nav-button><i>`),
-  _tmpl$1 = /*#__PURE__*/_$template(`<span class=k2b-button__label>`),
-  _tmpl$10 = /*#__PURE__*/_$template(`<span class=k2b-calendar-header__progress aria-hidden=true>`),
-  _tmpl$11 = /*#__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$12 = /*#__PURE__*/_$template(`<div class=k2b-calendar-month__weekday>`),
-  _tmpl$13 = /*#__PURE__*/_$template(`<div class=k2b-calendar-month><div class=k2b-calendar-month__weekdays><!$><!/><!$><!/></div><!$><!/>`),
-  _tmpl$14 = /*#__PURE__*/_$template(`<div class=k2b-calendar-month__week-number>`),
-  _tmpl$15 = /*#__PURE__*/_$template(`<div class=k2b-calendar-month__week><!$><!/><!$><!/>`),
-  _tmpl$16 = /*#__PURE__*/_$template(`<button type=button class=k2b-calendar-month__day-target data-interactive=true>`),
-  _tmpl$17 = /*#__PURE__*/_$template(`<div class=k2b-calendar-preview>`),
-  _tmpl$18 = /*#__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$19 = /*#__PURE__*/_$template(`<span class=k2b-calendar-month__day-number>`),
-  _tmpl$20 = /*#__PURE__*/_$template(`<span class=k2b-calendar-month__badge><!$><!/><!$><!/>`),
-  _tmpl$21 = /*#__PURE__*/_$template(`<span class=k2b-calendar-dot>`),
-  _tmpl$22 = /*#__PURE__*/_$template(`<div class=k2b-calendar-time-grid__all-day><div class=k2b-calendar-time-grid__all-day-label></div><!$><!/>`),
-  _tmpl$23 = /*#__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$24 = /*#__PURE__*/_$template(`<span class=k2b-calendar-time-grid__day-label>`),
-  _tmpl$25 = /*#__PURE__*/_$template(`<span class=k2b-calendar-time-grid__badge><!$><!/><!$><!/>`),
-  _tmpl$26 = /*#__PURE__*/_$template(`<div class=k2b-calendar-time-grid__all-day-cell><div class=k2b-calendar-time-grid__all-day-events><!$><!/><!$><!/>`),
-  _tmpl$27 = /*#__PURE__*/_$template(`<div class=k2b-calendar-time-grid__hour><!$><!/>:00`),
-  _tmpl$28 = /*#__PURE__*/_$template(`<div class=k2b-calendar-time-grid__now>`),
-  _tmpl$29 = /*#__PURE__*/_$template(`<div class=k2b-calendar-time-grid__column><!$><!/><!$><!/><!$><!/><!$><!/><!$><!/>`),
-  _tmpl$30 = /*#__PURE__*/_$template(`<div class=k2b-calendar-time-grid__slot>`),
-  _tmpl$31 = /*#__PURE__*/_$template(`<div class=k2b-calendar-preview__title>`),
-  _tmpl$32 = /*#__PURE__*/_$template(`<div class="k2b-calendar-preview k2b-calendar-preview--timed"><div class=k2b-calendar-preview__content><!$><!/><div class=k2b-calendar-preview__label><!$><!/> - <!$><!/>`),
-  _tmpl$33 = /*#__PURE__*/_$template(`<button type=button class=k2b-calendar-time-grid__resize><span class=k2b-calendar-time-grid__resize-icon aria-hidden=true>`),
-  _tmpl$34 = /*#__PURE__*/_$template(`<div class=k2b-calendar-time-grid__event-position><div class=k2b-calendar-time-grid__event-frame><!$><!/><!$><!/>`),
-  _tmpl$35 = /*#__PURE__*/_$template(`<button type=button class=k2b-calendar-time-grid__overflow><span class=k2b-calendar-time-grid__overflow-count>+<!$><!/>`),
-  _tmpl$36 = /*#__PURE__*/_$template(`<div class=k2b-calendar-time-grid__overflow-menu><div class=k2b-calendar-time-grid__overflow-title><!$><!/> - <!$><!/></div><!$><!/>`),
-  _tmpl$37 = /*#__PURE__*/_$template(`<div class=k2b-calendar-year>`),
-  _tmpl$38 = /*#__PURE__*/_$template(`<div class=k2b-calendar-year__month><div class=k2b-calendar-year__title></div><div class=k2b-calendar-year__grid>`),
-  _tmpl$39 = /*#__PURE__*/_$template(`<span class=k2b-calendar-year__indicator>`),
-  _tmpl$40 = /*#__PURE__*/_$template(`<div class=k2b-calendar-mobile-month__events>`),
-  _tmpl$41 = /*#__PURE__*/_$template(`<div class=k2b-calendar-mobile-month><!$><!/><div class=k2b-calendar-mobile-month__agenda><div class=k2b-calendar-mobile-month__title></div><!$><!/>`),
-  _tmpl$42 = /*#__PURE__*/_$template(`<div class=k2b-calendar-mobile-month__empty>`),
-  _tmpl$43 = /*#__PURE__*/_$template(`<div class=k2b-calendar-body>`),
-  _tmpl$44 = /*#__PURE__*/_$template(`<section><!$><!/><!$><!/><!$><!/>`);
+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 { Link } from "@k2b/ssr/nav";
 import { dates as calendar } from "@k2b/stdlib";
 import { createMemo, createSignal, For, mergeProps, onCleanup, onMount, Show } from "solid-js";
@@ -70,6 +71,11 @@ import { useDateConfigLocale } from "../intl/locale";
 import { useUiMessages } from "../intl/messages";
 import { layoutCalendarIntervals } from "./calendar-event-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. */
+
+/** What the built-in views read from the props: they only ever link to built-in views. */
+
 const ownerDateConfig = owner => ({
   ...owner.dateConfig,
   timeZone: owner.timeZone ?? owner.dateConfig?.timeZone,
@@ -239,11 +245,14 @@ const EventChip = props => {
   const showLocation = () => Boolean(props.event.location && !props.compact && durationHours() >= 1.25);
   const showDescription = () => Boolean(props.event.description?.trim() && props.fill && !props.event.allDay && !props.compact && durationHours() >= 1.5);
   const timeLabel = () => `${formatTime(props.event.startDate, dateConfig())} - ${formatTime(props.event.endDate, dateConfig())}`;
-  const ariaLabel = () => props.event.allDay ? props.event.title : messages().calendarEventTime({
-    title: props.event.title,
-    start: formatTime(props.event.startDate, dateConfig()),
-    end: formatTime(props.event.endDate, dateConfig())
-  });
+  const ariaLabel = () => {
+    const label = props.event.allDay ? props.event.title : messages().calendarEventTime({
+      title: props.event.title,
+      start: formatTime(props.event.startDate, dateConfig()),
+      end: formatTime(props.event.endDate, dateConfig())
+    });
+    return props.event.accessibleDetail ? `${label}, ${props.event.accessibleDetail}` : label;
+  };
   const renderedEvent = () => props.owner.renderEvent?.(props.event, {
     compact: props.compact ?? false,
     fill: props.fill ?? false,
@@ -254,35 +263,47 @@ const EventChip = props => {
     timeLabel: timeLabel()
   });
   const defaultContent = [(() => {
-    var _el$ = _$getNextElement(_tmpl$);
-    _$insert(_el$, () => props.event.title);
+    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, {
+      get when() {
+        return props.event.display === "marker";
+      },
+      get children() {
+        return _$getNextElement(_tmpl$);
+      }
+    }), _el$4, _co$);
+    _$insert(_el$, () => props.event.title, _el$6, _co$2);
     return _el$;
   })(), _$createComponent(Show, {
     get when() {
       return showTime();
     },
     get children() {
-      var _el$2 = _$getNextElement(_tmpl$2);
-      _$insert(_el$2, timeLabel);
-      return _el$2;
+      var _el$7 = _$getNextElement(_tmpl$3);
+      _$insert(_el$7, timeLabel);
+      return _el$7;
     }
   }), _$createComponent(Show, {
     get when() {
       return showLocation();
     },
     get children() {
-      var _el$3 = _$getNextElement(_tmpl$2);
-      _$insert(_el$3, () => props.event.location);
-      return _el$3;
+      var _el$8 = _$getNextElement(_tmpl$3);
+      _$insert(_el$8, () => props.event.location);
+      return _el$8;
     }
   }), _$createComponent(Show, {
     get when() {
       return showDescription();
     },
     get children() {
-      var _el$4 = _$getNextElement(_tmpl$3);
-      _$insert(_el$4, () => props.event.description);
-      return _el$4;
+      var _el$9 = _$getNextElement(_tmpl$4);
+      _$insert(_el$9, () => props.event.description);
+      return _el$9;
     }
   })];
   const content = () => renderedEvent() ?? defaultContent;
@@ -318,12 +339,12 @@ const EventChip = props => {
     });
   };
   return props.href ? (() => {
-    var _el$5 = _$getNextElement(_tmpl$4);
-    _el$5.$$pointerdown = onPointerDown;
-    _$addEventListener(_el$5, "dragstart", props.onMovePointerDown ? event => event.preventDefault() : undefined);
-    _el$5.$$dblclick = onDoubleClick;
-    _el$5.$$click = onClick;
-    _$insert(_el$5, content);
+    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);
     _$effect(_p$ => {
       var _v$ = props.href,
         _v$2 = props.event.colorHex ? undefined : color(),
@@ -338,19 +359,19 @@ const EventChip = props => {
         _v$1 = style(),
         _v$10 = props.onMovePointerDown ? false : undefined,
         _v$11 = ariaLabel();
-      _v$ !== _p$.e && _$setAttribute(_el$5, "href", _p$.e = _v$);
-      _v$2 !== _p$.t && _$setAttribute(_el$5, "data-color", _p$.t = _v$2);
-      _v$3 !== _p$.a && _$setAttribute(_el$5, "data-selected", _p$.a = _v$3);
-      _v$4 !== _p$.o && _$setAttribute(_el$5, "data-compact", _p$.o = _v$4);
-      _v$5 !== _p$.i && _$setAttribute(_el$5, "data-fill", _p$.i = _v$5);
-      _v$6 !== _p$.n && _$setAttribute(_el$5, "data-short", _p$.n = _v$6);
-      _v$7 !== _p$.s && _$setAttribute(_el$5, "data-moving", _p$.s = _v$7);
-      _v$8 !== _p$.h && _$setAttribute(_el$5, "data-interactive", _p$.h = _v$8);
-      _v$9 !== _p$.r && _$setAttribute(_el$5, "data-display", _p$.r = _v$9);
-      _v$0 !== _p$.d && _$setAttribute(_el$5, "data-space-item-id", _p$.d = _v$0);
-      _p$.l = _$style(_el$5, _v$1, _p$.l);
-      _v$10 !== _p$.u && _$setAttribute(_el$5, "draggable", _p$.u = _v$10);
-      _v$11 !== _p$.c && _$setAttribute(_el$5, "aria-label", _p$.c = _v$11);
+      _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);
       return _p$;
     }, {
       e: undefined,
@@ -368,14 +389,14 @@ const EventChip = props => {
       c: undefined
     });
     _$runHydrationEvents();
-    return _el$5;
+    return _el$0;
   })() : isActionable() ? (() => {
-    var _el$6 = _$getNextElement(_tmpl$5);
-    _el$6.$$keydown = onButtonKeyDown;
-    _el$6.$$pointerdown = onPointerDown;
-    _el$6.$$dblclick = onDoubleClick;
-    _el$6.$$click = onClick;
-    _$insert(_el$6, content);
+    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);
     _$effect(_p$ => {
       var _v$12 = props.event.colorHex ? undefined : color(),
         _v$13 = selected() ? "true" : undefined,
@@ -386,15 +407,15 @@ const EventChip = props => {
         _v$18 = props.event.display,
         _v$19 = style(),
         _v$20 = ariaLabel();
-      _v$12 !== _p$.e && _$setAttribute(_el$6, "data-color", _p$.e = _v$12);
-      _v$13 !== _p$.t && _$setAttribute(_el$6, "data-selected", _p$.t = _v$13);
-      _v$14 !== _p$.a && _$setAttribute(_el$6, "data-compact", _p$.a = _v$14);
-      _v$15 !== _p$.o && _$setAttribute(_el$6, "data-fill", _p$.o = _v$15);
-      _v$16 !== _p$.i && _$setAttribute(_el$6, "data-short", _p$.i = _v$16);
-      _v$17 !== _p$.n && _$setAttribute(_el$6, "data-moving", _p$.n = _v$17);
-      _v$18 !== _p$.s && _$setAttribute(_el$6, "data-display", _p$.s = _v$18);
-      _p$.h = _$style(_el$6, _v$19, _p$.h);
-      _v$20 !== _p$.r && _$setAttribute(_el$6, "aria-label", _p$.r = _v$20);
+      _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);
       return _p$;
     }, {
       e: undefined,
@@ -408,11 +429,11 @@ const EventChip = props => {
       r: undefined
     });
     _$runHydrationEvents();
-    return _el$6;
+    return _el$1;
   })() : (() => {
-    var _el$7 = _$getNextElement(_tmpl$6);
-    _$setAttribute(_el$7, "data-interactive", undefined);
-    _$insert(_el$7, content);
+    var _el$10 = _$getNextElement(_tmpl$7);
+    _$setAttribute(_el$10, "data-interactive", undefined);
+    _$insert(_el$10, content);
     _$effect(_p$ => {
       var _v$21 = props.event.colorHex ? undefined : color(),
         _v$22 = selected() ? "true" : undefined,
@@ -423,15 +444,15 @@ const EventChip = props => {
         _v$27 = props.event.display,
         _v$28 = style(),
         _v$29 = ariaLabel();
-      _v$21 !== _p$.e && _$setAttribute(_el$7, "data-color", _p$.e = _v$21);
-      _v$22 !== _p$.t && _$setAttribute(_el$7, "data-selected", _p$.t = _v$22);
-      _v$23 !== _p$.a && _$setAttribute(_el$7, "data-compact", _p$.a = _v$23);
-      _v$24 !== _p$.o && _$setAttribute(_el$7, "data-fill", _p$.o = _v$24);
-      _v$25 !== _p$.i && _$setAttribute(_el$7, "data-short", _p$.i = _v$25);
-      _v$26 !== _p$.n && _$setAttribute(_el$7, "data-moving", _p$.n = _v$26);
-      _v$27 !== _p$.s && _$setAttribute(_el$7, "data-display", _p$.s = _v$27);
-      _p$.h = _$style(_el$7, _v$28, _p$.h);
-      _v$29 !== _p$.r && _$setAttribute(_el$7, "aria-label", _p$.r = _v$29);
+      _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);
       return _p$;
     }, {
       e: undefined,
@@ -444,7 +465,7 @@ const EventChip = props => {
       h: undefined,
       r: undefined
     });
-    return _el$7;
+    return _el$10;
   })();
 };
 const slotInteractionProps = (owner, slot, suppressed, nativeControl = false) => {
@@ -487,8 +508,8 @@ const CalendarNavigationLink = props => {
     props.owner.onNavigateHref?.(props.href);
   };
   return props.owner.onNavigateHref ? (() => {
-    var _el$8 = _$getNextElement(_tmpl$7);
-    _$spread(_el$8, _$mergeProps(() => props.anchorProps, {
+    var _el$11 = _$getNextElement(_tmpl$8);
+    _$spread(_el$11, _$mergeProps(() => props.anchorProps, {
       get href() {
         return props.href;
       },
@@ -496,9 +517,9 @@ const CalendarNavigationLink = props => {
       "onPointerEnter": preload,
       "onFocus": preload
     }), false, true);
-    _$insert(_el$8, () => props.children);
+    _$insert(_el$11, () => props.children);
     _$runHydrationEvents();
-    return _el$8;
+    return _el$11;
   })() : props.owner.onNavigate ? _$createComponent(Link, _$mergeProps(() => props.anchorProps, {
     get href() {
       return props.href;
@@ -513,17 +534,17 @@ const CalendarNavigationLink = props => {
       return props.children;
     }
   })) : (() => {
-    var _el$9 = _$getNextElement(_tmpl$7);
-    _$spread(_el$9, _$mergeProps(() => props.anchorProps, {
+    var _el$12 = _$getNextElement(_tmpl$8);
+    _$spread(_el$12, _$mergeProps(() => props.anchorProps, {
       get href() {
         return props.href;
       },
       "onPointerEnter": preload,
       "onFocus": preload
     }), false, true);
-    _$insert(_el$9, () => props.children);
+    _$insert(_el$12, () => props.children);
     _$runHydrationEvents();
-    return _el$9;
+    return _el$12;
   })();
 };
 const CalendarViewLinks = props => {
@@ -546,8 +567,8 @@ const CalendarViewLinks = props => {
     }
   };
   return (() => {
-    var _el$0 = _$getNextElement(_tmpl$8);
-    _$insert(_el$0, _$createComponent(For, {
+    var _el$13 = _$getNextElement(_tmpl$9);
+    _$insert(_el$13, _$createComponent(For, {
       get each() {
         return props.options;
       },
@@ -580,14 +601,16 @@ const CalendarViewLinks = props => {
         });
       }
     }));
-    _$effect(() => _$setAttribute(_el$0, "aria-label", messages().calendarView));
-    return _el$0;
+    _$effect(() => _$setAttribute(_el$13, "aria-label", messages().calendarView));
+    return _el$13;
   })();
 };
+
+/** 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);
-  return calendar.addDays(date, direction * (view === "day" ? 1 : 7), dateConfig);
+  return calendar.addDays(date, direction * (view === "week" ? 7 : 1), dateConfig);
 };
 const CalendarHeader = props => {
   const messages = useUiMessages();
@@ -599,7 +622,7 @@ const CalendarHeader = props => {
       year: "numeric",
       timeZone: dateConfig().timeZone
     }).format(props.date);
-    if (props.view === "day") return props.date.toLocaleDateString(dateConfig().locale ?? "en", {
+    if (props.view !== "week" && props.view !== "month" && props.view !== "mobile-month") return props.date.toLocaleDateString(dateConfig().locale ?? "en", {
       weekday: "long",
       month: "long",
       day: "numeric",
@@ -631,18 +654,18 @@ const CalendarHeader = props => {
         class: "k2b-calendar-header__nav-button"
       },
       get children() {
-        var _el$1 = _$getNextElement(_tmpl$9);
-        _$className(_el$1, `ti ${icon}`);
-        return _el$1;
+        var _el$14 = _$getNextElement(_tmpl$0);
+        _$className(_el$14, `ti ${icon}`);
+        return _el$14;
       }
     }) : props.owner.onDateChange ? (() => {
-      var _el$10 = _$getNextElement(_tmpl$0),
-        _el$11 = _el$10.firstChild;
-      _el$10.$$click = () => goDate(date);
-      _$setAttribute(_el$10, "aria-label", label);
-      _$className(_el$11, `ti ${icon}`);
+      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}`);
       _$runHydrationEvents();
-      return _el$10;
+      return _el$15;
     })() : _$createComponent(CalendarNavigationLink, {
       get owner() {
         return props.owner;
@@ -654,9 +677,9 @@ const CalendarHeader = props => {
         class: "k2b-calendar-header__nav-button"
       },
       get children() {
-        var _el$12 = _$getNextElement(_tmpl$9);
-        _$className(_el$12, `ti ${icon}`);
-        return _el$12;
+        var _el$17 = _$getNextElement(_tmpl$0);
+        _$className(_el$17, `ti ${icon}`);
+        return _el$17;
       }
     });
   };
@@ -664,9 +687,9 @@ const CalendarHeader = props => {
     const today = calendar.today(dateConfig());
     const href = props.owner.getDateHref?.(today, props.view);
     const label = (() => {
-      var _el$13 = _$getNextElement(_tmpl$1);
-      _$insert(_el$13, () => props.labels.today);
-      return _el$13;
+      var _el$18 = _$getNextElement(_tmpl$10);
+      _$insert(_el$18, () => props.labels.today);
+      return _el$18;
     })();
     return (props.owner.onNavigateHref || props.owner.onNavigate) && href ? _$createComponent(CalendarNavigationLink, {
       get owner() {
@@ -701,7 +724,7 @@ const CalendarHeader = props => {
       children: label
     });
   };
-  const viewOptions = createMemo(() => [{
+  const viewOptions = createMemo(() => [...[{
     value: "day",
     label: props.labels.day
   }, {
@@ -713,29 +736,29 @@ const CalendarHeader = props => {
   }, {
     value: "year",
     label: props.labels.year
-  }].filter(option => !props.owner.views || props.owner.views.includes(option.value)));
+  }].filter(option => !props.owner.views || props.owner.views.includes(option.value)), ...(props.owner.customViews ?? [])]);
   return (() => {
-    var _el$14 = _$getNextElement(_tmpl$11),
-      _el$15 = _el$14.firstChild,
-      _el$17 = _el$15.firstChild,
-      [_el$18, _co$] = _$getNextMarker(_el$17.nextSibling),
-      _el$19 = _el$18.nextSibling,
-      [_el$20, _co$2] = _$getNextMarker(_el$19.nextSibling),
-      _el$16 = _el$20.nextSibling,
-      _el$21 = _el$15.nextSibling,
-      _el$22 = _el$21.firstChild,
+    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$26 = _el$25.nextSibling,
-      [_el$27, _co$5] = _$getNextMarker(_el$26.nextSibling),
-      _el$29 = _el$21.nextSibling,
-      [_el$30, _co$6] = _$getNextMarker(_el$29.nextSibling);
-    _$insert(_el$15, () => navButton(previous(), "ti-chevron-left", props.labels.previous), _el$18, _co$);
-    _$insert(_el$15, () => navButton(next(), "ti-chevron-right", props.labels.next), _el$20, _co$2);
-    _$insert(_el$16, title);
-    _$insert(_el$21, todayButton, _el$23, _co$3);
-    _$insert(_el$21, _$createComponent(Show, {
+      _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, {
       get when() {
         return _$memo(() => !!!props.owner.onViewChange)() && props.owner.getViewHref;
       },
@@ -764,17 +787,17 @@ const CalendarHeader = props => {
           }
         });
       }
-    }), _el$25, _co$4);
-    _$insert(_el$21, () => props.owner.toolbarActions, _el$27, _co$5);
-    _$insert(_el$14, _$createComponent(Show, {
+    }), _el$30, _co$6);
+    _$insert(_el$26, () => props.owner.toolbarActions, _el$32, _co$7);
+    _$insert(_el$19, _$createComponent(Show, {
       get when() {
         return props.owner.navigationPending;
       },
       get children() {
-        return _$getNextElement(_tmpl$10);
+        return _$getNextElement(_tmpl$11);
       }
-    }), _el$30, _co$6);
-    return _el$14;
+    }), _el$35, _co$8);
+    return _el$19;
   })();
 };
 const MonthView = props => {
@@ -832,55 +855,55 @@ const MonthView = props => {
   };
   onCleanup(() => cancelInteraction?.());
   return (() => {
-    var _el$31 = _$getNextElement(_tmpl$13),
-      _el$32 = _el$31.firstChild,
-      _el$34 = _el$32.firstChild,
-      [_el$35, _co$7] = _$getNextMarker(_el$34.nextSibling),
-      _el$36 = _el$35.nextSibling,
-      [_el$37, _co$8] = _$getNextMarker(_el$36.nextSibling),
-      _el$38 = _el$32.nextSibling,
-      [_el$39, _co$9] = _$getNextMarker(_el$38.nextSibling);
-    _$insert(_el$32, _$createComponent(Show, {
+    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, {
       get when() {
         return props.owner.withWeekNumbers;
       },
       get children() {
-        var _el$33 = _$getNextElement(_tmpl$12);
-        _$insert(_el$33, () => messages().weekShort);
-        return _el$33;
+        var _el$38 = _$getNextElement(_tmpl$13);
+        _$insert(_el$38, () => messages().weekShort);
+        return _el$38;
       }
-    }), _el$35, _co$7);
-    _$insert(_el$32, _$createComponent(For, {
+    }), _el$40, _co$9);
+    _$insert(_el$37, _$createComponent(For, {
       get each() {
         return weekdays();
       },
       children: day => (() => {
-        var _el$40 = _$getNextElement(_tmpl$12);
-        _$insert(_el$40, day);
-        return _el$40;
+        var _el$45 = _$getNextElement(_tmpl$13);
+        _$insert(_el$45, day);
+        return _el$45;
       })()
-    }), _el$37, _co$8);
-    _$insert(_el$31, _$createComponent(For, {
+    }), _el$42, _co$0);
+    _$insert(_el$36, _$createComponent(For, {
       get each() {
         return weeks();
       },
       children: week => (() => {
-        var _el$41 = _$getNextElement(_tmpl$15),
-          _el$43 = _el$41.firstChild,
-          [_el$44, _co$0] = _$getNextMarker(_el$43.nextSibling),
-          _el$45 = _el$44.nextSibling,
-          [_el$46, _co$1] = _$getNextMarker(_el$45.nextSibling);
-        _$insert(_el$41, _$createComponent(Show, {
+        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, {
           get when() {
             return props.owner.withWeekNumbers;
           },
           get children() {
-            var _el$42 = _$getNextElement(_tmpl$14);
-            _$insert(_el$42, () => zonedWeekNumber(week[0], dateConfig()));
-            return _el$42;
+            var _el$47 = _$getNextElement(_tmpl$15);
+            _$insert(_el$47, () => zonedWeekNumber(week[0], dateConfig()));
+            return _el$47;
           }
-        }), _el$44, _co$0);
-        _$insert(_el$41, _$createComponent(For, {
+        }), _el$49, _co$10);
+        _$insert(_el$46, _$createComponent(For, {
           each: week,
           children: day => {
             const dayKey = calendar.formatDateKey(day, dateConfig());
@@ -908,25 +931,25 @@ const MonthView = props => {
               };
             });
             return (() => {
-              var _el$47 = _$getNextElement(_tmpl$18),
-                _el$63 = _el$47.firstChild,
+              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$49 = _el$64.nextSibling,
-                _el$50 = _el$49.firstChild,
-                [_el$51, _co$10] = _$getNextMarker(_el$50.nextSibling),
-                _el$52 = _el$51.nextSibling,
-                [_el$53, _co$11] = _$getNextMarker(_el$52.nextSibling),
-                _el$54 = _el$49.nextSibling,
-                _el$56 = _el$54.firstChild,
-                [_el$57, _co$12] = _$getNextMarker(_el$56.nextSibling),
-                _el$58 = _el$57.nextSibling,
-                [_el$59, _co$13] = _$getNextMarker(_el$58.nextSibling),
-                _el$60 = _el$59.nextSibling,
-                [_el$61, _co$14] = _$getNextMarker(_el$60.nextSibling),
-                _el$62 = _el$54.nextSibling;
-              _$setAttribute(_el$47, "data-calendar-day-key", dayKey);
-              _$setAttribute(_el$47, "data-outside", !sameMonth ? "true" : undefined);
-              _$insert(_el$47, _$createComponent(Show, {
+                _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, {
                 get when() {
                   return props.owner.onSlotActivate;
                 },
@@ -952,8 +975,8 @@ const MonthView = props => {
                   });
                 },
                 get children() {
-                  var _el$48 = _$getNextElement(_tmpl$16);
-                  _$spread(_el$48, _$mergeProps({
+                  var _el$53 = _$getNextElement(_tmpl$17);
+                  _$spread(_el$53, _$mergeProps({
                     get ["aria-label"]() {
                       return messages().createEventOn({
                         label: dayLabel
@@ -968,20 +991,20 @@ const MonthView = props => {
                     };
                   }, () => performance.now() < suppressSlotClickUntil, true)), false, false);
                   _$runHydrationEvents();
-                  return _el$48;
+                  return _el$53;
                 }
-              }), _el$64, _co$15);
-              _$insert(_el$49, _$createComponent(Show, {
+              }), _el$69, _co$17);
+              _$insert(_el$54, _$createComponent(Show, {
                 get when() {
                   return props.owner.onSlotActivate && href;
                 },
                 get fallback() {
                   return (() => {
-                    var _el$65 = _$getNextElement(_tmpl$19);
-                    _$setAttribute(_el$65, "data-today", isToday ? "true" : undefined);
-                    _$setAttribute(_el$65, "data-outside", !sameMonth ? "true" : undefined);
-                    _$insert(_el$65, () => calendar.formatDayNumber(day, dateConfig()));
-                    return _el$65;
+                    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;
                   })();
                 },
                 children: dayHref => _$createComponent(CalendarNavigationLink, {
@@ -1005,40 +1028,40 @@ const MonthView = props => {
                     return calendar.formatDayNumber(day, dateConfig());
                   }
                 })
-              }), _el$51, _co$10);
-              _$insert(_el$49, _$createComponent(Show, {
+              }), _el$56, _co$12);
+              _$insert(_el$54, _$createComponent(Show, {
                 when: dayBadge,
                 children: badge => (() => {
-                  var _el$66 = _$getNextElement(_tmpl$20),
-                    _el$67 = _el$66.firstChild,
-                    [_el$68, _co$16] = _$getNextMarker(_el$67.nextSibling),
-                    _el$69 = _el$68.nextSibling,
-                    [_el$70, _co$17] = _$getNextMarker(_el$69.nextSibling);
-                  _$insert(_el$66, _$createComponent(Show, {
+                  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, {
                     get when() {
                       return badge().icon;
                     },
                     children: icon => (() => {
-                      var _el$71 = _$getNextElement(_tmpl$9);
-                      _$effect(() => _$className(_el$71, `k2b-calendar-month__badge-icon ti ti-${icon()}`));
-                      return _el$71;
+                      var _el$76 = _$getNextElement(_tmpl$0);
+                      _$effect(() => _$className(_el$76, `k2b-calendar-month__badge-icon ti ti-${icon()}`));
+                      return _el$76;
                     })()
-                  }), _el$68, _co$16);
-                  _$insert(_el$66, () => badge().label, _el$70, _co$17);
-                  return _el$66;
+                  }), _el$73, _co$18);
+                  _$insert(_el$71, () => badge().label, _el$75, _co$19);
+                  return _el$71;
                 })()
-              }), _el$53, _co$11);
-              _$insert(_el$54, _$createComponent(Show, {
+              }), _el$58, _co$13);
+              _$insert(_el$59, _$createComponent(Show, {
                 get when() {
                   return eventStack().preview;
                 },
                 get children() {
-                  var _el$55 = _$getNextElement(_tmpl$17);
-                  _$insert(_el$55, () => props.events.find(event => event.id === eventStack().preview.id)?.title ?? messages().moveEvent);
-                  return _el$55;
+                  var _el$60 = _$getNextElement(_tmpl$18);
+                  _$insert(_el$60, () => props.events.find(event => event.id === eventStack().preview.id)?.title ?? messages().moveEvent);
+                  return _el$60;
                 }
-              }), _el$57, _co$12);
-              _$insert(_el$54, _$createComponent(For, {
+              }), _el$62, _co$14);
+              _$insert(_el$59, _$createComponent(For, {
                 get each() {
                   return eventStack().visibleEvents;
                 },
@@ -1058,8 +1081,8 @@ const MonthView = props => {
                     return props.owner.onEventDrop ? (pointerEvent, markDragged) => startMove(pointerEvent, event, markDragged) : undefined;
                   }
                 })
-              }), _el$59, _co$13);
-              _$insert(_el$54, _$createComponent(Show, {
+              }), _el$64, _co$15);
+              _$insert(_el$59, _$createComponent(Show, {
                 get when() {
                   return eventStack().hiddenCount > 0;
                 },
@@ -1077,48 +1100,48 @@ const MonthView = props => {
                     }
                   });
                 }
-              }), _el$61, _co$14);
-              _$insert(_el$62, _$createComponent(For, {
+              }), _el$66, _co$16);
+              _$insert(_el$67, _$createComponent(For, {
                 get each() {
                   return events.slice(0, 4);
                 },
                 children: event => (() => {
-                  var _el$72 = _$getNextElement(_tmpl$21);
+                  var _el$77 = _$getNextElement(_tmpl$22);
                   _$effect(_p$ => {
                     var _v$32 = event.colorHex ? undefined : event.color ?? "blue",
                       _v$33 = event.colorHex ? {
                         "background-color": event.colorHex
                       } : undefined;
-                    _v$32 !== _p$.e && _$setAttribute(_el$72, "data-color", _p$.e = _v$32);
-                    _p$.t = _$style(_el$72, _v$33, _p$.t);
+                    _v$32 !== _p$.e && _$setAttribute(_el$77, "data-color", _p$.e = _v$32);
+                    _p$.t = _$style(_el$77, _v$33, _p$.t);
                     return _p$;
                   }, {
                     e: undefined,
                     t: undefined
                   });
-                  return _el$72;
+                  return _el$77;
                 })()
               }));
-              _$effect(() => _$setAttribute(_el$47, "data-drop-preview", movePreview()?.start && calendar.formatDateKey(movePreview().start, dateConfig()) === dayKey ? "true" : undefined));
-              return _el$47;
+              _$effect(() => _$setAttribute(_el$52, "data-drop-preview", movePreview()?.start && calendar.formatDateKey(movePreview().start, dateConfig()) === dayKey ? "true" : undefined));
+              return _el$52;
             })();
           }
-        }), _el$46, _co$1);
-        _$effect(() => _$setAttribute(_el$41, "data-week-numbers", props.owner.withWeekNumbers ? "true" : undefined));
-        return _el$41;
+        }), _el$51, _co$11);
+        _$effect(() => _$setAttribute(_el$46, "data-week-numbers", props.owner.withWeekNumbers ? "true" : undefined));
+        return _el$46;
       })()
-    }), _el$39, _co$9);
+    }), _el$44, _co$1);
     _$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$31, "grid-template-rows", _p$.e = _v$30);
-      _v$31 !== _p$.t && _$setAttribute(_el$32, "data-week-numbers", _p$.t = _v$31);
+      _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);
       return _p$;
     }, {
       e: undefined,
       t: undefined
     });
-    return _el$31;
+    return _el$36;
   })();
 };
 const TimeGridView = props => {
@@ -1324,26 +1347,28 @@ const TimeGridView = props => {
     requestAnimationFrame(() => {
       if (!scrollContainer || !defaultHourMarker) return;
       const targetTop = defaultHourMarker.getBoundingClientRect().top - scrollContainer.getBoundingClientRect().top;
+      // Reduced motion jumps to the business hours instead of gliding there, like every transition of the library.
+      const behavior = window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth";
       scrollContainer.scrollTo({
         top: Math.max(0, scrollContainer.scrollTop + targetTop),
-        behavior: "smooth"
+        behavior
       });
     });
   });
   return (() => {
-    var _el$73 = _$getNextElement(_tmpl$23),
-      _el$74 = _el$73.firstChild,
-      _el$75 = _el$74.firstChild,
-      _el$76 = _el$75.nextSibling,
-      [_el$77, _co$18] = _$getNextMarker(_el$76.nextSibling),
-      _el$87 = _el$74.nextSibling,
-      [_el$88, _co$21] = _$getNextMarker(_el$87.nextSibling),
-      _el$82 = _el$88.nextSibling,
-      _el$83 = _el$82.firstChild,
-      _el$84 = _el$83.firstChild,
-      _el$85 = _el$84.nextSibling,
-      [_el$86, _co$20] = _$getNextMarker(_el$85.nextSibling);
-    _$insert(_el$74, _$createComponent(For, {
+    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, {
       get each() {
         return props.days;
       },
@@ -1362,47 +1387,47 @@ const TimeGridView = props => {
           },
           get children() {
             return [(() => {
-              var _el$89 = _$getNextElement(_tmpl$24);
-              _$insert(_el$89, () => formatDay(day, dateConfig()));
-              _$effect(() => _$setAttribute(_el$89, "data-today", today() ? "true" : undefined));
-              return _el$89;
+              var _el$94 = _$getNextElement(_tmpl$25);
+              _$insert(_el$94, () => formatDay(day, dateConfig()));
+              _$effect(() => _$setAttribute(_el$94, "data-today", today() ? "true" : undefined));
+              return _el$94;
             })(), _$createComponent(Show, {
               when: dayBadge,
               children: badge => (() => {
-                var _el$90 = _$getNextElement(_tmpl$25),
-                  _el$91 = _el$90.firstChild,
-                  [_el$92, _co$22] = _$getNextMarker(_el$91.nextSibling),
-                  _el$93 = _el$92.nextSibling,
-                  [_el$94, _co$23] = _$getNextMarker(_el$93.nextSibling);
-                _$insert(_el$90, _$createComponent(Show, {
+                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, {
                   get when() {
                     return badge().icon;
                   },
                   children: icon => (() => {
-                    var _el$95 = _$getNextElement(_tmpl$9);
-                    _$effect(() => _$className(_el$95, `k2b-calendar-time-grid__badge-icon ti ti-${icon()}`));
-                    return _el$95;
+                    var _el$100 = _$getNextElement(_tmpl$0);
+                    _$effect(() => _$className(_el$100, `k2b-calendar-time-grid__badge-icon ti ti-${icon()}`));
+                    return _el$100;
                   })()
-                }), _el$92, _co$22);
-                _$insert(_el$90, () => badge().label, _el$94, _co$23);
-                return _el$90;
+                }), _el$97, _co$24);
+                _$insert(_el$95, () => badge().label, _el$99, _co$25);
+                return _el$95;
               })()
             })];
           }
         });
       }
-    }), _el$77, _co$18);
-    _$insert(_el$73, _$createComponent(Show, {
+    }), _el$82, _co$20);
+    _$insert(_el$78, _$createComponent(Show, {
       get when() {
         return !props.owner.hideAllDay;
       },
       get children() {
-        var _el$78 = _$getNextElement(_tmpl$22),
-          _el$79 = _el$78.firstChild,
-          _el$80 = _el$79.nextSibling,
-          [_el$81, _co$19] = _$getNextMarker(_el$80.nextSibling);
-        _$insert(_el$79, () => props.labels.allDay);
-        _$insert(_el$78, _$createComponent(For, {
+        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, {
           get each() {
             return props.days;
           },
@@ -1411,14 +1436,14 @@ const TimeGridView = props => {
             const allDay = () => eventsByDay().get(dayKey)?.allDay ?? [];
             const previewAllDay = previewEvents().filter(event => event.dayKey === dayKey && event.allDay);
             return (() => {
-              var _el$96 = _$getNextElement(_tmpl$26),
-                _el$97 = _el$96.firstChild,
-                _el$98 = _el$97.firstChild,
-                [_el$99, _co$24] = _$getNextMarker(_el$98.nextSibling),
-                _el$100 = _el$99.nextSibling,
-                [_el$101, _co$25] = _$getNextMarker(_el$100.nextSibling);
-              _$setAttribute(_el$96, "data-calendar-day-key", dayKey);
-              _$spread(_el$96, _$mergeProps({
+              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({
                 get ["data-drop-preview"]() {
                   return timePreview()?.allDay && calendar.formatDateKey(timePreview().start, dateConfig()) === dayKey ? "true" : undefined;
                 },
@@ -1433,15 +1458,15 @@ const TimeGridView = props => {
                   allDay: true
                 };
               }, () => performance.now() < suppressSlotClickUntil)), false, true);
-              _$insert(_el$97, _$createComponent(For, {
+              _$insert(_el$102, _$createComponent(For, {
                 each: previewAllDay,
                 children: event => (() => {
-                  var _el$102 = _$getNextElement(_tmpl$17);
-                  _$insert(_el$102, () => event.title);
-                  return _el$102;
+                  var _el$107 = _$getNextElement(_tmpl$18);
+                  _$insert(_el$107, () => event.title);
+                  return _el$107;
                 })()
-              }), _el$99, _co$24);
-              _$insert(_el$97, _$createComponent(For, {
+              }), _el$104, _co$26);
+              _$insert(_el$102, _$createComponent(For, {
                 get each() {
                   return allDay();
                 },
@@ -1461,49 +1486,49 @@ const TimeGridView = props => {
                     return props.owner.onEventDrop ? (pointerEvent, markDragged) => startAllDayMove(pointerEvent, event, markDragged) : undefined;
                   }
                 })
-              }), _el$101, _co$25);
+              }), _el$106, _co$27);
               _$runHydrationEvents();
-              return _el$96;
+              return _el$101;
             })();
           }
-        }), _el$81, _co$19);
+        }), _el$86, _co$21);
         _$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$78, "grid-template-columns", _p$.e = _v$34);
-          _v$35 !== _p$.t && _$setStyleProperty(_el$78, "max-height", _p$.t = _v$35);
+          _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);
           return _p$;
         }, {
           e: undefined,
           t: undefined
         });
-        return _el$78;
+        return _el$83;
       }
-    }), _el$88, _co$21);
+    }), _el$93, _co$23);
     var _ref$ = scrollContainer;
-    typeof _ref$ === "function" ? _$use(_ref$, _el$82) : scrollContainer = _el$82;
+    typeof _ref$ === "function" ? _$use(_ref$, _el$87) : scrollContainer = _el$87;
     var _ref$2 = timeGrid;
-    typeof _ref$2 === "function" ? _$use(_ref$2, _el$83) : timeGrid = _el$83;
+    typeof _ref$2 === "function" ? _$use(_ref$2, _el$88) : timeGrid = _el$88;
     var _ref$3 = timeGutter;
-    typeof _ref$3 === "function" ? _$use(_ref$3, _el$84) : timeGutter = _el$84;
-    _$insert(_el$84, _$createComponent(For, {
+    typeof _ref$3 === "function" ? _$use(_ref$3, _el$89) : timeGutter = _el$89;
+    _$insert(_el$89, _$createComponent(For, {
       get each() {
         return hours();
       },
       children: hour => (() => {
-        var _el$103 = _$getNextElement(_tmpl$27),
-          _el$105 = _el$103.firstChild,
-          [_el$106, _co$26] = _$getNextMarker(_el$105.nextSibling),
-          _el$104 = _el$106.nextSibling;
+        var _el$108 = _$getNextElement(_tmpl$28),
+          _el$110 = _el$108.firstChild,
+          [_el$111, _co$28] = _$getNextMarker(_el$110.nextSibling),
+          _el$109 = _el$111.nextSibling;
         _$use(element => {
           if (hour === businessStartHour()) defaultHourMarker = element;
-        }, _el$103);
-        _$insert(_el$103, () => `${hour}`.padStart(2, "0"), _el$106, _co$26);
-        _$effect(() => _$setAttribute(_el$103, "data-outside-business", hour < businessStartHour() || hour > businessEndHour() ? "true" : undefined));
-        return _el$103;
+        }, _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;
       })()
     }));
-    _$insert(_el$83, _$createComponent(For, {
+    _$insert(_el$88, _$createComponent(For, {
       get each() {
         return props.days;
       },
@@ -1511,34 +1536,34 @@ const TimeGridView = props => {
         const dayKey = calendar.formatDateKey(day, dateConfig());
         const layouts = createMemo(() => timedEventLayouts(eventsByDay().get(dayKey)?.timed ?? []));
         return (() => {
-          var _el$107 = _$getNextElement(_tmpl$29),
-            _el$109 = _el$107.firstChild,
-            [_el$110, _co$27] = _$getNextMarker(_el$109.nextSibling),
-            _el$111 = _el$110.nextSibling,
-            [_el$112, _co$28] = _$getNextMarker(_el$111.nextSibling),
-            _el$113 = _el$112.nextSibling,
-            [_el$114, _co$29] = _$getNextMarker(_el$113.nextSibling),
-            _el$115 = _el$114.nextSibling,
-            [_el$116, _co$30] = _$getNextMarker(_el$115.nextSibling),
-            _el$117 = _el$116.nextSibling,
-            [_el$118, _co$31] = _$getNextMarker(_el$117.nextSibling);
-          _$insert(_el$107, _$createComponent(Show, {
+          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, {
             get when() {
               return currentTimeLine(day) !== null;
             },
             get children() {
-              var _el$108 = _$getNextElement(_tmpl$28);
-              _$effect(_$p => _$setStyleProperty(_el$108, "top", `${currentTimeLine(day) ?? 0}%`));
-              return _el$108;
+              var _el$113 = _$getNextElement(_tmpl$29);
+              _$effect(_$p => _$setStyleProperty(_el$113, "top", `${currentTimeLine(day) ?? 0}%`));
+              return _el$113;
             }
-          }), _el$110, _co$27);
-          _$insert(_el$107, _$createComponent(For, {
+          }), _el$115, _co$29);
+          _$insert(_el$112, _$createComponent(For, {
             get each() {
               return hours();
             },
             children: hour => (() => {
-              var _el$119 = _$getNextElement(_tmpl$30);
-              _$spread(_el$119, _$mergeProps({
+              var _el$124 = _$getNextElement(_tmpl$31);
+              _$spread(_el$124, _$mergeProps({
                 get ["data-outside-business"]() {
                   return hour < businessStartHour() || hour > businessEndHour() ? "true" : undefined;
                 },
@@ -1556,10 +1581,10 @@ const TimeGridView = props => {
                 "onPointerDown": startRange
               }), false, false);
               _$runHydrationEvents();
-              return _el$119;
+              return _el$124;
             })()
-          }), _el$112, _co$28);
-          _$insert(_el$107, _$createComponent(For, {
+          }), _el$117, _co$30);
+          _$insert(_el$112, _$createComponent(For, {
             get each() {
               return previewEvents().filter(event => event.dayKey === dayKey && !event.allDay);
             },
@@ -1567,44 +1592,44 @@ const TimeGridView = props => {
               const layout = eventLayout(event);
               const short = event.endDate.getTime() - event.startDate.getTime() < 60 * 60_000;
               return (() => {
-                var _el$120 = _$getNextElement(_tmpl$32),
-                  _el$121 = _el$120.firstChild,
-                  _el$129 = _el$121.firstChild,
-                  [_el$130, _co$34] = _$getNextMarker(_el$129.nextSibling),
-                  _el$123 = _el$130.nextSibling,
-                  _el$125 = _el$123.firstChild,
-                  [_el$126, _co$32] = _$getNextMarker(_el$125.nextSibling),
-                  _el$124 = _el$126.nextSibling,
-                  _el$127 = _el$124.nextSibling,
-                  [_el$128, _co$33] = _$getNextMarker(_el$127.nextSibling);
-                _$setAttribute(_el$120, "data-short", short ? "true" : undefined);
-                _$insert(_el$121, _$createComponent(Show, {
+                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, {
                   get when() {
                     return event.title;
                   },
                   get children() {
-                    var _el$122 = _$getNextElement(_tmpl$31);
-                    _$insert(_el$122, () => event.title);
-                    return _el$122;
+                    var _el$127 = _$getNextElement(_tmpl$32);
+                    _$insert(_el$127, () => event.title);
+                    return _el$127;
                   }
-                }), _el$130, _co$34);
-                _$insert(_el$123, () => formatTime(event.startDate, dateConfig()), _el$126, _co$32);
-                _$insert(_el$123, () => formatTime(event.endDate, dateConfig()), _el$128, _co$33);
+                }), _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);
                 _$effect(_p$ => {
                   var _v$41 = `${layout.top}%`,
                     _v$42 = `${layout.height}%`;
-                  _v$41 !== _p$.e && _$setStyleProperty(_el$120, "top", _p$.e = _v$41);
-                  _v$42 !== _p$.t && _$setStyleProperty(_el$120, "height", _p$.t = _v$42);
+                  _v$41 !== _p$.e && _$setStyleProperty(_el$125, "top", _p$.e = _v$41);
+                  _v$42 !== _p$.t && _$setStyleProperty(_el$125, "height", _p$.t = _v$42);
                   return _p$;
                 }, {
                   e: undefined,
                   t: undefined
                 });
-                return _el$120;
+                return _el$125;
               })();
             }
-          }), _el$114, _co$29);
-          _$insert(_el$107, _$createComponent(For, {
+          }), _el$119, _co$31);
+          _$insert(_el$112, _$createComponent(For, {
             get each() {
               return layouts();
             },
@@ -1647,13 +1672,13 @@ const TimeGridView = props => {
                 });
               };
               return (() => {
-                var _el$131 = _$getNextElement(_tmpl$34),
-                  _el$132 = _el$131.firstChild,
-                  _el$134 = _el$132.firstChild,
-                  [_el$135, _co$35] = _$getNextMarker(_el$134.nextSibling),
-                  _el$136 = _el$135.nextSibling,
-                  [_el$137, _co$36] = _$getNextMarker(_el$136.nextSibling);
-                _$insert(_el$132, _$createComponent(EventChip, {
+                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, {
                   event: event,
                   get owner() {
                     return props.owner;
@@ -1668,32 +1693,32 @@ const TimeGridView = props => {
                   get onMovePointerDown() {
                     return props.owner.onEventDrop ? (pointerEvent, markDragged) => startTimedMove(pointerEvent, event, markDragged) : undefined;
                   }
-                }), _el$135, _co$35);
-                _$insert(_el$132, _$createComponent(Show, {
+                }), _el$140, _co$37);
+                _$insert(_el$137, _$createComponent(Show, {
                   get when() {
                     return props.owner.onEventResize;
                   },
                   get children() {
-                    var _el$133 = _$getNextElement(_tmpl$33);
-                    _el$133.addEventListener("dragstart", event => event.preventDefault());
-                    _el$133.$$pointerdown = resizeStart;
-                    _$setAttribute(_el$133, "draggable", false);
-                    _$effect(() => _$setAttribute(_el$133, "aria-label", messages().resizeEvent));
+                    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));
                     _$runHydrationEvents();
-                    return _el$133;
+                    return _el$138;
                   }
-                }), _el$137, _co$36);
+                }), _el$142, _co$38);
                 _$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$131, "top", _p$.e = _v$43);
-                  _v$44 !== _p$.t && _$setStyleProperty(_el$131, "height", _p$.t = _v$44);
-                  _v$45 !== _p$.a && _$setStyleProperty(_el$131, "left", _p$.a = _v$45);
-                  _v$46 !== _p$.o && _$setStyleProperty(_el$131, "width", _p$.o = _v$46);
-                  _v$47 !== _p$.i && _$setStyleProperty(_el$131, "z-index", _p$.i = _v$47);
+                  _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);
                   return _p$;
                 }, {
                   e: undefined,
@@ -1702,11 +1727,11 @@ const TimeGridView = props => {
                   o: undefined,
                   i: undefined
                 });
-                return _el$131;
+                return _el$136;
               })();
             }
-          }), _el$116, _co$30);
-          _$insert(_el$107, _$createComponent(For, {
+          }), _el$121, _co$32);
+          _$insert(_el$112, _$createComponent(For, {
             get each() {
               return overflowLayouts(layouts());
             },
@@ -1715,16 +1740,16 @@ 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$138 = _$getNextElement(_tmpl$35),
-                  _el$139 = _el$138.firstChild,
-                  _el$140 = _el$139.firstChild,
-                  _el$141 = _el$140.nextSibling,
-                  [_el$142, _co$37] = _$getNextMarker(_el$141.nextSibling);
-                _el$138.$$click = event => {
+                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 => {
                   event.stopPropagation();
                   setExpandedOverflow(expandedOverflow() === key ? "" : key);
                 };
-                _$insert(_el$139, () => overflow.hiddenEvents.length, _el$142, _co$37);
+                _$insert(_el$144, () => overflow.hiddenEvents.length, _el$147, _co$39);
                 _$effect(_p$ => {
                   var _v$48 = `${layout.top}%`,
                     _v$49 = `${layout.height}%`,
@@ -1732,10 +1757,10 @@ const TimeGridView = props => {
                     _v$51 = messages().hiddenOverlappingEvents({
                       count: overflow.hiddenEvents.length
                     });
-                  _v$48 !== _p$.e && _$setStyleProperty(_el$138, "top", _p$.e = _v$48);
-                  _v$49 !== _p$.t && _$setStyleProperty(_el$138, "height", _p$.t = _v$49);
-                  _v$50 !== _p$.a && _$setAttribute(_el$138, "title", _p$.a = _v$50);
-                  _v$51 !== _p$.o && _$setAttribute(_el$138, "aria-label", _p$.o = _v$51);
+                  _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);
                   return _p$;
                 }, {
                   e: undefined,
@@ -1744,24 +1769,24 @@ const TimeGridView = props => {
                   o: undefined
                 });
                 _$runHydrationEvents();
-                return _el$138;
+                return _el$143;
               })(), _$createComponent(Show, {
                 get when() {
                   return expandedOverflow() === key;
                 },
                 get children() {
-                  var _el$143 = _$getNextElement(_tmpl$36),
-                    _el$144 = _el$143.firstChild,
-                    _el$146 = _el$144.firstChild,
-                    [_el$147, _co$38] = _$getNextMarker(_el$146.nextSibling),
-                    _el$145 = _el$147.nextSibling,
-                    _el$148 = _el$145.nextSibling,
-                    [_el$149, _co$39] = _$getNextMarker(_el$148.nextSibling),
-                    _el$150 = _el$144.nextSibling,
-                    [_el$151, _co$40] = _$getNextMarker(_el$150.nextSibling);
-                  _$insert(_el$144, () => formatTime(overflow.groupStartDate, dateConfig()), _el$147, _co$38);
-                  _$insert(_el$144, () => formatTime(overflow.groupEndDate, dateConfig()), _el$149, _co$39);
-                  _$insert(_el$143, _$createComponent(For, {
+                  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, {
                     get each() {
                       return overflow.hiddenEvents;
                     },
@@ -1775,41 +1800,41 @@ const TimeGridView = props => {
                       },
                       compact: true
                     })
-                  }), _el$151, _co$40);
-                  _$effect(_$p => _$setStyleProperty(_el$143, "top", `${layout.top}%`));
-                  return _el$143;
+                  }), _el$156, _co$42);
+                  _$effect(_$p => _$setStyleProperty(_el$148, "top", `${layout.top}%`));
+                  return _el$148;
                 }
               })];
             }
-          }), _el$118, _co$31);
+          }), _el$123, _co$33);
           _$effect(_p$ => {
             var _v$39 = dayColumnMinWidth(layouts()),
               _v$40 = `repeat(${hours().length}, minmax(4rem, 1fr))`;
-            _v$39 !== _p$.e && _$setStyleProperty(_el$107, "min-width", _p$.e = _v$39);
-            _v$40 !== _p$.t && _$setStyleProperty(_el$107, "grid-template-rows", _p$.t = _v$40);
+            _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);
             return _p$;
           }, {
             e: undefined,
             t: undefined
           });
-          return _el$107;
+          return _el$112;
         })();
       }
-    }), _el$86, _co$20);
+    }), _el$91, _co$22);
     _$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$74, "grid-template-columns", _p$.e = _v$36);
-      _v$37 !== _p$.t && _$setStyleProperty(_el$83, "grid-template-columns", _p$.t = _v$37);
-      _v$38 !== _p$.a && _$setStyleProperty(_el$84, "grid-template-rows", _p$.a = _v$38);
+      _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);
       return _p$;
     }, {
       e: undefined,
       t: undefined,
       a: undefined
     });
-    return _el$73;
+    return _el$78;
   })();
 };
 const YearView = props => {
@@ -1850,17 +1875,17 @@ const YearView = props => {
     });
   });
   return (() => {
-    var _el$152 = _$getNextElement(_tmpl$37);
-    _$insert(_el$152, _$createComponent(For, {
+    var _el$157 = _$getNextElement(_tmpl$38);
+    _$insert(_el$157, _$createComponent(For, {
       get each() {
         return months();
       },
       children: month => (() => {
-        var _el$153 = _$getNextElement(_tmpl$38),
-          _el$154 = _el$153.firstChild,
-          _el$155 = _el$154.nextSibling;
-        _$insert(_el$154, () => month.label);
-        _$insert(_el$155, _$createComponent(For, {
+        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, {
           get each() {
             return month.days;
           },
@@ -1884,32 +1909,32 @@ const YearView = props => {
                   return day.events[0];
                 },
                 children: event => (() => {
-                  var _el$156 = _$getNextElement(_tmpl$39);
+                  var _el$161 = _$getNextElement(_tmpl$40);
                   _$effect(_p$ => {
                     var _v$52 = event().colorHex ? undefined : event().color ?? "blue",
                       _v$53 = day.isToday ? "true" : undefined,
                       _v$54 = event().colorHex ? {
                         "background-color": day.isToday ? "white" : event().colorHex
                       } : undefined;
-                    _v$52 !== _p$.e && _$setAttribute(_el$156, "data-color", _p$.e = _v$52);
-                    _v$53 !== _p$.t && _$setAttribute(_el$156, "data-today", _p$.t = _v$53);
-                    _p$.a = _$style(_el$156, _v$54, _p$.a);
+                    _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);
                     return _p$;
                   }, {
                     e: undefined,
                     t: undefined,
                     a: undefined
                   });
-                  return _el$156;
+                  return _el$161;
                 })()
               })];
             }
           })
         }));
-        return _el$153;
+        return _el$158;
       })()
     }));
-    return _el$152;
+    return _el$157;
   })();
 };
 const MobileMonthView = props => {
@@ -1917,14 +1942,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$157 = _$getNextElement(_tmpl$41),
-      _el$163 = _el$157.firstChild,
-      [_el$164, _co$42] = _$getNextMarker(_el$163.nextSibling),
-      _el$158 = _el$164.nextSibling,
-      _el$159 = _el$158.firstChild,
-      _el$161 = _el$159.nextSibling,
-      [_el$162, _co$41] = _$getNextMarker(_el$161.nextSibling);
-    _$insert(_el$157, _$createComponent(MonthView, {
+    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, {
       get owner() {
         return {
           ...props.owner,
@@ -1944,27 +1969,27 @@ const MobileMonthView = props => {
         return props.labels;
       },
       compact: true
-    }), _el$164, _co$42);
-    _$insert(_el$159, () => props.selectedDate.toLocaleDateString(dateConfig().locale ?? "en", {
+    }), _el$169, _co$44);
+    _$insert(_el$164, () => props.selectedDate.toLocaleDateString(dateConfig().locale ?? "en", {
       weekday: "long",
       month: "long",
       day: "numeric",
       timeZone: dateConfig().timeZone
     }));
-    _$insert(_el$158, _$createComponent(Show, {
+    _$insert(_el$163, _$createComponent(Show, {
       get when() {
         return selectedEvents().length > 0;
       },
       get fallback() {
         return (() => {
-          var _el$165 = _$getNextElement(_tmpl$42);
-          _$insert(_el$165, () => props.labels.noEvents);
-          return _el$165;
+          var _el$170 = _$getNextElement(_tmpl$43);
+          _$insert(_el$170, () => props.labels.noEvents);
+          return _el$170;
         })();
       },
       get children() {
-        var _el$160 = _$getNextElement(_tmpl$40);
-        _$insert(_el$160, _$createComponent(For, {
+        var _el$165 = _$getNextElement(_tmpl$41);
+        _$insert(_el$165, _$createComponent(For, {
           get each() {
             return selectedEvents();
           },
@@ -1978,18 +2003,18 @@ const MobileMonthView = props => {
             }
           })
         }));
-        return _el$160;
+        return _el$165;
       }
-    }), _el$162, _co$41);
-    return _el$157;
+    }), _el$167, _co$43);
+    return _el$162;
   })();
 };
 const CalendarBody = props => (() => {
-  var _el$166 = _$getNextElement(_tmpl$43);
-  _$insert(_el$166, () => props.children);
-  return _el$166;
+  var _el$171 = _$getNextElement(_tmpl$44);
+  _$insert(_el$171, () => props.children);
+  return _el$171;
 })();
-const Calendar = props => {
+const CalendarRoot = props => {
   const messages = useUiMessages();
   // Subviews derive their date config from the owner props, so the inherited
   // render locale is merged here once; an explicit dateConfig.locale wins.
@@ -2000,6 +2025,7 @@ const Calendar = props => {
     }
   });
   const view = () => props.view ?? "month";
+  const custom = () => props.customViews?.some(option => option.value === view()) ?? false;
   const dateConfig = createMemo(() => ownerDateConfig(owner));
   const safeDate = value => {
     const parsed = parseDate(value, dateConfig());
@@ -2035,14 +2061,14 @@ const Calendar = props => {
     });
   });
   return (() => {
-    var _el$167 = _$getNextElement(_tmpl$44),
-      _el$168 = _el$167.firstChild,
-      [_el$169, _co$43] = _$getNextMarker(_el$168.nextSibling),
-      _el$170 = _el$169.nextSibling,
-      [_el$171, _co$44] = _$getNextMarker(_el$170.nextSibling),
-      _el$172 = _el$171.nextSibling,
-      [_el$173, _co$45] = _$getNextMarker(_el$172.nextSibling);
-    _$insert(_el$167, _$createComponent(CalendarHeader, {
+    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, {
       get date() {
         return date();
       },
@@ -2053,42 +2079,28 @@ const Calendar = props => {
         return mergedLabels();
       },
       owner: owner
-    }), _el$169, _co$43);
-    _$insert(_el$167, () => props.toolbarContent, _el$171, _co$44);
-    _$insert(_el$167, _$createComponent(Show, {
+    }), _el$174, _co$45);
+    _$insert(_el$172, () => props.toolbarContent, _el$176, _co$46);
+    _$insert(_el$172, _$createComponent(Show, {
       get when() {
-        return view() !== "month";
+        return !custom();
       },
       get fallback() {
         return _$createComponent(CalendarBody, {
           get children() {
-            return _$createComponent(MonthView, {
-              owner: owner,
-              get date() {
-                return date();
-              },
-              get now() {
-                return now();
-              },
-              get events() {
-                return normalizedEvents();
-              },
-              get labels() {
-                return mergedLabels();
-              }
-            });
+            return props.children;
           }
         });
       },
       get children() {
         return _$createComponent(Show, {
           get when() {
-            return view() !== "year";
+            return view() !== "month";
           },
           get fallback() {
             return _$createComponent(CalendarBody, {
               get children() {
-                return _$createComponent(YearView, {
+                return _$createComponent(MonthView, {
                   owner: owner,
                   get date() {
                     return date();
@@ -2098,6 +2110,9 @@ const Calendar = props => {
                   },
                   get events() {
                     return normalizedEvents();
+                  },
+                  get labels() {
+                    return mergedLabels();
                   }
                 });
               }
@@ -2106,12 +2121,12 @@ const Calendar = props => {
           get children() {
             return _$createComponent(Show, {
               get when() {
-                return view() !== "mobile-month";
+                return view() !== "year";
               },
               get fallback() {
                 return _$createComponent(CalendarBody, {
                   get children() {
-                    return _$createComponent(MobileMonthView, {
+                    return _$createComponent(YearView, {
                       owner: owner,
                       get date() {
                         return date();
@@ -2119,36 +2134,61 @@ const Calendar = props => {
                       get now() {
                         return now();
                       },
-                      get selectedDate() {
-                        return selectedDate();
-                      },
                       get events() {
                         return normalizedEvents();
-                      },
-                      get labels() {
-                        return mergedLabels();
                       }
                     });
                   }
                 });
               },
               get children() {
-                return _$createComponent(TimeGridView, {
-                  owner: owner,
-                  get date() {
-                    return date();
-                  },
-                  get now() {
-                    return now();
-                  },
-                  get events() {
-                    return normalizedEvents();
+                return _$createComponent(Show, {
+                  get when() {
+                    return view() !== "mobile-month";
                   },
-                  get labels() {
-                    return mergedLabels();
+                  get fallback() {
+                    return _$createComponent(CalendarBody, {
+                      get children() {
+                        return _$createComponent(MobileMonthView, {
+                          owner: owner,
+                          get date() {
+                            return date();
+                          },
+                          get now() {
+                            return now();
+                          },
+                          get selectedDate() {
+                            return selectedDate();
+                          },
+                          get events() {
+                            return normalizedEvents();
+                          },
+                          get labels() {
+                            return mergedLabels();
+                          }
+                        });
+                      }
+                    });
                   },
-                  get days() {
-                    return days();
+                  get children() {
+                    return _$createComponent(TimeGridView, {
+                      owner: owner,
+                      get date() {
+                        return date();
+                      },
+                      get now() {
+                        return now();
+                      },
+                      get events() {
+                        return normalizedEvents();
+                      },
+                      get labels() {
+                        return mergedLabels();
+                      },
+                      get days() {
+                        return days();
+                      }
+                    });
                   }
                 });
               }
@@ -2156,20 +2196,26 @@ const Calendar = props => {
           }
         });
       }
-    }), _el$173, _co$45);
+    }), _el$178, _co$47);
     _$effect(_p$ => {
       var _v$55 = `k2b-content-calendar ${props.class ?? ""}`,
         _v$56 = props.navigationPending ? "true" : undefined;
-      _v$55 !== _p$.e && _$className(_el$167, _p$.e = _v$55);
-      _v$56 !== _p$.t && _$setAttribute(_el$167, "aria-busy", _p$.t = _v$56);
+      _v$55 !== _p$.e && _$className(_el$172, _p$.e = _v$55);
+      _v$56 !== _p$.t && _$setAttribute(_el$172, "aria-busy", _p$.t = _v$56);
       return _p$;
     }, {
       e: undefined,
       t: undefined
     });
-    return _el$167;
+    return _el$172;
   })();
 };
+
+/** JSX infers the values of `customViews`; inference from the last signature, as in `createComponent`, sees plain props. */
+
+function Calendar(props) {
+  return CalendarRoot(props);
+}
 export default Calendar;
 _$delegateEvents(["click", "dblclick", "pointerdown", "keydown"]);
 //# sourceMappingURL=Calendar.js.map