@event-calendar/core 4.7.0 → 5.0.0

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

@@ -1,39 +1,44 @@
 <script>
     import {getContext} from 'svelte';
-    import {addDuration, cloneDate, datesEqual} from '#lib';
-    import {getSlotTimeLimits} from './lib.js';
+    import {datesEqual, toSeconds, intersectionObserver} from '#lib';
 
-    let {slotDuration, slotWidth, theme, _bodyHeight, _bodyWidth, _bodyScrollLeft,
-        _headerHeight, _dayTimeLimits, _now, _today, _viewDates} = getContext('state');
+    let {grid} = $props();
 
-    // Style
-    let left = $derived.by(() => {
-        let offset = 0;
-        for (let i = 0; i < $_viewDates.length; ++i) {
-            let slotTimeLimits = getSlotTimeLimits($_dayTimeLimits, $_viewDates[i]);
-            if (datesEqual($_viewDates[i], $_today)) {
-                let dayStart = addDuration(cloneDate($_viewDates[i]), slotTimeLimits.min);
-                let dayEnd = addDuration(cloneDate($_viewDates[i]), slotTimeLimits.max);
-                if ($_now >= dayStart && $_now <= dayEnd) {
-                    offset += ($_now - dayStart) / 1000;
-                    break;
-                } else {
-                    return null;
-                }
-            } else {
-                offset += slotTimeLimits.max.seconds - slotTimeLimits.min.seconds;
+    let {_mainEl, _now, _today, _sidebarWidth, slotDuration, slotWidth, theme} = getContext('state');
+
+    // Layout
+    let {gridColumn, start, end} = $derived.by(() => {
+        for (let day of grid[0]) {
+            if (datesEqual(day.dayStart, $_today)) {
+                return day;
             }
         }
-        let step = $slotDuration.seconds;
-        return offset / step * $slotWidth - $_bodyScrollLeft;
+        return {};
+    });
+    let left = $derived.by(() => {
+        if ($_now < start || $_now > end) {
+            return null;
+        }
+        let step = toSeconds($slotDuration);
+        return ($_now - start) / 1000 / step * $slotWidth;
+    });
+
+    // Observe intersections
+    let observerOptions = $derived({
+        root: $_mainEl,
+        rootMargin: `0px 0px 0px -${$_sidebarWidth + 1}px`,
+        threshold: 0.0,
     });
+    function onIntersect(el, entry) {
+        el.classList.toggle($theme.hidden, !entry.isIntersecting);
+    }
 </script>
 
-{#if left !== null && left >= 3 && left <= $_bodyWidth - 3}
-    <div
-        class="{$theme.nowIndicator}"
-        style:top="{$_headerHeight+2}px"
-        style:left="{left}px"
-        style:height="{$_bodyHeight-1}px"
+{#if gridColumn && left !== null}
+    <div {@attach intersectionObserver(onIntersect, observerOptions)}
+         class="{$theme.nowIndicator}"
+         style:grid-column="{gridColumn + 1}"
+         style:grid-row="2 / span {grid.length}"
+         style:inset-inline-start="{left}px"
     ></div>
 {/if}

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

@@ -1,20 +1,135 @@
 <script>
-    import {getContext} from 'svelte';
-    import Sidebar from './Sidebar.svelte';
-    import Header from './Header.svelte';
-    import Body from './Body.svelte';
+    import {getContext, tick} from 'svelte';
+    import {max, resizeObserver, runReposition, contentFrom, toSeconds, datesEqual, min} from "#lib";
+    import {createGrid, createEventChunks, createIEventChunks, getSlotTimeLimits} from './lib.js';
+    import {ColHead, DayHeader} from '#components';
+    import Day from './Day.svelte';
+    import Event from './Event.svelte';
+    import Label from './Label.svelte';
+    import Expander from './Expander.svelte';
     import NowIndicator from './NowIndicator.svelte';
 
-    let {nowIndicator, theme} = getContext('state');
+    let {_daySlots, _dayTimeLimits, _filteredEvents, _iEvents, _mainEl, _monthView, _nestedResources, _sidebarWidth,
+        _slotLabelPeriodicity, _today, _viewResources, _viewDates, columnWidth, highlightedDates, nowIndicator, scrollTime,
+        slotDuration, slotHeight, slotWidth, theme, validRange} = getContext('state');
+
+    let headerHeight = $state(0);
+
+    let grid = $derived(createGrid($_viewDates, $_viewResources, $_dayTimeLimits, $validRange, $highlightedDates));
+    let {chunks, bgChunks} = $derived(createEventChunks($_filteredEvents, grid));
+    let iChunks = $derived(createIEventChunks($_iEvents, grid));
+
+    // Handle scrollTime
+    $effect(() => {
+        $_viewDates;
+        $scrollTime;
+        tick().then(scrollToTime);
+    });
+    function scrollToTime() {
+        if ($_monthView) {
+            return;
+        }
+        let scrollLeft = 0;
+        let gaps = 0;
+        let todayOutOfView = $_today < $_viewDates[0] || $_today > $_viewDates.at(-1);
+        for (let date of $_viewDates) {
+            let slotTimeLimits = getSlotTimeLimits($_dayTimeLimits, date);
+            if (todayOutOfView || datesEqual(date, $_today)) {
+                scrollLeft += max(
+                    min(toSeconds($scrollTime), toSeconds(slotTimeLimits.max)) - toSeconds(slotTimeLimits.min),
+                    0
+                );
+                break;
+            } else {
+                scrollLeft += toSeconds(slotTimeLimits.max) - toSeconds(slotTimeLimits.min);
+                ++ gaps;
+            }
+        }
+        $_mainEl.scrollLeft = scrollLeft / toSeconds($slotDuration) * $slotWidth + gaps;
+    }
+
+    // Events reposition
+    let refs = [];
+    function reposition() {
+        runReposition(refs, chunks);
+    }
+    $effect(reposition);
 </script>
 
-<div class="{$theme.container}">
-    <Sidebar/>
-    <div class="{$theme.main}">
-        <Header/>
-        <Body/>
-        {#if $nowIndicator}
-            <NowIndicator/>
-        {/if}
+<section
+    bind:this={$_mainEl}
+    class="{$theme.main}"
+    style:--ec-grid-cols="{grid[0].length}"
+    style:--ec-grid-rows="{grid.length}"
+    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={$_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}
+                    </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}
+                {#each days as day}
+                    <Day {day}/>
+                {/each}
+            {/each}
+        </div>
+        <div class="{$theme.events}">
+            {#each chunks as chunk, i}
+                <!-- svelte-ignore binding_property_non_reactive -->
+                <Event bind:this={refs[i]} {chunk}/>
+            {/each}
+            {#each bgChunks as chunk}
+                <Event {chunk}/>
+            {/each}
+            {#each iChunks as chunk}
+                <Event {chunk}/>
+            {/each}
+        </div>
     </div>
-</div>
+
+    {#if $nowIndicator && !$_monthView}
+        <NowIndicator {grid} />
+    {/if}
+</section>

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

@@ -1,18 +1,23 @@
-import {writable} from 'svelte/store';
-import {btnTextDay, btnTextMonth, btnTextWeek, themeView, viewResources} from '#lib';
-import {dayTimeLimits, dayTimes, nestedResources} from './stores.js';
+import {btnTextDay, btnTextMonth, btnTextWeek, themeView} from '#lib';
+import {dayTimeLimits, daySlots, nestedResources, monthView} from './stores.js';
+import {createTRROptions, createTRRParsers} from '../time-grid/options.js';
+import {createTRRStores} from '../time-grid/stores.js';
+import {createRROptions} from '../resource-time-grid/options.js';
+import {createRRStores} from '../resource-time-grid/stores.js';
 import View from './View.svelte';
 
 export default {
 	createOptions(options) {
+        createTRROptions(options);
+        createRROptions(options);
+        options.slotWidth = 16;
 		// Common options
 		options.buttonText.resourceTimelineDay = 'timeline';
 		options.buttonText.resourceTimelineWeek = 'timeline';
 		options.buttonText.resourceTimelineMonth = 'timeline';
 		options.theme.expander = 'ec-expander';
-		options.theme.main = 'ec-main';
-		options.theme.times = 'ec-times';
-		options.theme.container = 'ec-container';
+        options.theme.rowHead = 'ec-row-head';
+		options.theme.slots = 'ec-slots';
 		options.view = 'resourceTimelineWeek';
 		options.views.resourceTimelineDay = {
 			buttonText: btnTextDay,
@@ -20,8 +25,9 @@ export default {
 			displayEventEnd: false,
 			dayHeaderFormat: {weekday: 'long'},
 			duration: {days: 1},
-			slotDuration: '01:00',
-			theme: themeView('ec-timeline ec-resource-day-view'),
+            slotLabelInterval: '01:00',
+			slotDuration: '00:15',
+			theme: themeView('ec-resource ec-timeline ec-day-view'),
 			titleFormat: {year: 'numeric', month: 'long', day: 'numeric'}
 		};
 		options.views.resourceTimelineWeek = {
@@ -29,8 +35,9 @@ export default {
 			component: View,
 			displayEventEnd: false,
 			duration: {weeks: 1},
-			slotDuration: '01:00',
-			theme: themeView('ec-timeline ec-resource-week-view')
+            slotLabelInterval: '01:00',
+			slotDuration: '00:15',
+			theme: themeView('ec-resource ec-timeline ec-week-view')
 		};
 		options.views.resourceTimelineMonth = {
 			buttonText: btnTextMonth,
@@ -42,25 +49,21 @@ export default {
 			},
 			duration: {months: 1},
 			slotDuration: {days: 1},
-			theme: themeView('ec-timeline ec-resource-month-view'),
+			theme: themeView('ec-resource ec-timeline ec-month-view'),
 			titleFormat: {year: 'numeric', month: 'long'}
 		};
 	},
 
+    createParsers(parsers) {
+        createTRRParsers(parsers);
+    },
+
 	createStores(state) {
-		if (!('_viewResources' in state)) {
-			state._viewResources = viewResources(state);
-		}
-		state._bodyHeight = writable(0);
-		state._bodyWidth = writable(0);
-		state._bodyScrollLeft = writable(0);
-		state._headerEl = writable(undefined);
-		state._headerHeight = writable(0);
+		createTRRStores(state);
+        createRRStores(state);
 		state._dayTimeLimits = dayTimeLimits(state);  // flexible time limits per day
-		state._dayTimes = dayTimes(state);
-		state._daysHs = writable(new Map());  // days row heights
+        state._daySlots = daySlots(state);
+        state._monthView = monthView(state);
 		state._nestedResources = nestedResources(state);
-		state._resHs = writable(new Map());  // resource row heights
-		state._sidebarEl = writable(undefined);
 	}
 }

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

@@ -1,139 +1,136 @@
-import {addDay, addDuration, cloneDate, createDuration, datesEqual, sortEventChunks, toSeconds} from '#lib';
+import {
+    addDay, addDuration, assign, bgEvent, cloneDate, createDuration, createEventChunk, datesEqual, eventIntersects, max,
+    min, outsideRange
+} from '#lib';
 
-export function prepareEventChunks(chunks, $_viewDates, $_dayTimeLimits, $slotDuration, $eventOrder) {
-    let longChunks = {};
-    let filteredChunks = [];
-
-    if (chunks.length) {
-        sortEventChunks(chunks, $eventOrder);
+export function createGrid($_viewDates, $_viewResources, $_dayTimeLimits, $validRange, $highlightedDates) {
+    let grid = [];
+    let gridRow = 1
+    for (let resource of $_viewResources) {
+        let days = [];
+        let gridColumn = 1;
+        for (let date of $_viewDates) {
+            let slotTimeLimits = $_dayTimeLimits[date.getTime()];
+            days.push({
+                gridColumn,
+                gridRow,
+                resource,
+                start: addDuration(cloneDate(date), slotTimeLimits.min),
+                end: addDuration(cloneDate(date), slotTimeLimits.max),
+                dayStart: date,
+                dayEnd: addDay(cloneDate(date)),
+                disabled: outsideRange(date, $validRange),
+                highlight: $highlightedDates.some(d => datesEqual(d, date))
+            });
+            ++ gridColumn;
+        }
+        grid.push(days);
+        ++ gridRow;
+    }
+    return grid;
+}
 
-        let step = toSeconds($slotDuration);
-        let prevChunk;
-        for (let chunk of chunks) {
-            let prevDayEnd;
-            if (step) {
-                let slots = 0;
-                for (let i = 0; i < $_viewDates.length; ++i) {
-                    let slotTimeLimits = getSlotTimeLimits($_dayTimeLimits, $_viewDates[i]);
-                    let dayStart = addDuration(cloneDate($_viewDates[i]), slotTimeLimits.min);
-                    let dayEnd = addDuration(cloneDate($_viewDates[i]), slotTimeLimits.max);
-                    if (!chunk.date) {
-                        if (chunk.start < dayEnd && chunk.end > dayStart) {
-                            // The first day is found
-                            chunk.date = $_viewDates[i];
-                            if (chunk.start < dayStart) {
-                                // Adjust chunk start
-                                chunk.start = dayStart;
-                            }
-                            // Calculate offset
-                            chunk.offset = (chunk.start - dayStart) / 1000 / step;
-                            // Calculate slots
-                            if (chunk.end > dayEnd) {
-                                slots += dayEnd - chunk.start;
-                            } else {
-                                slots += chunk.end - chunk.start || step * 1000;
-                                break;
-                            }
-                        }
-                    } else {
-                        if (chunk.end <= dayStart) {
-                            // Adjust chunk end
-                            chunk.end = prevDayEnd;
-                            break;
-                        }
-                        // The chunk is long one
-                        let key = $_viewDates[i].getTime();
-                        if (longChunks[key]) {
-                            longChunks[key].push(chunk);
-                        } else {
-                            longChunks[key] = [chunk];
-                        }
-                        // Calculate slots
-                        if (chunk.end > dayEnd) {
-                            slots += dayEnd - dayStart;
-                        } else {
-                            slots += chunk.end - dayStart;
-                            break;
-                        }
-                    }
-                    prevDayEnd = dayEnd;
-                }
-                chunk.slots = slots / 1000 / step;
+export function createEventChunks($_filteredEvents, grid) {
+    let chunks = [];
+    let bgChunks = [];
+    for (let event of $_filteredEvents) {
+        for (let days of grid) {
+            if (bgEvent(event.display)) {
+                bgChunks = bgChunks.concat(createChunks(event, days));
             } else {
-                // Month view
-                let days = 0;
-                for (let i = 0; i < $_viewDates.length; ++i) {
-                    let dayStart = $_viewDates[i];
-                    let dayEnd = addDay(cloneDate(dayStart));
-                    if (!chunk.date) {
-                        if (chunk.start < dayEnd) {
-                            // The first day is found
-                            chunk.date = dayStart;
-                            if (chunk.start < dayStart) {
-                                // Adjust chunk start
-                                chunk.start = dayStart;
-                            }
-                            ++days;
-                        }
-                    } else {
-                        if (chunk.end <= dayStart) {
-                            // Adjust chunk end
-                            chunk.end = prevDayEnd;
-                            break;
-                        }
-                        // The chunk is long one
-                        let key = dayStart.getTime();
-                        if (longChunks[key]) {
-                            longChunks[key].push(chunk);
-                        } else {
-                            longChunks[key] = [chunk];
-                        }
-                        ++days;
-                    }
-                    prevDayEnd = dayEnd;
-                }
-                chunk.days = days;
+                chunks = chunks.concat(createChunks(event, days));
             }
+        }
+    }
+    prepareChunks(chunks);
 
-            if (!chunk.date) {
-                // Chunk is outside the slot time limits, so skip it
-                continue;
-            }
+    return {chunks, bgChunks};
+}
 
-            if (prevChunk && datesEqual(prevChunk.date, chunk.date)) {
-                chunk.prev = prevChunk;
+export function createIEventChunks($_iEvents, grid) {
+    let iChunks = [];
+    for (let event of $_iEvents) {
+        if (!event) {
+            continue;
+        }
+        for (let days of grid) {
+            iChunks = iChunks.concat(createChunks(event, days));
+        }
+    }
+
+    return iChunks;
+}
+
+function createChunks(event, days) {
+    let dates = [];
+    let firstStart;
+    let lastEnd;
+    let gridColumn;
+    let gridRow;
+    let left;
+    let width = 0;
+    for (let {gridColumn: column, gridRow: row, resource, dayStart, start, end, disabled} of days) {
+        if (!disabled && eventIntersects(event, start, end, resource)) {
+            if (!dates.length) {
+                firstStart = start;
+                gridColumn = column;
+                gridRow = row;
+                left = max(event.start - start, 0) / 1000;
             }
-            prevChunk = chunk;
-            filteredChunks.push(chunk);
+            dates.push(dayStart);
+            lastEnd = end;
+            width += (min(end, event.end) - max(start, event.start)) / 1000;
         }
     }
+    if (dates.length) {
+        let chunk = createEventChunk(event, firstStart, lastEnd);
+        // Chunk layout
+        assign(chunk, {gridColumn, gridRow, dates, left, width});
 
-    return [filteredChunks, longChunks];
+        return [chunk];
+    }
+
+    return [];
+}
+
+export function prepareChunks(chunks) {
+    let dayChunks = {};
+    for (let chunk of chunks) {
+        let {gridColumn, gridRow} = chunk;
+        // Prepare day chunks
+        for (let i = 0; i < chunk.dates.length; ++ i) {
+            let key = `${gridRow}_${gridColumn + i}`;
+            if (dayChunks[key]) {
+                dayChunks[key].push(chunk);
+            } else {
+                dayChunks[key] = [chunk];
+            }
+        }
+        let key = `${gridRow}_${gridColumn}`;
+        chunk.day = dayChunks[key];
+    }
 }
 
-export function repositionEvent(chunk, dayChunks, longChunks, height, allDay) {
-    chunk.top = 0;
-    chunk.bottom = height;
-    let margin = 1;
-    let key = chunk.date.getTime();
-    longChunks = longChunks?.[key] ?? [];
-    let chunks = [...dayChunks, ...longChunks];
-    chunks.sort((a, b) => (a.top ?? 0) - (b.top ?? 0) || a.start - b.start || b.event.allDay - a.event.allDay);
-    for (let dayChunk of chunks) {
-        if (dayChunk === chunk) {
+export function repositionEvent(chunk, height, monthView) {
+    let top = 1;
+    let bottom = top + height;
+    let dayChunks = chunk.day;
+    dayChunks.sort((a, b) => (a.top ?? Number.POSITIVE_INFINITY) - (b.top ?? Number.POSITIVE_INFINITY));
+    for (let dayChunk of dayChunks) {
+        if (dayChunk === chunk || !('top' in dayChunk)) {
             continue;
         }
-        if ((allDay || chunk.start < dayChunk.end && chunk.end > dayChunk.start) && chunk.top < dayChunk.bottom && chunk.bottom > dayChunk.top) {
-            let offset = dayChunk.bottom - chunk.top + 1;
-            margin += offset;
-            chunk.top += offset;
-            chunk.bottom += offset;
+        if ((monthView || chunk.start < dayChunk.end && chunk.end > dayChunk.start) && top < dayChunk.bottom && bottom > dayChunk.top) {
+            let offset = dayChunk.bottom - top + 1;
+            top += offset;
+            bottom += offset;
         }
     }
+    assign(chunk, {top, bottom});
 
-    return margin;
+    return top;
 }
 
 export function getSlotTimeLimits($_dayTimeLimits, date) {
-    return $_dayTimeLimits[date.getTime()] ?? {min: createDuration(0), max: createDuration(0)};
+    return $_dayTimeLimits[date.getTime()] ?? {min: createDuration(0), max: createDuration('24:00:00')};
 }

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

@@ -1,5 +1,5 @@
 import {derived} from 'svelte/store';
-import {createSlotTimeLimits, createTimes, getPayload} from '#lib';
+import {createSlotTimeLimits, createSlots, getPayload, toSeconds} from '#lib';
 
 // slotTimeLimits per day
 export function dayTimeLimits(state) {
@@ -22,15 +22,15 @@ export function dayTimeLimits(state) {
     );
 }
 
-export function dayTimes(state) {
+export function daySlots(state) {
     return derived(
-        [state._viewDates, state.slotDuration, state.slotLabelInterval, state._dayTimeLimits, state._intlSlotLabel],
-        ([$_viewDates, $slotDuration, $slotLabelInterval, $_dayTimeLimits, $_intlSlotLabel]) => {
+        [state._viewDates, state.slotDuration, state._slotLabelPeriodicity, state._dayTimeLimits, state._intlSlotLabel],
+        ([$_viewDates, $slotDuration, $_slotLabelPeriodicity, $_dayTimeLimits, $_intlSlotLabel]) => {
             let dayTimes = {};
             for (let date of $_viewDates) {
-                let time = date.getTime();
-                dayTimes[time] = time in $_dayTimeLimits
-                    ? createTimes(date, $slotDuration, $slotLabelInterval, $_dayTimeLimits[time], $_intlSlotLabel)
+                let key = date.getTime();
+                dayTimes[key] = key in $_dayTimeLimits
+                    ? createSlots(date, $slotDuration, $_slotLabelPeriodicity, $_dayTimeLimits[key], $_intlSlotLabel)
                     : [];
             }
 
@@ -42,3 +42,7 @@ export function dayTimes(state) {
 export function nestedResources(state) {
     return derived(state.resources, $resources => $resources.some(resource => getPayload(resource).children.length));
 }
+
+export function monthView(state) {
+    return derived(state.slotDuration, $slotDuration => !toSeconds($slotDuration));
+}

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

@@ -0,0 +1,31 @@
+<script>
+    import {height, repositionEvent} from '#lib';
+    import {InteractableEvent} from '#components';
+
+    let {chunk} = $props();
+
+    let el = $state();
+    let margin = $state(0);
+    let event = $derived(chunk.event);
+
+    // Style
+    let styles = $derived(style => {
+        style['grid-column'] = `${chunk.gridColumn} / span ${chunk.dates.length}`;
+        if (margin || event._margin) {
+            style['margin-block-start'] = `${event._margin ?? margin}px`;
+        }
+        return style;
+    });
+
+    export function reposition() {
+        margin = repositionEvent(chunk, height(el));
+    }
+</script>
+
+<InteractableEvent
+    bind:el
+    {chunk}
+    {styles}
+    axis="x"
+    forceMargin={margin}
+/>