@event-calendar/core 4.7.1 → 5.0.1

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

@@ -1,109 +1,21 @@
 <script>
-    import {getContext, onMount} from 'svelte';
-    import {
-        addDuration, bgEvent, cloneDate, createEventChunk, datesEqual, eventIntersects, floor, outsideRange, rect,
-        setPayload
-    } from '#lib';
-    import {groupEventChunks} from './utils.js';
-    import Event from './Event.svelte';
-    import NowIndicator from './NowIndicator.svelte';
+    import {getContext} from 'svelte';
+    import {addDuration, cloneDate, floor, rect} from '#lib';
+    import {BaseDay} from '#components';
 
-    let {date, resource = undefined} = $props();
+    let {day, allDay = false} = $props();
 
-    let {_filteredEvents, _iEvents, highlightedDates, nowIndicator, slotDuration, slotHeight, filterEventsWithResources,
-        eventOrder, theme, resources, validRange, _interaction, _today, _slotTimeLimits} = getContext('state');
+    let {slotDuration, slotHeight} = getContext('state');
 
-    let el = $state();
-
-    let isToday = $derived(datesEqual(date, $_today));
-    let highlight = $derived($highlightedDates.some(d => datesEqual(d, date)));
-    let disabled = $derived(outsideRange(date, $validRange));
-
-    let start = $derived(addDuration(cloneDate(date), $_slotTimeLimits.min));
-    let end = $derived(addDuration(cloneDate(date), $_slotTimeLimits.max));
-
-    let resourceFilter = $derived(resource ?? ($filterEventsWithResources ? $resources : undefined));
+    let {dayStart: date, start, resource, disabled, highlight} = $derived(day);
 
-    let [chunks, bgChunks] = $derived.by(() => {
-        if (disabled) {
-            return [[], []];
-        }
-        let chunks = [];
-        let bgChunks = [];
-        for (let event of $_filteredEvents) {
-            if ((!event.allDay || bgEvent(event.display)) && eventIntersects(event, start, end, resourceFilter)) {
-                let chunk = createEventChunk(event, start, end);
-                switch (event.display) {
-                    case 'background': bgChunks.push(chunk); break;
-                    default: chunks.push(chunk);
-                }
-            }
-        }
-        groupEventChunks(chunks, $eventOrder);
-        return [chunks, bgChunks];
-    });
-
-    let iChunks = $derived.by(() => {
-        if (disabled) {
-            return [];
-        }
-        return $_iEvents.map(
-            event => event && eventIntersects(event, start, end, resource) ? createEventChunk(event, start, end) : null
-        );
-    });
+    let el = $state();
 
     function dateFromPoint(x, y) {
-        y -= rect(el).top;
-        return {
-            allDay: false,
-            date: addDuration(
-                addDuration(cloneDate(date), $_slotTimeLimits.min),
-                $slotDuration,
-                floor(y / $slotHeight)
-            ),
-            resource,
-            dayEl: el,
-            disabled
-        };
+        return allDay
+            ? date
+            : addDuration(cloneDate(start), $slotDuration, floor((y - rect(el).top) / $slotHeight));
     }
-
-    onMount(() => {
-        setPayload(el, dateFromPoint);
-    });
 </script>
 
-<div
-    bind:this={el}
-    class="{$theme.day} {$theme.weekdays?.[date.getUTCDay()]}{isToday ? ' ' + $theme.today : ''}{highlight ? ' ' + $theme.highlight : ''}{disabled ? ' ' + $theme.disabled : ''}"
-    role="cell"
-    onpointerdown={!disabled ? $_interaction.action?.select : undefined}
->
-    <div class="{$theme.bgEvents}">
-        {#if !disabled}
-            {#each bgChunks as chunk (chunk.event)}
-                <Event {date} {chunk}/>
-            {/each}
-        {/if}
-    </div>
-    <div class="{$theme.events}">
-        {#if !disabled}
-            <!-- Pointer -->
-            {#if iChunks[1]}
-                <Event {date} chunk={iChunks[1]}/>
-            {/if}
-            {#each chunks as chunk (chunk.event)}
-                <Event {date} {chunk}/>
-            {/each}
-            <!-- Drag, Resize & Select -->
-            {#if iChunks[0] && !iChunks[0].event.allDay}
-                <Event {date} chunk={iChunks[0]}/>
-            {/if}
-        {/if}
-    </div>
-    <div class="{$theme.extra}">
-        <!-- Now indicator -->
-        {#if $nowIndicator && isToday && !disabled}
-            <NowIndicator />
-        {/if}
-    </div>
-</div>
+<BaseDay bind:el {date} {allDay} {resource} {dateFromPoint} {disabled} {highlight}/>

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

@@ -1,31 +1,29 @@
 <script>
     import {getContext} from 'svelte';
-    import {bgEvent, ghostEvent, helperEvent} from '#lib';
+    import {toSeconds} from '#lib';
     import {InteractableEvent} from '#components';
 
-    let {date, chunk} = $props();
+    let {chunk} = $props();
 
-    let {slotEventOverlap, slotDuration, slotHeight, _slotTimeLimits} = getContext('state');
-
-    let display = $derived(chunk.event.display);
+    let {slotEventOverlap, slotDuration, slotHeight} = getContext('state');
 
     // Style
     let styles = $derived(style => {
-        let step = $slotDuration.seconds;
-        let offset = $_slotTimeLimits.min.seconds;
-        let start = (chunk.start - date) / 1000;
-        let end = (chunk.end - date) / 1000;
-        let top = (start - offset) / step * $slotHeight;
-        let height = (end - start) / step * $slotHeight || $slotHeight;
-        let maxHeight = ($_slotTimeLimits.max.seconds - start) / step * $slotHeight;
-        style['top'] = `${top}px`;
-        style['min-height'] = `${height}px`;
-        style['height'] = `${height}px`;
-        style['max-height'] = `${maxHeight}px`;
-        if (!bgEvent(display) && !helperEvent(display) || ghostEvent(display)) {
-            style['z-index'] = `${chunk.column + 1}`;
-            style['left'] = `${100 / chunk.group.columns.length * chunk.column}%`;
-            style['width'] = `${100 / chunk.group.columns.length * ($slotEventOverlap ? 0.5 * (1 + chunk.group.columns.length - chunk.column) : 1)}%`;
+        let step = toSeconds($slotDuration);
+        let top = chunk.top / step * $slotHeight;
+        let height = chunk.height / step * $slotHeight || $slotHeight;
+        let maxHeight = chunk.maxHeight / step * $slotHeight;
+        style['grid-column'] = chunk.gridColumn;
+        style['inset-block-start'] = `${top}px`;
+        style['min-block-size'] = `${height}px`;
+        style['block-size'] = `${height}px`;
+        style['max-block-size'] = `${maxHeight}px`;
+        let maxWidth = '100% - var(--ec-event-col-gap)';
+        if (chunk.group) {
+            let groupColumns = chunk.group.columns.length;
+            style['z-index'] = `${chunk.groupColumn + 1}`;
+            style['inset-inline-start'] = `calc((${maxWidth}) / ${groupColumns} * ${chunk.groupColumn})`;
+            style['inline-size'] = `calc((${maxWidth}) / ${groupColumns} * ${($slotEventOverlap ? 0.5 * (1 + groupColumns - chunk.groupColumn) : 1)})`;
         }
         return style;
     });

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

@@ -1,18 +1,43 @@
 <script>
     import {getContext} from 'svelte';
+    import {datesEqual, toSeconds, intersectionObserver} from '#lib';
 
-    let {slotDuration, slotHeight, theme, _now, _today, _slotTimeLimits} = getContext('state');
+    let {days, span = 1} = $props();
 
-    let start = $derived(($_now - $_today) / 1000);
-    // Style
+    let {_mainEl, _now, _today, _sidebarWidth, slotDuration, slotHeight, theme} = getContext('state');
+
+    // Layout
+    let {gridColumn, start, end} = $derived.by(() => {
+        for (let day of days) {
+            if (datesEqual(day.dayStart, $_today)) {
+                return day;
+            }
+        }
+        return {};
+    });
     let top = $derived.by(() => {
-        let step = $slotDuration.seconds;
-        let offset = $_slotTimeLimits.min.seconds;
-        return (start - offset) / step * $slotHeight;
+        if ($_now < start || $_now > end) {
+            return null;
+        }
+        let step = toSeconds($slotDuration);
+        return ($_now - start) / 1000 / step * $slotHeight;
+    });
+
+    // Observe intersections
+    let observerOptions = $derived({
+        root: $_mainEl,
+        rootMargin: `0px 0px 0px -${$_sidebarWidth + 5.5}px`,
+        threshold: 0.0,
     });
+    function onIntersect(el, entry) {
+        el.classList.toggle($theme.hidden, !entry.isIntersecting);
+    }
 </script>
 
-<div
-    class="{$theme.nowIndicator}"
-    style="top:{top}px"
-></div>
+{#if gridColumn && top !== null}
+    <div {@attach intersectionObserver(onIntersect, observerOptions)}
+        class="{$theme.nowIndicator}"
+        style:grid-column="{gridColumn + 1} / span {span}"
+        style:inset-block-start="{top}px"
+    ></div>
+{/if}

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

@@ -1,43 +1,137 @@
 <script>
-    import {getContext} from 'svelte';
-    import {datesEqual, setContent, toISOString} from '#lib';
-    import Section from './Section.svelte';
-    import Body from './Body.svelte';
+    import {getContext, tick} from 'svelte';
+    import {contentFrom, resizeObserver, runReposition, toSeconds} from '#lib';
+    import {createAllDayContent, createGrid, createEventChunks, createIEventChunks} from './lib.js';
+    import {ColHead, DayHeader} from '#components';
     import Day from './Day.svelte';
-    import Week from './all-day/Week.svelte';
+    import Event from './Event.svelte';
+    import AllDayEvent from './AllDayEvent.svelte';
+    import NowIndicator from './NowIndicator.svelte';
 
-    let {_viewDates, _intlDayHeader, _intlDayHeaderAL, _today, allDaySlot, theme} = getContext('state');
+    let {header, nowIndicator, createGridFn} = $props();
+
+    let {_mainEl, _filteredEvents, _iEvents, _sidebarWidth, _slotLabelPeriodicity, _slotTimeLimits, _slots,
+        _viewDates, allDayContent, allDaySlot, columnWidth, highlightedDates, nowIndicator: showNowIndicator,
+        scrollTime, slotHeight, slotDuration, theme, validRange} = getContext('state');
+
+    let headerHeight = $state(0);
+    let allDayText = $derived(createAllDayContent($allDayContent));
+
+    let grid = $derived(createGridFn?.() ?? createGrid($_viewDates, $_slotTimeLimits, $validRange, $highlightedDates));
+    let {chunks, bgChunks, allDayChunks, allDayBgChunks} = $derived(createEventChunks($_filteredEvents, grid));
+    let {iChunks, allDayIChunks} = $derived(createIEventChunks($_iEvents, grid));
+
+    // Handle scrollTime
+    $effect(() => {
+        $_viewDates;
+        $scrollTime;
+        tick().then(scrollToTime);
+    });
+    function scrollToTime() {
+        $_mainEl.scrollTop = (
+            (toSeconds($scrollTime) - toSeconds($_slotTimeLimits.min)) / toSeconds($slotDuration) - 0.5
+        ) * $slotHeight;
+    }
+
+    // Events reposition
+    let refs = [];
+    function reposition() {
+        runReposition(refs, allDayChunks);
+    }
+    $effect(reposition);
 </script>
 
-<div class="{$theme.header}">
-    <Section>
-        {#each $_viewDates as date}
-            <div
-                class="{$theme.day} {$theme.weekdays?.[date.getUTCDay()]}{datesEqual(date, $_today) ? ' ' + $theme.today : ''}"
-                role="columnheader"
-            >
-                <time
-                    datetime="{toISOString(date, 10)}"
-                    aria-label="{$_intlDayHeaderAL.format(date)}"
-                    use:setContent={$_intlDayHeader.format(date)}
-                ></time>
+<section
+    bind:this={$_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={$_sidebarWidth}></aside>
+        <div class="{$theme.grid}" role="row">
+            {#if header}
+                {@render header(grid)}
+            {: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}
+                        {#each days as day}
+                            <Day {day} allDay/>
+                        {/each}
+                    {/each}
+                </div>
+                <div class="{$theme.events}">
+                    {#each allDayChunks as chunk, i}
+                        <!-- svelte-ignore binding_property_non_reactive -->
+                        <AllDayEvent bind:this={refs[i]} {chunk}/>
+                    {/each}
+                    {#each allDayBgChunks as chunk}
+                        <AllDayEvent {chunk}/>
+                    {/each}
+                    {#each allDayIChunks as chunk}
+                        <AllDayEvent {chunk}/>
+                    {/each}
+                </div>
             </div>
-        {/each}
-    </Section>
-    <div class="{$theme.hiddenScroll}"></div>
-</div>
-{#if $allDaySlot}
-    <div class="{$theme.allDay}">
-        <div class="{$theme.content}">
-            <Section>
-                <Week dates={$_viewDates}/>
-            </Section>
-            <div class="{$theme.hiddenScroll}"></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}
+                {#each days as day}
+                    <Day {day}/>
+                {/each}
+            {/each}
+        </div>
+        <div class="{$theme.events}">
+            {#each chunks as chunk}
+                <Event {chunk}/>
+            {/each}
+            {#each bgChunks as chunk}
+                <Event {chunk}/>
+            {/each}
+            {#each iChunks as chunk}
+                <Event {chunk}/>
+            {/each}
         </div>
     </div>
-{/if}
-<Body>
-{#each $_viewDates as date}
-    <Day {date}/>
-{/each}
-</Body>
+
+    {#if $showNowIndicator}
+        {#if nowIndicator}
+            {@render nowIndicator(grid)}
+        {:else}
+            <NowIndicator days={grid[0]}/>
+        {/if}
+    {/if}
+</section>

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

@@ -1,14 +1,12 @@
 import {btnTextDay, btnTextWeek, themeView} from '#lib';
-import {slotTimeLimits, times} from './stores.js';
+import {createTROptions, createTRROptions, createTRRParsers} from './options.js';
+import {createTRRStores, createTRStores} from './stores.js';
 import View from './View.svelte';
 
-export {default as Section} from './Section.svelte';
-export {default as Body} from './Body.svelte';
-export {default as Day} from './Day.svelte';
-export {default as Week} from './all-day/Week.svelte';
-
 export default {
     createOptions(options) {
+        createTROptions(options);
+        createTRROptions(options);
         // Common options
         options.buttonText.timeGridDay = 'day';
         options.buttonText.timeGridWeek = 'week';
@@ -29,8 +27,12 @@ export default {
         };
     },
 
+    createParsers(parsers) {
+        createTRRParsers(parsers);
+    },
+
     createStores(state) {
-        state._slotTimeLimits = slotTimeLimits(state);  // flexible limits
-        state._times = times(state);
+        createTRRStores(state);
+        createTRStores(state);
     }
 }

package/src/plugins/time-grid/lib.js

@@ -0,0 +1,142 @@
+import {
+    addDay, addDuration, assign, bgEvent, cloneDate, createAllDayChunks, createEventChunk, datesEqual, eventIntersects,
+    isFunction, outsideRange, prepareAllDayChunks,
+} from '#lib';
+
+/**
+ * Days with prepared start and end times
+ */
+export function createGrid($_viewDates, $_slotTimeLimits, $validRange, $highlightedDates) {
+    let days = [];
+    let gridColumn = 1;
+    for (let date of $_viewDates) {
+        days.push({
+            gridColumn,
+            gridRow: 1,
+            resource: undefined,
+            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;
+    }
+
+    return [days];
+}
+
+export function createEventChunks($_filteredEvents, grid) {
+    let chunks = [];
+    let bgChunks = [];
+    let allDayChunks = [];
+    let allDayBgChunks = [];
+    for (let event of $_filteredEvents) {
+        for (let days of grid) {
+            if (bgEvent(event.display)) {
+                bgChunks = bgChunks.concat(createChunks(event, days));
+                if (event.allDay) {
+                    allDayBgChunks = allDayBgChunks.concat(createAllDayChunks(event, days));
+                }
+            } else {
+                if (event.allDay) {
+                    allDayChunks = allDayChunks.concat(createAllDayChunks(event, days));
+                } else {
+                    chunks = chunks.concat(createChunks(event, days));
+                }
+            }
+        }
+    }
+    groupChunks(chunks);
+    prepareAllDayChunks(allDayChunks);
+
+    return {chunks, bgChunks, allDayChunks, allDayBgChunks};
+}
+
+export function createIEventChunks($_iEvents, grid) {
+    let iChunks = [];
+    let allDayIChunks = [];
+    for (let event of $_iEvents) {
+        if (!event) {
+            continue;
+        }
+        for (let days of grid) {
+            if (event.allDay) {
+                allDayIChunks = allDayIChunks.concat(createAllDayChunks(event, days));
+            } else {
+                iChunks = iChunks.concat(createChunks(event, days));
+            }
+        }
+    }
+
+    return {iChunks, allDayIChunks};
+}
+
+function createChunks(event, days) {
+    let chunks = [];
+    for (let {gridColumn, gridRow, resource, start, end, disabled} of days) {
+        if (!disabled && eventIntersects(event, start, end, resource)) {
+            let chunk = createEventChunk(event, start, end);
+            // Chunk layout
+            assign(chunk, {
+                gridColumn,
+                gridRow,
+                top: (chunk.start - start) / 1000,
+                height: (chunk.end - chunk.start) / 1000,
+                maxHeight: (end - chunk.start) / 1000
+            });
+            chunks.push(chunk);
+        }
+    }
+    return chunks;
+}
+
+function groupChunks(chunks) {
+    let groups = {};
+    for (let chunk of chunks) {
+        let {gridColumn} = chunk;
+        let group = groups[gridColumn];
+        let column = 0;
+        if (group && chunk.start < group.end) {
+            for (; column < group.columns.length; ++ column) {
+                if (group.columns[column].at(-1).end <= chunk.start) {
+                    break;
+                }
+            }
+            if (chunk.end > group.end) {
+                group.end = chunk.end;
+            }
+        } else {
+            group = {
+                columns: [],
+                end: chunk.end
+            };
+        }
+        if (group.columns.length < column + 1) {
+            group.columns.push([]);
+        }
+        group.columns[column].push(chunk);
+        groups[gridColumn] = group;
+        // Chunk layout
+        chunk.group = group;
+        chunk.groupColumn = column;
+    }
+}
+
+export function createAllDayContent(allDayContent) {
+    let text = 'all-day';
+    let content;
+    if (allDayContent) {
+        content = isFunction(allDayContent) ? allDayContent({text}) : allDayContent;
+        if (typeof content === 'string') {
+            content = {html: content};
+        }
+    } else {
+        content = {
+            html: text
+        };
+    }
+
+    return content;
+}

package/src/plugins/time-grid/options.js

@@ -0,0 +1,57 @@
+import {assign, createDuration} from '#lib';
+
+/**
+ * TimeGrid + ResourceTimeGrid
+ */
+export function createTROptions(options) {
+    if (!('allDaySlot' in options)) {
+        assign(options, {
+            allDayContent: undefined,
+            allDaySlot: true,
+            slotEventOverlap: true
+        });
+    }
+}
+
+/**
+ * TimeGrid + ResourceTimeGrid + ResourceTimeline
+ */
+export function createTRROptions(options) {
+    if (!('scrollTime' in options)) {
+        assign(options, {
+            columnWidth: undefined,  // ec option
+            flexibleSlotTimeLimits: false,  // ec option
+            nowIndicator: false,
+            scrollTime: '06:00:00',
+            slotDuration: '00:30:00',
+            slotHeight: 24,  // ec option
+            slotLabelInterval: undefined,
+            slotLabelFormat: {
+                hour: 'numeric',
+                minute: '2-digit'
+            },
+            slotMaxTime: '24:00:00',
+            slotMinTime: '00:00:00'
+        });
+        assign(options.theme, {
+            nowIndicator: 'ec-now-indicator',
+            sidebar: 'ec-sidebar',
+            slot: 'ec-slot',
+        });
+    }
+}
+
+/**
+ * TimeGrid + ResourceTimeGrid + ResourceTimeline
+ */
+export function createTRRParsers(parsers) {
+    if (!('scrollTime' in parsers)) {
+        assign(parsers, {
+            scrollTime: createDuration,
+            slotDuration: createDuration,
+            slotLabelInterval: input => input !== undefined ? createDuration(input) : undefined,
+            slotMaxTime: createDuration,
+            slotMinTime: createDuration
+        });
+    }
+}