@event-calendar/core 5.2.4 → 5.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@event-calendar/core",
-  "version": "5.2.4",
+  "version": "5.3.0",
   "title": "Event Calendar Core package",
   "description": "Full-sized drag & drop event calendar with resource & timeline views",
   "keywords": [
@@ -32,6 +32,6 @@
     "#components": "./src/lib/components/index.js"
   },
   "dependencies": {
-    "svelte": "^5.47.1"
+    "svelte": "^5.48.0"
   }
 }

package/src/Calendar.svelte

@@ -48,8 +48,13 @@
         return isDate(value) ? toLocalDate(value) : value;
     }
 
+    export function refetchResources() {
+        mainState.fetchedRange.resources = {};
+        return this;
+    }
+
     export function refetchEvents() {
-        mainState.fetchedRange = {start: undefined, end: undefined};
+        mainState.fetchedRange.events = {};
         return this;
     }
 

package/src/lib/chunks.js

@@ -11,6 +11,7 @@ import {assign} from './utils.js';
  *   zeroDuration: boolean,
  *   gridColumn?: Number,
  *   gridRow?: Number,
+ *   resource?: Object,
  *   group?: Object,
  *   groupColumn?: Number,
  *   dates?: Array
@@ -44,20 +45,22 @@ export 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);
         // Chunk layout
-        assign(chunk, {gridColumn, gridRow, dates});
+        assign(chunk, {gridColumn, gridRow, resource, dates});
         if (withId) {
             assignChunkId(chunk);
         }

package/src/lib/components/BaseEvent.svelte

@@ -2,7 +2,8 @@
     import {getContext, onMount} from 'svelte';
     import {
         bgEvent, createEventClasses, createEventContent, entries, helperEvent, identity, isFunction, keyEnter,
-        resourceBackgroundColor, resourceTextColor, contentFrom, toEventWithLocalDates, toViewWithLocalDates
+        findFirstResource, contentFrom, toEventWithLocalDates, toViewWithLocalDates, eventBackgroundColor as getEventBackgroundColor,
+        eventTextColor as getEventTextColor
     } from '#lib';
 
     let {
@@ -14,17 +15,22 @@
         body
     } = $props();
 
-    let {intlEventTime, view, options: {
+    let {intlEventTime, resources, view, options: {
         displayEventEnd, eventBackgroundColor, eventColor, eventContent, eventClick, eventDidMount, eventClassNames,
-        eventMouseEnter, eventMouseLeave, eventTextColor, resources, theme
+        eventMouseEnter, eventMouseLeave, eventTextColor, theme
     }} = $derived(getContext('state'));
 
     let event = $derived(chunk.event);
     let display = $derived(chunk.event.display);
 
     // Style
-    let bgColor = $derived(event.backgroundColor ?? resourceBackgroundColor(event, resources) ?? eventBackgroundColor ?? eventColor);
-    let txtColor = $derived(event.textColor ?? resourceTextColor(event, resources) ?? eventTextColor);
+    let bgColor = $derived(
+        event.backgroundColor ?? getEventBackgroundColor(chunk.resource ?? findFirstResource(event, resources)) ??
+        eventBackgroundColor ?? eventColor
+    );
+    let txtColor = $derived(
+        event.textColor ?? getEventTextColor(chunk.resource ?? findFirstResource(event, resources)) ?? eventTextColor
+    );
     let style = $derived(entries(styles(
         {'background-color': bgColor, 'color': txtColor}
     )).map(entry => `${entry[0]}:${entry[1]}`).concat(event.styles).join(';'));

package/src/lib/dom.js

@@ -52,3 +52,12 @@ export function listen(node, event, handler, options) {
     node.addEventListener(event, handler, options);
     return () => node.removeEventListener(event, handler, options);
 }
+
+export function stopPropagation(fn, _this = undefined) {
+    return function (jsEvent) {
+        jsEvent.stopPropagation();
+        if (fn) {
+            fn.call(_this, jsEvent);
+        }
+    };
+}

package/src/lib/resources.js

@@ -1,4 +1,5 @@
 import {setPayload} from './payload.js';
+import {empty} from './utils.js';
 
 export function createResources(input) {
     let result = [];
@@ -30,20 +31,20 @@ export 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 ?? {}
     };
 }
 
-export function resourceBackgroundColor(event, resources) {
-    return findResource(event, resources)?.eventBackgroundColor;
+export function eventBackgroundColor(resource) {
+    return resource?.eventBackgroundColor;
 }
 
-export function resourceTextColor(event, resources) {
-    return findResource(event, resources)?.eventTextColor;
+export function eventTextColor(resource) {
+    return resource?.eventTextColor;
 }
 
-function findResource(event, resources) {
-    return resources.find(resource => event.resourceIds.includes(resource.id));
+export function findFirstResource(event, resources) {
+    return empty(event.resourceIds) ? undefined : resources.find(resource => event.resourceIds.includes(resource.id));
 }

package/src/lib/utils.js

@@ -30,6 +30,14 @@ export function symbol() {
     return Symbol('ec');
 }
 
+export function length(array) {
+    return array.length;
+}
+
+export function empty(array) {
+    return !length(array);
+}
+
 export function isArray(value) {
     return Array.isArray(value);
 }
@@ -62,15 +70,6 @@ export function noop() {}
 
 export const identity = (x) => x;
 
-export function stopPropagation(fn, _this = undefined) {
-    return function (event) {
-        event.stopPropagation();
-        if (fn) {
-            fn.call(_this, event);
-        }
-    };
-}
-
 export function isRtl() {
     return window.getComputedStyle(document.documentElement).direction === 'rtl';
 }

package/src/plugins/day-grid/View.svelte

@@ -1,6 +1,6 @@
 <script>
     import {getContext, setContext, tick} from 'svelte';
-    import {contentFrom, resizeObserver, runReposition} from '#lib';
+    import {contentFrom, empty, length, resizeObserver, runReposition} from '#lib';
     import ViewState from './state.svelte.js';
     import Day from './Day.svelte';
     import Event from './Event.svelte';
@@ -28,12 +28,12 @@
     $effect(hide);
 </script>
 
-{#if grid.length && grid[0].length}
+{#if !empty(grid) && !empty(grid[0])}
     <section
         bind:this={mainState.mainEl}
         class={[theme.main, dayMaxEvents === true && theme.uniform]}
-        style:--ec-grid-cols="{grid[0].length}"
-        style:--ec-grid-rows="{grid.length}"
+        style:--ec-grid-cols="{length(grid[0])}"
+        style:--ec-grid-rows="{length(grid)}"
         {@attach resizeObserver(reposition)}
     >
         <header class="{theme.header}">
@@ -57,7 +57,7 @@
             <div bind:this={viewState.gridEl} class="{theme.grid}">
                 {#each grid as days, i}
                     {#each days as day, j}
-                        <Day {day} noIeb={j + 1 === days.length} noBeb={i + 1 === grid.length}/>
+                        <Day {day} noIeb={j + 1 === length(days)} noBeb={i + 1 === length(grid)}/>
                     {/each}
                 {/each}
             </div>

package/src/plugins/list/View.svelte

@@ -1,6 +1,6 @@
 <script>
     import {getContext, setContext} from 'svelte';
-    import {addDay, cloneDate, contentFrom, bgEvent, isFunction, toViewWithLocalDates} from '#lib';
+    import {addDay, cloneDate, contentFrom, bgEvent, isFunction, toViewWithLocalDates, empty} from '#lib';
     import ViewState from './state.svelte.js';
     import Day from './Day.svelte';
 
@@ -12,7 +12,7 @@
 
     let noEvents = $derived.by(() => {
         let noEvents = true;
-        if (viewDates.length) {
+        if (!empty(viewDates)) {
             let start = viewDates[0];
             let end = addDay(cloneDate(viewDates.at(-1)));
             for (let event of filteredEvents) {

package/src/plugins/resource-time-grid/View.svelte

@@ -1,7 +1,7 @@
 <script>
     import {getContext, tick} from 'svelte';
     import {ColHead, DayHeader} from '#components';
-    import {datesEqual, isRtl} from '#lib';
+    import {datesEqual, isRtl, length} from '#lib';
     import ViewState from './state.svelte.js';
     import Label from './Label.svelte';
     import View from '../time-grid/View.svelte';
@@ -28,7 +28,7 @@
             for (let days of grid) {
                 let day = days[0];
                 if (datesEqual(day.dayStart, today)) {
-                    mainEl.scrollLeft = (mainEl.scrollWidth - sidebarWidth) / (grid.length * days.length) * (day.gridColumn - 1) * (isRtl() ? -1 : 1);
+                    mainEl.scrollLeft = (mainEl.scrollWidth - sidebarWidth) / (length(grid) * length(days)) * (day.gridColumn - 1) * (isRtl() ? -1 : 1);
                     break;
                 }
             }
@@ -42,10 +42,10 @@
             {@const {dayStart: date, resource, disabled, highlight} = days[0]}
             <ColHead
                 {date}
-                className={grid[0].length > 1 ? theme.colGroup : undefined}
+                className={length(grid[0]) > 1 ? theme.colGroup : undefined}
                 weekday={datesAboveResources}
-                colSpan={days.length}
-                colIndex={1 + i * days.length}
+                colSpan={length(days)}
+                colIndex={1 + i * length(days)}
                 disabled={datesAboveResources && disabled}
                 highlight={datesAboveResources && highlight}
             >
@@ -56,11 +56,11 @@
                 {/if}
             </ColHead>
         {/each}
-        {#if grid[0].length > 1}
+        {#if length(grid[0]) > 1}
             {#each grid as days, i}
                 {#each days as day, j}
                     {@const {dayStart: date, resource, disabled, highlight} = day}
-                    <ColHead {date} colIndex={1 + j + i * days.length} {disabled} {highlight}>
+                    <ColHead {date} colIndex={1 + j + i * length(days)} {disabled} {highlight}>
                         {#if datesAboveResources}
                             <Label {resource} {date}/>
                         {:else}
@@ -74,14 +74,14 @@
 
     {#snippet nowIndicator()}
         {#if datesAboveResources}
-            <NowIndicator days={grid.flat()} span={grid[0].length}/>
+            <NowIndicator days={grid.flat()} span={length(grid[0])}/>
         {:else}
-            {#if grid[0].length > 1}
+            {#if length(grid[0]) > 1}
                 {#each grid as days}
                     <NowIndicator {days} />
                 {/each}
             {:else}
-                <NowIndicator days={grid.flat()} span={grid.length}/>
+                <NowIndicator days={grid.flat()} span={length(grid)}/>
             {/if}
         {/if}
     {/snippet}

package/src/plugins/resource-time-grid/derived.js

@@ -7,7 +7,7 @@ export function viewResources(mainState) {
     return () => {
         // Dependencies
         let {
-            activeRange, filteredEvents, options: {filterResourcesWithEvents, resources}, extensions: {viewResources}
+            activeRange, filteredEvents, resources, options: {filterResourcesWithEvents}, extensions: {viewResources}
         } = mainState;
 
         let result = viewResources ? viewResources(resources) : resources;

package/src/plugins/resource-timeline/View.svelte

@@ -1,6 +1,8 @@
 <script>
     import {getContext, setContext, tick} from 'svelte';
-    import {max, resizeObserver, runReposition, contentFrom, toSeconds, datesEqual, min, isRtl} from '#lib';
+    import {
+        max, resizeObserver, runReposition, contentFrom, toSeconds, datesEqual, min, isRtl, empty, length
+    } from '#lib';
     import {getSlotTimeLimits} from './lib.js';
     import ViewState from './state.svelte.js';
     import {ColHead, DayHeader} from '#components';
@@ -23,7 +25,7 @@
     // Handle scrollTime
     $effect(() => {
         scrollTime;
-        if (viewDates.length) {
+        if (!empty(viewDates)) {
             tick().then(scrollToTime);
         }
     });
@@ -35,7 +37,7 @@
                 let days = grid[0];
                 for (let day of days) {
                     if (datesEqual(day.dayStart, today)) {
-                        mainEl.scrollLeft = (mainEl.scrollWidth - sidebarWidth) / days.length * (day.gridColumn - 1) * (isRtl() ? -1 : 1);
+                        mainEl.scrollLeft = (mainEl.scrollWidth - sidebarWidth) / length(days) * (day.gridColumn - 1) * (isRtl() ? -1 : 1);
                         break;
                     }
                 }
@@ -65,12 +67,12 @@
     $effect(reposition);
 </script>
 
-{#if grid.length && grid[0].length}
+{#if !empty(grid) && !empty(grid[0])}
     <section
         bind:this={mainState.mainEl}
         class="{theme.main}"
-        style:--ec-grid-cols="{grid[0].length}"
-        style:--ec-grid-rows="{grid.length > 1 ? `repeat(${grid.length - 1}, auto)` : ''} 1fr"
+        style:--ec-grid-cols="{length(grid[0])}"
+        style:--ec-grid-rows="{length(grid) > 1 ? `repeat(${length(grid) - 1}, auto)` : ''} 1fr"
         style:--ec-col-width="{columnWidth ?? 'minmax(4em, 1fr)'}"
         style:--ec-slot-label-periodicity="{slotLabelPeriodicity}"
         style:--ec-slot-height="{slotHeight}px"
@@ -121,7 +123,7 @@
             <div class="{theme.grid}" role="row">
                 {#each grid as days, i}
                     {#each days as day, j}
-                        <Day {day} noIeb={j + 1 === days.length} noBeb={i + 1 === grid.length}/>
+                        <Day {day} noIeb={j + 1 === length(days)} noBeb={i + 1 === length(grid)}/>
                     {/each}
                 {/each}
             </div>

package/src/plugins/resource-timeline/derived.js

@@ -141,7 +141,7 @@ export function daySlots(mainState, viewState) {
 export function nestedResources(mainState) {
     return () => {
         // Dependencies
-        let {options: {resources}} = mainState;
+        let {resources} = mainState;
 
         let nested;
 

package/src/plugins/resource-timeline/lib.js

@@ -6,26 +6,29 @@ export function createChunks(event, days, monthView, 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 (monthView) {
-                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) / 1000;
                     }
                     dates.push(dayStart);
@@ -38,7 +41,7 @@ export function createChunks(event, days, monthView, withId = true) {
     if (dates.length) {
         let chunk = createEventChunk(event, firstStart, lastEnd);
         // Chunk layout
-        assign(chunk, {gridColumn, gridRow, dates, left, width});
+        assign(chunk, {gridColumn, gridRow, resource, dates, left, width});
         if (withId) {
             assignChunkId(chunk);
         }

package/src/plugins/time-grid/View.svelte

@@ -1,6 +1,6 @@
 <script>
     import {getContext, setContext, tick} from 'svelte';
-    import {contentFrom, resizeObserver, runReposition, toSeconds} from '#lib';
+    import {contentFrom, empty, length, resizeObserver, runReposition, toSeconds} from '#lib';
     import {createAllDayContent} from './lib.js';
     import ViewState from './state.svelte.js';
     import {ColHead, DayHeader} from '#components';
@@ -30,7 +30,7 @@
     // Handle scrollTime
     $effect(() => {
         scrollTime;
-        if (viewDates.length) {
+        if (!empty(viewDates)) {
             tick().then(scrollToTime);
         }
     });
@@ -48,12 +48,12 @@
     $effect(reposition);
 </script>
 
-{#if grid.length && grid[0].length}
+{#if !empty(grid) && !empty(grid[0])}
     <section
         bind:this={mainState.mainEl}
         class="{theme.main}"
-        style:--ec-grid-cols="{grid.length * grid[0].length}"
-        style:--ec-col-group-span="{grid[0].length}"
+        style:--ec-grid-cols="{length(grid) * length(grid[0])}"
+        style:--ec-col-group-span="{length(grid[0])}"
         style:--ec-col-width="{columnWidth ?? 'minmax(0, 1fr)'}"
         style:--ec-slot-label-periodicity="{slotLabelPeriodicity}"
         style:--ec-slot-height="{slotHeight}px"
@@ -81,7 +81,7 @@
                     <div class="{theme.grid}" role="row">
                         {#each grid as days, i}
                             {#each days as day, j}
-                                <Day {day} allDay noIeb={i + 1 === grid.length && j + 1 === days.length}/>
+                                <Day {day} allDay noIeb={i + 1 === length(grid) && j + 1 === length(days)}/>
                             {/each}
                         {/each}
                     </div>
@@ -118,7 +118,7 @@
             <div class="{theme.grid}" role="row">
                 {#each grid as days, i}
                     {#each days as day, j}
-                        <Day {day} noIeb={i + 1 === grid.length && j + 1 === days.length} noBeb/>
+                        <Day {day} noIeb={i + 1 === length(grid) && j + 1 === length(days)} noBeb/>
                     {/each}
                 {/each}
             </div>

package/src/plugins/time-grid/lib.js

@@ -12,6 +12,7 @@ export function createChunks(event, days, withId = true) {
             assign(chunk, {
                 gridColumn,
                 gridRow,
+                resource,
                 top: (chunk.start - start) / 1000,
                 height: (chunk.end - chunk.start) / 1000,
                 maxHeight: (end - chunk.start) / 1000

package/src/storage/derived.js

@@ -1,6 +1,6 @@
 import {tick, untrack} from 'svelte';
 import {
-    addDay, addDuration, cloneDate, createView, isFunction, prevClosestDay, subtractDay,
+    addDay, addDuration, cloneDate, createView, isFunction, prevClosestDay, setMidnight, subtractDay,
     toEventWithLocalDates, toViewWithLocalDates
 } from '#lib';
 
@@ -91,8 +91,9 @@ export function viewDates(mainState) {
         let dates = [];
 
         untrack(() => {
-            let date = cloneDate(activeRange.start);
-            let end = cloneDate(activeRange.end);
+            // activeRange may be offset by hours due to slotMaxTime, so we set it to midnight
+            let date = setMidnight(cloneDate(activeRange.start));
+            let end = setMidnight(cloneDate(activeRange.end));
             while (date < end) {
                 if (!hiddenDays.includes(date.getUTCDay())) {
                     dates.push(cloneDate(date));