@event-calendar/core 4.7.0 → 5.0.0

package/src/lib/events.js

@@ -1,4 +1,6 @@
-import {addDay, addDuration, datesEqual, createDate, cloneDate, setMidnight, toLocalDate, toISOString, noTimePart, copyTime} from './date.js';
+import {
+    addDay, cloneDate, copyTime, createDate, datesEqual, noTimePart, setMidnight, toISOString, toLocalDate
+} from './date.js';
 import {createElement} from './dom.js';
 import {assign, isArray, isFunction} from './utils.js';
 import {toViewWithLocalDates} from './view.js';
@@ -55,38 +57,6 @@ export function createEventSources(input) {
     }));
 }
 
-export function createEventChunk(event, start, end) {
-    let chunk = {
-        start: event.start > start ? event.start : start,
-        end: event.end < end ? event.end : end,
-        event
-    };
-    chunk.zeroDuration = datesEqual(chunk.start, chunk.end);
-
-    return chunk;
-}
-
-export function sortEventChunks(chunks, eventOrder) {
-    if (isFunction(eventOrder)) {
-        chunks.sort((a, b) => eventOrder(
-            _toChunkWithLocalDates(a),
-            _toChunkWithLocalDates(b)
-        ));
-    } else {
-        // Sort by start date (all-day events always on top)
-        chunks.sort((a, b) => a.start - b.start || b.event.allDay - a.event.allDay);
-    }
-}
-
-function _toChunkWithLocalDates(chunk) {
-    return {
-        ...chunk,
-        start: toLocalDate(chunk.start),
-        end: toLocalDate(chunk.end),
-        event: toEventWithLocalDates(chunk.event)
-    };
-}
-
 export function createEventContent(chunk, displayEventEnd, eventContent, theme, _intlEventTime, _view) {
     let timeText = _intlEventTime.formatRange(
         chunk.start,
@@ -113,7 +83,7 @@ export function createEventContent(chunk, displayEventEnd, eventContent, theme,
                 domNodes = [];
                 break;
             case 'pointer':
-                domNodes = [createTimeElement(timeText, chunk, theme)];
+                domNodes = chunk.event.allDay ? [] : [createTimeElement(timeText, chunk, theme)];
                 break;
             default:
                 domNodes = [
@@ -169,118 +139,24 @@ function _cloneEvent(event, dateFn) {
     return event;
 }
 
-/**
- * Prepare event chunks for month view and all-day slot in week view
- */
-export function prepareEventChunks(chunks, hiddenDays, eventOrder) {
-    let longChunks = {};
-
-    if (chunks.length) {
-        sortEventChunks(chunks, eventOrder);
-
-        let prevChunk;
-        for (let chunk of chunks) {
-            let dates = [];
-            let date = setMidnight(cloneDate(chunk.start));
-            while (chunk.end > date) {
-                if (!hiddenDays.includes(date.getUTCDay())) {
-                    dates.push(cloneDate(date));
-                    if (dates.length > 1) {
-                        let key = date.getTime();
-                        if (longChunks[key]) {
-                            longChunks[key].chunks.push(chunk);
-                        } else {
-                            longChunks[key] = {
-                                sorted: false,
-                                chunks: [chunk]
-                            };
-                        }
-                    }
-                }
-                addDay(date);
-            }
-            if (dates.length) {
-                chunk.date = dates[0];
-                chunk.days = dates.length;
-                chunk.dates = dates;
-                // Adjust the start and end dates of the chunk if hidden days affected them
-                if (chunk.start < dates[0]) {
-                    chunk.start = dates[0];
-                }
-                let maxEnd = addDay(cloneDate(dates.at(-1)));
-                if (chunk.end > maxEnd) {
-                    chunk.end = maxEnd;
-                }
-            } else {
-                chunk.date = setMidnight(cloneDate(chunk.start));
-                chunk.days = 1;
-                chunk.dates = [chunk.date];
-            }
-
-            if (prevChunk && datesEqual(prevChunk.date, chunk.date)) {
-                chunk.prev = prevChunk;
-            }
-            prevChunk = chunk;
-        }
-    }
-
-    return longChunks;
-}
-
-export function repositionEvent(chunk, longChunks, height) {
-    chunk.top = 0;
-    if (chunk.prev) {
-        chunk.top = chunk.prev.bottom + 1;
-    }
-    chunk.bottom = chunk.top + height;
-    let margin = 1;
-    let key = chunk.date.getTime();
-    if (longChunks[key]) {
-        if (!longChunks[key].sorted) {
-            longChunks[key].chunks.sort((a, b) => a.top - b.top);
-            longChunks[key].sorted = true;
-        }
-        for (let longChunk of longChunks[key].chunks) {
-            if (chunk.top < longChunk.bottom && chunk.bottom > longChunk.top) {
-                let offset = longChunk.bottom - chunk.top + 1;
-                margin += offset;
-                chunk.top += offset;
-                chunk.bottom += offset;
-            }
-        }
-    }
-
-    return margin;
-}
-
 export function runReposition(refs, data) {
     refs.length = data.length;
-    let result = [];
     for (let ref of refs) {
-        result.push(ref?.reposition?.());
+        ref?.reposition();
     }
-    return result;
 }
 
 /**
- * Check whether the event intersects with the given date range and resources
+ * Check whether the event intersects with the given date range and resource
  * @param event
  * @param start
  * @param end
- * @param resources
+ * @param resource
  * @return boolean
  */
-export function eventIntersects(event, start, end, resources) {
-    if (event.start < end && event.end > start) {
-        if (resources) {
-            if (!isArray(resources)) {
-                resources = [resources];
-            }
-            return resources.some(resource => event.resourceIds.includes(resource.id));
-        }
-        return true;
-    }
-    return false;
+export function eventIntersects(event, start, end, resource = undefined) {
+    return (!resource || event.resourceIds.includes(resource.id)) && event.start < end && event.end > start;
+
 }
 
 export function helperEvent(display) {

package/src/lib/index.js

@@ -1,5 +1,6 @@
 export * from './a11y.js';
-export * from './actions.js';
+export * from './attachments.js';
+export * from './chunks.js';
 export * from './date.js';
 export * from './debounce.js';
 export * from './dom.js';
@@ -8,7 +9,7 @@ export * from './options.js';
 export * from './payload.js';
 export * from './range.js';
 export * from './resources.js';
+export * from './slots.js';
 export * from './stores.js';
-export * from './times.js';
 export * from './utils.js';
 export * from './view.js';

package/src/lib/{times.js → slots.js}

@@ -1,37 +1,32 @@
 import {addDuration, cloneDate, createDuration, DAY_IN_SECONDS, toISOString, toSeconds} from './date.js';
-import {max as maxFn, min as minFn, isFunction} from './utils.js';
+import {max as maxFn, min as minFn, isFunction, floor} from './utils.js';
 import {bgEvent} from './events.js';
 
-export function createTimes(date, $slotDuration, $slotLabelInterval, $_slotTimeLimits, $_intlSlotLabel) {
+export function createSlots(date, $slotDuration, $_slotLabelPeriodicity, $_slotTimeLimits, $_intlSlotLabel) {
+    let slots = [];
     date = cloneDate(date);
-    let times = [];
     let end = cloneDate(date);
     addDuration(date, $_slotTimeLimits.min);
     addDuration(end, $_slotTimeLimits.max);
-    // Labels
-    if ($slotLabelInterval === undefined) {
-        $slotLabelInterval = $slotDuration.seconds < 3600
-            ? createDuration($slotDuration.seconds * 2)
-            : $slotDuration;
-    }
-    let label = cloneDate(date);
-    // Build times
+    // Build slots
     while (date < end) {
-        times.push([
+        slots.push([
             toISOString(date),
-            $_intlSlotLabel.format(date),
-            date >= label
+            $_intlSlotLabel.format(date)
         ]);
-        while ($slotLabelInterval.seconds && date >= label) {
-            addDuration(label, $slotLabelInterval);
-        }
-        addDuration(date, $slotDuration);
+        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;
     }
 
-    return times;
+    return slots;
 }
 
 export function createSlotTimeLimits($slotMinTime, $slotMaxTime, $flexibleSlotTimeLimits, $_viewDates, $_filteredEvents) {
+    // Copy values
     let min = createDuration($slotMinTime);
     let max = createDuration($slotMaxTime);
 

package/src/lib/stores.js

@@ -1,8 +1,6 @@
 import {derived} from 'svelte/store';
 import {isFunction} from './utils.js';
 import {toLocalDate} from './date.js';
-import {createResources} from './resources.js';
-import {getPayload} from './payload.js';
 
 export function intl(locale, format) {
     return derived([locale, format], ([$locale, $format]) => {
@@ -63,34 +61,3 @@ function _getParts(source, parts) {
     }
     return result;
 }
-
-export function viewResources(state) {
-    return derived(
-        [state.resources, state.filterResourcesWithEvents, state._filteredEvents, state._activeRange],
-        ([$resources, $filterResourcesWithEvents, $_filteredEvents, $_activeRange]) => {
-            let result = $resources.filter(resource => !getPayload(resource).hidden);
-
-            if ($filterResourcesWithEvents) {
-                result = $resources.filter(resource => {
-                    for (let event of $_filteredEvents) {
-                        if (
-                            event.display !== 'background' &&
-                            event.resourceIds.includes(resource.id) &&
-                            event.start < $_activeRange.end &&
-                            event.end > $_activeRange.start
-                        ) {
-                            return true;
-                        }
-                    }
-                    return false;
-                });
-            }
-
-            if (!result.length) {
-                result = createResources([{}]);
-            }
-
-            return result;
-        }
-    );
-}

package/src/lib/utils.js

@@ -38,6 +38,15 @@ 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();
 }
@@ -50,11 +59,11 @@ export function noop() {}
 
 export const identity = (x) => x;
 
-export function stopPropagation(fn) {
+export function stopPropagation(fn, _this = undefined) {
     return function (event) {
         event.stopPropagation();
         if (fn) {
-            fn.call(this, event);
+            fn.call(_this, event);
         }
     };
 }

package/src/lib/view.js

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

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

@@ -1,58 +1,46 @@
 <script>
-    import {getContext, onMount, tick, untrack} from 'svelte';
-    import {SvelteSet} from 'svelte/reactivity';
+    import {getContext} from 'svelte';
     import {
-        addDay, assign, cloneDate, createEventChunk, datesEqual, getWeekNumber, isFunction, keyEnter, outsideRange,
-        runReposition, setContent, setPayload, toISOString, toLocalDate, stopPropagation
+        contentFrom, getWeekNumber, isFunction, keyEnter, toISOString, toLocalDate, stopPropagation
     } from '#lib';
-    import Event from './Event.svelte';
-    import Popup from './Popup.svelte';
+    import {BaseDay} from '#components';
 
-    let {date, chunks, bgChunks, longChunks, iChunks = [], dates} = $props();
+    let {day} = $props();
 
     let {
-        date: currentDate, dayMaxEvents, highlightedDates, firstDay, moreLinkContent, theme, validRange, weekNumbers,
-        weekNumberContent, _hiddenEvents, _intlDayCell, _popupDate, _popupChunks, _today, _interaction
+        date, firstDay, moreLinkContent, theme, weekNumbers, weekNumberContent, _hiddenChunks, _intlDayCell, _popupDay
     } = getContext('state');
 
-    let el = $state();
-    let hiddenEvents = new SvelteSet();  // hidden events of this day
-    $effect.pre(() => {
-        $_hiddenEvents[date.getTime()] = untrack(() => hiddenEvents);
-    });
-    let refs = [];
-    let isToday = $derived(datesEqual(date, $_today));
-    let otherMonth = $derived(date.getUTCMonth() !== $currentDate.getUTCMonth());
-    let highlight = $derived($highlightedDates.some(d => datesEqual(d, date)));
-    let disabled = $derived(outsideRange(date, $validRange));
+    let {dayStart, disabled, highlight} = $derived(day);
+    let otherMonth = $derived(dayStart.getUTCMonth() !== $date.getUTCMonth());
+    let classes = $derived(classNames => [...classNames, otherMonth && $theme.otherMonth]);
 
-    let dayBgChunks = $derived(!disabled ? bgChunks.filter(bgChunk => datesEqual(bgChunk.date, date)) : []);
-    let dayChunks = $derived.by(() => {
-        let dayChunks = [];
-        if (!disabled) {
-            for (let chunk of chunks) {
-                if (datesEqual(chunk.date, date)) {
-                    dayChunks.push(chunk);
-                    // if ($dayMaxEvents !== false && dayChunks.length > $dayMaxEvents) {
-                    // 	chunk.hidden = true;
-                    // }
-                }
+    // Week numbers
+    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;
+            } else {
+                weekNumber = 'W' + String(week).padStart(2, '0');
             }
         }
-        return dayChunks;
-    });
-    $effect.pre(() => {
-        dayChunks;
-        hiddenEvents.clear();
+        return weekNumber;
     });
 
+    // More link
+    let hiddenChunks = $derived($_hiddenChunks[dayStart.getTime()]);
     let moreLink = $derived.by(() => {
         let moreLink = '';
-        if (!disabled && hiddenEvents.size) {
-            let text = '+' + hiddenEvents.size + ' more';
+        if (hiddenChunks) {
+            let text = '+' + hiddenChunks.length + ' more';
             if ($moreLinkContent) {
                 moreLink = isFunction($moreLinkContent)
-                    ? $moreLinkContent({num: hiddenEvents.size, text})
+                    ? $moreLinkContent({num: hiddenChunks.length, text})
                     : $moreLinkContent;
             } else {
                 moreLink = text;
@@ -61,121 +49,40 @@
         return moreLink;
     });
 
-    // dateFromPoint
-    onMount(() => {
-        setPayload(el, () => ({allDay: true, date, resource: undefined, dayEl: el, disabled}));
-    });
-
     // Popup
     function showMore() {
-        $_popupDate = date;
-    }
-    let showPopup = $derived($_popupDate && datesEqual(date, $_popupDate));
-    // Use `pre` to tick before popup positioning tick
-    $effect.pre(() => {
-        dayChunks;
-        longChunks;
-        if (showPopup) {
-            // Let chunks to reposition then set popup chunks
-            tick().then(setPopupChunks);
-        }
-    });
-    function setPopupChunks() {
-        let nextDay = addDay(cloneDate(date));
-        let chunks = dayChunks.concat(longChunks[date.getTime()]?.chunks || []);
-        $_popupChunks = chunks
-            .map(chunk => assign({}, chunk, createEventChunk(chunk.event, date, nextDay), {days: 1, dates: [date]}))
-            .sort((a, b) => a.top - b.top);
-    }
-
-    // Week numbers
-    let showWeekNumber = $derived($weekNumbers && date.getUTCDay() == ($firstDay ? 1 : 0));
-    let weekNumber = $derived.by(() => {
-        let weekNumber;
-        if (showWeekNumber) {
-            let week = getWeekNumber(date, $firstDay);
-            if ($weekNumberContent) {
-                weekNumber = isFunction($weekNumberContent)
-                    ? $weekNumberContent({date: toLocalDate(date), week})
-                    : $weekNumberContent;
-            } else {
-                weekNumber = 'W' + String(week).padStart(2, '0');
-            }
-        }
-        return weekNumber;
-    });
-
-    export function reposition() {
-        if (!disabled) {
-            runReposition(refs, dayChunks);
-        }
+        $_popupDay = day;
     }
 </script>
 
-<div
-    bind:this={el}
-    class="{$theme.day} {$theme.weekdays?.[date.getUTCDay()]}{isToday ? ' ' + $theme.today : ''}{otherMonth ? ' ' + $theme.otherMonth : ''}{highlight ? ' ' + $theme.highlight : ''}{disabled ? ' ' + $theme.disabled : ''}"
-    role="cell"
-    onpointerdown={$_interaction.action?.select}
->
+<BaseDay date={dayStart} allDay {classes} {disabled} {highlight}>
     <div class="{$theme.dayHead}">
         <time
-            datetime="{toISOString(date, 10)}"
-            use:setContent={$_intlDayCell.format(date)}
+            datetime="{toISOString(dayStart, 10)}"
+            {@attach contentFrom($_intlDayCell.format(dayStart))}
         ></time>
         {#if showWeekNumber}
             <span
                 class="{$theme.weekNumber}"
-                use:setContent={weekNumber}
+                {@attach contentFrom(weekNumber)}
             ></span>
         {/if}
     </div>
-    <div class="{$theme.bgEvents}">
-        {#if !disabled}
-            {#each dayBgChunks as chunk (chunk.event)}
-                <Event {chunk}/>
-            {/each}
-        {/if}
-    </div>
-    {#if !disabled}
-        <!-- Pointer -->
-        {#if iChunks[2] && datesEqual(iChunks[2].date, date)}
-            <div class="{$theme.events}">
-                <Event chunk={iChunks[2]}/>
-            </div>
-        {/if}
-        <!-- Drag & Resize -->
-        {#if iChunks[0] && datesEqual(iChunks[0].date, date)}
-            <div class="{$theme.events} {$theme.preview}">
-                <Event chunk={iChunks[0]}/>
-            </div>
-        {/if}
-    {/if}
-    <div class="{$theme.events}">
-        {#if !disabled}
-            {#each dayChunks as chunk, i (chunk.event)}
-                <!-- svelte-ignore binding_property_non_reactive -->
-                <Event {chunk} {longChunks} {dates} bind:this={refs[i]}/>
-            {/each}
-        {/if}
-    </div>
-    {#if showPopup}
-        <Popup/>
-    {/if}
+
     <div class="{$theme.dayFoot}">
-        {#if !disabled && hiddenEvents.size}
+        {#if hiddenChunks}
             <!-- svelte-ignore a11y_missing_attribute -->
             <!-- svelte-ignore a11y_missing_content -->
             <!-- svelte-ignore a11y_consider_explicit_label -->
             <a
                 role="button"
                 tabindex="0"
-                aria-haspopup="true"
+                aria-haspopup="dialog"
                 onclick={stopPropagation(showMore)}
                 onkeydown={keyEnter(showMore)}
                 onpointerdown={stopPropagation()}
-                use:setContent={moreLink}
+                {@attach contentFrom(moreLink)}
             ></a>
         {/if}
     </div>
-</div>
+</BaseDay>

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

@@ -1,34 +1,40 @@
 <script>
     import {getContext} from 'svelte';
-    import {ancestor, bgEvent, height, max, rect, repositionEvent} from '#lib';
+    import {bgEvent, height, isEmpty, max, repositionEvent} from '#lib';
     import {InteractableEvent} from '#components';
 
-    let {chunk, longChunks = {}, inPopup = false, dates = []} = $props();
+    let {chunk, gridEl, inPopup = false} = $props();
 
-    let {dayMaxEvents, _hiddenEvents, _popupDate} = getContext('state');
+    let {_colsCount, _hiddenChunks, _popupDay, dayMaxEvents} = getContext('state');
 
     let el = $state();
-    let margin = $state(1);
+    let margin = $state(0);
     let hidden = $state(false);
 
     let event = $derived(chunk.event);
     let display = $derived(chunk.event.display);
+    let dayEl = $derived(gridEl?.children.item((chunk.gridRow - 1) * $_colsCount + chunk.gridColumn - 1));
+
+    $effect(() => {
+        if (dayEl) {
+            margin = height(dayEl.firstElementChild);
+        }
+    });
 
     // Style
     let styles = $derived(style => {
-        if (bgEvent(display)) {
-            style['width'] = `calc(${chunk.days * 100}% + ${(chunk.days - 1)}px)`;
-        } else {
-            let marginTop = margin;
+        style['grid-column'] = `${chunk.gridColumn} / span ${chunk.dates.length}`;
+        style['grid-row'] = chunk.gridRow;
+        if (!bgEvent(display)) {
+            let marginTop = inPopup ? 1 : margin;
             if (event._margin) {
                 // Force margin for helper events
-                let [_margin, _dates] = event._margin;
-                if (chunk.date >= _dates[0] && chunk.date <= _dates.at(-1)) {
+                let [_margin, _gridRow] = event._margin;
+                if (_margin > marginTop && chunk.gridRow === _gridRow) {
                     marginTop = _margin;
                 }
             }
-            style['width'] = `calc(${chunk.days * 100}% + ${(chunk.days - 1) * 7}px)`;
-            style['margin-top'] = `${marginTop}px`;
+            style['margin-block-start'] = `${marginTop}px`;
         }
         if (hidden) {
             style['visibility'] = 'hidden';
@@ -37,42 +43,37 @@
     });
 
     export function reposition() {
-        margin = repositionEvent(chunk, longChunks, height(el));
-        if ($dayMaxEvents === true) {
-            hide();
-        } else {
-            hidden = false;
-        }
+        margin = repositionEvent(chunk, height(el), height(dayEl.firstElementChild));
     }
 
-    function hide() {
-        let dayEl = ancestor(el, 2);
-        let h = height(dayEl) - height(dayEl.firstElementChild) - footHeight(dayEl);
-        hidden = chunk.bottom > h;
-        let update = false;
-        // Hide or show the event throughout all days
-        for (let date of chunk.dates) {
-            let hiddenEvents = $_hiddenEvents[date.getTime()];
-            if (hiddenEvents) {
-                let size = hiddenEvents.size;
-                if (hidden) {
-                    hiddenEvents.add(chunk.event);
-                } else {
-                    hiddenEvents.delete(chunk.event);
-                }
-                if (size !== hiddenEvents.size) {
-                    update = true;
+    export function hide() {
+        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];
+                        }
+                    } else {
+                        $_hiddenChunks[key] = [chunk];
+                    }
                 }
             }
-        }
-        if (update) {
-            $_hiddenEvents = $_hiddenEvents;
+        } else {
+            hidden = false;
+            if (!isEmpty($_hiddenChunks)) {
+                $_hiddenChunks = {};
+            }
         }
     }
 
     function footHeight(dayEl) {
         let h = 0;
-        for (let i = 0; i < chunk.days; ++i) {
+        for (let i = 0; i < chunk.dates.length; ++ i) {
             h = max(h, height(dayEl.lastElementChild));
             dayEl = dayEl.nextElementSibling;
             if (!dayEl) {
@@ -88,6 +89,6 @@
     {chunk}
     {styles}
     axis="x"
-    forceDate={() => inPopup ? $_popupDate : undefined}
-    forceMargin={() => [rect(el).top - rect(ancestor(el, 1)).top, dates]}
+    forceDate={inPopup && $_popupDay.dayStart}
+    forceMargin={[margin, chunk.gridRow]}
 />