@k2b/ui 0.18.0 → 0.20.0

package/dist/ssr/content/Calendar.js

@@ -4,52 +4,53 @@ import { ssrElement as _$ssrElement } from "solid-js/web";
 import { mergeProps as _$mergeProps } from "solid-js/web";
 import { ssrStyle as _$ssrStyle } from "solid-js/web";
 import { ssrAttribute as _$ssrAttribute } from "solid-js/web";
+import { escape as _$escape } from "solid-js/web";
 import { createComponent as _$createComponent } from "solid-js/web";
 import { ssr as _$ssr } from "solid-js/web";
-import { escape as _$escape } from "solid-js/web";
-var _tmpl$ = ["<span class=\"k2b-calendar-event__title\">", "</span>"],
-  _tmpl$2 = ["<span class=\"k2b-calendar-event__meta\">", "</span>"],
-  _tmpl$3 = ["<span class=\"k2b-calendar-event__description\">", "</span>"],
-  _tmpl$4 = ["<a", " class=\"k2b-calendar-event\" data-calendar-event", " style=\"", "\"", ">", "</a>"],
-  _tmpl$5 = ["<button type=\"button\" class=\"k2b-calendar-event\" data-calendar-event", " data-interactive=\"true\"", " style=\"", "\"", ">", "</button>"],
-  _tmpl$6 = ["<div class=\"k2b-calendar-event\" role=\"group\" data-calendar-event", " style=\"", "\"", ">", "</div>"],
-  _tmpl$7 = ["<div role=\"radiogroup\"", " aria-orientation=\"horizontal\" class=\"k2b-segmented-control k2b-calendar-view-switcher\">", "</div>"],
-  _tmpl$8 = ["<i class=\"", "\"></i>"],
-  _tmpl$9 = ["<button type=\"button\"", " class=\"k2b-calendar-header__nav-button\"><i class=\"", "\"></i></button>"],
-  _tmpl$0 = ["<span class=\"k2b-button__label\">", "</span>"],
-  _tmpl$1 = "<span class=\"k2b-calendar-header__progress\" aria-hidden=\"true\"></span>",
-  _tmpl$10 = ["<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>", "</header>"],
-  _tmpl$11 = ["<div class=\"k2b-calendar-month__weekday\">", "</div>"],
-  _tmpl$12 = ["<div class=\"k2b-calendar-month\" style=\"", "\"><div class=\"k2b-calendar-month__weekdays\"", ">", "", "</div>", "</div>"],
-  _tmpl$13 = ["<div class=\"k2b-calendar-month__week-number\">", "</div>"],
-  _tmpl$14 = ["<div class=\"k2b-calendar-month__week\"", ">", "", "</div>"],
-  _tmpl$15 = ["<div class=\"k2b-calendar-preview\">", "</div>"],
-  _tmpl$16 = ["<div class=\"k2b-calendar-month__day\"", ">", "<div class=\"k2b-calendar-month__day-header\">", "", "</div><div class=\"k2b-calendar-month__events\">", "", "", "</div><div class=\"k2b-calendar-month__dots\">", "</div></div>"],
-  _tmpl$17 = ["<span class=\"k2b-calendar-month__day-number\"", ">", "</span>"],
-  _tmpl$18 = ["<span class=\"k2b-calendar-month__badge\">", "", "</span>"],
-  _tmpl$19 = ["<span class=\"k2b-calendar-dot\"", " style=\"", "\"></span>"],
-  _tmpl$20 = ["<div class=\"k2b-calendar-time-grid__all-day\" style=\"", "\"><div class=\"k2b-calendar-time-grid__all-day-label\">", "</div>", "</div>"],
-  _tmpl$21 = ["<div class=\"k2b-calendar-time-grid\"><div class=\"k2b-calendar-time-grid__days\" style=\"", "\"><div></div>", "</div>", "<div class=\"k2b-calendar-time-grid__scroll\"><div class=\"k2b-calendar-time-grid__grid\" style=\"", "\"><div class=\"k2b-calendar-time-grid__gutter\" style=\"", "\">", "</div>", "</div></div></div>"],
-  _tmpl$22 = ["<span class=\"k2b-calendar-time-grid__day-label\"", ">", "</span>"],
-  _tmpl$23 = ["<span class=\"k2b-calendar-time-grid__badge\">", "", "</span>"],
-  _tmpl$24 = ["<div class=\"k2b-calendar-time-grid__all-day-events\">", "", "</div>"],
-  _tmpl$25 = ["<div class=\"k2b-calendar-time-grid__hour\"", ">", ":00</div>"],
-  _tmpl$26 = ["<div class=\"k2b-calendar-time-grid__now\" style=\"", "\"></div>"],
-  _tmpl$27 = ["<div class=\"k2b-calendar-time-grid__column\" style=\"", "\">", "", "", "", "", "</div>"],
-  _tmpl$28 = ["<div class=\"k2b-calendar-preview__title\">", "</div>"],
-  _tmpl$29 = ["<div class=\"k2b-calendar-preview k2b-calendar-preview--timed\"", " style=\"", "\"><div class=\"k2b-calendar-preview__content\">", "<div class=\"k2b-calendar-preview__label\">", " - ", "</div></div></div>"],
-  _tmpl$30 = ["<button type=\"button\"", " draggable=\"false\" class=\"k2b-calendar-time-grid__resize\"><span class=\"k2b-calendar-time-grid__resize-icon\" aria-hidden=\"true\"></span></button>"],
-  _tmpl$31 = ["<div class=\"k2b-calendar-time-grid__event-position\" style=\"", "\"><div class=\"k2b-calendar-time-grid__event-frame\">", "", "</div></div>"],
-  _tmpl$32 = ["<button type=\"button\" class=\"k2b-calendar-time-grid__overflow\" style=\"", "\"", "><span class=\"k2b-calendar-time-grid__overflow-count\">+", "</span></button>"],
-  _tmpl$33 = ["<div class=\"k2b-calendar-time-grid__overflow-menu\" style=\"", "\"><div class=\"k2b-calendar-time-grid__overflow-title\">", " - ", "</div>", "</div>"],
-  _tmpl$34 = ["<div class=\"k2b-calendar-year\">", "</div>"],
-  _tmpl$35 = ["<div class=\"k2b-calendar-year__month\"><div class=\"k2b-calendar-year__title\">", "</div><div class=\"k2b-calendar-year__grid\">", "</div></div>"],
-  _tmpl$36 = ["<span class=\"k2b-calendar-year__indicator\"", " style=\"", "\"></span>"],
-  _tmpl$37 = ["<div class=\"k2b-calendar-mobile-month__events\">", "</div>"],
-  _tmpl$38 = ["<div class=\"k2b-calendar-mobile-month\">", "<div class=\"k2b-calendar-mobile-month__agenda\"><div class=\"k2b-calendar-mobile-month__title\">", "</div>", "</div></div>"],
-  _tmpl$39 = ["<div class=\"k2b-calendar-mobile-month__empty\">", "</div>"],
-  _tmpl$40 = ["<div class=\"k2b-calendar-body\">", "</div>"],
-  _tmpl$41 = ["<section class=\"", "\"", ">", "", "", "</section>"];
+var _tmpl$ = "<span class=\"k2b-calendar-event__marker\" aria-hidden=\"true\"></span>",
+  _tmpl$2 = ["<span class=\"k2b-calendar-event__title\">", "", "</span>"],
+  _tmpl$3 = ["<span class=\"k2b-calendar-event__meta\">", "</span>"],
+  _tmpl$4 = ["<span class=\"k2b-calendar-event__description\">", "</span>"],
+  _tmpl$5 = ["<a", " class=\"k2b-calendar-event\" data-calendar-event", " style=\"", "\"", ">", "</a>"],
+  _tmpl$6 = ["<button type=\"button\" class=\"k2b-calendar-event\" data-calendar-event", " data-interactive=\"true\"", " style=\"", "\"", ">", "</button>"],
+  _tmpl$7 = ["<div class=\"k2b-calendar-event\" role=\"group\" data-calendar-event", " style=\"", "\"", ">", "</div>"],
+  _tmpl$8 = ["<div role=\"radiogroup\"", " aria-orientation=\"horizontal\" class=\"k2b-segmented-control k2b-calendar-view-switcher\">", "</div>"],
+  _tmpl$9 = ["<i class=\"", "\"></i>"],
+  _tmpl$0 = ["<button type=\"button\"", " class=\"k2b-calendar-header__nav-button\"><i class=\"", "\"></i></button>"],
+  _tmpl$1 = ["<span class=\"k2b-button__label\">", "</span>"],
+  _tmpl$10 = "<span class=\"k2b-calendar-header__progress\" aria-hidden=\"true\"></span>",
+  _tmpl$11 = ["<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>", "</header>"],
+  _tmpl$12 = ["<div class=\"k2b-calendar-month__weekday\">", "</div>"],
+  _tmpl$13 = ["<div class=\"k2b-calendar-month\" style=\"", "\"><div class=\"k2b-calendar-month__weekdays\"", ">", "", "</div>", "</div>"],
+  _tmpl$14 = ["<div class=\"k2b-calendar-month__week-number\">", "</div>"],
+  _tmpl$15 = ["<div class=\"k2b-calendar-month__week\"", ">", "", "</div>"],
+  _tmpl$16 = ["<div class=\"k2b-calendar-preview\">", "</div>"],
+  _tmpl$17 = ["<div class=\"k2b-calendar-month__day\"", ">", "<div class=\"k2b-calendar-month__day-header\">", "", "</div><div class=\"k2b-calendar-month__events\">", "", "", "</div><div class=\"k2b-calendar-month__dots\">", "</div></div>"],
+  _tmpl$18 = ["<span class=\"k2b-calendar-month__day-number\"", ">", "</span>"],
+  _tmpl$19 = ["<span class=\"k2b-calendar-month__badge\">", "", "</span>"],
+  _tmpl$20 = ["<span class=\"k2b-calendar-dot\"", " style=\"", "\"></span>"],
+  _tmpl$21 = ["<div class=\"k2b-calendar-time-grid__all-day\" style=\"", "\"><div class=\"k2b-calendar-time-grid__all-day-label\">", "</div>", "</div>"],
+  _tmpl$22 = ["<div class=\"k2b-calendar-time-grid\"><div class=\"k2b-calendar-time-grid__days\" style=\"", "\"><div></div>", "</div>", "<div class=\"k2b-calendar-time-grid__scroll\"><div class=\"k2b-calendar-time-grid__grid\" style=\"", "\"><div class=\"k2b-calendar-time-grid__gutter\" style=\"", "\">", "</div>", "</div></div></div>"],
+  _tmpl$23 = ["<span class=\"k2b-calendar-time-grid__day-label\"", ">", "</span>"],
+  _tmpl$24 = ["<span class=\"k2b-calendar-time-grid__badge\">", "", "</span>"],
+  _tmpl$25 = ["<div class=\"k2b-calendar-time-grid__all-day-events\">", "", "</div>"],
+  _tmpl$26 = ["<div class=\"k2b-calendar-time-grid__hour\"", ">", ":00</div>"],
+  _tmpl$27 = ["<div class=\"k2b-calendar-time-grid__now\" style=\"", "\"></div>"],
+  _tmpl$28 = ["<div class=\"k2b-calendar-time-grid__column\" style=\"", "\">", "", "", "", "", "</div>"],
+  _tmpl$29 = ["<div class=\"k2b-calendar-preview__title\">", "</div>"],
+  _tmpl$30 = ["<div class=\"k2b-calendar-preview k2b-calendar-preview--timed\"", " style=\"", "\"><div class=\"k2b-calendar-preview__content\">", "<div class=\"k2b-calendar-preview__label\">", " - ", "</div></div></div>"],
+  _tmpl$31 = ["<button type=\"button\"", " draggable=\"false\" class=\"k2b-calendar-time-grid__resize\"><span class=\"k2b-calendar-time-grid__resize-icon\" aria-hidden=\"true\"></span></button>"],
+  _tmpl$32 = ["<div class=\"k2b-calendar-time-grid__event-position\" style=\"", "\"><div class=\"k2b-calendar-time-grid__event-frame\">", "", "</div></div>"],
+  _tmpl$33 = ["<button type=\"button\" class=\"k2b-calendar-time-grid__overflow\" style=\"", "\"", "><span class=\"k2b-calendar-time-grid__overflow-count\">+", "</span></button>"],
+  _tmpl$34 = ["<div class=\"k2b-calendar-time-grid__overflow-menu\" style=\"", "\"><div class=\"k2b-calendar-time-grid__overflow-title\">", " - ", "</div>", "</div>"],
+  _tmpl$35 = ["<div class=\"k2b-calendar-year\">", "</div>"],
+  _tmpl$36 = ["<div class=\"k2b-calendar-year__month\"><div class=\"k2b-calendar-year__title\">", "</div><div class=\"k2b-calendar-year__grid\">", "</div></div>"],
+  _tmpl$37 = ["<span class=\"k2b-calendar-year__indicator\"", " style=\"", "\"></span>"],
+  _tmpl$38 = ["<div class=\"k2b-calendar-mobile-month__events\">", "</div>"],
+  _tmpl$39 = ["<div class=\"k2b-calendar-mobile-month\">", "<div class=\"k2b-calendar-mobile-month__agenda\"><div class=\"k2b-calendar-mobile-month__title\">", "</div>", "</div></div>"],
+  _tmpl$40 = ["<div class=\"k2b-calendar-mobile-month__empty\">", "</div>"],
+  _tmpl$41 = ["<div class=\"k2b-calendar-body\">", "</div>"],
+  _tmpl$42 = ["<section class=\"", "\"", ">", "", "", "</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";
@@ -59,6 +60,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,
@@ -228,11 +234,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,
@@ -242,26 +251,33 @@ const EventChip = props => {
     durationHours: durationHours(),
     timeLabel: timeLabel()
   });
-  const defaultContent = [_$ssr(_tmpl$, _$escape(props.event.title)), _$createComponent(Show, {
+  const defaultContent = [_$ssr(_tmpl$2, _$escape(_$createComponent(Show, {
+    get when() {
+      return props.event.display === "marker";
+    },
+    get children() {
+      return _$ssr(_tmpl$);
+    }
+  })), _$escape(props.event.title)), _$createComponent(Show, {
     get when() {
       return showTime();
     },
     get children() {
-      return _$ssr(_tmpl$2, _$escape(timeLabel()));
+      return _$ssr(_tmpl$3, _$escape(timeLabel()));
     }
   }), _$createComponent(Show, {
     get when() {
       return showLocation();
     },
     get children() {
-      return _$ssr(_tmpl$2, _$escape(props.event.location));
+      return _$ssr(_tmpl$3, _$escape(props.event.location));
     }
   }), _$createComponent(Show, {
     get when() {
       return showDescription();
     },
     get children() {
-      return _$ssr(_tmpl$3, _$escape(props.event.description));
+      return _$ssr(_tmpl$4, _$escape(props.event.description));
     }
   })];
   const content = () => renderedEvent() ?? defaultContent;
@@ -296,7 +312,7 @@ const EventChip = props => {
       suppressClickUntil = performance.now() + 400;
     });
   };
-  return props.href ? _$ssr(_tmpl$4, _$ssrAttribute("href", _$escape(props.href, true), false), _$ssrAttribute("data-color", props.event.colorHex ? _$escape(undefined, true) : _$escape(color(), true), false) + _$ssrAttribute("data-selected", selected() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-compact", props.compact ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-fill", props.fill ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-short", short() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-moving", props.moving ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-interactive", isInteractive() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-display", _$escape(props.event.display, true), false) + _$ssrAttribute("data-space-item-id", _$escape(props.event.dataSpaceItemId, true), false), _$ssrStyle(style()), _$ssrAttribute("draggable", props.onMovePointerDown ? _$escape(false, true) : _$escape(undefined, true), false) + _$ssrAttribute("aria-label", _$escape(ariaLabel(), true), false), _$escape(content())) : isActionable() ? _$ssr(_tmpl$5, _$ssrAttribute("data-color", props.event.colorHex ? _$escape(undefined, true) : _$escape(color(), true), false) + _$ssrAttribute("data-selected", selected() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-compact", props.compact ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-fill", props.fill ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-short", short() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-moving", props.moving ? "true" : _$escape(undefined, true), false), _$ssrAttribute("data-display", _$escape(props.event.display, true), false), _$ssrStyle(style()), _$ssrAttribute("aria-label", _$escape(ariaLabel(), true), false), _$escape(content())) : _$ssr(_tmpl$6, _$ssrAttribute("data-color", props.event.colorHex ? _$escape(undefined, true) : _$escape(color(), true), false) + _$ssrAttribute("data-selected", selected() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-compact", props.compact ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-fill", props.fill ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-short", short() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-moving", props.moving ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-interactive", _$escape(undefined, true), false) + _$ssrAttribute("data-display", _$escape(props.event.display, true), false), _$ssrStyle(style()), _$ssrAttribute("aria-label", _$escape(ariaLabel(), true), false), _$escape(content()));
+  return props.href ? _$ssr(_tmpl$5, _$ssrAttribute("href", _$escape(props.href, true), false), _$ssrAttribute("data-color", props.event.colorHex ? _$escape(undefined, true) : _$escape(color(), true), false) + _$ssrAttribute("data-selected", selected() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-compact", props.compact ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-fill", props.fill ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-short", short() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-moving", props.moving ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-interactive", isInteractive() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-display", _$escape(props.event.display, true), false) + _$ssrAttribute("data-space-item-id", _$escape(props.event.dataSpaceItemId, true), false), _$ssrStyle(style()), _$ssrAttribute("draggable", props.onMovePointerDown ? _$escape(false, true) : _$escape(undefined, true), false) + _$ssrAttribute("aria-label", _$escape(ariaLabel(), true), false), _$escape(content())) : isActionable() ? _$ssr(_tmpl$6, _$ssrAttribute("data-color", props.event.colorHex ? _$escape(undefined, true) : _$escape(color(), true), false) + _$ssrAttribute("data-selected", selected() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-compact", props.compact ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-fill", props.fill ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-short", short() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-moving", props.moving ? "true" : _$escape(undefined, true), false), _$ssrAttribute("data-display", _$escape(props.event.display, true), false), _$ssrStyle(style()), _$ssrAttribute("aria-label", _$escape(ariaLabel(), true), false), _$escape(content())) : _$ssr(_tmpl$7, _$ssrAttribute("data-color", props.event.colorHex ? _$escape(undefined, true) : _$escape(color(), true), false) + _$ssrAttribute("data-selected", selected() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-compact", props.compact ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-fill", props.fill ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-short", short() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-moving", props.moving ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-interactive", _$escape(undefined, true), false) + _$ssrAttribute("data-display", _$escape(props.event.display, true), false), _$ssrStyle(style()), _$ssrAttribute("aria-label", _$escape(ariaLabel(), true), false), _$escape(content()));
 };
 const slotInteractionProps = (owner, slot, suppressed, nativeControl = false) => {
   const isSlotChild = event => {
@@ -379,7 +395,7 @@ const CalendarViewLinks = props => {
       refs[event.key === "Home" ? 0 : props.options.length - 1]?.click();
     }
   };
-  return _$ssr(_tmpl$7, _$ssrAttribute("aria-label", _$escape(messages().calendarView, true), false), _$escape(_$createComponent(For, {
+  return _$ssr(_tmpl$8, _$ssrAttribute("aria-label", _$escape(messages().calendarView, true), false), _$escape(_$createComponent(For, {
     get each() {
       return props.options;
     },
@@ -413,10 +429,12 @@ const CalendarViewLinks = props => {
     }
   })));
 };
+
+/** 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();
@@ -428,7 +446,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",
@@ -460,9 +478,9 @@ const CalendarHeader = props => {
         class: "k2b-calendar-header__nav-button"
       },
       get children() {
-        return _$ssr(_tmpl$8, `ti ${_$escape(icon, true)}`);
+        return _$ssr(_tmpl$9, `ti ${_$escape(icon, true)}`);
       }
-    }) : props.owner.onDateChange ? _$ssr(_tmpl$9, _$ssrAttribute("aria-label", _$escape(label, true), false), `ti ${_$escape(icon, true)}`) : _$createComponent(CalendarNavigationLink, {
+    }) : props.owner.onDateChange ? _$ssr(_tmpl$0, _$ssrAttribute("aria-label", _$escape(label, true), false), `ti ${_$escape(icon, true)}`) : _$createComponent(CalendarNavigationLink, {
       get owner() {
         return props.owner;
       },
@@ -473,14 +491,14 @@ const CalendarHeader = props => {
         class: "k2b-calendar-header__nav-button"
       },
       get children() {
-        return _$ssr(_tmpl$8, `ti ${_$escape(icon, true)}`);
+        return _$ssr(_tmpl$9, `ti ${_$escape(icon, true)}`);
       }
     });
   };
   const todayButton = () => {
     const today = calendar.today(dateConfig());
     const href = props.owner.getDateHref?.(today, props.view);
-    const label = _$ssr(_tmpl$0, _$escape(props.labels.today));
+    const label = _$ssr(_tmpl$1, _$escape(props.labels.today));
     return (props.owner.onNavigateHref || props.owner.onNavigate) && href ? _$createComponent(CalendarNavigationLink, {
       get owner() {
         return props.owner;
@@ -514,7 +532,7 @@ const CalendarHeader = props => {
       children: label
     });
   };
-  const viewOptions = createMemo(() => [{
+  const viewOptions = createMemo(() => [...[{
     value: "day",
     label: props.labels.day
   }, {
@@ -526,8 +544,8 @@ const CalendarHeader = props => {
   }, {
     value: "year",
     label: props.labels.year
-  }].filter(option => !props.owner.views || props.owner.views.includes(option.value)));
-  return _$ssr(_tmpl$10, _$escape(navButton(previous(), "ti-chevron-left", props.labels.previous)), _$escape(navButton(next(), "ti-chevron-right", props.labels.next)), _$escape(title()), _$escape(todayButton()), _$escape(_$createComponent(Show, {
+  }].filter(option => !props.owner.views || props.owner.views.includes(option.value)), ...(props.owner.customViews ?? [])]);
+  return _$ssr(_tmpl$11, _$escape(navButton(previous(), "ti-chevron-left", props.labels.previous)), _$escape(navButton(next(), "ti-chevron-right", props.labels.next)), _$escape(title()), _$escape(todayButton()), _$escape(_$createComponent(Show, {
     get when() {
       return _$memo(() => !!!props.owner.onViewChange)() && props.owner.getViewHref;
     },
@@ -561,7 +579,7 @@ const CalendarHeader = props => {
       return props.owner.navigationPending;
     },
     get children() {
-      return _$ssr(_tmpl$1);
+      return _$ssr(_tmpl$10);
     }
   })));
 };
@@ -619,28 +637,28 @@ const MonthView = props => {
     });
   };
   onCleanup(() => cancelInteraction?.());
-  return _$ssr(_tmpl$12, _$ssrStyleProperty("grid-template-rows:", `auto repeat(${_$escape(weeks().length, true)}, ${props.compact ? "minmax(2.75rem, auto)" : "minmax(5rem, 1fr)"})`), _$ssrAttribute("data-week-numbers", props.owner.withWeekNumbers ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+  return _$ssr(_tmpl$13, _$ssrStyleProperty("grid-template-rows:", `auto repeat(${_$escape(weeks().length, true)}, ${props.compact ? "minmax(2.75rem, auto)" : "minmax(5rem, 1fr)"})`), _$ssrAttribute("data-week-numbers", props.owner.withWeekNumbers ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
     get when() {
       return props.owner.withWeekNumbers;
     },
     get children() {
-      return _$ssr(_tmpl$11, _$escape(messages().weekShort));
+      return _$ssr(_tmpl$12, _$escape(messages().weekShort));
     }
   })), _$escape(_$createComponent(For, {
     get each() {
       return weekdays();
     },
-    children: day => _$ssr(_tmpl$11, _$escape(day))
+    children: day => _$ssr(_tmpl$12, _$escape(day))
   })), _$escape(_$createComponent(For, {
     get each() {
       return weeks();
     },
-    children: week => _$ssr(_tmpl$14, _$ssrAttribute("data-week-numbers", props.owner.withWeekNumbers ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+    children: week => _$ssr(_tmpl$15, _$ssrAttribute("data-week-numbers", props.owner.withWeekNumbers ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
       get when() {
         return props.owner.withWeekNumbers;
       },
       get children() {
-        return _$ssr(_tmpl$13, _$escape(zonedWeekNumber(week[0], dateConfig())));
+        return _$ssr(_tmpl$14, _$escape(zonedWeekNumber(week[0], dateConfig())));
       }
     })), _$escape(_$createComponent(For, {
       each: week,
@@ -669,7 +687,7 @@ const MonthView = props => {
             hiddenCount: Math.max(0, candidates.length - visibleLimit)
           };
         });
-        return _$ssr(_tmpl$16, _$ssrAttribute("data-calendar-day-key", _$escape(dayKey, true), false) + _$ssrAttribute("data-outside", !sameMonth ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-drop-preview", movePreview()?.start && calendar.formatDateKey(movePreview().start, dateConfig()) === dayKey ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+        return _$ssr(_tmpl$17, _$ssrAttribute("data-calendar-day-key", _$escape(dayKey, true), false) + _$ssrAttribute("data-outside", !sameMonth ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-drop-preview", movePreview()?.start && calendar.formatDateKey(movePreview().start, dateConfig()) === dayKey ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
           get when() {
             return props.owner.onSlotActivate;
           },
@@ -718,7 +736,7 @@ const MonthView = props => {
             return props.owner.onSlotActivate && href;
           },
           get fallback() {
-            return _$ssr(_tmpl$17, _$ssrAttribute("data-today", isToday ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-outside", !sameMonth ? "true" : _$escape(undefined, true), false), _$escape(calendar.formatDayNumber(day, dateConfig())));
+            return _$ssr(_tmpl$18, _$ssrAttribute("data-today", isToday ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-outside", !sameMonth ? "true" : _$escape(undefined, true), false), _$escape(calendar.formatDayNumber(day, dateConfig())));
           },
           children: dayHref => _$createComponent(CalendarNavigationLink, {
             get owner() {
@@ -743,18 +761,18 @@ const MonthView = props => {
           })
         })), _$escape(_$createComponent(Show, {
           when: dayBadge,
-          children: badge => _$ssr(_tmpl$18, _$escape(_$createComponent(Show, {
+          children: badge => _$ssr(_tmpl$19, _$escape(_$createComponent(Show, {
             get when() {
               return badge().icon;
             },
-            children: icon => _$ssr(_tmpl$8, `k2b-calendar-month__badge-icon ti ti-${_$escape(icon(), true)}`)
+            children: icon => _$ssr(_tmpl$9, `k2b-calendar-month__badge-icon ti ti-${_$escape(icon(), true)}`)
           })), _$escape(badge().label))
         })), _$escape(_$createComponent(Show, {
           get when() {
             return eventStack().preview;
           },
           get children() {
-            return _$ssr(_tmpl$15, _$escape(props.events.find(event => event.id === eventStack().preview.id)?.title ?? messages().moveEvent));
+            return _$ssr(_tmpl$16, _$escape(props.events.find(event => event.id === eventStack().preview.id)?.title ?? messages().moveEvent));
           }
         })), _$escape(_$createComponent(For, {
           get each() {
@@ -798,7 +816,7 @@ const MonthView = props => {
           get each() {
             return events.slice(0, 4);
           },
-          children: event => _$ssr(_tmpl$19, _$ssrAttribute("data-color", event.colorHex ? _$escape(undefined, true) : _$escape(event.color ?? "blue", true), false), _$ssrStyle(event.colorHex ? {
+          children: event => _$ssr(_tmpl$20, _$ssrAttribute("data-color", event.colorHex ? _$escape(undefined, true) : _$escape(event.color ?? "blue", true), false), _$ssrStyle(event.colorHex ? {
             "background-color": event.colorHex
           } : undefined))
         })));
@@ -1009,13 +1027,15 @@ 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 _$ssr(_tmpl$21, _$ssrStyleProperty("grid-template-columns:", `4rem repeat(${_$escape(props.days.length, true)}, minmax(0, 1fr))`), _$escape(_$createComponent(For, {
+  return _$ssr(_tmpl$22, _$ssrStyleProperty("grid-template-columns:", `4rem repeat(${_$escape(props.days.length, true)}, minmax(0, 1fr))`), _$escape(_$createComponent(For, {
     get each() {
       return props.days;
     },
@@ -1033,13 +1053,13 @@ const TimeGridView = props => {
           class: "k2b-calendar-time-grid__day"
         },
         get children() {
-          return [_$ssr(_tmpl$22, _$ssrAttribute("data-today", today() ? "true" : _$escape(undefined, true), false), _$escape(formatDay(day, dateConfig()))), _$createComponent(Show, {
+          return [_$ssr(_tmpl$23, _$ssrAttribute("data-today", today() ? "true" : _$escape(undefined, true), false), _$escape(formatDay(day, dateConfig()))), _$createComponent(Show, {
             when: dayBadge,
-            children: badge => _$ssr(_tmpl$23, _$escape(_$createComponent(Show, {
+            children: badge => _$ssr(_tmpl$24, _$escape(_$createComponent(Show, {
               get when() {
                 return badge().icon;
               },
-              children: icon => _$ssr(_tmpl$8, `k2b-calendar-time-grid__badge-icon ti ti-${_$escape(icon(), true)}`)
+              children: icon => _$ssr(_tmpl$9, `k2b-calendar-time-grid__badge-icon ti ti-${_$escape(icon(), true)}`)
             })), _$escape(badge().label))
           })];
         }
@@ -1050,7 +1070,7 @@ const TimeGridView = props => {
       return !props.owner.hideAllDay;
     },
     get children() {
-      return _$ssr(_tmpl$20, _$ssrStyleProperty("grid-template-columns:", `4rem repeat(${_$escape(props.days.length, true)}, minmax(0, 1fr))`) + _$ssrStyleProperty(";max-height:", `${_$escape(props.owner.allDayMaxHeightRem ?? 7, true)}rem`), _$escape(props.labels.allDay), _$escape(_$createComponent(For, {
+      return _$ssr(_tmpl$21, _$ssrStyleProperty("grid-template-columns:", `4rem repeat(${_$escape(props.days.length, true)}, minmax(0, 1fr))`) + _$ssrStyleProperty(";max-height:", `${_$escape(props.owner.allDayMaxHeightRem ?? 7, true)}rem`), _$escape(props.labels.allDay), _$escape(_$createComponent(For, {
         get each() {
           return props.days;
         },
@@ -1074,9 +1094,9 @@ const TimeGridView = props => {
               end: calendar.addDays(start, 1, dateConfig()),
               allDay: true
             };
-          }, () => performance.now() < suppressSlotClickUntil)), _$ssr(_tmpl$24, _$escape(_$createComponent(For, {
+          }, () => performance.now() < suppressSlotClickUntil)), _$ssr(_tmpl$25, _$escape(_$createComponent(For, {
             each: previewAllDay,
-            children: event => _$ssr(_tmpl$15, _$escape(event.title))
+            children: event => _$ssr(_tmpl$16, _$escape(event.title))
           })), _$escape(_$createComponent(For, {
             get each() {
               return allDay();
@@ -1105,7 +1125,7 @@ const TimeGridView = props => {
     get each() {
       return hours();
     },
-    children: hour => _$ssr(_tmpl$25, _$ssrAttribute("data-outside-business", hour < businessStartHour() || hour > businessEndHour() ? "true" : _$escape(undefined, true), false), _$escape(`${hour}`.padStart(2, "0")))
+    children: hour => _$ssr(_tmpl$26, _$ssrAttribute("data-outside-business", hour < businessStartHour() || hour > businessEndHour() ? "true" : _$escape(undefined, true), false), _$escape(`${hour}`.padStart(2, "0")))
   })), _$escape(_$createComponent(For, {
     get each() {
       return props.days;
@@ -1113,12 +1133,12 @@ const TimeGridView = props => {
     children: day => {
       const dayKey = calendar.formatDateKey(day, dateConfig());
       const layouts = createMemo(() => timedEventLayouts(eventsByDay().get(dayKey)?.timed ?? []));
-      return _$ssr(_tmpl$27, _$ssrStyleProperty("min-width:", _$escape(dayColumnMinWidth(layouts()), true)) + _$ssrStyleProperty(";grid-template-rows:", `repeat(${_$escape(hours().length, true)}, minmax(4rem, 1fr))`), _$escape(_$createComponent(Show, {
+      return _$ssr(_tmpl$28, _$ssrStyleProperty("min-width:", _$escape(dayColumnMinWidth(layouts()), true)) + _$ssrStyleProperty(";grid-template-rows:", `repeat(${_$escape(hours().length, true)}, minmax(4rem, 1fr))`), _$escape(_$createComponent(Show, {
         get when() {
           return currentTimeLine(day) !== null;
         },
         get children() {
-          return _$ssr(_tmpl$26, _$ssrStyleProperty("top:", `${_$escape(currentTimeLine(day) ?? 0, true)}%`));
+          return _$ssr(_tmpl$27, _$ssrStyleProperty("top:", `${_$escape(currentTimeLine(day) ?? 0, true)}%`));
         }
       })), _$escape(_$createComponent(For, {
         get each() {
@@ -1147,12 +1167,12 @@ const TimeGridView = props => {
         children: event => {
           const layout = eventLayout(event);
           const short = event.endDate.getTime() - event.startDate.getTime() < 60 * 60_000;
-          return _$ssr(_tmpl$29, _$ssrAttribute("data-short", short ? "true" : _$escape(undefined, true), false), _$ssrStyleProperty("top:", `${_$escape(layout.top, true)}%`) + _$ssrStyleProperty(";height:", `${_$escape(layout.height, true)}%`), _$escape(_$createComponent(Show, {
+          return _$ssr(_tmpl$30, _$ssrAttribute("data-short", short ? "true" : _$escape(undefined, true), false), _$ssrStyleProperty("top:", `${_$escape(layout.top, true)}%`) + _$ssrStyleProperty(";height:", `${_$escape(layout.height, true)}%`), _$escape(_$createComponent(Show, {
             get when() {
               return event.title;
             },
             get children() {
-              return _$ssr(_tmpl$28, _$escape(event.title));
+              return _$ssr(_tmpl$29, _$escape(event.title));
             }
           })), _$escape(formatTime(event.startDate, dateConfig())), _$escape(formatTime(event.endDate, dateConfig())));
         }
@@ -1198,7 +1218,7 @@ const TimeGridView = props => {
               onCancel: clearInteraction
             });
           };
-          return _$ssr(_tmpl$31, _$ssrStyleProperty("top:", `${_$escape(layout.top, true)}%`) + _$ssrStyleProperty(";height:", `${_$escape(layout.height, true)}%`) + _$ssrStyleProperty(";left:", _$escape(position.left, true)) + _$ssrStyleProperty(";width:", _$escape(position.width, true)) + _$ssrStyleProperty(";z-index:", _$escape(String(20 + layoutItem.lane), true)), _$escape(_$createComponent(EventChip, {
+          return _$ssr(_tmpl$32, _$ssrStyleProperty("top:", `${_$escape(layout.top, true)}%`) + _$ssrStyleProperty(";height:", `${_$escape(layout.height, true)}%`) + _$ssrStyleProperty(";left:", _$escape(position.left, true)) + _$ssrStyleProperty(";width:", _$escape(position.width, true)) + _$ssrStyleProperty(";z-index:", _$escape(String(20 + layoutItem.lane), true)), _$escape(_$createComponent(EventChip, {
             event: event,
             get owner() {
               return props.owner;
@@ -1218,7 +1238,7 @@ const TimeGridView = props => {
               return props.owner.onEventResize;
             },
             get children() {
-              return _$ssr(_tmpl$30, _$ssrAttribute("aria-label", _$escape(messages().resizeEvent, true), false));
+              return _$ssr(_tmpl$31, _$ssrAttribute("aria-label", _$escape(messages().resizeEvent, true), false));
             }
           })));
         }
@@ -1230,14 +1250,14 @@ const TimeGridView = props => {
           const layout = timeRangeLayout(overflow.groupStartDate, overflow.groupEndDate);
           const key = `${dayKey}-${overflow.groupId}`;
           const hiddenTitle = () => overflow.hiddenEvents.map(event => `${formatTime(event.startDate, dateConfig())} ${event.title}`).join("\n");
-          return [_$ssr(_tmpl$32, _$ssrStyleProperty("top:", `${_$escape(layout.top, true)}%`) + _$ssrStyleProperty(";height:", `${_$escape(layout.height, true)}%`), _$ssrAttribute("title", _$escape(hiddenTitle(), true), false) + _$ssrAttribute("aria-label", _$escape(messages().hiddenOverlappingEvents({
+          return [_$ssr(_tmpl$33, _$ssrStyleProperty("top:", `${_$escape(layout.top, true)}%`) + _$ssrStyleProperty(";height:", `${_$escape(layout.height, true)}%`), _$ssrAttribute("title", _$escape(hiddenTitle(), true), false) + _$ssrAttribute("aria-label", _$escape(messages().hiddenOverlappingEvents({
             count: overflow.hiddenEvents.length
           }), true), false), _$escape(overflow.hiddenEvents.length)), _$createComponent(Show, {
             get when() {
               return expandedOverflow() === key;
             },
             get children() {
-              return _$ssr(_tmpl$33, _$ssrStyleProperty("top:", `${_$escape(layout.top, true)}%`), _$escape(formatTime(overflow.groupStartDate, dateConfig())), _$escape(formatTime(overflow.groupEndDate, dateConfig())), _$escape(_$createComponent(For, {
+              return _$ssr(_tmpl$34, _$ssrStyleProperty("top:", `${_$escape(layout.top, true)}%`), _$escape(formatTime(overflow.groupStartDate, dateConfig())), _$escape(formatTime(overflow.groupEndDate, dateConfig())), _$escape(_$createComponent(For, {
                 get each() {
                   return overflow.hiddenEvents;
                 },
@@ -1296,11 +1316,11 @@ const YearView = props => {
       };
     });
   });
-  return _$ssr(_tmpl$34, _$escape(_$createComponent(For, {
+  return _$ssr(_tmpl$35, _$escape(_$createComponent(For, {
     get each() {
       return months();
     },
-    children: month => _$ssr(_tmpl$35, _$escape(month.label), _$escape(_$createComponent(For, {
+    children: month => _$ssr(_tmpl$36, _$escape(month.label), _$escape(_$createComponent(For, {
       get each() {
         return month.days;
       },
@@ -1323,7 +1343,7 @@ const YearView = props => {
             get when() {
               return day.events[0];
             },
-            children: event => _$ssr(_tmpl$36, _$ssrAttribute("data-color", event().colorHex ? _$escape(undefined, true) : _$escape(event().color ?? "blue", true), false) + _$ssrAttribute("data-today", day.isToday ? "true" : _$escape(undefined, true), false), _$ssrStyle(event().colorHex ? {
+            children: event => _$ssr(_tmpl$37, _$ssrAttribute("data-color", event().colorHex ? _$escape(undefined, true) : _$escape(event().color ?? "blue", true), false) + _$ssrAttribute("data-today", day.isToday ? "true" : _$escape(undefined, true), false), _$ssrStyle(event().colorHex ? {
               "background-color": day.isToday ? "white" : event().colorHex
             } : undefined))
           })];
@@ -1336,7 +1356,7 @@ const MobileMonthView = props => {
   const dateConfig = createMemo(() => ownerDateConfig(props.owner));
   const selectedDateKey = createMemo(() => calendar.formatDateKey(props.selectedDate, dateConfig()));
   const selectedEvents = createMemo(() => props.events.filter(event => event.dayKey === selectedDateKey()));
-  return _$ssr(_tmpl$38, _$escape(_$createComponent(MonthView, {
+  return _$ssr(_tmpl$39, _$escape(_$createComponent(MonthView, {
     get owner() {
       return {
         ...props.owner,
@@ -1366,10 +1386,10 @@ const MobileMonthView = props => {
       return selectedEvents().length > 0;
     },
     get fallback() {
-      return _$ssr(_tmpl$39, _$escape(props.labels.noEvents));
+      return _$ssr(_tmpl$40, _$escape(props.labels.noEvents));
     },
     get children() {
-      return _$ssr(_tmpl$37, _$escape(_$createComponent(For, {
+      return _$ssr(_tmpl$38, _$escape(_$createComponent(For, {
         get each() {
           return selectedEvents();
         },
@@ -1386,8 +1406,8 @@ const MobileMonthView = props => {
     }
   })));
 };
-const CalendarBody = props => _$ssr(_tmpl$40, _$escape(props.children));
-const Calendar = props => {
+const CalendarBody = props => _$ssr(_tmpl$41, _$escape(props.children));
+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.
@@ -1398,6 +1418,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());
@@ -1432,7 +1453,7 @@ const Calendar = props => {
       document.removeEventListener("visibilitychange", updateNow);
     });
   });
-  return _$ssr(_tmpl$41, `k2b-content-calendar ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("aria-busy", props.navigationPending ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(CalendarHeader, {
+  return _$ssr(_tmpl$42, `k2b-content-calendar ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("aria-busy", props.navigationPending ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(CalendarHeader, {
     get date() {
       return date();
     },
@@ -1445,38 +1466,24 @@ const Calendar = props => {
     owner: owner
   })), _$escape(props.toolbarContent), _$escape(_$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();
@@ -1486,6 +1493,9 @@ const Calendar = props => {
                 },
                 get events() {
                   return normalizedEvents();
+                },
+                get labels() {
+                  return mergedLabels();
                 }
               });
             }
@@ -1494,12 +1504,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();
@@ -1507,36 +1517,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();
+              return _$createComponent(Show, {
+                get when() {
+                  return view() !== "mobile-month";
                 },
-                get events() {
-                  return normalizedEvents();
-                },
-                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();
+                    }
+                  });
                 }
               });
             }
@@ -1546,5 +1581,11 @@ const Calendar = props => {
     }
   })));
 };
+
+/** 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;
 //# sourceMappingURL=Calendar.js.map