@k2b/ui 0.29.0 → 0.31.0

package/dist/browser/content/Calendar.js

@@ -85,6 +85,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";
@@ -905,9 +906,10 @@ const MonthPickerView = props => {
       get each() {
         return weekdays();
       },
-      children: day => (() => {
+      children: (day, index) => (() => {
         var _el$44 = _$getNextElement(_tmpl$11);
         _$insert(_el$44, day);
+        _$effect(() => _$setAttribute(_el$44, "data-weekend", isWeekendColumn(index(), dateConfig().firstDayOfWeek ?? 1, dateConfig().locale) ? "true" : undefined));
         return _el$44;
       })()
     }), _el$41, _co$1);
@@ -1138,12 +1140,12 @@ const MonthPickerView = props => {
                 children: event => (() => {
                   var _el$76 = _$getNextElement(_tmpl$20);
                   _$effect(_p$ => {
-                    var _v$5 = event.colorHex ? undefined : event.color ?? "blue",
-                      _v$6 = event.colorHex ? {
+                    var _v$7 = event.colorHex ? undefined : event.color ?? "blue",
+                      _v$8 = event.colorHex ? {
                         "background-color": event.colorHex
                       } : undefined;
-                    _v$5 !== _p$.e && _$setAttribute(_el$76, "data-color", _p$.e = _v$5);
-                    _p$.t = _$style(_el$76, _v$6, _p$.t);
+                    _v$7 !== _p$.e && _$setAttribute(_el$76, "data-color", _p$.e = _v$7);
+                    _p$.t = _$style(_el$76, _v$8, _p$.t);
                     return _p$;
                   }, {
                     e: undefined,
@@ -1152,7 +1154,16 @@ const MonthPickerView = props => {
                   return _el$76;
                 })()
               }));
-              _$effect(() => _$setAttribute(_el$51, "data-drop-preview", movePreview()?.start && calendar.formatDateKey(movePreview().start, dateConfig()) === dayKey ? "true" : undefined));
+              _$effect(_p$ => {
+                var _v$5 = isWeekendKey(dayKey, dateConfig().locale) ? "true" : undefined,
+                  _v$6 = movePreview()?.start && calendar.formatDateKey(movePreview().start, dateConfig()) === dayKey ? "true" : undefined;
+                _v$5 !== _p$.e && _$setAttribute(_el$51, "data-weekend", _p$.e = _v$5);
+                _v$6 !== _p$.t && _$setAttribute(_el$51, "data-drop-preview", _p$.t = _v$6);
+                return _p$;
+              }, {
+                e: undefined,
+                t: undefined
+              });
               return _el$51;
             })();
           }
@@ -1253,6 +1264,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([]);
@@ -2336,14 +2348,14 @@ const MonthView = props => {
                   _el$83.$$click = () => openView(week()[0].key, "week");
                   _$insert(_el$83, weekNumber);
                   _$effect(_p$ => {
-                    var _v$1 = calendarMessages().calendarOpenWeekNumber({
+                    var _v$11 = calendarMessages().calendarOpenWeekNumber({
                         week: weekNumber()
                       }),
-                      _v$10 = calendarMessages().calendarOpenWeekNumber({
+                      _v$12 = calendarMessages().calendarOpenWeekNumber({
                         week: weekNumber()
                       });
-                    _v$1 !== _p$.e && _$setAttribute(_el$83, "title", _p$.e = _v$1);
-                    _v$10 !== _p$.t && _$setAttribute(_el$83, "aria-label", _p$.t = _v$10);
+                    _v$11 !== _p$.e && _$setAttribute(_el$83, "title", _p$.e = _v$11);
+                    _v$12 !== _p$.t && _$setAttribute(_el$83, "aria-label", _p$.t = _v$12);
                     return _p$;
                   }, {
                     e: undefined,
@@ -2582,18 +2594,18 @@ const MonthView = props => {
                 }));
                 _$insert(_el$92, () => cell().hidden, _el$95, _co$24);
                 _$effect(_p$ => {
-                  var _v$11 = String(cell().top + cell().shown.length),
-                    _v$12 = calendarMessages().calendarMoreEventsOn({
+                  var _v$13 = String(cell().top + cell().shown.length),
+                    _v$14 = calendarMessages().calendarMoreEventsOn({
                       count: cell().hidden,
                       label
                     }),
-                    _v$13 = (() => {
+                    _v$15 = (() => {
                       const current = popover();
                       return current?.kind === "day" && current.dayKey === key;
                     })();
-                  _v$11 !== _p$.e && _$setStyleProperty(_el$90, "--k2b-calendar-row", _p$.e = _v$11);
-                  _v$12 !== _p$.t && _$setAttribute(_el$90, "aria-label", _p$.t = _v$12);
-                  _v$13 !== _p$.a && _$setAttribute(_el$90, "aria-expanded", _p$.a = _v$13);
+                  _v$13 !== _p$.e && _$setStyleProperty(_el$90, "--k2b-calendar-row", _p$.e = _v$13);
+                  _v$14 !== _p$.t && _$setAttribute(_el$90, "aria-label", _p$.t = _v$14);
+                  _v$15 !== _p$.a && _$setAttribute(_el$90, "aria-expanded", _p$.a = _v$15);
                   return _p$;
                 }, {
                   e: undefined,
@@ -2605,32 +2617,32 @@ const MonthView = props => {
               }
             }), _el$101, _co$27);
             _$effect(_p$ => {
-              var _v$14 = rovingKey() === key ? 0 : -1,
-                _v$15 = within(selection(), key) ? "true" : "false",
-                _v$16 = key === todayKey() ? "date" : undefined,
-                _v$17 = !sameMonth() ? "true" : undefined,
-                _v$18 = continuous() && key.endsWith("-01") ? "true" : undefined,
-                _v$19 = continuous() && Number(key.slice(8)) <= 7 ? "true" : undefined,
-                _v$20 = column() > 4 ? "true" : undefined,
-                _v$21 = key < todayKey() ? "true" : undefined,
-                _v$22 = selectionPart(key),
-                _v$23 = within(dropRange(), key) ? "true" : undefined,
-                _v$24 = continuous() && pulseKey() === key ? "true" : undefined,
-                _v$25 = key === todayKey() ? "true" : undefined,
-                _v$26 = !sameMonth() ? "true" : undefined;
-              _v$14 !== _p$.e && _$setAttribute(_el$84, "tabindex", _p$.e = _v$14);
-              _v$15 !== _p$.t && _$setAttribute(_el$84, "aria-selected", _p$.t = _v$15);
-              _v$16 !== _p$.a && _$setAttribute(_el$84, "aria-current", _p$.a = _v$16);
-              _v$17 !== _p$.o && _$setAttribute(_el$84, "data-outside", _p$.o = _v$17);
-              _v$18 !== _p$.i && _$setAttribute(_el$84, "data-month-first", _p$.i = _v$18);
-              _v$19 !== _p$.n && _$setAttribute(_el$84, "data-month-top", _p$.n = _v$19);
-              _v$20 !== _p$.s && _$setAttribute(_el$84, "data-weekend", _p$.s = _v$20);
-              _v$21 !== _p$.h && _$setAttribute(_el$84, "data-past", _p$.h = _v$21);
-              _v$22 !== _p$.r && _$setAttribute(_el$84, "data-selected", _p$.r = _v$22);
-              _v$23 !== _p$.d && _$setAttribute(_el$84, "data-drop-preview", _p$.d = _v$23);
-              _v$24 !== _p$.l && _$setAttribute(_el$86, "data-pulse", _p$.l = _v$24);
-              _v$25 !== _p$.u && _$setAttribute(_el$86, "data-today", _p$.u = _v$25);
-              _v$26 !== _p$.c && _$setAttribute(_el$86, "data-outside", _p$.c = _v$26);
+              var _v$16 = rovingKey() === key ? 0 : -1,
+                _v$17 = within(selection(), key) ? "true" : "false",
+                _v$18 = key === todayKey() ? "date" : undefined,
+                _v$19 = !sameMonth() ? "true" : undefined,
+                _v$20 = continuous() && key.endsWith("-01") ? "true" : undefined,
+                _v$21 = continuous() && Number(key.slice(8)) <= 7 ? "true" : undefined,
+                _v$22 = isWeekendKey(key, dateConfig().locale) ? "true" : undefined,
+                _v$23 = key < todayKey() ? "true" : undefined,
+                _v$24 = selectionPart(key),
+                _v$25 = within(dropRange(), key) ? "true" : undefined,
+                _v$26 = continuous() && pulseKey() === key ? "true" : undefined,
+                _v$27 = key === todayKey() ? "true" : undefined,
+                _v$28 = !sameMonth() ? "true" : undefined;
+              _v$16 !== _p$.e && _$setAttribute(_el$84, "tabindex", _p$.e = _v$16);
+              _v$17 !== _p$.t && _$setAttribute(_el$84, "aria-selected", _p$.t = _v$17);
+              _v$18 !== _p$.a && _$setAttribute(_el$84, "aria-current", _p$.a = _v$18);
+              _v$19 !== _p$.o && _$setAttribute(_el$84, "data-outside", _p$.o = _v$19);
+              _v$20 !== _p$.i && _$setAttribute(_el$84, "data-month-first", _p$.i = _v$20);
+              _v$21 !== _p$.n && _$setAttribute(_el$84, "data-month-top", _p$.n = _v$21);
+              _v$22 !== _p$.s && _$setAttribute(_el$84, "data-weekend", _p$.s = _v$22);
+              _v$23 !== _p$.h && _$setAttribute(_el$84, "data-past", _p$.h = _v$23);
+              _v$24 !== _p$.r && _$setAttribute(_el$84, "data-selected", _p$.r = _v$24);
+              _v$25 !== _p$.d && _$setAttribute(_el$84, "data-drop-preview", _p$.d = _v$25);
+              _v$26 !== _p$.l && _$setAttribute(_el$86, "data-pulse", _p$.l = _v$26);
+              _v$27 !== _p$.u && _$setAttribute(_el$86, "data-today", _p$.u = _v$27);
+              _v$28 !== _p$.c && _$setAttribute(_el$86, "data-outside", _p$.c = _v$28);
               return _p$;
             }, {
               e: undefined,
@@ -2653,16 +2665,16 @@ const MonthView = props => {
         }
       }), _el$82, _co$22);
       _$effect(_p$ => {
-        var _v$7 = continuous() ? week()[0]?.key : undefined,
-          _v$8 = continuous() ? weekIndex() + 2 : undefined,
-          _v$9 = continuous() ? {
+        var _v$9 = continuous() ? week()[0]?.key : undefined,
+          _v$0 = continuous() ? weekIndex() + 2 : undefined,
+          _v$1 = continuous() ? {
             "--k2b-calendar-week-index": String(weekIndex())
           } : undefined,
-          _v$0 = props.owner.withWeekNumbers ? "true" : undefined;
-        _v$7 !== _p$.e && _$setAttribute(_el$77, "data-week-key", _p$.e = _v$7);
-        _v$8 !== _p$.t && _$setAttribute(_el$77, "aria-rowindex", _p$.t = _v$8);
-        _p$.a = _$style(_el$77, _v$9, _p$.a);
-        _v$0 !== _p$.o && _$setAttribute(_el$77, "data-week-numbers", _p$.o = _v$0);
+          _v$10 = props.owner.withWeekNumbers ? "true" : undefined;
+        _v$9 !== _p$.e && _$setAttribute(_el$77, "data-week-key", _p$.e = _v$9);
+        _v$0 !== _p$.t && _$setAttribute(_el$77, "aria-rowindex", _p$.t = _v$0);
+        _p$.a = _$style(_el$77, _v$1, _p$.a);
+        _v$10 !== _p$.o && _$setAttribute(_el$77, "data-week-numbers", _p$.o = _v$10);
         return _p$;
       }, {
         e: undefined,
@@ -2698,7 +2710,7 @@ const MonthView = props => {
       children: (day, index) => (() => {
         var _el$116 = _$getNextElement(_tmpl$28);
         _$insert(_el$116, day);
-        _$effect(() => _$setAttribute(_el$116, "data-weekend", index() > 4 ? "true" : undefined));
+        _$effect(() => _$setAttribute(_el$116, "data-weekend", weekendColumn(index()) ? "true" : undefined));
         return _el$116;
       })()
     }), _el$115, _co$31);
@@ -2719,10 +2731,10 @@ const MonthView = props => {
       children: (week, index) => weekRow(() => week, index)
     }), _el$121, _co$33);
     _$effect(_p$ => {
-      var _v$27 = formatMonth(props.date, dateConfig()),
-        _v$28 = `auto repeat(${weeks().length}, minmax(5rem, 1fr))`;
-      _v$27 !== _p$.e && _$setAttribute(_el$117, "aria-label", _p$.e = _v$27);
-      _v$28 !== _p$.t && _$setStyleProperty(_el$117, "grid-template-rows", _p$.t = _v$28);
+      var _v$29 = formatMonth(props.date, dateConfig()),
+        _v$30 = `auto repeat(${weeks().length}, minmax(5rem, 1fr))`;
+      _v$29 !== _p$.e && _$setAttribute(_el$117, "aria-label", _p$.e = _v$29);
+      _v$30 !== _p$.t && _$setStyleProperty(_el$117, "grid-template-rows", _p$.t = _v$30);
       return _p$;
     }, {
       e: undefined,
@@ -2769,14 +2781,14 @@ const MonthView = props => {
     }));
     _$insert(_el$127, () => formatMonth(parseKey(focusMonthKey()), dateConfig()));
     _$effect(_p$ => {
-      var _v$29 = formatMonth(parseKey(focusMonthKey()), dateConfig()),
-        _v$30 = trackWeeks().length + 1,
-        _v$31 = String(trackWeeks().length),
-        _v$32 = labelShown() ? "true" : "false";
-      _v$29 !== _p$.e && _$setAttribute(_el$123, "aria-label", _p$.e = _v$29);
-      _v$30 !== _p$.t && _$setAttribute(_el$123, "aria-rowcount", _p$.t = _v$30);
-      _v$31 !== _p$.a && _$setStyleProperty(_el$124, "--k2b-calendar-weeks", _p$.a = _v$31);
-      _v$32 !== _p$.o && _$setAttribute(_el$127, "data-show", _p$.o = _v$32);
+      var _v$31 = formatMonth(parseKey(focusMonthKey()), dateConfig()),
+        _v$32 = trackWeeks().length + 1,
+        _v$33 = String(trackWeeks().length),
+        _v$34 = labelShown() ? "true" : "false";
+      _v$31 !== _p$.e && _$setAttribute(_el$123, "aria-label", _p$.e = _v$31);
+      _v$32 !== _p$.t && _$setAttribute(_el$123, "aria-rowcount", _p$.t = _v$32);
+      _v$33 !== _p$.a && _$setStyleProperty(_el$124, "--k2b-calendar-weeks", _p$.a = _v$33);
+      _v$34 !== _p$.o && _$setAttribute(_el$127, "data-show", _p$.o = _v$34);
       return _p$;
     }, {
       e: undefined,
@@ -2961,16 +2973,16 @@ const MonthView = props => {
       }) : dayList(value.dayKey)
     }));
     _$effect(_p$ => {
-      var _v$33 = (() => {
+      var _v$35 = (() => {
           const current = popover();
           if (current?.kind === "day") return dayLabel(parseKey(current.dayKey));
           return calendarMessages().calendarQuickCreate;
         })(),
-        _v$34 = popover()?.kind,
-        _v$35 = popover()?.kind === "create" && !createActive() ? "true" : undefined;
-      _v$33 !== _p$.e && _$setAttribute(_el$143, "aria-label", _p$.e = _v$33);
-      _v$34 !== _p$.t && _$setAttribute(_el$143, "data-kind", _p$.t = _v$34);
-      _v$35 !== _p$.a && _$setAttribute(_el$143, "data-quiet", _p$.a = _v$35);
+        _v$36 = popover()?.kind,
+        _v$37 = popover()?.kind === "create" && !createActive() ? "true" : undefined;
+      _v$35 !== _p$.e && _$setAttribute(_el$143, "aria-label", _p$.e = _v$35);
+      _v$36 !== _p$.t && _$setAttribute(_el$143, "data-kind", _p$.t = _v$36);
+      _v$37 !== _p$.a && _$setAttribute(_el$143, "data-quiet", _p$.a = _v$37);
       return _p$;
     }, {
       e: undefined,
@@ -3245,8 +3257,11 @@ 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 [(() => {
@@ -3310,6 +3325,9 @@ const TimeGridView = props => {
                 [_el$172, _co$45] = _$getNextMarker(_el$171.nextSibling);
               _$setAttribute(_el$167, "data-calendar-day-key", dayKey);
               _$spread(_el$167, _$mergeProps({
+                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;
                 },
@@ -3359,10 +3377,10 @@ const TimeGridView = props => {
           }
         }), _el$152, _co$39);
         _$effect(_p$ => {
-          var _v$36 = columnTemplate(),
-            _v$37 = `${props.owner.allDayMaxHeightRem ?? 7}rem`;
-          _v$36 !== _p$.e && _$setStyleProperty(_el$149, "grid-template-columns", _p$.e = _v$36);
-          _v$37 !== _p$.t && _$setStyleProperty(_el$149, "max-height", _p$.t = _v$37);
+          var _v$38 = columnTemplate(),
+            _v$39 = `${props.owner.allDayMaxHeightRem ?? 7}rem`;
+          _v$38 !== _p$.e && _$setStyleProperty(_el$149, "grid-template-columns", _p$.e = _v$38);
+          _v$39 !== _p$.t && _$setStyleProperty(_el$149, "max-height", _p$.t = _v$39);
           return _p$;
         }, {
           e: undefined,
@@ -3483,10 +3501,10 @@ const TimeGridView = props => {
                 _$insert(_el$194, () => formatTime(event.startDate, dateConfig()), _el$197, _co$52);
                 _$insert(_el$194, () => formatTime(event.endDate, dateConfig()), _el$199, _co$53);
                 _$effect(_p$ => {
-                  var _v$42 = `${layout.top}%`,
-                    _v$43 = `${layout.height}%`;
-                  _v$42 !== _p$.e && _$setStyleProperty(_el$191, "top", _p$.e = _v$42);
-                  _v$43 !== _p$.t && _$setStyleProperty(_el$191, "height", _p$.t = _v$43);
+                  var _v$46 = `${layout.top}%`,
+                    _v$47 = `${layout.height}%`;
+                  _v$46 !== _p$.e && _$setStyleProperty(_el$191, "top", _p$.e = _v$46);
+                  _v$47 !== _p$.t && _$setStyleProperty(_el$191, "height", _p$.t = _v$47);
                   return _p$;
                 }, {
                   e: undefined,
@@ -3576,16 +3594,16 @@ const TimeGridView = props => {
                   }
                 }), _el$208, _co$56);
                 _$effect(_p$ => {
-                  var _v$44 = `${layout.top}%`,
-                    _v$45 = `${layout.height}%`,
-                    _v$46 = position.left,
-                    _v$47 = position.width,
-                    _v$48 = String(20 + layoutItem.lane);
-                  _v$44 !== _p$.e && _$setStyleProperty(_el$202, "top", _p$.e = _v$44);
-                  _v$45 !== _p$.t && _$setStyleProperty(_el$202, "height", _p$.t = _v$45);
-                  _v$46 !== _p$.a && _$setStyleProperty(_el$202, "left", _p$.a = _v$46);
-                  _v$47 !== _p$.o && _$setStyleProperty(_el$202, "width", _p$.o = _v$47);
-                  _v$48 !== _p$.i && _$setStyleProperty(_el$202, "z-index", _p$.i = _v$48);
+                  var _v$48 = `${layout.top}%`,
+                    _v$49 = `${layout.height}%`,
+                    _v$50 = position.left,
+                    _v$51 = position.width,
+                    _v$52 = String(20 + layoutItem.lane);
+                  _v$48 !== _p$.e && _$setStyleProperty(_el$202, "top", _p$.e = _v$48);
+                  _v$49 !== _p$.t && _$setStyleProperty(_el$202, "height", _p$.t = _v$49);
+                  _v$50 !== _p$.a && _$setStyleProperty(_el$202, "left", _p$.a = _v$50);
+                  _v$51 !== _p$.o && _$setStyleProperty(_el$202, "width", _p$.o = _v$51);
+                  _v$52 !== _p$.i && _$setStyleProperty(_el$202, "z-index", _p$.i = _v$52);
                   return _p$;
                 }, {
                   e: undefined,
@@ -3618,16 +3636,16 @@ const TimeGridView = props => {
                 };
                 _$insert(_el$210, () => overflow.hiddenEvents.length, _el$213, _co$57);
                 _$effect(_p$ => {
-                  var _v$49 = `${layout.top}%`,
-                    _v$50 = `${layout.height}%`,
-                    _v$51 = hiddenTitle(),
-                    _v$52 = calendarMessages().hiddenOverlappingEvents({
+                  var _v$53 = `${layout.top}%`,
+                    _v$54 = `${layout.height}%`,
+                    _v$55 = hiddenTitle(),
+                    _v$56 = calendarMessages().hiddenOverlappingEvents({
                       count: overflow.hiddenEvents.length
                     });
-                  _v$49 !== _p$.e && _$setStyleProperty(_el$209, "top", _p$.e = _v$49);
-                  _v$50 !== _p$.t && _$setStyleProperty(_el$209, "height", _p$.t = _v$50);
-                  _v$51 !== _p$.a && _$setAttribute(_el$209, "title", _p$.a = _v$51);
-                  _v$52 !== _p$.o && _$setAttribute(_el$209, "aria-label", _p$.o = _v$52);
+                  _v$53 !== _p$.e && _$setStyleProperty(_el$209, "top", _p$.e = _v$53);
+                  _v$54 !== _p$.t && _$setStyleProperty(_el$209, "height", _p$.t = _v$54);
+                  _v$55 !== _p$.a && _$setAttribute(_el$209, "title", _p$.a = _v$55);
+                  _v$56 !== _p$.o && _$setAttribute(_el$209, "aria-label", _p$.o = _v$56);
                   return _p$;
                 }, {
                   e: undefined,
@@ -3674,20 +3692,29 @@ const TimeGridView = props => {
               })];
             }
           }), _el$189, _co$51);
-          _$effect(_$p => _$setStyleProperty(_el$178, "grid-template-rows", `repeat(${hours().length}, minmax(4rem, 1fr))`));
+          _$effect(_p$ => {
+            var _v$44 = isWeekendKey(dayKey, dateConfig().locale) ? "true" : undefined,
+              _v$45 = `repeat(${hours().length}, minmax(4rem, 1fr))`;
+            _v$44 !== _p$.e && _$setAttribute(_el$178, "data-weekend", _p$.e = _v$44);
+            _v$45 !== _p$.t && _$setStyleProperty(_el$178, "grid-template-rows", _p$.t = _v$45);
+            return _p$;
+          }, {
+            e: undefined,
+            t: undefined
+          });
           return _el$178;
         })();
       }
     }), _el$157, _co$40);
     _$effect(_p$ => {
-      var _v$38 = isDayView() ? "day" : "week",
-        _v$39 = columnTemplate(),
-        _v$40 = columnTemplate(),
-        _v$41 = `repeat(${hours().length}, minmax(4rem, 1fr))`;
-      _v$38 !== _p$.e && _$setAttribute(_el$144, "data-view", _p$.e = _v$38);
-      _v$39 !== _p$.t && _$setStyleProperty(_el$145, "grid-template-columns", _p$.t = _v$39);
-      _v$40 !== _p$.a && _$setStyleProperty(_el$154, "grid-template-columns", _p$.a = _v$40);
-      _v$41 !== _p$.o && _$setStyleProperty(_el$155, "grid-template-rows", _p$.o = _v$41);
+      var _v$40 = isDayView() ? "day" : "week",
+        _v$41 = columnTemplate(),
+        _v$42 = columnTemplate(),
+        _v$43 = `repeat(${hours().length}, minmax(4rem, 1fr))`;
+      _v$40 !== _p$.e && _$setAttribute(_el$144, "data-view", _p$.e = _v$40);
+      _v$41 !== _p$.t && _$setStyleProperty(_el$145, "grid-template-columns", _p$.t = _v$41);
+      _v$42 !== _p$.a && _$setStyleProperty(_el$154, "grid-template-columns", _p$.a = _v$42);
+      _v$43 !== _p$.o && _$setStyleProperty(_el$155, "grid-template-rows", _p$.o = _v$43);
       return _p$;
     }, {
       e: undefined,
@@ -3772,14 +3799,14 @@ const YearView = props => {
                 children: event => (() => {
                   var _el$227 = _$getNextElement(_tmpl$56);
                   _$effect(_p$ => {
-                    var _v$53 = event().colorHex ? undefined : event().color ?? "blue",
-                      _v$54 = day.isToday ? "true" : undefined,
-                      _v$55 = event().colorHex ? {
+                    var _v$57 = event().colorHex ? undefined : event().color ?? "blue",
+                      _v$58 = day.isToday ? "true" : undefined,
+                      _v$59 = event().colorHex ? {
                         "background-color": day.isToday ? "white" : event().colorHex
                       } : undefined;
-                    _v$53 !== _p$.e && _$setAttribute(_el$227, "data-color", _p$.e = _v$53);
-                    _v$54 !== _p$.t && _$setAttribute(_el$227, "data-today", _p$.t = _v$54);
-                    _p$.a = _$style(_el$227, _v$55, _p$.a);
+                    _v$57 !== _p$.e && _$setAttribute(_el$227, "data-color", _p$.e = _v$57);
+                    _v$58 !== _p$.t && _$setAttribute(_el$227, "data-today", _p$.t = _v$58);
+                    _p$.a = _$style(_el$227, _v$59, _p$.a);
                     return _p$;
                   }, {
                     e: undefined,
@@ -4265,10 +4292,10 @@ const CalendarRoot = props => {
       }
     }), _el$242, _co$64);
     _$effect(_p$ => {
-      var _v$56 = `k2b-content-calendar ${props.class ?? ""}`,
-        _v$57 = props.navigationPending ? "true" : undefined;
-      _v$56 !== _p$.e && _$className(_el$238, _p$.e = _v$56);
-      _v$57 !== _p$.t && _$setAttribute(_el$238, "aria-busy", _p$.t = _v$57);
+      var _v$60 = `k2b-content-calendar ${props.class ?? ""}`,
+        _v$61 = props.navigationPending ? "true" : undefined;
+      _v$60 !== _p$.e && _$className(_el$238, _p$.e = _v$60);
+      _v$61 !== _p$.t && _$setAttribute(_el$238, "aria-busy", _p$.t = _v$61);
       return _p$;
     }, {
       e: undefined,