@k2b/ui 0.28.0 → 0.30.0

package/dist/ssr/content/Calendar.js

@@ -20,53 +20,54 @@ var _tmpl$ = ["<div role=\"radiogroup\"", " aria-orientation=\"horizontal\" clas
   _tmpl$1 = ["<span class=\"k2b-calendar-header__title-size\" aria-hidden=\"true\">", "</span>"],
   _tmpl$10 = ["<div class=\"k2b-calendar-month__weekday\">", "</div>"],
   _tmpl$11 = ["<div class=\"k2b-calendar-month\" style=\"", "\"><div class=\"k2b-calendar-month__weekdays\"", ">", "", "</div>", "</div>"],
-  _tmpl$12 = ["<div class=\"k2b-calendar-month__week-number\">", "</div>"],
-  _tmpl$13 = ["<div class=\"k2b-calendar-month__week\"", ">", "", "</div>"],
-  _tmpl$14 = ["<div class=\"k2b-calendar-preview\">", "</div>"],
-  _tmpl$15 = ["<div class=\"k2b-calendar-month__day\"", ">", "<div class=\"k2b-calendar-month__day-header\">", "", "</div><div class=\"k2b-calendar-month__events\">", "", "", "</div><div class=\"k2b-calendar-month__dots\">", "</div></div>"],
-  _tmpl$16 = ["<span class=\"k2b-calendar-month__day-number\"", ">", "</span>"],
-  _tmpl$17 = ["<span class=\"k2b-calendar-month__badge\">", "", "</span>"],
-  _tmpl$18 = ["<span class=\"k2b-calendar-dot\"", " style=\"", "\"></span>"],
-  _tmpl$19 = ["<div class=\"k2b-calendar-month__week-number\" role=\"rowheader\">", "</div>"],
-  _tmpl$20 = ["<div class=\"k2b-calendar-month__week\" role=\"row\"", " style=\"", "\"", ">", "", "</div>"],
-  _tmpl$21 = ["<button type=\"button\" class=\"k2b-calendar-month__week-link\" tabindex=\"-1\"", ">", "</button>"],
-  _tmpl$22 = ["<button type=\"button\" class=\"k2b-calendar-month__more\" tabindex=\"-1\" style=\"", "\"", " aria-haspopup=\"dialog\"", "><span class=\"k2b-calendar-month__more-long\">", "</span><span class=\"k2b-calendar-month__more-short\">+", "</span></button>"],
-  _tmpl$23 = ["<div class=\"k2b-calendar-month__day\" role=\"gridcell\"", "><div class=\"k2b-calendar-month__day-header\"><span class=\"k2b-calendar-month__day-number\"", ">", "</span>", "</div><div class=\"k2b-calendar-month__lanes\">", "", "", "</div></div>"],
-  _tmpl$24 = ["<div class=\"k2b-calendar-month__segment\" style=\"", "\">", "</div>"],
-  _tmpl$25 = ["<div class=\"k2b-calendar-month__weekday\" role=\"columnheader\">", "</div>"],
-  _tmpl$26 = ["<div class=\"k2b-calendar-month__weekdays\" role=\"row\"", ">", "", "</div>"],
-  _tmpl$27 = ["<div class=\"k2b-calendar-month__weekday\" role=\"columnheader\"", ">", "</div>"],
-  _tmpl$28 = ["<div class=\"k2b-calendar-month\" role=\"grid\"", " aria-multiselectable=\"true\" data-lanes=\"true\" style=\"", "\">", "", "</div>"],
-  _tmpl$29 = ["<div class=\"k2b-calendar-month-viewport\"><div class=\"k2b-calendar-month\" role=\"grid\"", " aria-multiselectable=\"true\" data-lanes=\"true\" data-continuous=\"true\"", " style=\"", "\">", "<div class=\"k2b-calendar-month__track\" role=\"rowgroup\" style=\"", "\">", "</div></div><div class=\"k2b-calendar-month__scroll-label\" aria-hidden=\"true\"", ">", "</div></div>"],
-  _tmpl$30 = ["<ul class=\"k2b-calendar-day-list__events\">", "</ul>"],
-  _tmpl$31 = "<i class=\"ti ti-plus\" aria-hidden=\"true\"></i>",
-  _tmpl$32 = ["<div class=\"k2b-calendar-day-list\"><div class=\"k2b-calendar-day-list__title\">", "</div>", "<div class=\"k2b-calendar-day-list__actions\">", "", "</div></div>"],
-  _tmpl$33 = ["<p class=\"k2b-calendar-day-list__empty\">", "</p>"],
-  _tmpl$34 = ["<li>", "</li>"],
-  _tmpl$35 = "<i class=\"ti ti-zoom-in\" aria-hidden=\"true\"></i>",
-  _tmpl$36 = ["<div class=\"k2b-calendar-popover\" popover=\"auto\" role=\"dialog\"", ">", "</div>"],
-  _tmpl$37 = ["<div class=\"k2b-calendar-time-grid__all-day\" style=\"", "\"><div class=\"k2b-calendar-time-grid__all-day-label\">", "</div>", "</div>"],
-  _tmpl$38 = ["<div class=\"k2b-calendar-time-grid\"", "><div class=\"k2b-calendar-time-grid__days\" style=\"", "\"><div class=\"k2b-calendar-time-grid__corner\"></div>", "</div>", "<div class=\"k2b-calendar-time-grid__scroll k2b-detail-trail\"><div class=\"k2b-calendar-time-grid__grid\" style=\"", "\"><div class=\"k2b-calendar-time-grid__gutter\" style=\"", "\">", "</div>", "</div></div></div>"],
-  _tmpl$39 = ["<span class=\"k2b-calendar-time-grid__day-label\"", ">", "</span>"],
-  _tmpl$40 = ["<span class=\"k2b-calendar-time-grid__badge\">", "", "</span>"],
-  _tmpl$41 = ["<div class=\"k2b-calendar-time-grid__all-day-events\">", "", "</div>"],
-  _tmpl$42 = ["<div class=\"k2b-calendar-time-grid__hour\"", ">", ":00</div>"],
-  _tmpl$43 = ["<div class=\"k2b-calendar-time-grid__now\" style=\"", "\"></div>"],
-  _tmpl$44 = ["<div class=\"k2b-calendar-time-grid__column\" style=\"", "\">", "", "", "", "", "</div>"],
-  _tmpl$45 = ["<div class=\"k2b-calendar-preview__title\">", "</div>"],
-  _tmpl$46 = ["<div class=\"k2b-calendar-preview k2b-calendar-preview--timed\"", " style=\"", "\"><div class=\"k2b-calendar-preview__content\">", "<div class=\"k2b-calendar-preview__label\">", " - ", "</div></div></div>"],
-  _tmpl$47 = ["<button type=\"button\"", " draggable=\"false\" class=\"k2b-calendar-time-grid__resize\"><span class=\"k2b-calendar-time-grid__resize-icon\" aria-hidden=\"true\"></span></button>"],
-  _tmpl$48 = ["<div class=\"k2b-calendar-time-grid__event-position\" style=\"", "\"><div class=\"k2b-calendar-time-grid__event-frame\">", "", "</div></div>"],
-  _tmpl$49 = ["<button type=\"button\" class=\"k2b-calendar-time-grid__overflow\" style=\"", "\"", "><span class=\"k2b-calendar-time-grid__overflow-count\">+", "</span></button>"],
-  _tmpl$50 = ["<div class=\"k2b-calendar-time-grid__overflow-menu\" style=\"", "\"><div class=\"k2b-calendar-time-grid__overflow-title\">", " - ", "</div>", "</div>"],
-  _tmpl$51 = ["<div class=\"k2b-calendar-year\">", "</div>"],
-  _tmpl$52 = ["<div class=\"k2b-calendar-year__month\"><div class=\"k2b-calendar-year__title\">", "</div><div class=\"k2b-calendar-year__grid\">", "</div></div>"],
-  _tmpl$53 = ["<span class=\"k2b-calendar-year__indicator\"", " style=\"", "\"></span>"],
-  _tmpl$54 = ["<div class=\"k2b-calendar-mobile-month__events\">", "</div>"],
-  _tmpl$55 = ["<div class=\"k2b-calendar-mobile-month\">", "<div class=\"k2b-calendar-mobile-month__agenda\"><div class=\"k2b-calendar-mobile-month__title\">", "</div>", "</div></div>"],
-  _tmpl$56 = ["<div class=\"k2b-calendar-mobile-month__empty\">", "</div>"],
-  _tmpl$57 = ["<div class=\"k2b-calendar-body\">", "</div>"],
-  _tmpl$58 = ["<section class=\"", "\"", ">", "", "</section>"];
+  _tmpl$12 = ["<div class=\"k2b-calendar-month__weekday\"", ">", "</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-month__week-number\" role=\"rowheader\">", "</div>"],
+  _tmpl$21 = ["<div class=\"k2b-calendar-month__week\" role=\"row\"", " style=\"", "\"", ">", "", "</div>"],
+  _tmpl$22 = ["<button type=\"button\" class=\"k2b-calendar-month__week-link\" tabindex=\"-1\"", ">", "</button>"],
+  _tmpl$23 = ["<button type=\"button\" class=\"k2b-calendar-month__more\" tabindex=\"-1\" style=\"", "\"", " aria-haspopup=\"dialog\"", "><span class=\"k2b-calendar-month__more-long\">", "</span><span class=\"k2b-calendar-month__more-short\">+", "</span></button>"],
+  _tmpl$24 = ["<div class=\"k2b-calendar-month__day\" role=\"gridcell\"", "><div class=\"k2b-calendar-month__day-header\"><span class=\"k2b-calendar-month__day-number\"", ">", "</span>", "</div><div class=\"k2b-calendar-month__lanes\">", "", "", "</div></div>"],
+  _tmpl$25 = ["<div class=\"k2b-calendar-month__segment\" style=\"", "\">", "</div>"],
+  _tmpl$26 = ["<div class=\"k2b-calendar-month__weekday\" role=\"columnheader\">", "</div>"],
+  _tmpl$27 = ["<div class=\"k2b-calendar-month__weekdays\" role=\"row\"", ">", "", "</div>"],
+  _tmpl$28 = ["<div class=\"k2b-calendar-month__weekday\" role=\"columnheader\"", ">", "</div>"],
+  _tmpl$29 = ["<div class=\"k2b-calendar-month\" role=\"grid\"", " aria-multiselectable=\"true\" data-lanes=\"true\" style=\"", "\">", "", "</div>"],
+  _tmpl$30 = ["<div class=\"k2b-calendar-month-viewport\"><div class=\"k2b-calendar-month\" role=\"grid\"", " aria-multiselectable=\"true\" data-lanes=\"true\" data-continuous=\"true\"", " style=\"", "\">", "<div class=\"k2b-calendar-month__track\" role=\"rowgroup\" style=\"", "\">", "</div></div><div class=\"k2b-calendar-month__scroll-label\" aria-hidden=\"true\"", ">", "</div></div>"],
+  _tmpl$31 = ["<ul class=\"k2b-calendar-day-list__events\">", "</ul>"],
+  _tmpl$32 = "<i class=\"ti ti-plus\" aria-hidden=\"true\"></i>",
+  _tmpl$33 = ["<div class=\"k2b-calendar-day-list\"><div class=\"k2b-calendar-day-list__title\">", "</div>", "<div class=\"k2b-calendar-day-list__actions\">", "", "</div></div>"],
+  _tmpl$34 = ["<p class=\"k2b-calendar-day-list__empty\">", "</p>"],
+  _tmpl$35 = ["<li>", "</li>"],
+  _tmpl$36 = "<i class=\"ti ti-zoom-in\" aria-hidden=\"true\"></i>",
+  _tmpl$37 = ["<div class=\"k2b-calendar-popover\" popover=\"auto\" role=\"dialog\"", ">", "</div>"],
+  _tmpl$38 = ["<div class=\"k2b-calendar-time-grid__all-day\" style=\"", "\"><div class=\"k2b-calendar-time-grid__all-day-label\">", "</div>", "</div>"],
+  _tmpl$39 = ["<div class=\"k2b-calendar-time-grid\"", "><div class=\"k2b-calendar-time-grid__days\" style=\"", "\"><div class=\"k2b-calendar-time-grid__corner\"></div>", "</div>", "<div class=\"k2b-calendar-time-grid__scroll k2b-detail-trail\"><div class=\"k2b-calendar-time-grid__grid\" style=\"", "\"><div class=\"k2b-calendar-time-grid__gutter\" style=\"", "\">", "</div>", "</div></div></div>"],
+  _tmpl$40 = ["<span class=\"k2b-calendar-time-grid__day-label\"", ">", "</span>"],
+  _tmpl$41 = ["<span class=\"k2b-calendar-time-grid__badge\">", "", "</span>"],
+  _tmpl$42 = ["<div class=\"k2b-calendar-time-grid__all-day-events\">", "", "</div>"],
+  _tmpl$43 = ["<div class=\"k2b-calendar-time-grid__hour\"", ">", ":00</div>"],
+  _tmpl$44 = ["<div class=\"k2b-calendar-time-grid__now\" style=\"", "\"></div>"],
+  _tmpl$45 = ["<div class=\"k2b-calendar-time-grid__column\"", " style=\"", "\">", "", "", "", "", "</div>"],
+  _tmpl$46 = ["<div class=\"k2b-calendar-preview__title\">", "</div>"],
+  _tmpl$47 = ["<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$48 = ["<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$49 = ["<div class=\"k2b-calendar-time-grid__event-position\" style=\"", "\"><div class=\"k2b-calendar-time-grid__event-frame\">", "", "</div></div>"],
+  _tmpl$50 = ["<button type=\"button\" class=\"k2b-calendar-time-grid__overflow\" style=\"", "\"", "><span class=\"k2b-calendar-time-grid__overflow-count\">+", "</span></button>"],
+  _tmpl$51 = ["<div class=\"k2b-calendar-time-grid__overflow-menu\" style=\"", "\"><div class=\"k2b-calendar-time-grid__overflow-title\">", " - ", "</div>", "</div>"],
+  _tmpl$52 = ["<div class=\"k2b-calendar-year\">", "</div>"],
+  _tmpl$53 = ["<div class=\"k2b-calendar-year__month\"><div class=\"k2b-calendar-year__title\">", "</div><div class=\"k2b-calendar-year__grid\">", "</div></div>"],
+  _tmpl$54 = ["<span class=\"k2b-calendar-year__indicator\"", " style=\"", "\"></span>"],
+  _tmpl$55 = ["<div class=\"k2b-calendar-mobile-month__events\">", "</div>"],
+  _tmpl$56 = ["<div class=\"k2b-calendar-mobile-month\">", "<div class=\"k2b-calendar-mobile-month__agenda\"><div class=\"k2b-calendar-mobile-month__title\">", "</div>", "</div></div>"],
+  _tmpl$57 = ["<div class=\"k2b-calendar-mobile-month__empty\">", "</div>"],
+  _tmpl$58 = ["<div class=\"k2b-calendar-body\">", "</div>"],
+  _tmpl$59 = ["<section class=\"", "\"", ">", "", "</section>"];
 import { Link } from "@k2b/ssr/nav";
 import { dates as calendar } from "@k2b/stdlib";
 import { createComputed, createEffect, createMemo, createSignal, For, mergeProps, on, onCleanup, onMount, Show, untrack } from "solid-js";
@@ -75,6 +76,7 @@ import { GestureMenu } from "../actions/GestureMenu";
 import SegmentedControl from "../actions/SegmentedControl";
 import { useDateConfigLocale } from "../intl/locale";
 import { useUiMessages } from "../intl/messages";
+import { isWeekendColumn, isWeekendKey } from "../intl/weekend";
 import { prefersReducedMotion } from "../motion";
 import { CalendarDayView } from "./CalendarDayView";
 import { CalendarWeekView } from "./CalendarWeekView";
@@ -84,7 +86,7 @@ import { layoutCalendarIntervals } from "./calendar-event-layout";
 import { useCalendarMessages } from "./calendar-messages";
 import { fitMonthWeek, layoutMonthWeek, monthLaneCapacity } from "./calendar-month-layout";
 import { MONTH_ROW_BLOCK, MONTH_ROWS_IN_VIEW, monthFocusRow, monthOfWeek, monthRenderWindow, monthRevealTop, monthRowOf, monthTodayDirection, monthVisibleRows, monthWeekKeys } from "./calendar-month-scroll";
-import { calendarDayIndexAtPoint, calendarMinuteAtPoint, startCalendarPointerSession } from "./calendar-pointer";
+import { afterPointerRelease, calendarDayIndexAtPoint, calendarMinuteAtPoint, startCalendarPointerSession } from "./calendar-pointer";
 import { EventChip, eventHref, followCalendarHref, formatTime, ownerDateConfig, parseDate, placeCalendarPopover, textWidth, validDate } from "./calendar-shared";
 import { compactGermanDate } from "./calendar-time-view";
 
@@ -791,17 +793,17 @@ const MonthPickerView = props => {
     get each() {
       return weekdays();
     },
-    children: day => _$ssr(_tmpl$10, _$escape(day))
+    children: (day, index) => _$ssr(_tmpl$12, _$ssrAttribute("data-weekend", isWeekendColumn(index(), dateConfig().firstDayOfWeek ?? 1, dateConfig().locale) ? "true" : _$escape(undefined, true), false), _$escape(day))
   })), _$escape(_$createComponent(For, {
     get each() {
       return weeks();
     },
-    children: week => _$ssr(_tmpl$13, _$ssrAttribute("data-week-numbers", props.owner.withWeekNumbers ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+    children: week => _$ssr(_tmpl$14, _$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$12, _$escape(zonedWeekNumber(week[0], dateConfig())));
+        return _$ssr(_tmpl$13, _$escape(zonedWeekNumber(week[0], dateConfig())));
       }
     })), _$escape(_$createComponent(For, {
       each: week,
@@ -830,7 +832,7 @@ const MonthPickerView = props => {
             hiddenCount: Math.max(0, candidates.length - visibleLimit)
           };
         });
-        return _$ssr(_tmpl$15, _$ssrAttribute("data-calendar-day-key", _$escape(dayKey, true), false) + _$ssrAttribute("data-outside", !sameMonth ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-drop-preview", movePreview()?.start && calendar.formatDateKey(movePreview().start, dateConfig()) === dayKey ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+        return _$ssr(_tmpl$16, _$ssrAttribute("data-calendar-day-key", _$escape(dayKey, true), false) + _$ssrAttribute("data-outside", !sameMonth ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-weekend", isWeekendKey(dayKey, dateConfig().locale) ? "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;
           },
@@ -879,7 +881,7 @@ const MonthPickerView = props => {
             return props.owner.onSlotActivate && href;
           },
           get fallback() {
-            return _$ssr(_tmpl$16, _$ssrAttribute("data-today", isToday ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-outside", !sameMonth ? "true" : _$escape(undefined, true), false), _$escape(calendar.formatDayNumber(day, dateConfig())));
+            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())));
           },
           children: dayHref => _$createComponent(CalendarNavigationLink, {
             get owner() {
@@ -904,7 +906,7 @@ const MonthPickerView = props => {
           })
         })), _$escape(_$createComponent(Show, {
           when: dayBadge,
-          children: badge => _$ssr(_tmpl$17, _$escape(_$createComponent(Show, {
+          children: badge => _$ssr(_tmpl$18, _$escape(_$createComponent(Show, {
             get when() {
               return badge().icon;
             },
@@ -915,7 +917,7 @@ const MonthPickerView = props => {
             return eventStack().preview;
           },
           get children() {
-            return _$ssr(_tmpl$14, _$escape(props.events.find(event => event.id === eventStack().preview.id)?.title ?? calendarMessages().moveEvent));
+            return _$ssr(_tmpl$15, _$escape(props.events.find(event => event.id === eventStack().preview.id)?.title ?? calendarMessages().moveEvent));
           }
         })), _$escape(_$createComponent(For, {
           get each() {
@@ -961,7 +963,7 @@ const MonthPickerView = props => {
           get each() {
             return events.slice(0, 4);
           },
-          children: event => _$ssr(_tmpl$18, _$ssrAttribute("data-color", event.colorHex ? _$escape(undefined, true) : _$escape(event.color ?? "blue", true), false), _$ssrStyle(event.colorHex ? {
+          children: event => _$ssr(_tmpl$19, _$ssrAttribute("data-color", event.colorHex ? _$escape(undefined, true) : _$escape(event.color ?? "blue", true), false), _$ssrStyle(event.colorHex ? {
             "background-color": event.colorHex
           } : undefined))
         })));
@@ -1048,6 +1050,7 @@ const MonthView = props => {
     equals: (previous, next) => previous.map(week => week[0]?.key).join() === next.map(week => week[0]?.key).join()
   });
   const weekdays = createMemo(() => calendar.weekdays(dateConfig()));
+  const weekendColumn = index => isWeekendColumn(index, dateConfig().firstDayOfWeek ?? 1, dateConfig().locale);
   const todayKey = createMemo(() => calendar.formatDateKey(props.now, dateConfig()));
   const items = createMemo(() => monthItems(props.events));
   const [capacities, setCapacities] = createSignal([]);
@@ -1912,9 +1915,9 @@ const MonthView = props => {
         select(key, current);
         focusCell(current);
         const range = orderedSelection(key, current);
-        openCreate(range, {
+        afterPointerRelease(() => openCreate(range, {
           active: range.first !== range.last
-        });
+        }));
       },
       onCancel: () => select(key)
     });
@@ -2102,14 +2105,14 @@ const MonthView = props => {
     const fit = createMemo(() => fitMonthWeek(layout(), capacity()));
     const weekHref = () => viewHref(week()[0].key, "week");
     const weekNumber = () => zonedWeekNumber(week()[0].day, dateConfig());
-    return _$ssr(_tmpl$20, _$ssrAttribute("data-week-key", continuous() ? _$escape(week()[0]?.key, true) : _$escape(undefined, true), false) + _$ssrAttribute("aria-rowindex", continuous() ? _$escape(weekIndex(), true) + 2 : _$escape(undefined, true), false), _$ssrStyle(continuous() ? {
+    return _$ssr(_tmpl$21, _$ssrAttribute("data-week-key", continuous() ? _$escape(week()[0]?.key, true) : _$escape(undefined, true), false) + _$ssrAttribute("aria-rowindex", continuous() ? _$escape(weekIndex(), true) + 2 : _$escape(undefined, true), false), _$ssrStyle(continuous() ? {
       "--k2b-calendar-week-index": String(weekIndex())
     } : undefined), _$ssrAttribute("data-week-numbers", props.owner.withWeekNumbers ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
       get when() {
         return props.owner.withWeekNumbers;
       },
       get children() {
-        return _$ssr(_tmpl$19, _$escape(_$createComponent(Show, {
+        return _$ssr(_tmpl$20, _$escape(_$createComponent(Show, {
           get when() {
             return weekHref();
           },
@@ -2122,7 +2125,7 @@ const MonthView = props => {
                 return weekNumber();
               },
               get children() {
-                return _$ssr(_tmpl$21, _$ssrAttribute("title", _$escape(calendarMessages().calendarOpenWeekNumber({
+                return _$ssr(_tmpl$22, _$ssrAttribute("title", _$escape(calendarMessages().calendarOpenWeekNumber({
                   week: weekNumber()
                 }), true), false) + _$ssrAttribute("aria-label", _$escape(calendarMessages().calendarOpenWeekNumber({
                   week: weekNumber()
@@ -2172,9 +2175,9 @@ const MonthView = props => {
           shown: [],
           hidden: 0
         };
-        return _$ssr(_tmpl$23, _$ssrAttribute("tabindex", rovingKey() === key ? 0 : -1, false) + _$ssrAttribute("aria-label", _$escape(label, true), false) + _$ssrAttribute("aria-selected", within(selection(), key) ? "true" : "false", false) + _$ssrAttribute("aria-current", key === todayKey() ? "date" : _$escape(undefined, true), false) + _$ssrAttribute("data-calendar-day-key", _$escape(key, true), false) + _$ssrAttribute("data-outside", !sameMonth() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-month-first", continuous() && key.endsWith("-01") ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-month-top", continuous() && Number(key.slice(8)) <= 7 ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-weekend", column() > 4 ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-past", key < todayKey() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-selected", _$escape(selectionPart(key), true), false) + _$ssrAttribute("data-drop-preview", within(dropRange(), key) ? "true" : _$escape(undefined, true), false), _$ssrAttribute("data-pulse", continuous() && pulseKey() === key ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-today", key === todayKey() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-outside", !sameMonth() ? "true" : _$escape(undefined, true), false), continuous() && key.endsWith("-01") ? _$escape(shortDayLabel(key).replace(/\.$/, "")) : _$escape(calendar.formatDayNumber(day, dateConfig())), _$escape(_$createComponent(Show, {
+        return _$ssr(_tmpl$24, _$ssrAttribute("tabindex", rovingKey() === key ? 0 : -1, false) + _$ssrAttribute("aria-label", _$escape(label, true), false) + _$ssrAttribute("aria-selected", within(selection(), key) ? "true" : "false", false) + _$ssrAttribute("aria-current", key === todayKey() ? "date" : _$escape(undefined, true), false) + _$ssrAttribute("data-calendar-day-key", _$escape(key, true), false) + _$ssrAttribute("data-outside", !sameMonth() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-month-first", continuous() && key.endsWith("-01") ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-month-top", continuous() && Number(key.slice(8)) <= 7 ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-weekend", isWeekendKey(key, dateConfig().locale) ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-past", key < todayKey() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-selected", _$escape(selectionPart(key), true), false) + _$ssrAttribute("data-drop-preview", within(dropRange(), key) ? "true" : _$escape(undefined, true), false), _$ssrAttribute("data-pulse", continuous() && pulseKey() === key ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-today", key === todayKey() ? "true" : _$escape(undefined, true), false) + _$ssrAttribute("data-outside", !sameMonth() ? "true" : _$escape(undefined, true), false), continuous() && key.endsWith("-01") ? _$escape(shortDayLabel(key).replace(/\.$/, "")) : _$escape(calendar.formatDayNumber(day, dateConfig())), _$escape(_$createComponent(Show, {
           when: dayBadge,
-          children: badge => _$ssr(_tmpl$17, _$escape(_$createComponent(Show, {
+          children: badge => _$ssr(_tmpl$18, _$escape(_$createComponent(Show, {
             get when() {
               return badge().icon;
             },
@@ -2253,7 +2256,7 @@ const MonthView = props => {
           get each() {
             return cell().shown;
           },
-          children: (item, index) => _$ssr(_tmpl$24, _$ssrStyleProperty("--k2b-calendar-span:", "1") + _$ssrStyleProperty(";--k2b-calendar-row:", _$escape(String(cell().top + index()), true)), _$escape(_$createComponent(EventChip, {
+          children: (item, index) => _$ssr(_tmpl$25, _$ssrStyleProperty("--k2b-calendar-span:", "1") + _$ssrStyleProperty(";--k2b-calendar-row:", _$escape(String(cell().top + index()), true)), _$escape(_$createComponent(EventChip, {
             get event() {
               return item.event;
             },
@@ -2279,7 +2282,7 @@ const MonthView = props => {
             return cell().hidden > 0;
           },
           get children() {
-            return _$ssr(_tmpl$22, _$ssrStyleProperty("--k2b-calendar-row:", _$escape(String(cell().top + cell().shown.length), true)), _$ssrAttribute("aria-label", _$escape(calendarMessages().calendarMoreEventsOn({
+            return _$ssr(_tmpl$23, _$ssrStyleProperty("--k2b-calendar-row:", _$escape(String(cell().top + cell().shown.length), true)), _$ssrAttribute("aria-label", _$escape(calendarMessages().calendarMoreEventsOn({
               count: cell().hidden,
               label
             }), true), false), _$ssrAttribute("aria-expanded", (() => {
@@ -2293,20 +2296,20 @@ const MonthView = props => {
       }
     })));
   };
-  const weekdayRow = () => _$ssr(_tmpl$26, _$ssrAttribute("data-week-numbers", props.owner.withWeekNumbers ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
+  const weekdayRow = () => _$ssr(_tmpl$27, _$ssrAttribute("data-week-numbers", props.owner.withWeekNumbers ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(Show, {
     get when() {
       return props.owner.withWeekNumbers;
     },
     get children() {
-      return _$ssr(_tmpl$25, _$escape(calendarMessages().weekShort));
+      return _$ssr(_tmpl$26, _$escape(calendarMessages().weekShort));
     }
   })), _$escape(_$createComponent(For, {
     get each() {
       return weekdays();
     },
-    children: (day, index) => _$ssr(_tmpl$27, _$ssrAttribute("data-weekend", index() > 4 ? "true" : _$escape(undefined, true), false), _$escape(day))
+    children: (day, index) => _$ssr(_tmpl$28, _$ssrAttribute("data-weekend", weekendColumn(index()) ? "true" : _$escape(undefined, true), false), _$escape(day))
   })));
-  const grid = () => _$ssr(_tmpl$28, _$ssrAttribute("aria-label", _$escape(formatMonth(props.date, dateConfig()), true), false), _$ssrStyleProperty("grid-template-rows:", `auto repeat(${_$escape(weeks().length, true)}, minmax(5rem, 1fr))`) + _$ssrStyleProperty(";--k2b-calendar-lane:", "1.25rem") + _$ssrStyleProperty(";--k2b-calendar-lane-gap:", "0.125rem"), _$escape(weekdayRow()), _$escape(_$createComponent(For, {
+  const grid = () => _$ssr(_tmpl$29, _$ssrAttribute("aria-label", _$escape(formatMonth(props.date, dateConfig()), true), false), _$ssrStyleProperty("grid-template-rows:", `auto repeat(${_$escape(weeks().length, true)}, minmax(5rem, 1fr))`) + _$ssrStyleProperty(";--k2b-calendar-lane:", "1.25rem") + _$ssrStyleProperty(";--k2b-calendar-lane-gap:", "0.125rem"), _$escape(weekdayRow()), _$escape(_$createComponent(For, {
     get each() {
       return weeks();
     },
@@ -2324,7 +2327,7 @@ const MonthView = props => {
     }));
     return weekRow(days, () => monthRowOf(trackWeeks(), key) ?? 0);
   };
-  const continuousGrid = () => _$ssr(_tmpl$29, _$ssrAttribute("aria-label", _$escape(formatMonth(parseKey(focusMonthKey()), dateConfig()), true), false), _$ssrAttribute("aria-rowcount", _$escape(trackWeeks().length, true) + 1, false), _$ssrStyleProperty("--k2b-calendar-lane:", "1.25rem") + _$ssrStyleProperty(";--k2b-calendar-lane-gap:", "0.125rem"), _$escape(weekdayRow()), _$ssrStyleProperty("--k2b-calendar-weeks:", _$escape(String(trackWeeks().length), true)), _$escape(_$createComponent(For, {
+  const continuousGrid = () => _$ssr(_tmpl$30, _$ssrAttribute("aria-label", _$escape(formatMonth(parseKey(focusMonthKey()), dateConfig()), true), false), _$ssrAttribute("aria-rowcount", _$escape(trackWeeks().length, true) + 1, false), _$ssrStyleProperty("--k2b-calendar-lane:", "1.25rem") + _$ssrStyleProperty(";--k2b-calendar-lane-gap:", "0.125rem"), _$escape(weekdayRow()), _$ssrStyleProperty("--k2b-calendar-weeks:", _$escape(String(trackWeeks().length), true)), _$escape(_$createComponent(For, {
     get each() {
       return renderedWeeks();
     },
@@ -2335,19 +2338,19 @@ const MonthView = props => {
     const href = viewHref(dayKey, "day");
     // Read where it renders, so a refresh while the list is open updates it as it does the grid.
     const entries = () => dayEntries(dayKey);
-    return _$ssr(_tmpl$32, _$escape(dayLabel(day)), _$escape(_$createComponent(Show, {
+    return _$ssr(_tmpl$33, _$escape(dayLabel(day)), _$escape(_$createComponent(Show, {
       get when() {
         return entries().length > 0;
       },
       get fallback() {
-        return _$ssr(_tmpl$33, _$escape(calendarMessages().calendarNothingPlanned));
+        return _$ssr(_tmpl$34, _$escape(calendarMessages().calendarNothingPlanned));
       },
       get children() {
-        return _$ssr(_tmpl$30, _$escape(_$createComponent(For, {
+        return _$ssr(_tmpl$31, _$escape(_$createComponent(For, {
           get each() {
             return entries();
           },
-          children: item => _$ssr(_tmpl$34, _$escape(_$createComponent(EventChip, {
+          children: item => _$ssr(_tmpl$35, _$escape(_$createComponent(EventChip, {
             get event() {
               return item.event;
             },
@@ -2384,7 +2387,7 @@ const MonthView = props => {
               size: "sm",
               onClick: () => openView(dayKey, "day"),
               get children() {
-                return [_$ssr(_tmpl$35), calendarMessages().calendarOpenDay];
+                return [_$ssr(_tmpl$36), calendarMessages().calendarOpenDay];
               }
             });
           }
@@ -2403,7 +2406,7 @@ const MonthView = props => {
           "data-size": "sm"
         },
         get children() {
-          return [_$ssr(_tmpl$35), calendarMessages().calendarOpenDay];
+          return [_$ssr(_tmpl$36), calendarMessages().calendarOpenDay];
         }
       })
     })), _$escape(_$createComponent(Show, {
@@ -2425,7 +2428,7 @@ const MonthView = props => {
             });
           },
           get children() {
-            return [_$ssr(_tmpl$31), calendarMessages().calendarNewEvent];
+            return [_$ssr(_tmpl$32), calendarMessages().calendarNewEvent];
           }
         });
       }
@@ -2455,7 +2458,7 @@ const MonthView = props => {
         }
       });
     }
-  }), _$ssr(_tmpl$36, _$ssrAttribute("aria-label", (() => {
+  }), _$ssr(_tmpl$37, _$ssrAttribute("aria-label", (() => {
     const current = popover();
     if (current?.kind === "day") return dayLabel(parseKey(current.dayKey));
     return _$escape(calendarMessages().calendarQuickCreate, true);
@@ -2706,7 +2709,7 @@ const TimeGridView = props => {
       });
     });
   });
-  return _$ssr(_tmpl$38, _$ssrAttribute("data-view", isDayView() ? "day" : "week", false), _$ssrStyleProperty("grid-template-columns:", _$escape(columnTemplate(), true)), _$escape(_$createComponent(For, {
+  return _$ssr(_tmpl$39, _$ssrAttribute("data-view", isDayView() ? "day" : "week", false), _$ssrStyleProperty("grid-template-columns:", _$escape(columnTemplate(), true)), _$escape(_$createComponent(For, {
     get each() {
       return props.days;
     },
@@ -2720,13 +2723,16 @@ const TimeGridView = props => {
         get href() {
           return props.owner.getDateHref?.(day, "day") ?? "#";
         },
-        anchorProps: {
-          class: "k2b-calendar-time-grid__day"
+        get anchorProps() {
+          return {
+            class: "k2b-calendar-time-grid__day",
+            "data-weekend": isWeekendKey(calendar.formatDateKey(day, dateConfig()), dateConfig().locale) ? "true" : undefined
+          };
         },
         get children() {
-          return [_$ssr(_tmpl$39, _$ssrAttribute("data-today", today() ? "true" : _$escape(undefined, true), false), _$escape(formatDay(day, dateConfig()))), _$createComponent(Show, {
+          return [_$ssr(_tmpl$40, _$ssrAttribute("data-today", today() ? "true" : _$escape(undefined, true), false), _$escape(formatDay(day, dateConfig()))), _$createComponent(Show, {
             when: dayBadge,
-            children: badge => _$ssr(_tmpl$40, _$escape(_$createComponent(Show, {
+            children: badge => _$ssr(_tmpl$41, _$escape(_$createComponent(Show, {
               get when() {
                 return badge().icon;
               },
@@ -2741,7 +2747,7 @@ const TimeGridView = props => {
       return !props.owner.hideAllDay;
     },
     get children() {
-      return _$ssr(_tmpl$37, _$ssrStyleProperty("grid-template-columns:", _$escape(columnTemplate(), true)) + _$ssrStyleProperty(";max-height:", `${_$escape(props.owner.allDayMaxHeightRem ?? 7, true)}rem`), _$escape(props.labels.allDay), _$escape(_$createComponent(For, {
+      return _$ssr(_tmpl$38, _$ssrStyleProperty("grid-template-columns:", _$escape(columnTemplate(), true)) + _$ssrStyleProperty(";max-height:", `${_$escape(props.owner.allDayMaxHeightRem ?? 7, true)}rem`), _$escape(props.labels.allDay), _$escape(_$createComponent(For, {
         get each() {
           return props.days;
         },
@@ -2752,6 +2758,9 @@ const TimeGridView = props => {
           return _$ssrElement("div", _$mergeProps({
             "class": "k2b-calendar-time-grid__all-day-cell",
             "data-calendar-day-key": dayKey,
+            get ["data-weekend"]() {
+              return isWeekendKey(dayKey, dateConfig().locale) ? "true" : undefined;
+            },
             get ["data-drop-preview"]() {
               return timePreview()?.allDay && calendar.formatDateKey(timePreview().start, dateConfig()) === dayKey ? "true" : undefined;
             },
@@ -2765,9 +2774,9 @@ const TimeGridView = props => {
               end: calendar.addDays(start, 1, dateConfig()),
               allDay: true
             };
-          }, () => performance.now() < suppressSlotClickUntil)), _$ssr(_tmpl$41, _$escape(_$createComponent(For, {
+          }, () => performance.now() < suppressSlotClickUntil)), _$ssr(_tmpl$42, _$escape(_$createComponent(For, {
             each: previewAllDay,
-            children: event => _$ssr(_tmpl$14, _$escape(event.title))
+            children: event => _$ssr(_tmpl$15, _$escape(event.title))
           })), _$escape(_$createComponent(For, {
             get each() {
               return allDay();
@@ -2796,7 +2805,7 @@ const TimeGridView = props => {
     get each() {
       return hours();
     },
-    children: hour => _$ssr(_tmpl$42, _$ssrAttribute("data-outside-business", hour < businessStartHour() || hour > businessEndHour() ? "true" : _$escape(undefined, true), false), _$escape(`${hour}`.padStart(2, "0")))
+    children: hour => _$ssr(_tmpl$43, _$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;
@@ -2804,12 +2813,12 @@ const TimeGridView = props => {
     children: day => {
       const dayKey = calendar.formatDateKey(day, dateConfig());
       const layouts = createMemo(() => timedEventLayouts(eventsByDay().get(dayKey)?.timed ?? []));
-      return _$ssr(_tmpl$44, _$ssrStyleProperty("grid-template-rows:", `repeat(${_$escape(hours().length, true)}, minmax(4rem, 1fr))`), _$escape(_$createComponent(Show, {
+      return _$ssr(_tmpl$45, _$ssrAttribute("data-weekend", isWeekendKey(dayKey, dateConfig().locale) ? "true" : _$escape(undefined, true), false), _$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$43, _$ssrStyleProperty("top:", `${_$escape(currentTimeLine(day) ?? 0, true)}%`));
+          return _$ssr(_tmpl$44, _$ssrStyleProperty("top:", `${_$escape(currentTimeLine(day) ?? 0, true)}%`));
         }
       })), _$escape(_$createComponent(For, {
         get each() {
@@ -2838,12 +2847,12 @@ const TimeGridView = props => {
         children: event => {
           const layout = eventLayout(event);
           const short = event.endDate.getTime() - event.startDate.getTime() < 60 * 60_000;
-          return _$ssr(_tmpl$46, _$ssrAttribute("data-short", short ? "true" : _$escape(undefined, true), false), _$ssrStyleProperty("top:", `${_$escape(layout.top, true)}%`) + _$ssrStyleProperty(";height:", `${_$escape(layout.height, true)}%`), _$escape(_$createComponent(Show, {
+          return _$ssr(_tmpl$47, _$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$45, _$escape(event.title));
+              return _$ssr(_tmpl$46, _$escape(event.title));
             }
           })), _$escape(formatTime(event.startDate, dateConfig())), _$escape(formatTime(event.endDate, dateConfig())));
         }
@@ -2889,7 +2898,7 @@ const TimeGridView = props => {
               onCancel: clearInteraction
             });
           };
-          return _$ssr(_tmpl$48, _$ssrStyleProperty("top:", `${_$escape(layout.top, true)}%`) + _$ssrStyleProperty(";height:", `${_$escape(layout.height, true)}%`) + _$ssrStyleProperty(";left:", _$escape(position.left, true)) + _$ssrStyleProperty(";width:", _$escape(position.width, true)) + _$ssrStyleProperty(";z-index:", _$escape(String(20 + layoutItem.lane), true)), _$escape(_$createComponent(EventChip, {
+          return _$ssr(_tmpl$49, _$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;
@@ -2909,7 +2918,7 @@ const TimeGridView = props => {
               return props.owner.onEventResize;
             },
             get children() {
-              return _$ssr(_tmpl$47, _$ssrAttribute("aria-label", _$escape(calendarMessages().resizeEvent, true), false));
+              return _$ssr(_tmpl$48, _$ssrAttribute("aria-label", _$escape(calendarMessages().resizeEvent, true), false));
             }
           })));
         }
@@ -2921,14 +2930,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$49, _$ssrStyleProperty("top:", `${_$escape(layout.top, true)}%`) + _$ssrStyleProperty(";height:", `${_$escape(layout.height, true)}%`), _$ssrAttribute("title", _$escape(hiddenTitle(), true), false) + _$ssrAttribute("aria-label", _$escape(calendarMessages().hiddenOverlappingEvents({
+          return [_$ssr(_tmpl$50, _$ssrStyleProperty("top:", `${_$escape(layout.top, true)}%`) + _$ssrStyleProperty(";height:", `${_$escape(layout.height, true)}%`), _$ssrAttribute("title", _$escape(hiddenTitle(), true), false) + _$ssrAttribute("aria-label", _$escape(calendarMessages().hiddenOverlappingEvents({
             count: overflow.hiddenEvents.length
           }), true), false), _$escape(overflow.hiddenEvents.length)), _$createComponent(Show, {
             get when() {
               return expandedOverflow() === key;
             },
             get children() {
-              return _$ssr(_tmpl$50, _$ssrStyleProperty("top:", `${_$escape(layout.top, true)}%`), _$escape(formatTime(overflow.groupStartDate, dateConfig())), _$escape(formatTime(overflow.groupEndDate, dateConfig())), _$escape(_$createComponent(For, {
+              return _$ssr(_tmpl$51, _$ssrStyleProperty("top:", `${_$escape(layout.top, true)}%`), _$escape(formatTime(overflow.groupStartDate, dateConfig())), _$escape(formatTime(overflow.groupEndDate, dateConfig())), _$escape(_$createComponent(For, {
                 get each() {
                   return overflow.hiddenEvents;
                 },
@@ -2987,11 +2996,11 @@ const YearView = props => {
       };
     });
   });
-  return _$ssr(_tmpl$51, _$escape(_$createComponent(For, {
+  return _$ssr(_tmpl$52, _$escape(_$createComponent(For, {
     get each() {
       return months();
     },
-    children: month => _$ssr(_tmpl$52, _$escape(month.label), _$escape(_$createComponent(For, {
+    children: month => _$ssr(_tmpl$53, _$escape(month.label), _$escape(_$createComponent(For, {
       get each() {
         return month.days;
       },
@@ -3014,7 +3023,7 @@ const YearView = props => {
             get when() {
               return day.events[0];
             },
-            children: event => _$ssr(_tmpl$53, _$ssrAttribute("data-color", event().colorHex ? _$escape(undefined, true) : _$escape(event().color ?? "blue", true), false) + _$ssrAttribute("data-today", day.isToday ? "true" : _$escape(undefined, true), false), _$ssrStyle(event().colorHex ? {
+            children: event => _$ssr(_tmpl$54, _$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))
           })];
@@ -3027,7 +3036,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$55, _$escape(_$createComponent(MonthPickerView, {
+  return _$ssr(_tmpl$56, _$escape(_$createComponent(MonthPickerView, {
     get owner() {
       return {
         ...props.owner,
@@ -3057,10 +3066,10 @@ const MobileMonthView = props => {
       return selectedEvents().length > 0;
     },
     get fallback() {
-      return _$ssr(_tmpl$56, _$escape(props.labels.noEvents));
+      return _$ssr(_tmpl$57, _$escape(props.labels.noEvents));
     },
     get children() {
-      return _$ssr(_tmpl$54, _$escape(_$createComponent(For, {
+      return _$ssr(_tmpl$55, _$escape(_$createComponent(For, {
         get each() {
           return selectedEvents();
         },
@@ -3077,7 +3086,7 @@ const MobileMonthView = props => {
     }
   })));
 };
-const CalendarBody = props => _$ssr(_tmpl$57, _$escape(props.children));
+const CalendarBody = props => _$ssr(_tmpl$58, _$escape(props.children));
 const CalendarRoot = props => {
   const messages = useUiMessages();
   const calendarMessages = useCalendarMessages();
@@ -3304,7 +3313,7 @@ const CalendarRoot = props => {
     },
     register: setTimeView
   });
-  return _$ssr(_tmpl$58, `k2b-content-calendar ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("aria-busy", props.navigationPending ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(CalendarHeader, {
+  return _$ssr(_tmpl$59, `k2b-content-calendar ${_$escape(props.class ?? "", true)}`, _$ssrAttribute("aria-busy", props.navigationPending ? "true" : _$escape(undefined, true), false), _$escape(_$createComponent(CalendarHeader, {
     get date() {
       return date();
     },