@event-calendar/core 5.2.3 → 5.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@event-calendar/core",
-  "version": "5.2.3",
+  "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.46.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/range.js

@@ -17,13 +17,3 @@ export function createDateRange(input) {
 export function outsideRange(date, range) {
     return range.start && date < range.start || range.end && date > range.end;
 }
-
-export function limitToRange(date, range) {
-    if (range.start && date < range.start) {
-        date = range.start;
-    }
-    if (range.end && date > range.end) {
-        date = range.end;
-    }
-    return date;
-}

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';
@@ -22,59 +22,61 @@
     }
     function hide() {
         hiddenChunks.size;
-        refs.forEach(ref => ref.hide());
+        refs.forEach(ref => ref?.hide());
     }
     $effect(reposition);
     $effect(hide);
 </script>
 
-<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}"
-    {@attach resizeObserver(reposition)}
->
-    <header class="{theme.header}">
-        <div class="{theme.grid}" role="row">
-            {#each grid[0] as {dayStart}, i}
-                <div
-                    class={[theme.colHead, theme.weekdays?.[dayStart.getUTCDay()]]}
-                    role="columnheader"
-                    aria-colindex="{1 + i}"
-                >
-                    <span
-                        aria-label="{intlDayHeaderAL.format(dayStart)}"
-                        {@attach contentFrom(intlDayHeader.format(dayStart))}
-                    ></span>
-                </div>
-            {/each}
-        </div>
-    </header>
+{#if !empty(grid) && !empty(grid[0])}
+    <section
+        bind:this={mainState.mainEl}
+        class={[theme.main, dayMaxEvents === true && theme.uniform]}
+        style:--ec-grid-cols="{length(grid[0])}"
+        style:--ec-grid-rows="{length(grid)}"
+        {@attach resizeObserver(reposition)}
+    >
+        <header class="{theme.header}">
+            <div class="{theme.grid}" role="row">
+                {#each grid[0] as {dayStart}, i}
+                    <div
+                        class={[theme.colHead, theme.weekdays?.[dayStart.getUTCDay()]]}
+                        role="columnheader"
+                        aria-colindex="{1 + i}"
+                    >
+                        <span
+                            aria-label="{intlDayHeaderAL.format(dayStart)}"
+                            {@attach contentFrom(intlDayHeader.format(dayStart))}
+                        ></span>
+                    </div>
+                {/each}
+            </div>
+        </header>
 
-    <div class="{theme.body}">
-        <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}/>
+        <div class="{theme.body}">
+            <div bind:this={viewState.gridEl} class="{theme.grid}">
+                {#each grid as days, i}
+                    {#each days as day, j}
+                        <Day {day} noIeb={j + 1 === length(days)} noBeb={i + 1 === length(grid)}/>
+                    {/each}
                 {/each}
-            {/each}
-        </div>
-        <div class="{theme.events}">
-            {#each chunks as chunk, i (chunk.id)}
-                <!-- svelte-ignore binding_property_non_reactive -->
-                <Event bind:this={refs[i]} {chunk}/>
-            {/each}
-            {#each bgChunks as chunk (chunk.id)}
-                <Event {chunk}/>
-            {/each}
-            {#each iChunks as chunk}
-                <Event {chunk}/>
-            {/each}
+            </div>
+            <div class="{theme.events}">
+                {#each chunks as chunk, i (chunk.id)}
+                    <!-- svelte-ignore binding_property_non_reactive -->
+                    <Event bind:this={refs[i]} {chunk}/>
+                {/each}
+                {#each bgChunks as chunk (chunk.id)}
+                    <Event {chunk}/>
+                {/each}
+                {#each iChunks as chunk}
+                    <Event {chunk}/>
+                {/each}
+            </div>
         </div>
-    </div>
 
-    {#if popupDay}
-        <Popup/>
-    {/if}
-</section>
+        {#if popupDay}
+            <Popup/>
+        {/if}
+    </section>
+{/if}

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

@@ -1,13 +1,13 @@
 import {untrack} from 'svelte';
 import {
-    addDay, addDuration, cloneDate, createResources, datesEqual, eventIntersects, outsideRange
+    addDay, addDuration, bgEvent, cloneDate, createResources, datesEqual, eventIntersects, outsideRange
 } from '#lib';
 
 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;
@@ -16,7 +16,7 @@ export function viewResources(mainState) {
             if (filterResourcesWithEvents) {
                 result = resources.filter(
                     resource => filteredEvents.some(
-                        event => eventIntersects(event, activeRange.start, activeRange.end, resource)
+                        event => !bgEvent(event.display) && eventIntersects(event, activeRange.start, activeRange.end, resource)
                     )
                 );
             }

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';
@@ -22,9 +24,10 @@
 
     // Handle scrollTime
     $effect(() => {
-        viewDates;
         scrollTime;
-        tick().then(scrollToTime);
+        if (!empty(viewDates)) {
+            tick().then(scrollToTime);
+        }
     });
     function scrollToTime() {
         let scrollLeft = 0;
@@ -34,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;
                     }
                 }
@@ -64,80 +67,82 @@
     $effect(reposition);
 </script>
 
-<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-col-width="{columnWidth ?? 'minmax(4em, 1fr)'}"
-    style:--ec-slot-label-periodicity="{slotLabelPeriodicity}"
-    style:--ec-slot-height="{slotHeight}px"
-    style:--ec-slot-width="{slotWidth}px"
-    style:--ec-header-height="{headerHeight}px"
-    style:--ec-sidebar-width="{sidebarWidth}px"
-    {@attach resizeObserver(reposition)}
->
-    <header bind:offsetHeight={headerHeight} class="{theme.header}">
-        <aside class="{theme.sidebar}" bind:offsetWidth={viewState.sidebarWidth}></aside>
-        <div class="{theme.grid}" role="row">
-            {#each grid[0] as {dayStart: date, disabled, highlight}, i}
-                <ColHead {date} colIndex={1 + i} {disabled} {highlight}>
-                    <DayHeader {date}/>
-                </ColHead>
-            {/each}
-            {#if !monthView}
-                {#each grid[0] as {dayStart: date, disabled, highlight}}
-                    <ColHead {date} className={theme.slots} {disabled} {highlight} ariaHidden>
-                        {#each daySlots[date.getTime()] as slot}
-                            <div
-                                class="{theme.slot}"
-                                style:--ec-slot-label-periodicity={slot[2]}
-                            >
-                                <time
-                                    datetime="{slot[0]}"
-                                    {@attach contentFrom(slot[1])}
-                                ></time>
-                            </div>
-                        {/each}
+{#if !empty(grid) && !empty(grid[0])}
+    <section
+        bind:this={mainState.mainEl}
+        class="{theme.main}"
+        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"
+        style:--ec-slot-width="{slotWidth}px"
+        style:--ec-header-height="{headerHeight}px"
+        style:--ec-sidebar-width="{sidebarWidth}px"
+        {@attach resizeObserver(reposition)}
+    >
+        <header bind:offsetHeight={headerHeight} class="{theme.header}">
+            <aside class="{theme.sidebar}" bind:offsetWidth={viewState.sidebarWidth}></aside>
+            <div class="{theme.grid}" role="row">
+                {#each grid[0] as {dayStart: date, disabled, highlight}, i}
+                    <ColHead {date} colIndex={1 + i} {disabled} {highlight}>
+                        <DayHeader {date}/>
                     </ColHead>
                 {/each}
-            {/if}
-        </div>
-    </header>
+                {#if !monthView}
+                    {#each grid[0] as {dayStart: date, disabled, highlight}}
+                        <ColHead {date} className={theme.slots} {disabled} {highlight} ariaHidden>
+                            {#each daySlots[date.getTime()] as slot}
+                                <div
+                                    class="{theme.slot}"
+                                    style:--ec-slot-label-periodicity={slot[2]}
+                                >
+                                    <time
+                                        datetime="{slot[0]}"
+                                        {@attach contentFrom(slot[1])}
+                                    ></time>
+                                </div>
+                            {/each}
+                        </ColHead>
+                    {/each}
+                {/if}
+            </div>
+        </header>
 
-    <div class="{theme.body}" role="rowgroup">
-        <aside class="{theme.sidebar}">
-            {#each viewResources as resource}
-                <div class="{theme.rowHead}" role="rowheader">
-                    {#if nestedResources}
-                        <Expander {resource} />
-                    {/if}
-                    <Label {resource}/>
-                </div>
-            {/each}
-        </aside>
-        <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}/>
+        <div class="{theme.body}" role="rowgroup">
+            <aside class="{theme.sidebar}">
+                {#each viewResources as resource}
+                    <div class="{theme.rowHead}" role="rowheader">
+                        {#if nestedResources}
+                            <Expander {resource} />
+                        {/if}
+                        <Label {resource}/>
+                    </div>
                 {/each}
-            {/each}
-        </div>
-        <div class="{theme.events}">
-            {#each chunks as chunk, i (chunk.id)}
-                <!-- svelte-ignore binding_property_non_reactive -->
-                <Event bind:this={refs[i]} {chunk}/>
-            {/each}
-            {#each bgChunks as chunk (chunk.id)}
-                <Event {chunk}/>
-            {/each}
-            {#each iChunks as chunk}
-                <Event {chunk}/>
-            {/each}
+            </aside>
+            <div class="{theme.grid}" role="row">
+                {#each grid as days, i}
+                    {#each days as day, j}
+                        <Day {day} noIeb={j + 1 === length(days)} noBeb={i + 1 === length(grid)}/>
+                    {/each}
+                {/each}
+            </div>
+            <div class="{theme.events}">
+                {#each chunks as chunk, i (chunk.id)}
+                    <!-- svelte-ignore binding_property_non_reactive -->
+                    <Event bind:this={refs[i]} {chunk}/>
+                {/each}
+                {#each bgChunks as chunk (chunk.id)}
+                    <Event {chunk}/>
+                {/each}
+                {#each iChunks as chunk}
+                    <Event {chunk}/>
+                {/each}
+            </div>
         </div>
-    </div>
 
-    {#if nowIndicator && !monthView}
-        <NowIndicator/>
-    {/if}
-</section>
+        {#if nowIndicator && !monthView}
+            <NowIndicator/>
+        {/if}
+    </section>
+{/if}

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;