@event-calendar/core 5.2.4 → 5.3.0

package/dist/index.js

@@ -1,8 +1,8 @@
 /*!
- * EventCalendar v5.2.4
+ * EventCalendar v5.3.0
  * https://github.com/vkurko/calendar
  */
-import { untrack, getAbortSignal, tick, getContext, setContext, onMount, mount, unmount } from "svelte";
+import { untrack, tick, getAbortSignal, getContext, setContext, onMount, mount, unmount } from "svelte";
 import * as $ from "svelte/internal/client";
 import "svelte/internal/disclose-version";
 import { SvelteMap } from "svelte/reactivity";
@@ -87,6 +87,12 @@ function max(...args) {
 function symbol() {
   return /* @__PURE__ */ Symbol("ec");
 }
+function length(array) {
+  return array.length;
+}
+function empty(array) {
+  return !length(array);
+}
 function isArray(value) {
   return Array.isArray(value);
 }
@@ -112,14 +118,6 @@ function runAll(fns) {
 function noop() {
 }
 const identity = (x) => x;
-function stopPropagation(fn, _this = void 0) {
-  return function(event) {
-    event.stopPropagation();
-    if (fn) {
-      fn.call(_this, event);
-    }
-  };
-}
 function isRtl() {
   return window.getComputedStyle(document.documentElement).direction === "rtl";
 }
@@ -323,6 +321,14 @@ function listen(node, event, handler, options) {
   node.addEventListener(event, handler, options);
   return () => node.removeEventListener(event, handler, options);
 }
+function stopPropagation(fn, _this = void 0) {
+  return function(jsEvent) {
+    jsEvent.stopPropagation();
+    if (fn) {
+      fn.call(_this, jsEvent);
+    }
+  };
+}
 function createView(view2, _viewTitle, _currentRange, _activeRange) {
   return {
     type: view2,
@@ -492,19 +498,21 @@ function createAllDayChunks(event, days, withId = true) {
   let lastEnd;
   let gridColumn;
   let gridRow;
-  for (let { gridColumn: column, gridRow: row, resource, dayStart, dayEnd, disabled } of days) {
-    if (!disabled && eventIntersects(event, dayStart, dayEnd, resource)) {
+  let resource;
+  for (let { gridColumn: column, gridRow: row, resource: dayResource, dayStart, dayEnd, disabled } of days) {
+    if (!disabled && eventIntersects(event, dayStart, dayEnd, dayResource)) {
       dates.push(dayStart);
       lastEnd = dayEnd;
       if (!gridColumn) {
         gridColumn = column;
         gridRow = row;
+        resource = dayResource;
       }
     }
   }
   if (dates.length) {
     let chunk = createEventChunk(event, dates[0], lastEnd);
-    assign(chunk, { gridColumn, gridRow, dates });
+    assign(chunk, { gridColumn, gridRow, resource, dates });
     if (withId) {
       assignChunkId(chunk);
     }
@@ -694,19 +702,19 @@ function createResource(input) {
   return {
     id: String(input.id),
     title: input.title || "",
-    eventBackgroundColor: input.eventBackgroundColor,
-    eventTextColor: input.eventTextColor,
+    eventBackgroundColor: eventBackgroundColor(input),
+    eventTextColor: eventTextColor(input),
     extendedProps: input.extendedProps ?? {}
   };
 }
-function resourceBackgroundColor(event, resources) {
-  return findResource(event, resources)?.eventBackgroundColor;
+function eventBackgroundColor(resource) {
+  return resource?.eventBackgroundColor;
 }
-function resourceTextColor(event, resources) {
-  return findResource(event, resources)?.eventTextColor;
+function eventTextColor(resource) {
+  return resource?.eventTextColor;
 }
-function findResource(event, resources) {
-  return resources.find((resource) => event.resourceIds.includes(resource.id));
+function findFirstResource(event, resources) {
+  return empty(event.resourceIds) ? void 0 : resources.find((resource) => event.resourceIds.includes(resource.id));
 }
 function createSlots(date, slotDuration, slotLabelPeriodicity2, slotTimeLimits2, intlSlotLabel) {
   let slots2 = [];
@@ -800,6 +808,7 @@ function createOptions(plugins) {
     lazyFetching: true,
     loading: void 0,
     locale: void 0,
+    refetchResourcesOnNavigate: false,
     resources: [],
     selectable: false,
     theme: {
@@ -857,13 +866,13 @@ function createOptions(plugins) {
 }
 function createParsers(plugins) {
   let parsers = {
-    date: (date) => setMidnight(createDate(date)),
+    date: (input) => setMidnight(createDate(input)),
     duration: createDuration,
     events: createEvents,
     eventSources: createEventSources,
-    hiddenDays: (days) => [...new Set(days)],
-    highlightedDates: (dates) => dates.map((date) => setMidnight(createDate(date))),
-    resources: createResources,
+    hiddenDays: (input) => [...new Set(input)],
+    highlightedDates: (input) => input.map((item) => setMidnight(createDate(item))),
+    resources: (input) => isArray(input) ? createResources(input) : input,
     validRange: createDateRange
   };
   for (let plugin of plugins) {
@@ -986,71 +995,121 @@ function diff(options, prevOptions) {
   }
   return diff2;
 }
-function loadEvents(mainState) {
-  let fetching = 0;
+function loadEvents(mainState, loadingInvoker) {
   return () => {
-    let { activeRange: activeRange2, fetchedRange, viewDates: viewDates2, options: { events, eventSources, lazyFetching, loading } } = mainState;
+    let {
+      activeRange: activeRange2,
+      fetchedRange: { events: fetchedRange },
+      viewDates: viewDates2,
+      options: { events, eventSources, lazyFetching }
+    } = mainState;
     untrack(() => {
-      if (!viewDates2.length) {
-        return;
-      }
-      if (!eventSources.length) {
-        mainState.events = events;
-      }
-      if (!fetchedRange.start || fetchedRange.start > activeRange2.start || fetchedRange.end < activeRange2.end || !lazyFetching) {
-        if (isFunction(loading) && !fetching) {
-          loading(true);
+      load(
+        eventSources.map((source) => isFunction(source.events) ? source.events : source),
+        events,
+        createEvents,
+        (result) => mainState.events = result,
+        activeRange2,
+        fetchedRange,
+        viewDates2,
+        true,
+        lazyFetching,
+        loadingInvoker
+      );
+    });
+  };
+}
+function loadResources(mainState, loadingInvoker) {
+  return () => {
+    let {
+      activeRange: activeRange2,
+      fetchedRange: { resources: fetchedRange },
+      viewDates: viewDates2,
+      options: { lazyFetching, refetchResourcesOnNavigate, resources }
+    } = mainState;
+    untrack(() => {
+      load(
+        isArray(resources) ? [] : [resources],
+        resources,
+        createResources,
+        (result) => mainState.resources = result,
+        activeRange2,
+        fetchedRange,
+        viewDates2,
+        refetchResourcesOnNavigate,
+        lazyFetching,
+        loadingInvoker
+      );
+    });
+  };
+}
+function load(sources, defaultResult, parseResult, applyResult, activeRange2, fetchedRange, viewDates2, refetchOnNavigate, lazyFetching, loading) {
+  if (empty(viewDates2)) {
+    return;
+  }
+  if (empty(sources)) {
+    applyResult(defaultResult);
+    return;
+  }
+  if ((refetchOnNavigate || !fetchedRange.start) && (!lazyFetching || !fetchedRange.start || fetchedRange.start > activeRange2.start || fetchedRange.end < activeRange2.end)) {
+    let result = [];
+    let failure = (e) => loading.stop();
+    let success = (data) => {
+      result = result.concat(parseResult(data));
+      applyResult(result);
+      loading.stop();
+    };
+    let startStr = toISOString(activeRange2.start);
+    let endStr = toISOString(activeRange2.end);
+    for (let source of sources) {
+      loading.start();
+      if (isFunction(source)) {
+        let result2 = source(refetchOnNavigate ? {
+          start: toLocalDate(activeRange2.start),
+          end: toLocalDate(activeRange2.end),
+          startStr,
+          endStr
+        } : {}, success, failure);
+        if (result2 !== void 0) {
+          Promise.resolve(result2).then(success, failure);
         }
-        let stopLoading = () => {
-          if (--fetching === 0 && isFunction(loading)) {
-            loading(false);
-          }
-        };
-        let events2 = [];
-        let failure = (e) => stopLoading();
-        let success = (data) => {
-          events2 = events2.concat(createEvents(data));
-          mainState.events = events2;
-          stopLoading();
-        };
-        let startStr = toISOString(activeRange2.start);
-        let endStr = toISOString(activeRange2.end);
-        for (let source of eventSources) {
-          if (isFunction(source.events)) {
-            let result = source.events({
-              start: toLocalDate(activeRange2.start),
-              end: toLocalDate(activeRange2.end),
-              startStr,
-              endStr
-            }, success, failure);
-            if (result !== void 0) {
-              Promise.resolve(result).then(success, failure);
-            }
-          } else {
-            let params = isFunction(source.extraParams) ? source.extraParams() : assign({}, source.extraParams);
-            params.start = startStr;
-            params.end = endStr;
-            params = new URLSearchParams(params);
-            let url = source.url, headers = {}, body;
-            if (["GET", "HEAD"].includes(source.method)) {
-              url += (url.includes("?") ? "&" : "?") + params;
-            } else {
-              headers["content-type"] = "application/x-www-form-urlencoded;charset=UTF-8";
-              body = String(params);
-            }
-            fetch(url, {
-              method: source.method,
-              headers,
-              body,
-              signal: getAbortSignal(),
-              credentials: "same-origin"
-            }).then((response) => response.json()).then(success).catch(failure);
-          }
-          ++fetching;
+      } else {
+        let params = isFunction(source.extraParams) ? source.extraParams() : assign({}, source.extraParams);
+        if (refetchOnNavigate) {
+          params.start = startStr;
+          params.end = endStr;
         }
-        assign(fetchedRange, activeRange2);
+        params = new URLSearchParams(params);
+        let url = source.url, headers = {}, body;
+        if (["GET", "HEAD"].includes(source.method)) {
+          url += (url.includes("?") ? "&" : "?") + params;
+        } else {
+          headers["content-type"] = "application/x-www-form-urlencoded;charset=UTF-8";
+          body = String(params);
+        }
+        fetch(url, {
+          method: source.method,
+          headers,
+          body,
+          signal: getAbortSignal(),
+          credentials: "same-origin"
+        }).then((response) => response.json()).then(success).catch(failure);
       }
-    });
+    }
+    assign(fetchedRange, activeRange2);
+  }
+}
+function createLoadingInvoker(options) {
+  let counter = 0;
+  function invoke(value) {
+    let { loading } = options;
+    if (isFunction(loading)) {
+      loading(value);
+    }
+  }
+  return {
+    start: () => ++counter === 1 && invoke(true),
+    stop: () => --counter === 0 && invoke(false)
   };
 }
 function setNowAndToday(mainState) {
@@ -1173,8 +1232,8 @@ function viewDates(mainState) {
     let { hiddenDays } = options;
     let dates = [];
     untrack(() => {
-      let date = cloneDate(activeRange2.start);
-      let end = cloneDate(activeRange2.end);
+      let date = setMidnight(cloneDate(activeRange2.start));
+      let end = setMidnight(cloneDate(activeRange2.end));
       while (date < end) {
         if (!hiddenDays.includes(date.getUTCDay())) {
           dates.push(cloneDate(date));
@@ -1240,7 +1299,7 @@ class State {
     return $.get(this.#fetchedRange);
   }
   set fetchedRange(value) {
-    $.set(this.#fetchedRange, value);
+    $.set(this.#fetchedRange, value, true);
   }
   #events;
   get events() {
@@ -1270,6 +1329,13 @@ class State {
   set now(value) {
     $.set(this.#now, value, true);
   }
+  #resources;
+  get resources() {
+    return $.get(this.#resources);
+  }
+  set resources(value) {
+    $.set(this.#resources, value);
+  }
   #today;
   get today() {
     return $.get(this.#today);
@@ -1376,11 +1442,12 @@ class State {
     this.#auxComponents = $.state($.proxy([]));
     this.#currentRange = $.derived(currentRange(this));
     this.#activeRange = $.derived(activeRange(this));
-    this.#fetchedRange = $.state({ start: void 0, end: void 0 });
+    this.#fetchedRange = $.state($.proxy({ events: {}, resources: {} }));
     this.#events = $.state([]);
     this.#filteredEvents = $.derived(filteredEvents(this));
     this.#mainEl = $.state();
     this.#now = $.state($.proxy(createDate()));
+    this.#resources = $.state([]);
     this.#today = $.state($.proxy(setMidnight(createDate())));
     this.#intlEventTime = $.derived(intlRange(this, "eventTimeFormat"));
     this.#intlDayHeader = $.derived(intl(this, "dayHeaderFormat"));
@@ -1403,8 +1470,10 @@ class State {
     this.#initEffects();
   }
   #initEffects() {
+    let loading = createLoadingInvoker(this.options);
     $.user_pre_effect(setNowAndToday(this));
-    $.user_effect(loadEvents(this));
+    $.user_effect(loadEvents(this, loading));
+    $.user_effect(loadResources(this, loading));
     $.user_effect(runDatesSet(this));
     $.user_effect(runEventAllUpdated(this));
     $.user_effect(runViewDidMount(this));
@@ -1727,8 +1796,12 @@ function Calendar($$anchor, $$props) {
     let value = mainState.options[name];
     return isDate(value) ? toLocalDate(value) : value;
   }
+  function refetchResources() {
+    mainState.fetchedRange.resources = {};
+    return this;
+  }
   function refetchEvents() {
-    mainState.fetchedRange = { start: void 0, end: void 0 };
+    mainState.fetchedRange.events = {};
     return this;
   }
   function getEvents() {
@@ -1796,6 +1869,7 @@ function Calendar($$anchor, $$props) {
   var $$exports = {
     setOption,
     getOption,
+    refetchResources,
     refetchEvents,
     getEvents,
     getEventById,
@@ -2059,11 +2133,11 @@ var root$8 = $.from_html(`<article><!></article>`);
 function BaseEvent($$anchor, $$props) {
   $.push($$props, true);
   let el = $.prop($$props, "el", 15), classes = $.prop($$props, "classes", 3, identity), styles = $.prop($$props, "styles", 3, identity);
-  let $$d = $.derived(() => getContext("state")), intlEventTime = $.derived(() => $.get($$d).intlEventTime), view2 = $.derived(() => $.get($$d).view), displayEventEnd = $.derived(() => $.get($$d).options.displayEventEnd), eventBackgroundColor = $.derived(() => $.get($$d).options.eventBackgroundColor), eventColor = $.derived(() => $.get($$d).options.eventColor), eventContent = $.derived(() => $.get($$d).options.eventContent), eventClick = $.derived(() => $.get($$d).options.eventClick), eventDidMount = $.derived(() => $.get($$d).options.eventDidMount), eventClassNames = $.derived(() => $.get($$d).options.eventClassNames), eventMouseEnter = $.derived(() => $.get($$d).options.eventMouseEnter), eventMouseLeave = $.derived(() => $.get($$d).options.eventMouseLeave), eventTextColor = $.derived(() => $.get($$d).options.eventTextColor), resources = $.derived(() => $.get($$d).options.resources), theme = $.derived(() => $.get($$d).options.theme);
+  let $$d = $.derived(() => getContext("state")), intlEventTime = $.derived(() => $.get($$d).intlEventTime), resources = $.derived(() => $.get($$d).resources), view2 = $.derived(() => $.get($$d).view), displayEventEnd = $.derived(() => $.get($$d).options.displayEventEnd), eventBackgroundColor$1 = $.derived(() => $.get($$d).options.eventBackgroundColor), eventColor = $.derived(() => $.get($$d).options.eventColor), eventContent = $.derived(() => $.get($$d).options.eventContent), eventClick = $.derived(() => $.get($$d).options.eventClick), eventDidMount = $.derived(() => $.get($$d).options.eventDidMount), eventClassNames = $.derived(() => $.get($$d).options.eventClassNames), eventMouseEnter = $.derived(() => $.get($$d).options.eventMouseEnter), eventMouseLeave = $.derived(() => $.get($$d).options.eventMouseLeave), eventTextColor$1 = $.derived(() => $.get($$d).options.eventTextColor), theme = $.derived(() => $.get($$d).options.theme);
   let event = $.derived(() => $$props.chunk.event);
   let display = $.derived(() => $$props.chunk.event.display);
-  let bgColor = $.derived(() => $.get(event).backgroundColor ?? resourceBackgroundColor($.get(event), $.get(resources)) ?? $.get(eventBackgroundColor) ?? $.get(eventColor));
-  let txtColor = $.derived(() => $.get(event).textColor ?? resourceTextColor($.get(event), $.get(resources)) ?? $.get(eventTextColor));
+  let bgColor = $.derived(() => $.get(event).backgroundColor ?? eventBackgroundColor($$props.chunk.resource ?? findFirstResource($.get(event), $.get(resources))) ?? $.get(eventBackgroundColor$1) ?? $.get(eventColor));
+  let txtColor = $.derived(() => $.get(event).textColor ?? eventTextColor($$props.chunk.resource ?? findFirstResource($.get(event), $.get(resources))) ?? $.get(eventTextColor$1));
   let style = $.derived(() => entries(styles()({ "background-color": $.get(bgColor), "color": $.get(txtColor) })).map((entry) => `${entry[0]}:${entry[1]}`).concat($.get(event).styles).join(";"));
   let classNames = $.derived(() => classes()([
     bgEvent($.get(display)) ? $.get(theme).bgEvent : $.get(theme).event,
@@ -2682,8 +2756,8 @@ function View$3($$anchor, $$props) {
         var node_1 = $.first_child(fragment_1);
         $.each(node_1, 17, () => $.get(days), $.index, ($$anchor4, day, j) => {
           {
-            let $0 = $.derived(() => j + 1 === $.get(days).length);
-            let $1 = $.derived(() => i + 1 === $.get(grid2).length);
+            let $0 = $.derived(() => j + 1 === length($.get(days)));
+            let $1 = $.derived(() => i + 1 === length($.get(grid2)));
             Day$3($$anchor4, {
               get day() {
                 return $.get(day);
@@ -2745,25 +2819,30 @@ function View$3($$anchor, $$props) {
       $.reset(section);
       $.bind_this(section, ($$value) => mainState.mainEl = $$value, () => mainState?.mainEl);
       $.attach(section, () => resizeObserver(reposition));
-      $.template_effect(() => {
-        $.set_class(section, 1, $.clsx([
-          $.get(theme).main,
-          $.get(dayMaxEvents) === true && $.get(theme).uniform
-        ]));
-        styles = $.set_style(section, "", styles, {
-          "--ec-grid-cols": $.get(grid2)[0].length,
-          "--ec-grid-rows": $.get(grid2).length
-        });
-        $.set_class(header, 1, $.get(theme).header);
-        $.set_class(div, 1, $.get(theme).grid);
-        $.set_class(div_2, 1, $.get(theme).body);
-        $.set_class(div_3, 1, $.get(theme).grid);
-        $.set_class(div_4, 1, $.get(theme).events);
-      });
+      $.template_effect(
+        ($0) => {
+          $.set_class(section, 1, $.clsx([
+            $.get(theme).main,
+            $.get(dayMaxEvents) === true && $.get(theme).uniform
+          ]));
+          styles = $.set_style(section, "", styles, $0);
+          $.set_class(header, 1, $.get(theme).header);
+          $.set_class(div, 1, $.get(theme).grid);
+          $.set_class(div_2, 1, $.get(theme).body);
+          $.set_class(div_3, 1, $.get(theme).grid);
+          $.set_class(div_4, 1, $.get(theme).events);
+        },
+        [
+          () => ({
+            "--ec-grid-cols": length($.get(grid2)[0]),
+            "--ec-grid-rows": length($.get(grid2))
+          })
+        ]
+      );
       $.append($$anchor2, section);
     };
     $.if(node, ($$render) => {
-      if ($.get(grid2).length && $.get(grid2)[0].length) $$render(consequent_1);
+      if (!empty($.get(grid2)) && !empty($.get(grid2)[0])) $$render(consequent_1);
     });
   }
   $.append($$anchor, fragment);
@@ -3736,7 +3815,7 @@ function View$2($$anchor, $$props) {
   let filteredEvents2 = $.derived(() => mainState.filteredEvents), view2 = $.derived(() => mainState.view), viewDates2 = $.derived(() => mainState.viewDates), noEventsClick = $.derived(() => mainState.options.noEventsClick), noEventsContent = $.derived(() => mainState.options.noEventsContent), theme = $.derived(() => mainState.options.theme);
   let noEvents = $.derived(() => {
     let noEvents2 = true;
-    if ($.get(viewDates2).length) {
+    if (!empty($.get(viewDates2))) {
       let start = $.get(viewDates2)[0];
       let end = addDay(cloneDate($.get(viewDates2).at(-1)));
       for (let event of $.get(filteredEvents2)) {
@@ -3850,6 +3929,7 @@ function createChunks$1(event, days, withId = true) {
       assign(chunk, {
         gridColumn,
         gridRow,
+        resource,
         top: (chunk.start - start) / 1e3,
         height: (chunk.end - chunk.start) / 1e3,
         maxHeight: (end - chunk.start) / 1e3
@@ -4231,7 +4311,8 @@ function viewResources(mainState) {
     let {
       activeRange: activeRange2,
       filteredEvents: filteredEvents2,
-      options: { filterResourcesWithEvents, resources },
+      resources,
+      options: { filterResourcesWithEvents },
       extensions: { viewResources: viewResources2 }
     } = mainState;
     let result = viewResources2 ? viewResources2(resources) : resources;
@@ -4540,7 +4621,7 @@ function View$1($$anchor, $$props) {
   let allDayText = $.derived(() => createAllDayContent($.get(allDayContent)));
   $.user_effect(() => {
     $.get(scrollTime);
-    if ($.get(viewDates2).length) {
+    if (!empty($.get(viewDates2))) {
       tick().then(scrollToTime);
     }
   });
@@ -4617,7 +4698,7 @@ function View$1($$anchor, $$props) {
             var node_5 = $.first_child(fragment_5);
             $.each(node_5, 17, () => $.get(days), $.index, ($$anchor5, day, j) => {
               {
-                let $0 = $.derived(() => i + 1 === $.get(grid2).length && j + 1 === $.get(days).length);
+                let $0 = $.derived(() => i + 1 === length($.get(grid2)) && j + 1 === length($.get(days)));
                 Day$1($$anchor5, {
                   get day() {
                     return $.get(day);
@@ -4699,7 +4780,7 @@ function View$1($$anchor, $$props) {
         var node_9 = $.first_child(fragment_10);
         $.each(node_9, 17, () => $.get(days), $.index, ($$anchor4, day, j) => {
           {
-            let $0 = $.derived(() => i + 1 === $.get(grid2).length && j + 1 === $.get(days).length);
+            let $0 = $.derived(() => i + 1 === length($.get(grid2)) && j + 1 === length($.get(days)));
             Day$1($$anchor4, {
               get day() {
                 return $.get(day);
@@ -4774,31 +4855,36 @@ function View$1($$anchor, $$props) {
       $.reset(section);
       $.bind_this(section, ($$value) => mainState.mainEl = $$value, () => mainState?.mainEl);
       $.attach(section, () => resizeObserver(reposition));
-      $.template_effect(() => {
-        $.set_class(section, 1, $.get(theme).main);
-        styles = $.set_style(section, "", styles, {
-          "--ec-grid-cols": $.get(grid2).length * $.get(grid2)[0].length,
-          "--ec-col-group-span": $.get(grid2)[0].length,
-          "--ec-col-width": $.get(columnWidth) ?? "minmax(0, 1fr)",
-          "--ec-slot-label-periodicity": $.get(slotLabelPeriodicity2),
-          "--ec-slot-height": `${$.get(slotHeight) ?? ""}px`,
-          "--ec-header-height": `${$.get(headerHeight) ?? ""}px`,
-          "--ec-sidebar-width": `${$.get(sidebarWidth) ?? ""}px`
-        });
-        $.set_class(header_1, 1, $.get(theme).header);
-        $.set_class(aside, 1, $.get(theme).sidebar);
-        $.set_class(div, 1, $.get(theme).grid);
-        $.set_class(div_4, 1, $.get(theme).body);
-        $.set_class(aside_2, 1, $.get(theme).sidebar);
-        $.set_class(div_6, 1, $.get(theme).grid);
-        $.set_class(div_7, 1, $.get(theme).events);
-      });
+      $.template_effect(
+        ($0) => {
+          $.set_class(section, 1, $.get(theme).main);
+          styles = $.set_style(section, "", styles, $0);
+          $.set_class(header_1, 1, $.get(theme).header);
+          $.set_class(aside, 1, $.get(theme).sidebar);
+          $.set_class(div, 1, $.get(theme).grid);
+          $.set_class(div_4, 1, $.get(theme).body);
+          $.set_class(aside_2, 1, $.get(theme).sidebar);
+          $.set_class(div_6, 1, $.get(theme).grid);
+          $.set_class(div_7, 1, $.get(theme).events);
+        },
+        [
+          () => ({
+            "--ec-grid-cols": length($.get(grid2)) * length($.get(grid2)[0]),
+            "--ec-col-group-span": length($.get(grid2)[0]),
+            "--ec-col-width": $.get(columnWidth) ?? "minmax(0, 1fr)",
+            "--ec-slot-label-periodicity": $.get(slotLabelPeriodicity2),
+            "--ec-slot-height": `${$.get(slotHeight) ?? ""}px`,
+            "--ec-header-height": `${$.get(headerHeight) ?? ""}px`,
+            "--ec-sidebar-width": `${$.get(sidebarWidth) ?? ""}px`
+          })
+        ]
+      );
       $.bind_element_size(aside, "offsetWidth", ($$value) => viewState().sidebarWidth = $$value);
       $.bind_element_size(header_1, "offsetHeight", ($$value) => $.set(headerHeight, $$value));
       $.append($$anchor2, section);
     };
     $.if(node, ($$render) => {
-      if ($.get(grid2).length && $.get(grid2)[0].length) $$render(consequent_4);
+      if (!empty($.get(grid2)) && !empty($.get(grid2)[0])) $$render(consequent_4);
     });
   }
   $.append($$anchor, fragment);
@@ -4824,7 +4910,7 @@ function View_1($$anchor, $$props) {
       for (let days of $.get(grid2)) {
         let day = days[0];
         if (datesEqual(day.dayStart, $.get(today))) {
-          $.get(mainEl).scrollLeft = ($.get(mainEl).scrollWidth - $.get(sidebarWidth)) / ($.get(grid2).length * days.length) * (day.gridColumn - 1) * (isRtl() ? -1 : 1);
+          $.get(mainEl).scrollLeft = ($.get(mainEl).scrollWidth - $.get(sidebarWidth)) / (length($.get(grid2)) * length(days)) * (day.gridColumn - 1) * (isRtl() ? -1 : 1);
           break;
         }
       }
@@ -4840,10 +4926,11 @@ function View_1($$anchor, $$props) {
           return { date, resource, disabled, highlight };
         });
         {
-          let $0 = $.derived(() => $.get(grid2)[0].length > 1 ? $.get(theme).colGroup : void 0);
-          let $1 = $.derived(() => 1 + i * $.get(days).length);
-          let $2 = $.derived(() => $.get(datesAboveResources) && $.get(computed_const).disabled);
-          let $3 = $.derived(() => $.get(datesAboveResources) && $.get(computed_const).highlight);
+          let $0 = $.derived(() => length($.get(grid2)[0]) > 1 ? $.get(theme).colGroup : void 0);
+          let $1 = $.derived(() => length($.get(days)));
+          let $2 = $.derived(() => 1 + i * length($.get(days)));
+          let $3 = $.derived(() => $.get(datesAboveResources) && $.get(computed_const).disabled);
+          let $4 = $.derived(() => $.get(datesAboveResources) && $.get(computed_const).highlight);
           ColHead($$anchor3, {
             get date() {
               return $.get(computed_const).date;
@@ -4855,16 +4942,16 @@ function View_1($$anchor, $$props) {
               return $.get(datesAboveResources);
             },
             get colSpan() {
-              return $.get(days).length;
+              return $.get($1);
             },
             get colIndex() {
-              return $.get($1);
+              return $.get($2);
             },
             get disabled() {
-              return $.get($2);
+              return $.get($3);
             },
             get highlight() {
-              return $.get($3);
+              return $.get($4);
             },
             children: ($$anchor4, $$slotProps) => {
               var fragment_3 = $.comment();
@@ -4910,7 +4997,7 @@ function View_1($$anchor, $$props) {
                 return { date, resource, disabled, highlight };
               });
               {
-                let $0 = $.derived(() => 1 + j + i * $.get(days).length);
+                let $0 = $.derived(() => 1 + j + i * length($.get(days)));
                 ColHead($$anchor5, {
                   get date() {
                     return $.get(computed_const_1).date;
@@ -4964,7 +5051,7 @@ function View_1($$anchor, $$props) {
           $.append($$anchor3, fragment_6);
         };
         $.if(node_2, ($$render) => {
-          if ($.get(grid2)[0].length > 1) $$render(consequent_2);
+          if (length($.get(grid2)[0]) > 1) $$render(consequent_2);
         });
       }
       $.append($$anchor2, fragment_1);
@@ -4976,12 +5063,13 @@ function View_1($$anchor, $$props) {
         var consequent_3 = ($$anchor3) => {
           {
             let $0 = $.derived(() => $.get(grid2).flat());
+            let $1 = $.derived(() => length($.get(grid2)[0]));
             NowIndicator$1($$anchor3, {
               get days() {
                 return $.get($0);
               },
               get span() {
-                return $.get(grid2)[0].length;
+                return $.get($1);
               }
             });
           }
@@ -5005,18 +5093,19 @@ function View_1($$anchor, $$props) {
             var alternate_2 = ($$anchor4) => {
               {
                 let $0 = $.derived(() => $.get(grid2).flat());
+                let $1 = $.derived(() => length($.get(grid2)));
                 NowIndicator$1($$anchor4, {
                   get days() {
                     return $.get($0);
                   },
                   get span() {
-                    return $.get(grid2).length;
+                    return $.get($1);
                   }
                 });
               }
             };
             $.if(node_7, ($$render) => {
-              if ($.get(grid2)[0].length > 1) $$render(consequent_4);
+              if (length($.get(grid2)[0]) > 1) $$render(consequent_4);
               else $$render(alternate_2, false);
             });
           }
@@ -5087,26 +5176,29 @@ function createChunks(event, days, monthView2, withId = true) {
   let lastEnd;
   let gridColumn;
   let gridRow;
+  let resource;
   let left;
   let width = 0;
-  for (let { gridColumn: column, gridRow: row, resource, dayStart, dayEnd, start, end, disabled } of days) {
+  for (let { gridColumn: column, gridRow: row, resource: dayResource, dayStart, dayEnd, start, end, disabled } of days) {
     if (!disabled) {
       if (monthView2) {
-        if (eventIntersects(event, dayStart, dayEnd, resource)) {
+        if (eventIntersects(event, dayStart, dayEnd, dayResource)) {
           if (!dates.length) {
             firstStart = dayStart;
             gridColumn = column;
             gridRow = row;
+            resource = dayResource;
           }
           dates.push(dayStart);
           lastEnd = end;
         }
       } else {
-        if (eventIntersects(event, start, end, resource)) {
+        if (eventIntersects(event, start, end, dayResource)) {
           if (!dates.length) {
             firstStart = start;
             gridColumn = column;
             gridRow = row;
+            resource = dayResource;
             left = max(event.start - start, 0) / 1e3;
           }
           dates.push(dayStart);
@@ -5118,7 +5210,7 @@ function createChunks(event, days, monthView2, withId = true) {
   }
   if (dates.length) {
     let chunk = createEventChunk(event, firstStart, lastEnd);
-    assign(chunk, { gridColumn, gridRow, dates, left, width });
+    assign(chunk, { gridColumn, gridRow, resource, dates, left, width });
     if (withId) {
       assignChunkId(chunk);
     }
@@ -5270,7 +5362,7 @@ function daySlots(mainState, viewState) {
 }
 function nestedResources(mainState) {
   return () => {
-    let { options: { resources } } = mainState;
+    let { resources } = mainState;
     let nested;
     untrack(() => {
       nested = resources.some((resource) => getPayload(resource).children.length);
@@ -5595,7 +5687,7 @@ function View($$anchor, $$props) {
   let headerHeight = $.state(0);
   $.user_effect(() => {
     $.get(scrollTime);
-    if ($.get(viewDates2).length) {
+    if (!empty($.get(viewDates2))) {
       tick().then(scrollToTime);
     }
   });
@@ -5607,7 +5699,7 @@ function View($$anchor, $$props) {
         let days = $.get(grid2)[0];
         for (let day of days) {
           if (datesEqual(day.dayStart, $.get(today))) {
-            $.get(mainEl).scrollLeft = ($.get(mainEl).scrollWidth - $.get(sidebarWidth)) / days.length * (day.gridColumn - 1) * (isRtl() ? -1 : 1);
+            $.get(mainEl).scrollLeft = ($.get(mainEl).scrollWidth - $.get(sidebarWidth)) / length(days) * (day.gridColumn - 1) * (isRtl() ? -1 : 1);
             break;
           }
         }
@@ -5751,8 +5843,8 @@ function View($$anchor, $$props) {
         var node_7 = $.first_child(fragment_7);
         $.each(node_7, 17, () => $.get(days), $.index, ($$anchor4, day, j) => {
           {
-            let $0 = $.derived(() => j + 1 === $.get(days).length);
-            let $1 = $.derived(() => i + 1 === $.get(grid2).length);
+            let $0 = $.derived(() => j + 1 === length($.get(days)));
+            let $1 = $.derived(() => i + 1 === length($.get(grid2)));
             Day($$anchor4, {
               get day() {
                 return $.get(day);
@@ -5813,32 +5905,37 @@ function View($$anchor, $$props) {
       $.reset(section);
       $.bind_this(section, ($$value) => mainState.mainEl = $$value, () => mainState?.mainEl);
       $.attach(section, () => resizeObserver(reposition));
-      $.template_effect(() => {
-        $.set_class(section, 1, $.get(theme).main);
-        styles = $.set_style(section, "", styles, {
-          "--ec-grid-cols": $.get(grid2)[0].length,
-          "--ec-grid-rows": `${$.get(grid2).length > 1 ? `repeat(${$.get(grid2).length - 1}, auto)` : ""} 1fr`,
-          "--ec-col-width": $.get(columnWidth) ?? "minmax(4em, 1fr)",
-          "--ec-slot-label-periodicity": $.get(slotLabelPeriodicity2),
-          "--ec-slot-height": `${$.get(slotHeight) ?? ""}px`,
-          "--ec-slot-width": `${$.get(slotWidth) ?? ""}px`,
-          "--ec-header-height": `${$.get(headerHeight) ?? ""}px`,
-          "--ec-sidebar-width": `${$.get(sidebarWidth) ?? ""}px`
-        });
-        $.set_class(header, 1, $.get(theme).header);
-        $.set_class(aside, 1, $.get(theme).sidebar);
-        $.set_class(div, 1, $.get(theme).grid);
-        $.set_class(div_2, 1, $.get(theme).body);
-        $.set_class(aside_1, 1, $.get(theme).sidebar);
-        $.set_class(div_4, 1, $.get(theme).grid);
-        $.set_class(div_5, 1, $.get(theme).events);
-      });
+      $.template_effect(
+        ($0) => {
+          $.set_class(section, 1, $.get(theme).main);
+          styles = $.set_style(section, "", styles, $0);
+          $.set_class(header, 1, $.get(theme).header);
+          $.set_class(aside, 1, $.get(theme).sidebar);
+          $.set_class(div, 1, $.get(theme).grid);
+          $.set_class(div_2, 1, $.get(theme).body);
+          $.set_class(aside_1, 1, $.get(theme).sidebar);
+          $.set_class(div_4, 1, $.get(theme).grid);
+          $.set_class(div_5, 1, $.get(theme).events);
+        },
+        [
+          () => ({
+            "--ec-grid-cols": length($.get(grid2)[0]),
+            "--ec-grid-rows": `${length($.get(grid2)) > 1 ? `repeat(${length($.get(grid2)) - 1}, auto)` : ""} 1fr`,
+            "--ec-col-width": $.get(columnWidth) ?? "minmax(4em, 1fr)",
+            "--ec-slot-label-periodicity": $.get(slotLabelPeriodicity2),
+            "--ec-slot-height": `${$.get(slotHeight) ?? ""}px`,
+            "--ec-slot-width": `${$.get(slotWidth) ?? ""}px`,
+            "--ec-header-height": `${$.get(headerHeight) ?? ""}px`,
+            "--ec-sidebar-width": `${$.get(sidebarWidth) ?? ""}px`
+          })
+        ]
+      );
       $.bind_element_size(aside, "offsetWidth", ($$value) => viewState.sidebarWidth = $$value);
       $.bind_element_size(header, "offsetHeight", ($$value) => $.set(headerHeight, $$value));
       $.append($$anchor2, section);
     };
     $.if(node, ($$render) => {
-      if ($.get(grid2).length && $.get(grid2)[0].length) $$render(consequent_3);
+      if (!empty($.get(grid2)) && !empty($.get(grid2)[0])) $$render(consequent_3);
     });
   }
   $.append($$anchor, fragment);