@event-calendar/core 5.1.3 → 5.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@event-calendar/core",
-  "version": "5.1.3",
+  "version": "5.2.0",
   "title": "Event Calendar Core package",
   "description": "Full-sized drag & drop event calendar with resource & timeline views",
   "keywords": [

package/src/Calendar.svelte

@@ -2,7 +2,7 @@
     import './styles/index.css';
     import {setContext, untrack} from 'svelte';
     import {
-        assign, cloneDate, createEvents, getElementWithPayload, getPayload, nextDate,
+        assign, cloneDate, createEvents, getElementWithPayload, getPayload, isArray, isDate, isPlainObject, nextDate,
         prevDate, toEventWithLocalDates, toLocalDate, toViewWithLocalDates
     } from '#lib';
     import MainState from './storage/state.svelte.js';
@@ -33,13 +33,19 @@
     });
 
     export function setOption(name, value) {
+        if (isPlainObject(value)) {
+            value = {...value};
+        }
+        if (isArray(value)) {
+            value = [...value];
+        }
         mainState.setOption(name, value, false);
         return this;
     }
 
     export function getOption(name) {
         let value = mainState.options[name];
-        return value instanceof Date ? toLocalDate(value) : value;
+        return isDate(value) ? toLocalDate(value) : value;
     }
 
     export function refetchEvents() {

package/src/lib/chunks.js

@@ -2,12 +2,17 @@ import {datesEqual} from './date.js';
 import {eventIntersects} from './events.js';
 import {assign} from './utils.js';
 
+// Storage of unique event identifiers for generating chunk ids
+const ids = new WeakMap();
+let idCounter = 1;
+
 /**
  * @returns {{
+ *   id: String,  // this can be used as key in Svelte keyed each block
  *   start: Date,
  *   end: Date,
  *   event: Object,
- *   zeroDuration?: boolean,
+ *   zeroDuration: boolean,
  *   gridColumn?: Number,
  *   gridRow?: Number,
  *   group?: Object,
@@ -25,14 +30,25 @@ import {assign} from './utils.js';
  * }}
  */
 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);
+    start = event.start > start ? event.start : start;
+    end = event.end < end ? event.end : end;
 
-    return chunk;
+    return {
+        start,
+        end,
+        event,
+        get id() {
+            let id = ids.get(event);
+            if (!id) {
+                id = idCounter++;
+                ids.set(event, id);
+            }
+            delete this.id;
+            this.id = `${id}-${start.getTime()}`;
+            return this.id;
+        },
+        zeroDuration: datesEqual(start, end)
+    };
 }
 
 /**
@@ -92,7 +108,7 @@ export function prepareAllDayChunks(chunks) {
     }
 }
 
-export function repositionEvent(chunk, height, top = 0) {
+export function repositionEvent(chunk, height, top = 1) {
     if (chunk.prev) {
         top = chunk.prev.bottom + 1;
     }

package/src/lib/date.js

@@ -1,8 +1,10 @@
+import {isDate} from './utils.js';
+
 export const DAY_IN_SECONDS = 86400;
 
 export function createDate(input = undefined) {
     if (input !== undefined) {
-        return input instanceof Date ? _fromLocalDate(input) : _fromISOString(input);
+        return isDate(input) ? _fromLocalDate(input) : _fromISOString(input);
     }
 
     return _fromLocalDate(new Date());
@@ -18,7 +20,7 @@ export function createDuration(input) {
             seconds += parseInt(part, 10) * Math.pow(60, exp--);
         }
         input = {seconds};
-    } else if (input instanceof Date) {
+    } else if (isDate(input)) {
         input = {hours: input.getUTCHours(), minutes: input.getUTCMinutes(), seconds: input.getUTCSeconds()};
     }
 

package/src/lib/utils.js

@@ -10,10 +10,6 @@ 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);
 }
@@ -42,6 +38,18 @@ export function isFunction(value) {
     return typeof value === 'function';
 }
 
+export function isPlainObject(value) {
+    if (typeof value !== 'object' || value === null) {
+        return false;
+    }
+    const prototype = Object.getPrototypeOf(value);
+    return prototype === null || prototype === Object.prototype;
+}
+
+export function isDate(value) {
+    return value instanceof Date;
+}
+
 export function run(fn) {
     return fn();
 }

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

@@ -10,7 +10,7 @@
     let mainState = getContext('state');
     let viewState = getContext('view-state');
 
-    let {options: {date, firstDay, moreLinkContent, theme, weekNumbers, weekNumberContent}} = $derived(mainState);
+    let {features, options: {date, firstDay, moreLinkContent, theme, weekNumbers, weekNumberContent}} = $derived(mainState);
     let {hiddenChunks, intlDayCell} = $derived(viewState);
 
     let {dayStart, disabled, highlight} = $derived(day);
@@ -59,10 +59,12 @@
 
 <BaseDay date={dayStart} allDay {classes} {disabled} {highlight} {noIeb} {noBeb}>
     <div class="{theme.dayHead}">
-        <time
-            datetime="{toISOString(dayStart, 10)}"
-            {@attach contentFrom(intlDayCell.format(dayStart))}
-        ></time>
+        {#if features.includes('dayNumber')}
+            <time
+                datetime="{toISOString(dayStart, 10)}"
+                {@attach contentFrom(intlDayCell.format(dayStart))}
+            ></time>
+        {/if}
         {#if showWeekNumber}
             <span
                 class="{theme.weekNumber}"

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

@@ -9,7 +9,7 @@
     let {colsCount, gridEl, hiddenChunks, popupDay} = $derived(getContext('view-state'));
 
     let el = $state();
-    let margin = $state(0);
+    let margin = $state(1);
     let hidden = $state(false);
 
     let event = $derived(chunk.event);
@@ -18,7 +18,7 @@
 
     $effect(() => {
         if (!inPopup) {
-            margin = height(dayEl.firstElementChild);
+            margin = height(dayEl.firstElementChild) || 1;
         }
     });
 
@@ -44,7 +44,7 @@
     });
 
     export function reposition() {
-        margin = repositionEvent(chunk, height(el), height(dayEl.firstElementChild));
+        margin = repositionEvent(chunk, height(el), height(dayEl.firstElementChild) || 1);
     }
 
     export function hide() {

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

@@ -62,8 +62,7 @@
         let top;
         if (popupRect.height >= gridRect.height) {
             top = gridRect.top - dayRect.top;
-            let bottom = dayRect.bottom - gridRect.bottom;
-            style += `inset-block-end:${bottom}px;`;
+            style += `block-size:${gridRect.height}px;`;
         } else {
             top = (dayRect.height - popupRect.height) / 2;
             if (dayRect.top + top < gridRect.top) {

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

@@ -1,5 +1,5 @@
 <script>
-    import {getContext, setContext} from 'svelte';
+    import {getContext, setContext, tick} from 'svelte';
     import {contentFrom, resizeObserver, runReposition} from '#lib';
     import ViewState from './state.svelte.js';
     import Day from './Day.svelte';
@@ -16,14 +16,16 @@
     // Events reposition
     let refs = [];
     function reposition() {
-        hiddenChunks.clear();
         runReposition(refs, chunks);
+        hiddenChunks.clear();
+        tick().then(hide);
     }
-    $effect(reposition);
-    $effect(() => {
-        chunks;
+    function hide() {
+        hiddenChunks.size;
         refs.forEach(ref => ref.hide());
-    });
+    }
+    $effect(reposition);
+    $effect(hide);
 </script>
 
 <section
@@ -59,11 +61,11 @@
             {/each}
         </div>
         <div class="{theme.events}">
-            {#each chunks as chunk, i}
+            {#each chunks as chunk, i (chunk.id)}
                 <!-- svelte-ignore binding_property_non_reactive -->
                 <Event bind:this={refs[i]} {chunk}/>
             {/each}
-            {#each bgChunks as chunk}
+            {#each bgChunks as chunk (chunk.id)}
                 <Event {chunk}/>
             {/each}
             {#each iChunks as chunk}

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

@@ -4,11 +4,11 @@ import {addDay, bgEvent, cloneDate, createAllDayChunks, datesEqual, outsideRange
 export function colsCount(mainState) {
     return () => {
         // Dependencies
-        let {options: {hiddenDays}} = mainState;
+        let {viewDates, options: {duration, hiddenDays}} = mainState;
 
         let count;
 
-        untrack(() => count = 7 - hiddenDays.length);
+        untrack(() => count = duration.months || duration.inWeeks ? 7 - hiddenDays.length : viewDates.length);
 
         return count;
     };

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

@@ -1,4 +1,4 @@
-import {assign, btnTextMonth, nextClosestDay, prevClosestDay, themeView} from '#lib';
+import {assign, btnTextDay, btnTextMonth, btnTextWeek, nextClosestDay, prevClosestDay, themeView} from '#lib';
 import View from './View.svelte';
 
 export default {
@@ -14,7 +14,9 @@ export default {
             view: 'dayGridMonth'
         });
         assign(options.buttonText, {
+            dayGridDay: 'day',
             dayGridMonth: 'month',
+            dayGridWeek: 'week',
             close: 'Close'
         });
         assign(options.theme, {
@@ -25,9 +27,23 @@ export default {
             weekNumber: 'ec-week-number'
         });
         assign(options.views, {
+            dayGridDay: {
+                buttonText: btnTextDay,
+                component: () => View,
+                dayHeaderFormat: {weekday: 'long'},
+                displayEventEnd: false,
+                duration: {days: 1},
+                theme: themeView('ec-day-grid ec-day-view')
+            },
+            dayGridWeek: {
+                buttonText: btnTextWeek,
+                component: () => View,
+                displayEventEnd: false,
+                theme: themeView('ec-day-grid ec-week-view')
+            },
             dayGridMonth: {
                 buttonText: btnTextMonth,
-                component: initViewComponent,
+                component: initMonthViewComponent,
                 dayHeaderFormat: {weekday: 'short'},
                 dayHeaderAriaLabelFormat: {weekday: 'long'},
                 displayEventEnd: false,
@@ -39,8 +55,8 @@ export default {
     }
 }
 
-function initViewComponent(mainState) {
-    mainState.features = ['day-grid'];
+function initMonthViewComponent(mainState) {
+    mainState.features = ['dayNumber'];
     mainState.extensions.activeRange = (start, end) => {
         // Dependencies
         let {options: {firstDay}} = mainState;

package/src/plugins/list/Day.svelte

@@ -38,7 +38,7 @@
             <time {datetime} {@attach contentFrom(intlListDay.format(date))}></time>
             <time class="{theme.daySide}" {datetime} {@attach contentFrom(intlListDaySide.format(date))}></time>
         </h4>
-        {#each chunks as chunk (chunk.event)}
+        {#each chunks as chunk (chunk.id)}
             <Event {chunk}/>
         {/each}
     </BaseDay>

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

@@ -27,24 +27,33 @@
         tick().then(scrollToTime);
     });
     function scrollToTime() {
-        if (monthView) {
-            return;
-        }
         let scrollLeft = 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);
+        if (monthView) {
+            if (!todayOutOfView) {
+                let days = grid[0];
+                for (let day of days) {
+                    if (datesEqual(day.dayStart, today)) {
+                        mainEl.scrollLeft = (mainEl.scrollWidth - sidebarWidth) / days.length * (day.gridColumn - 1) * (isRtl() ? -1 : 1);
+                        break;
+                    }
+                }
+            }
+        } else {
+            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);
+                }
             }
+            mainEl.scrollLeft = scrollLeft / toSeconds(slotDuration) * slotWidth * (isRtl() ? -1 : 1);
         }
-        mainEl.scrollLeft = scrollLeft / toSeconds(slotDuration) * slotWidth * (isRtl() ? -1 : 1);
     }
 
     // Events reposition
@@ -115,11 +124,11 @@
             {/each}
         </div>
         <div class="{theme.events}">
-            {#each chunks as chunk, i}
+            {#each chunks as chunk, i (chunk.id)}
                 <!-- svelte-ignore binding_property_non_reactive -->
                 <Event bind:this={refs[i]} {chunk}/>
             {/each}
-            {#each bgChunks as chunk}
+            {#each bgChunks as chunk (chunk.id)}
                 <Event {chunk}/>
             {/each}
             {#each iChunks as chunk}

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

@@ -46,7 +46,7 @@ export function eventChunks(mainState, viewState) {
     return () => {
         // Dependencies
         let {filteredEvents} = mainState;
-        let {grid} = viewState;
+        let {grid, monthView} = viewState;
 
         let chunks = [];
         let bgChunks = [];
@@ -55,9 +55,11 @@ export function eventChunks(mainState, viewState) {
             for (let event of filteredEvents) {
                 for (let days of grid) {
                     if (bgEvent(event.display)) {
-                        bgChunks = bgChunks.concat(createChunks(event, days));
+                        if (!monthView || event.allDay) {
+                            bgChunks = bgChunks.concat(createChunks(event, days, monthView));
+                        }
                     } else {
-                        chunks = chunks.concat(createChunks(event, days));
+                        chunks = chunks.concat(createChunks(event, days, monthView));
                     }
                 }
             }

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

@@ -1,6 +1,6 @@
 import {assign, createDuration, createEventChunk, eventIntersects, max, min} from '#lib';
 
-export function createChunks(event, days) {
+export function createChunks(event, days, monthView) {
     let dates = [];
     let firstStart;
     let lastEnd;
@@ -8,17 +8,31 @@ export function createChunks(event, days) {
     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;
+    for (let {gridColumn: column, gridRow: row, resource, dayStart, dayEnd, start, end, disabled} of days) {
+        if (!disabled) {
+            if (monthView) {
+                if (eventIntersects(event, dayStart, dayEnd, resource)) {
+                    if (!dates.length) {
+                        firstStart = dayStart;
+                        gridColumn = column;
+                        gridRow = row;
+                    }
+                    dates.push(dayStart);
+                    lastEnd = end;
+                }
+            } else {
+                if (eventIntersects(event, start, end, resource)) {
+                    if (!dates.length) {
+                        firstStart = start;
+                        gridColumn = column;
+                        gridRow = row;
+                        left = max(event.start - start, 0) / 1000;
+                    }
+                    dates.push(dayStart);
+                    lastEnd = end;
+                    width += (min(end, event.end) - max(start, event.start)) / 1000;
+                }
             }
-            dates.push(dayStart);
-            lastEnd = end;
-            width += (min(end, event.end) - max(start, event.start)) / 1000;
         }
     }
     if (dates.length) {

package/src/plugins/resource-timeline/state.svelte.js

@@ -8,11 +8,11 @@ export default class ViewState extends RRState(TRRState()) {
         this.dayTimeLimits = $derived.by(dayTimeLimits(mainState));  // flexible time limits per day
         this.daySlots = $derived.by(daySlots(mainState, this));
         this.grid = $derived.by(grid(mainState, this));
+        this.monthView = $derived.by(monthView(mainState));
         let {chunks, bgChunks} = $derived.by(eventChunks(mainState, this));
         this.chunks = $derived(chunks);
         this.bgChunks = $derived(bgChunks);
         this.iChunks = $derived.by(iEventChunks(mainState, this));
-        this.monthView = $derived.by(monthView(mainState));
         this.nestedResources = $derived.by(nestedResources(mainState));
     }
 }

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

@@ -84,11 +84,11 @@
                     {/each}
                 </div>
                 <div class="{theme.events}">
-                    {#each allDayChunks as chunk, i}
+                    {#each allDayChunks as chunk, i (chunk.id)}
                         <!-- svelte-ignore binding_property_non_reactive -->
                         <AllDayEvent bind:this={refs[i]} {chunk}/>
                     {/each}
-                    {#each allDayBgChunks as chunk}
+                    {#each allDayBgChunks as chunk (chunk.id)}
                         <AllDayEvent {chunk}/>
                     {/each}
                     {#each allDayIChunks as chunk}
@@ -121,10 +121,10 @@
             {/each}
         </div>
         <div class="{theme.events}">
-            {#each chunks as chunk}
+            {#each chunks as chunk (chunk.id)}
                 <Event {chunk}/>
             {/each}
-            {#each bgChunks as chunk}
+            {#each bgChunks as chunk (chunk.id)}
                 <Event {chunk}/>
             {/each}
             {#each iChunks as chunk}

package/src/storage/derived.js

@@ -1,6 +1,6 @@
 import {untrack} from 'svelte';
 import {
-    addDay, addDuration, cloneDate, createView, isFunction, prevClosestDay, setMidnight, subtractDay,
+    addDay, addDuration, cloneDate, createView, isFunction, prevClosestDay, subtractDay,
     toEventWithLocalDates, toViewWithLocalDates
 } from '#lib';
 
@@ -91,8 +91,8 @@ export function viewDates(mainState) {
         let dates = [];
 
         untrack(() => {
-            let date = setMidnight(cloneDate(activeRange.start));
-            let end = setMidnight(cloneDate(activeRange.end));
+            let date = cloneDate(activeRange.start);
+            let end = cloneDate(activeRange.end);
             while (date < end) {
                 if (!hiddenDays.includes(date.getUTCDay())) {
                     dates.push(cloneDate(date));
@@ -114,14 +114,12 @@ export function viewDates(mainState) {
 export function viewTitle(mainState) {
     return () => {
         // Dependencies
-        let {activeRange, intlTitle, features, options: {date}} = mainState;
+        let {currentRange, intlTitle} = mainState;
 
         let title;
 
         untrack(() => {
-            title = features.includes('day-grid')
-                ? intlTitle.formatRange(date, date)
-                : intlTitle.formatRange(activeRange.start, subtractDay(cloneDate(activeRange.end)));
+            title = intlTitle.formatRange(currentRange.start, subtractDay(cloneDate(currentRange.end)));
         });
 
         return title;

package/src/storage/effects.js

@@ -143,7 +143,7 @@ export function runEventAllUpdated(mainState) {
 export function runViewDidMount(mainState) {
     return () => {
         // Dependencies
-        let {viewComponent, options: {viewDidMount}} = mainState;
+        let {options: {view, viewDidMount}} = mainState;
 
         untrack(() => {
             if (isFunction(viewDidMount)) {

package/src/styles/days.css

@@ -81,7 +81,10 @@
     display: flex;
     flex-direction: row-reverse;
     justify-content: space-between;
-    padding: .375rem;
+
+    .ec-day-grid.ec-month-view & {
+        padding: .375rem;
+    }
 
     .ec-day.ec-other-month & time {
         opacity: .3;

package/src/styles/popup.css

@@ -2,10 +2,11 @@
     position: relative;
     display: flex;
     flex-direction: column;
+    box-sizing: border-box;
     block-size: max-content;
-    inline-size: 110%;
-    min-block-size: 6em;
-    min-inline-size: 10em;
+    inline-size: 125%;
+    min-block-size: 8em;
+    min-inline-size: 12em;
     padding: .375rem .75rem .75rem;
     background-color: var(--ec-popup-bg-color);
     border: 1px solid var(--ec-border-color);
@@ -26,5 +27,7 @@
     .ec-events {
         --ec-event-col-gap: 0;
         display: block;
+        overflow-y: auto;
+        pointer-events: auto;
     }
 }