@event-calendar/core 5.2.3 → 5.3.0

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';
@@ -29,9 +29,10 @@
 
     // Handle scrollTime
     $effect(() => {
-        viewDates;
         scrollTime;
-        tick().then(scrollToTime);
+        if (!empty(viewDates)) {
+            tick().then(scrollToTime);
+        }
     });
     function scrollToTime() {
         mainEl.scrollTop = (
@@ -47,97 +48,99 @@
     $effect(reposition);
 </script>
 
-<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-col-width="{columnWidth ?? 'minmax(0, 1fr)'}"
-    style:--ec-slot-label-periodicity="{slotLabelPeriodicity}"
-    style:--ec-slot-height="{slotHeight}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">
-            {#if header}
-                {@render header()}
-            {:else}
-                {#each grid[0] as {dayStart: date, disabled, highlight}, i}
-                    <ColHead {date} colIndex={1 + i} {disabled} {highlight}>
-                        <DayHeader {date}/>
-                    </ColHead>
-                {/each}
-            {/if}
-        </div>
+{#if !empty(grid) && !empty(grid[0])}
+    <section
+        bind:this={mainState.mainEl}
+        class="{theme.main}"
+        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"
+        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">
+                {#if header}
+                    {@render header()}
+                {:else}
+                    {#each grid[0] as {dayStart: date, disabled, highlight}, i}
+                        <ColHead {date} colIndex={1 + i} {disabled} {highlight}>
+                            <DayHeader {date}/>
+                        </ColHead>
+                    {/each}
+                {/if}
+            </div>
 
-        {#if allDaySlot}
-            <div class="{theme.allDay}">
-                <aside class="{theme.sidebar}" {@attach contentFrom(allDayText)}></aside>
-                <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}/>
+            {#if allDaySlot}
+                <div class="{theme.allDay}">
+                    <aside class="{theme.sidebar}" {@attach contentFrom(allDayText)}></aside>
+                    <div class="{theme.grid}" role="row">
+                        {#each grid as days, i}
+                            {#each days as day, j}
+                                <Day {day} allDay noIeb={i + 1 === length(grid) && j + 1 === length(days)}/>
+                            {/each}
                         {/each}
-                    {/each}
+                    </div>
+                    <div class="{theme.events}">
+                        {#each allDayChunks as chunk, i (chunk.id)}
+                            <!-- svelte-ignore binding_property_non_reactive -->
+                            <AllDayEvent bind:this={refs[i]} {chunk}/>
+                        {/each}
+                        {#each allDayBgChunks as chunk (chunk.id)}
+                            <AllDayEvent {chunk}/>
+                        {/each}
+                        {#each allDayIChunks as chunk}
+                            <AllDayEvent {chunk}/>
+                        {/each}
+                    </div>
                 </div>
-                <div class="{theme.events}">
-                    {#each allDayChunks as chunk, i (chunk.id)}
-                        <!-- svelte-ignore binding_property_non_reactive -->
-                        <AllDayEvent bind:this={refs[i]} {chunk}/>
-                    {/each}
-                    {#each allDayBgChunks as chunk (chunk.id)}
-                        <AllDayEvent {chunk}/>
-                    {/each}
-                    {#each allDayIChunks as chunk}
-                        <AllDayEvent {chunk}/>
+            {/if}
+        </header>
+
+        <div class="{theme.body}" role="rowgroup">
+            <aside class="{theme.sidebar}" aria-hidden="true">
+                {#each slots as slot, i}
+                    <div
+                        class={[theme.slot, !i && theme.hidden]}
+                        style:--ec-slot-label-periodicity={slot[2]}
+                    >
+                        <time
+                            datetime="{slot[0]}"
+                            {@attach contentFrom(slot[1])}
+                        ></time>
+                    </div>
+                {/each}
+            </aside>
+            <div class="{theme.grid}" role="row">
+                {#each grid as days, i}
+                    {#each days as day, j}
+                        <Day {day} noIeb={i + 1 === length(grid) && j + 1 === length(days)} noBeb/>
                     {/each}
-                </div>
+                {/each}
             </div>
-        {/if}
-    </header>
-
-    <div class="{theme.body}" role="rowgroup">
-        <aside class="{theme.sidebar}" aria-hidden="true">
-            {#each slots as slot, i}
-                <div
-                    class={[theme.slot, !i && theme.hidden]}
-                    style:--ec-slot-label-periodicity={slot[2]}
-                >
-                    <time
-                        datetime="{slot[0]}"
-                        {@attach contentFrom(slot[1])}
-                    ></time>
-                </div>
-            {/each}
-        </aside>
-        <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/>
+            <div class="{theme.events}">
+                {#each chunks as chunk (chunk.id)}
+                    <Event {chunk}/>
                 {/each}
-            {/each}
-        </div>
-        <div class="{theme.events}">
-            {#each chunks as chunk (chunk.id)}
-                <Event {chunk}/>
-            {/each}
-            {#each bgChunks as chunk (chunk.id)}
-                <Event {chunk}/>
-            {/each}
-            {#each iChunks as chunk}
-                <Event {chunk}/>
-            {/each}
+                {#each bgChunks as chunk (chunk.id)}
+                    <Event {chunk}/>
+                {/each}
+                {#each iChunks as chunk}
+                    <Event {chunk}/>
+                {/each}
+            </div>
         </div>
-    </div>
 
-    {#if showNowIndicator}
-        {#if nowIndicator}
-            {@render nowIndicator()}
-        {:else}
-            <NowIndicator days={grid[0]}/>
+        {#if showNowIndicator}
+            {#if nowIndicator}
+                {@render nowIndicator()}
+            {:else}
+                <NowIndicator days={grid[0]}/>
+            {/if}
         {/if}
-    {/if}
-</section>
+    </section>
+{/if}

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';
 
@@ -45,7 +45,7 @@ export function activeRange(mainState) {
 export function filteredEvents(mainState) {
     return () => {
         // Dependencies
-        let {events, options: {eventFilter, eventOrder, filterEventsWithResources, resources}} = mainState;
+        let {events, options: {eventFilter, eventOrder, filterEventsWithResources, resources, view}} = mainState;
 
         let result = [...events];
 
@@ -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));

package/src/storage/effects.js

@@ -1,88 +1,140 @@
 import {getAbortSignal, tick, untrack} from 'svelte';
 import {
-    assign, cloneDate, createDate, createEvents, datesEqual, isFunction, setMidnight, toISOString, toLocalDate,
-    toViewWithLocalDates
+    assign, cloneDate, createDate, createEvents, createResources, datesEqual, empty, isArray, isFunction, setMidnight,
+    toISOString, toLocalDate, toViewWithLocalDates
 } from '#lib';
 
-export function loadEvents(mainState) {
-    let fetching = 0;
+export function loadEvents(mainState, loadingInvoker) {
     return () => {
         // Dependencies
-        let {activeRange, fetchedRange, options: {events, eventSources, lazyFetching, loading}} = mainState;
+        let {activeRange, fetchedRange: {events: fetchedRange}, viewDates,
+            options: {events, eventSources, lazyFetching}} = mainState;
 
         untrack(() => {
-            if (!eventSources.length) {
-                mainState.events = events;
-            }
-            // Do not fetch if new range is within the previous one
-            if (
-                !fetchedRange.start ||
-                fetchedRange.start > activeRange.start ||
-                fetchedRange.end < activeRange.end ||
-                !lazyFetching
-            ) {
-                // Call loading hook
-                if (isFunction(loading) && !fetching) {
-                    loading(true);
+            load(
+                eventSources.map(source => isFunction(source.events) ? source.events : source),
+                events,
+                createEvents,
+                result => mainState.events = result,
+                activeRange,
+                fetchedRange,
+                viewDates,
+                true,
+                lazyFetching,
+                loadingInvoker
+            );
+        });
+    };
+}
+
+export function loadResources(mainState, loadingInvoker) {
+    return () => {
+        // Dependencies
+        let {activeRange, fetchedRange: {resources: fetchedRange}, viewDates,
+            options: {lazyFetching, refetchResourcesOnNavigate, resources}} = mainState;
+
+        untrack(() => {
+            load(
+                isArray(resources) ? [] : [resources],
+                resources,
+                createResources,
+                result => mainState.resources = result,
+                activeRange,
+                fetchedRange,
+                viewDates,
+                refetchResourcesOnNavigate,
+                lazyFetching,
+                loadingInvoker
+            );
+        });
+    };
+}
+
+function load(sources, defaultResult, parseResult, applyResult, activeRange, fetchedRange, viewDates, refetchOnNavigate, lazyFetching, loading) {
+    if (empty(viewDates)) {
+        return;
+    }
+    if (empty(sources)) {
+        applyResult(defaultResult);
+        return;
+    }
+    // Do not fetch if new range is within the previous one
+    if (
+        (refetchOnNavigate || !fetchedRange.start) &&
+        (
+            !lazyFetching ||
+            !fetchedRange.start ||
+            fetchedRange.start > activeRange.start ||
+            fetchedRange.end < activeRange.end
+        )
+    ) {
+        let result = [];
+        // Prepare handlers
+        let failure = e => loading.stop();
+        let success = data => {
+            result = result.concat(parseResult(data));
+            applyResult(result);
+            loading.stop();
+        };
+        // Prepare other stuff
+        let startStr = toISOString(activeRange.start)
+        let endStr = toISOString(activeRange.end);
+        // Loop over event sources
+        for (let source of sources) {
+            loading.start();
+            if (isFunction(source)) {
+                // Source as a function
+                let result = source(refetchOnNavigate ? {
+                    start: toLocalDate(activeRange.start),
+                    end: toLocalDate(activeRange.end),
+                    startStr,
+                    endStr
+                } : {}, success, failure);
+                if (result !== undefined) {
+                    Promise.resolve(result).then(success, failure);
+                }
+            } else {
+                // Source as a JSON feed
+                // Prepare params
+                let params = isFunction(source.extraParams) ? source.extraParams() : assign({}, source.extraParams);
+                if (refetchOnNavigate) {
+                    params.start = startStr;
+                    params.end = endStr;
                 }
-                let stopLoading = () => {
-                    if (--fetching === 0 && isFunction(loading)) {
-                        loading(false);
-                    }
-                };
-                let events = [];
-                // Prepare handlers
-                let failure = e => stopLoading();
-                let success = data => {
-                    events = events.concat(createEvents(data));
-                    mainState.events = events;
-                    stopLoading();
-                };
-                // Prepare other stuff
-                let startStr = toISOString(activeRange.start)
-                let endStr = toISOString(activeRange.end);
-                // Loop over event sources
-                for (let source of eventSources) {
-                    if (isFunction(source.events)) {
-                        // Events as a function
-                        let result = source.events({
-                            start: toLocalDate(activeRange.start),
-                            end: toLocalDate(activeRange.end),
-                            startStr,
-                            endStr
-                        }, success, failure);
-                        if (result !== undefined) {
-                            Promise.resolve(result).then(success, failure);
-                        }
-                    } else {
-                        // Events as a JSON feed
-                        // Prepare params
-                        let params = isFunction(source.extraParams) ? source.extraParams() : assign({}, source.extraParams);
-                        params.start = startStr;
-                        params.end = endStr;
-                        params = new URLSearchParams(params);
-                        // Prepare fetch
-                        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);  // Safari 10.1 doesn't convert to string automatically
-                        }
-                        // Do the fetch
-                        fetch(url, {
-                            method: source.method, headers, body, signal: getAbortSignal(), credentials: 'same-origin'
-                        })
-                            .then(response => response.json())
-                            .then(success)
-                            .catch(failure);
-                    }
-                    ++fetching;
+                params = new URLSearchParams(params);
+                // Prepare fetch
+                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);  // Safari 10.1 doesn't convert to string automatically
                 }
-                // Save current range for future requests
-                assign(fetchedRange, activeRange);
+                // Do the fetch
+                fetch(url, {
+                    method: source.method, headers, body, signal: getAbortSignal(), credentials: 'same-origin'
+                })
+                    .then(response => response.json())
+                    .then(success)
+                    .catch(failure);
             }
-        });
+        }
+        // Save current range for future requests
+        assign(fetchedRange, activeRange);
+    }
+}
+
+export 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)
     };
 }
 

package/src/storage/options.svelte.js

@@ -1,6 +1,6 @@
 import {untrack} from 'svelte';
 import {
-    createDate, createDateRange, createDuration, createEvents, createEventSources, createResources, entries,
+    createDate, createDateRange, createDuration, createEvents, createEventSources, createResources, entries, isArray,
     isFunction, keys, setMidnight
 } from '#lib';
 import {SvelteMap} from "svelte/reactivity";
@@ -55,6 +55,7 @@ function createOptions(plugins) {
         lazyFetching: true,
         loading: undefined,
         locale: undefined,
+        refetchResourcesOnNavigate: false,
         resources: [],
         selectable: false,
         theme: {
@@ -110,13 +111,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
     };
 

package/src/storage/state.svelte.js

@@ -1,7 +1,9 @@
 import {SvelteMap} from 'svelte/reactivity';
 import {createDate, identity, intl, intlRange, setMidnight} from '#lib';
 import {optionsState} from './options.svelte.js';
-import {loadEvents, runDatesSet, runEventAllUpdated, runViewDidMount, setNowAndToday} from './effects.js';
+import {
+    createLoadingInvoker, loadEvents, loadResources, runDatesSet, runEventAllUpdated, runViewDidMount, setNowAndToday
+} from './effects.js';
 import {activeRange, currentRange, filteredEvents, view, viewDates, viewTitle} from './derived.js';
 
 export default class State {
@@ -18,11 +20,12 @@ export default class State {
         this.auxComponents = $state([]);
         this.currentRange = $derived.by(currentRange(this));
         this.activeRange = $derived.by(activeRange(this));
-        this.fetchedRange = $state.raw({start: undefined, end: undefined});
+        this.fetchedRange = $state({events: {}, resources: {}});
         this.events = $state.raw([]);
         this.filteredEvents = $derived.by(filteredEvents(this));
         this.mainEl = $state();
         this.now = $state(createDate());
+        this.resources = $state.raw([]);
         this.today = $state(setMidnight(createDate()));
         this.intlEventTime = $derived.by(intlRange(this, 'eventTimeFormat'));
         this.intlDayHeader = $derived.by(intl(this, 'dayHeaderFormat'));
@@ -50,8 +53,10 @@ export default class State {
     }
 
     #initEffects() {
+        let loading = createLoadingInvoker(this.options);
         $effect.pre(setNowAndToday(this));
-        $effect(loadEvents(this));
+        $effect(loadEvents(this, loading));
+        $effect(loadResources(this, loading));
         $effect(runDatesSet(this));
         $effect(runEventAllUpdated(this));
         $effect(runViewDidMount(this));