@event-calendar/core 5.0.5 → 5.1.0

package/src/lib/slots.js

@@ -2,47 +2,47 @@ import {addDuration, cloneDate, createDuration, DAY_IN_SECONDS, toISOString, toS
 import {max as maxFn, min as minFn, isFunction, floor} from './utils.js';
 import {bgEvent} from './events.js';
 
-export function createSlots(date, $slotDuration, $_slotLabelPeriodicity, $_slotTimeLimits, $_intlSlotLabel) {
+export function createSlots(date, slotDuration, slotLabelPeriodicity, slotTimeLimits, intlSlotLabel) {
     let slots = [];
     date = cloneDate(date);
     let end = cloneDate(date);
-    addDuration(date, $_slotTimeLimits.min);
-    addDuration(end, $_slotTimeLimits.max);
+    addDuration(date, slotTimeLimits.min);
+    addDuration(end, slotTimeLimits.max);
     // Build slots
     while (date < end) {
         slots.push([
             toISOString(date),
-            $_intlSlotLabel.format(date)
+            intlSlotLabel.format(date)
         ]);
-        addDuration(date, $slotDuration, $_slotLabelPeriodicity);
+        addDuration(date, slotDuration, slotLabelPeriodicity);
     }
     // Calculate span for last slot
-    let span = floor((date - end) / 1000 / toSeconds($slotDuration));
-    if (span && span !== $_slotLabelPeriodicity) {
-        slots.at(-1)[2] = $_slotLabelPeriodicity - span;
+    let span = floor((date - end) / 1000 / toSeconds(slotDuration));
+    if (span && span !== slotLabelPeriodicity) {
+        slots.at(-1)[2] = slotLabelPeriodicity - span;
     }
 
     return slots;
 }
 
-export function createSlotTimeLimits($slotMinTime, $slotMaxTime, $flexibleSlotTimeLimits, $_viewDates, $_filteredEvents) {
+export function createSlotTimeLimits(slotMinTime, slotMaxTime, flexibleSlotTimeLimits, viewDates, filteredEvents) {
     // Copy values
-    let min = createDuration($slotMinTime);
-    let max = createDuration($slotMaxTime);
+    let min = createDuration(slotMinTime);
+    let max = createDuration(slotMaxTime);
 
-    if ($flexibleSlotTimeLimits) {
+    if (flexibleSlotTimeLimits) {
         // If slotMaxTime goes past midnight, then extend it back by a maximum of 24 hours
         let minMin = createDuration(minFn(toSeconds(min), maxFn(0, toSeconds(max) - DAY_IN_SECONDS)));
         let maxMax = createDuration(maxFn(toSeconds(max), toSeconds(minMin) + DAY_IN_SECONDS));
-        let filter = isFunction($flexibleSlotTimeLimits?.eventFilter)
-            ? $flexibleSlotTimeLimits.eventFilter
+        let filter = isFunction(flexibleSlotTimeLimits?.eventFilter)
+            ? flexibleSlotTimeLimits.eventFilter
             : event => !bgEvent(event.display);
-        loop: for (let date of $_viewDates) {
+        loop: for (let date of viewDates) {
             let start = addDuration(cloneDate(date), min);
             let end = addDuration(cloneDate(date), max);
             let minStart = addDuration(cloneDate(date), minMin);
             let maxEnd = addDuration(cloneDate(date), maxMax);
-            for (let event of $_filteredEvents) {
+            for (let event of filteredEvents) {
                 if (!event.allDay && filter(event) && event.start < maxEnd && event.end > minStart) {
                     if (event.start < start) {
                         let seconds = maxFn((event.start - date) / 1000, toSeconds(minMin));

package/src/lib/utils.js

@@ -10,6 +10,10 @@ export function entries(object) {
     return Object.entries(object);
 }
 
+export function hasOwn(object, property) {
+    return Object.hasOwn(object, property);
+}
+
 export function floor(value) {
     return Math.floor(value);
 }
@@ -38,15 +42,6 @@ export function isFunction(value) {
     return typeof value === 'function';
 }
 
-export function isEmpty(obj) {
-    for (let prop in obj) {
-        if (Object.hasOwn(obj, prop)) {
-            return false;
-        }
-    }
-    return true;
-}
-
 export function run(fn) {
     return fn();
 }

package/src/lib/view.js

@@ -22,11 +22,3 @@ export function toViewWithLocalDates(view) {
 
     return view;
 }
-
-export function listView(view) {
-    return view.startsWith('list');
-}
-
-export function timelineView(view) {
-    return view.includes('Timeline');
-}

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

@@ -7,24 +7,26 @@
 
     let {day, noIeb, noBeb} = $props();
 
-    let {
-        date, firstDay, moreLinkContent, theme, weekNumbers, weekNumberContent, _hiddenChunks, _intlDayCell, _popupDay
-    } = getContext('state');
+    let mainState = getContext('state');
+    let viewState = getContext('view-state');
+
+    let {options: {date, firstDay, moreLinkContent, theme, weekNumbers, weekNumberContent}} = $derived(mainState);
+    let {hiddenChunks, intlDayCell} = $derived(viewState);
 
     let {dayStart, disabled, highlight} = $derived(day);
-    let otherMonth = $derived(dayStart.getUTCMonth() !== $date.getUTCMonth());
-    let classes = $derived(classNames => [...classNames, otherMonth && $theme.otherMonth]);
+    let otherMonth = $derived(dayStart.getUTCMonth() !== date.getUTCMonth());
+    let classes = $derived(classNames => [...classNames, otherMonth && theme.otherMonth]);
 
     // Week numbers
-    let showWeekNumber = $derived($weekNumbers && dayStart.getUTCDay() === ($firstDay ? 1 : 0));
+    let showWeekNumber = $derived(weekNumbers && dayStart.getUTCDay() === (firstDay ? 1 : 0));
     let weekNumber = $derived.by(() => {
         let weekNumber;
         if (showWeekNumber) {
             let week = getWeekNumber(dayStart, $firstDay);
-            if ($weekNumberContent) {
-                weekNumber = isFunction($weekNumberContent)
-                    ? $weekNumberContent({date: toLocalDate(dayStart), week})
-                    : $weekNumberContent;
+            if (weekNumberContent) {
+                weekNumber = isFunction(weekNumberContent)
+                    ? weekNumberContent({date: toLocalDate(dayStart), week})
+                    : weekNumberContent;
             } else {
                 weekNumber = 'W' + String(week).padStart(2, '0');
             }
@@ -33,15 +35,15 @@
     });
 
     // More link
-    let hiddenChunks = $derived($_hiddenChunks[dayStart.getTime()]);
+    let dayHiddenChunks = $derived(hiddenChunks.get(dayStart.getTime()));
     let moreLink = $derived.by(() => {
         let moreLink = '';
-        if (hiddenChunks) {
-            let text = '+' + hiddenChunks.length + ' more';
-            if ($moreLinkContent) {
-                moreLink = isFunction($moreLinkContent)
-                    ? $moreLinkContent({num: hiddenChunks.length, text})
-                    : $moreLinkContent;
+        if (dayHiddenChunks) {
+            let text = '+' + dayHiddenChunks.length + ' more';
+            if (moreLinkContent) {
+                moreLink = isFunction(moreLinkContent)
+                    ? moreLinkContent({num: dayHiddenChunks.length, text})
+                    : moreLinkContent;
             } else {
                 moreLink = text;
             }
@@ -51,26 +53,26 @@
 
     // Popup
     function showMore() {
-        $_popupDay = day;
+        viewState.popupDay = day;
     }
 </script>
 
 <BaseDay date={dayStart} allDay {classes} {disabled} {highlight} {noIeb} {noBeb}>
-    <div class="{$theme.dayHead}">
+    <div class="{theme.dayHead}">
         <time
             datetime="{toISOString(dayStart, 10)}"
-            {@attach contentFrom($_intlDayCell.format(dayStart))}
+            {@attach contentFrom(intlDayCell.format(dayStart))}
         ></time>
         {#if showWeekNumber}
             <span
-                class="{$theme.weekNumber}"
+                class="{theme.weekNumber}"
                 {@attach contentFrom(weekNumber)}
             ></span>
         {/if}
     </div>
 
-    <div class="{$theme.dayFoot}">
-        {#if hiddenChunks}
+    <div class="{theme.dayFoot}">
+        {#if dayHiddenChunks}
             <!-- svelte-ignore a11y_missing_attribute -->
             <!-- svelte-ignore a11y_missing_content -->
             <!-- svelte-ignore a11y_consider_explicit_label -->

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

@@ -1,11 +1,12 @@
 <script>
     import {getContext} from 'svelte';
-    import {bgEvent, height, isEmpty, max, repositionEvent} from '#lib';
+    import {bgEvent, height, max, repositionEvent} from '#lib';
     import {InteractableEvent} from '#components';
 
-    let {chunk, gridEl, inPopup = false} = $props();
+    let {chunk, inPopup = false} = $props();
 
-    let {_colsCount, _hiddenChunks, _popupDay, dayMaxEvents} = getContext('state');
+    let {options: {dayMaxEvents}} = $derived(getContext('state'));
+    let {colsCount, gridEl, hiddenChunks, popupDay} = $derived(getContext('view-state'));
 
     let el = $state();
     let margin = $state(0);
@@ -13,10 +14,10 @@
 
     let event = $derived(chunk.event);
     let display = $derived(chunk.event.display);
-    let dayEl = $derived(gridEl?.children.item((chunk.gridRow - 1) * $_colsCount + chunk.gridColumn - 1));
+    let dayEl = $derived(gridEl.children.item((chunk.gridRow - 1) * colsCount + chunk.gridColumn - 1));
 
     $effect(() => {
-        if (dayEl) {
+        if (!inPopup) {
             margin = height(dayEl.firstElementChild);
         }
     });
@@ -47,26 +48,27 @@
     }
 
     export function hide() {
-        if ($dayMaxEvents === true) {
+        if (dayMaxEvents === true) {
             let h = height(dayEl) - footHeight(dayEl);
             hidden = chunk.bottom > h;
             if (hidden) {
                 // Hide the event throughout all days
                 for (let date of chunk.dates) {
                     let key = date.getTime();
-                    if ($_hiddenChunks[key]) {
-                        if (!$_hiddenChunks[key].includes(chunk)) {
-                            $_hiddenChunks[key] = [...$_hiddenChunks[key], chunk];
+                    if (hiddenChunks.has(key)) {
+                        let chunks = hiddenChunks.get(key);
+                        if (!chunks.includes(chunk)) {
+                            hiddenChunks.set(key, [...chunks, chunk]);
                         }
                     } else {
-                        $_hiddenChunks[key] = [chunk];
+                        hiddenChunks.set(key, [chunk]);
                     }
                 }
             }
         } else {
             hidden = false;
-            if (!isEmpty($_hiddenChunks)) {
-                $_hiddenChunks = {};
+            if (hiddenChunks.size) {
+                hiddenChunks.clear();
             }
         }
     }
@@ -89,6 +91,6 @@
     {chunk}
     {styles}
     axis="x"
-    forceDate={inPopup && $_popupDay.dayStart}
+    forceDate={inPopup && popupDay.dayStart}
     forceMargin={[margin, chunk.gridRow]}
 />

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

@@ -5,14 +5,14 @@
     } from '#lib';
     import Event from './Event.svelte';
 
-    let {gridEl, chunks} = $props();
-
-    let {_colsCount, _interaction, _intlDayPopover, _popupDay, buttonText, theme} = getContext('state');
+    let viewState = getContext('view-state');
+    let {interaction, options: {buttonText, theme}} = $derived(getContext('state'));
+    let {colsCount, chunks, gridEl, intlDayPopover, popupDay} = $derived(viewState);
 
     let el = $state();
     let style = $state('');
 
-    let {gridColumn, gridRow, dayStart, dayEnd} = $derived($_popupDay);
+    let {gridColumn, gridRow, dayStart, dayEnd} = $derived(popupDay);
 
     let popupChunks = $derived.by(() => {
         let result = [];
@@ -38,7 +38,7 @@
     });
 
     function position() {
-        let dayEl = gridEl.children.item((gridRow - 1) * $_colsCount + gridColumn - 1);
+        let dayEl = gridEl.children.item((gridRow - 1) * colsCount + gridColumn - 1);
         let popupRect = rect(el);
         let dayRect = rect(dayEl);
         let gridRect = rect(gridEl);
@@ -76,18 +76,18 @@
     }
 
     function close() {
-        $_popupDay = null;
+        viewState.popupDay = null;
     }
 
     function handlePointerDownOutside() {
         close();
-        $_interaction.action?.noClick();
+        interaction.action?.noClick();
     }
 </script>
 
 <dialog
     bind:this={el}
-    class="{$theme.popup}"
+    class="{theme.popup}"
     closedby="closerequest"
     {style}
     style:grid-area="{`${gridRow + 1} / ${gridColumn}`}"
@@ -95,20 +95,20 @@
     onpointerdownoutside={handlePointerDownOutside}
     onclose={close}
 >
-    <header class="{$theme.dayHead}">
-        <time datetime="{toISOString(dayStart, 10)}" {@attach contentFrom($_intlDayPopover.format(dayStart))}></time>
+    <header class="{theme.dayHead}">
+        <time datetime="{toISOString(dayStart, 10)}" {@attach contentFrom(intlDayPopover.format(dayStart))}></time>
         <!-- svelte-ignore a11y_missing_attribute -->
         <!-- svelte-ignore a11y_autofocus -->
         <a
             autofocus
             role="button"
             tabindex="0"
-            aria-label={$buttonText.close}
+            aria-label={buttonText.close}
             onclick={stopPropagation(close)}
             onkeydown={keyEnter(close)}
         >&times;</a>
     </header>
-    <div class="{$theme.events}">
+    <div class="{theme.events}">
         {#each popupChunks as chunk}
             <Event {chunk} inPopup />
         {/each}

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

@@ -1,90 +1,78 @@
 <script>
-    import {getContext} from 'svelte';
-    import {contentFrom, identity, nextClosestDay, prevClosestDay, resizeObserver, runReposition} from '#lib';
+    import {getContext, setContext} from 'svelte';
+    import {contentFrom, resizeObserver, runReposition} from '#lib';
+    import ViewState from './state.svelte.js';
     import Day from './Day.svelte';
     import Event from './Event.svelte';
     import Popup from './Popup.svelte';
-    import {createEventChunks, createIEventChunks, createGrid} from './lib.js';
 
-    let {_activeRangeExt, _mainEl, _colsCount, _filteredEvents, _hiddenChunks, _iEvents, _intlDayHeader,
-        _intlDayHeaderAL, _popupDay, _viewDates, dayMaxEvents, firstDay, highlightedDates, theme,
-        validRange} = getContext('state');
+    let mainState = getContext('state');
+    let viewState = new ViewState(mainState);
+    setContext('view-state', viewState);
 
-    let gridEl = $state();
-    let grid = $derived(createGrid($_viewDates, $_colsCount, $validRange, $highlightedDates));
-    let {chunks, bgChunks} = $derived(createEventChunks($_filteredEvents, grid));
-    let iChunks = $derived(createIEventChunks($_iEvents, grid));
-
-    $effect.pre(() => {
-        $_activeRangeExt = ({start, end}) => ({
-            start: prevClosestDay(start, $firstDay),
-            end: nextClosestDay(end, $firstDay)
-        });
-        return () => {
-            $_activeRangeExt = identity;
-        };
-    });
+    let {intlDayHeader, intlDayHeaderAL, options: {dayMaxEvents, theme}} = $derived(mainState);
+    let {grid, chunks, bgChunks, iChunks, hiddenChunks, popupDay} = $derived(viewState);
 
     // Events reposition
     let refs = [];
     function reposition() {
-        $_hiddenChunks = {};
+        hiddenChunks.clear();
         runReposition(refs, chunks);
     }
     $effect(reposition);
     $effect(() => {
-        $_hiddenChunks;
+        chunks;
         refs.forEach(ref => ref.hide());
     });
 </script>
 
 <section
-    bind:this={$_mainEl}
-    class={[$theme.main, $dayMaxEvents === true && $theme.uniform]}
+    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">
+    <header class="{theme.header}">
+        <div class="{theme.grid}" role="row">
             {#each grid[0] as {dayStart}, i}
                 <div
-                    class={[$theme.colHead, $theme.weekdays?.[dayStart.getUTCDay()]]}
+                    class={[theme.colHead, theme.weekdays?.[dayStart.getUTCDay()]]}
                     role="columnheader"
                     aria-colindex="{1 + i}"
                 >
                     <span
-                        aria-label="{$_intlDayHeaderAL.format(dayStart)}"
-                        {@attach contentFrom($_intlDayHeader.format(dayStart))}
+                        aria-label="{intlDayHeaderAL.format(dayStart)}"
+                        {@attach contentFrom(intlDayHeader.format(dayStart))}
                     ></span>
                 </div>
             {/each}
         </div>
     </header>
 
-    <div class="{$theme.body}">
-        <div bind:this={gridEl} class="{$theme.grid}">
+    <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}/>
                 {/each}
             {/each}
         </div>
-        <div class="{$theme.events}">
+        <div class="{theme.events}">
             {#each chunks as chunk, i}
                 <!-- svelte-ignore binding_property_non_reactive -->
-                <Event bind:this={refs[i]} {chunk} {gridEl}/>
+                <Event bind:this={refs[i]} {chunk}/>
             {/each}
             {#each bgChunks as chunk}
                 <Event {chunk}/>
             {/each}
             {#each iChunks as chunk}
-                <Event {chunk} {gridEl}/>
+                <Event {chunk}/>
             {/each}
         </div>
     </div>
 
-    {#if $_popupDay}
-        <Popup {gridEl} {chunks}/>
+    {#if popupDay}
+        <Popup/>
     {/if}
 </section>

package/src/plugins/day-grid/derived.js

@@ -0,0 +1,102 @@
+import {untrack} from 'svelte';
+import {addDay, bgEvent, cloneDate, createAllDayChunks, datesEqual, outsideRange, prepareAllDayChunks} from '#lib';
+
+export function colsCount(mainState) {
+    return () => {
+        // Dependencies
+        let {options: {hiddenDays}} = mainState;
+
+        let count;
+
+        untrack(() => count = 7 - hiddenDays.length);
+
+        return count;
+    };
+}
+
+export function grid(mainState, viewState) {
+    return () => {
+        // Dependencies
+        let {options: {highlightedDates, validRange}, viewDates} = mainState;
+        let {colsCount} = viewState;
+
+        let grid = [];
+
+        untrack(() => {
+            let days = [];
+            let gridColumn = 1;
+            let gridRow = 1;
+            for (let date of viewDates) {
+                days.push({
+                    gridColumn,
+                    gridRow,
+                    resource: undefined,
+                    dayStart: date,
+                    dayEnd: addDay(cloneDate(date)),
+                    disabled: outsideRange(date, validRange),
+                    highlight: highlightedDates.some(d => datesEqual(d, date))
+                });
+                if (gridColumn === colsCount) {
+                    grid.push(days);
+                    days = [];
+                    gridColumn = 0;
+                    ++ gridRow;
+                }
+                ++ gridColumn;
+            }
+        });
+
+        return grid;
+    }
+}
+
+export function eventChunks(mainState, viewState) {
+    return () => {
+        // Dependencies
+        let {filteredEvents} = mainState;
+        let {grid} = viewState;
+
+        let chunks = [];
+        let bgChunks = [];
+
+        untrack(() => {
+            for (let event of filteredEvents) {
+                for (let days of grid) {
+                    if (bgEvent(event.display)) {
+                        if (event.allDay) {
+                            bgChunks = bgChunks.concat(createAllDayChunks(event, days));
+                        }
+                    } else {
+                        chunks = chunks.concat(createAllDayChunks(event, days));
+                    }
+                }
+            }
+            prepareAllDayChunks(chunks);
+        });
+
+        return {chunks, bgChunks};
+    };
+}
+
+export function iEventChunks(mainState, viewState) {
+    return () => {
+        // Dependencies
+        let {iEvents} = mainState;
+        let {grid} = viewState;
+
+        let iChunks = [];
+
+        for (let [, event] of iEvents) {
+            if (!event) {
+                continue;
+            }
+            untrack(() => {
+                for (let days of grid) {
+                    iChunks = iChunks.concat(createAllDayChunks(event, days));
+                }
+            });
+        }
+
+        return iChunks;
+    };
+}

package/src/plugins/day-grid/index.js

@@ -1,42 +1,53 @@
-import {writable} from 'svelte/store';
-import {btnTextMonth, intl, themeView} from '#lib';
-import {colsCount} from './stores.js';
+import {assign, btnTextMonth, nextClosestDay, prevClosestDay, themeView} from '#lib';
 import View from './View.svelte';
 
 export default {
     createOptions(options) {
-        options.dayMaxEvents = false;
-        options.dayCellFormat = {day: 'numeric'};
-        options.dayPopoverFormat = {month: 'long', day: 'numeric', year: 'numeric'};
-        options.moreLinkContent = undefined;
-        options.weekNumbers = false;
-        options.weekNumberContent = undefined;
-        // Common options
-        options.buttonText.dayGridMonth = 'month';
-        options.buttonText.close = 'Close';
-        options.theme.uniform = 'ec-uniform';
-        options.theme.dayFoot = 'ec-day-foot';
-        options.theme.otherMonth = 'ec-other-month';
-        options.theme.popup = 'ec-popup';
-        options.theme.weekNumber = 'ec-week-number';
-        options.view = 'dayGridMonth';
-        options.views.dayGridMonth = {
-            buttonText: btnTextMonth,
-            component: View,
-            dayHeaderFormat: {weekday: 'short'},
-            dayHeaderAriaLabelFormat: {weekday: 'long'},
-            displayEventEnd: false,
-            duration: {months: 1},
-            theme: themeView('ec-day-grid ec-month-view'),
-            titleFormat: {year: 'numeric', month: 'long'}
-        };
-    },
-
-    createStores(state) {
-        state._colsCount = colsCount(state);
-        state._intlDayCell = intl(state.locale, state.dayCellFormat);
-        state._intlDayPopover = intl(state.locale, state.dayPopoverFormat);
-        state._hiddenChunks = writable({});
-        state._popupDay = writable(null);
+        assign(options, {
+            dayMaxEvents: false,
+            dayCellFormat: {day: 'numeric'},
+            dayPopoverFormat: {month: 'long', day: 'numeric', year: 'numeric'},
+            moreLinkContent: undefined,
+            weekNumbers: false,
+            weekNumberContent: undefined,
+            // Common options
+            view: 'dayGridMonth'
+        });
+        assign(options.buttonText, {
+            dayGridMonth: 'month',
+            close: 'Close'
+        });
+        assign(options.theme, {
+            uniform: 'ec-uniform',
+            dayFoot: 'ec-day-foot',
+            otherMonth: 'ec-other-month',
+            popup: 'ec-popup',
+            weekNumber: 'ec-week-number'
+        });
+        assign(options.views, {
+            dayGridMonth: {
+                buttonText: btnTextMonth,
+                component: initViewComponent,
+                dayHeaderFormat: {weekday: 'short'},
+                dayHeaderAriaLabelFormat: {weekday: 'long'},
+                displayEventEnd: false,
+                duration: {months: 1},
+                theme: themeView('ec-day-grid ec-month-view'),
+                titleFormat: {year: 'numeric', month: 'long'}
+            }
+        });
     }
 }
+
+function initViewComponent(mainState) {
+    mainState.features = ['day-grid'];
+    mainState.extensions.activeRange = (start, end) => {
+        // Dependencies
+        let {options: {firstDay}} = mainState;
+        return {
+            start: prevClosestDay(start, firstDay),
+            end: nextClosestDay(end, firstDay)
+        }
+    };
+    return View;
+}