@event-calendar/core 2.7.2 → 3.0.0

package/index.js

@@ -172,6 +172,13 @@ function copyTime(toDate, fromDate) {
     return toDate;
 }
 
+/**
+ * Get duration value in seconds or default value if duration is undefined
+ */
+function toSeconds(duration, defaultValue = 0) {
+    return duration?.seconds ?? defaultValue;
+}
+
 /**
  * Private functions
  */
@@ -230,6 +237,10 @@ function floor(value) {
     return Math.floor(value);
 }
 
+function ceil(value) {
+    return Math.ceil(value);
+}
+
 function min(...args) {
     return Math.min(...args);
 }
@@ -332,26 +343,47 @@ function listView(view) {
     return view.startsWith('list');
 }
 
+function timelineView(view) {
+    return view.includes('Timeline');
+}
+
 let eventId = 1;
 function createEvents(input) {
-    return input.map(event => ({
-        id: 'id' in event ? String(event.id) : `{generated-${eventId++}}`,
-        resourceIds: Array.isArray(event.resourceIds)
-            ? event.resourceIds.map(String)
-            : ('resourceId' in event ? [String(event.resourceId)] : []),
-        allDay: event.allDay ?? (noTimePart(event.start) && noTimePart(event.end)),
-        start: createDate(event.start),
-        end: createDate(event.end),
-        title: event.title || '',
-        titleHTML: event.titleHTML || '',
-        editable: event.editable,
-        startEditable: event.startEditable,
-        durationEditable: event.durationEditable,
-        display: event.display || 'auto',
-        extendedProps: event.extendedProps || {},
-        backgroundColor: event.backgroundColor || event.color,
-        textColor: event.textColor
-    }));
+    return input.map(event => {
+        let result = {
+            id: 'id' in event ? String(event.id) : `{generated-${eventId++}}`,
+            resourceIds: Array.isArray(event.resourceIds)
+                ? event.resourceIds.map(String)
+                : ('resourceId' in event ? [String(event.resourceId)] : []),
+            allDay: event.allDay ?? (noTimePart(event.start) && noTimePart(event.end)),
+            start: createDate(event.start),
+            end: createDate(event.end),
+            title: event.title || '',
+            titleHTML: event.titleHTML || '',
+            editable: event.editable,
+            startEditable: event.startEditable,
+            durationEditable: event.durationEditable,
+            display: event.display || 'auto',
+            extendedProps: event.extendedProps || {},
+            backgroundColor: event.backgroundColor || event.color,
+            textColor: event.textColor
+        };
+
+        if (result.allDay) {
+            // Make sure all-day events start and end at midnight
+            setMidnight(result.start);
+            let end = cloneDate(result.end);
+            setMidnight(result.end);
+            if (
+                !datesEqual(result.end, end) ||
+                datesEqual(result.end, result.start)  /** @see https://github.com/vkurko/calendar/issues/50 */
+            ) {
+                addDay(result.end);
+            }
+        }
+
+        return result;
+    });
 }
 
 function createEventSources(input) {
@@ -486,12 +518,6 @@ function prepareEventChunks(chunks, hiddenDays) {
                 chunk.date = dates[0];
                 chunk.days = dates.length;
                 chunk.dates = dates;
-                if (chunk.start < dates[0]) {
-                    chunk.start = dates[0];
-                }
-                if (setMidnight(cloneDate(chunk.end)) > dates[dates.length - 1]) {
-                    chunk.end = dates[dates.length - 1];
-                }
             } else {
                 chunk.date = setMidnight(cloneDate(chunk.start));
                 chunk.days = 1;
@@ -516,7 +542,7 @@ function repositionEvent(chunk, longChunks, height) {
     chunk.bottom = chunk.top + height;
     let margin = 1;
     let key = chunk.date.getTime();
-    if (longChunks[key]?.sorted || longChunks[key]?.chunks.every(chunk => 'top' in chunk)) {
+    if (longChunks[key]) {
         if (!longChunks[key].sorted) {
             longChunks[key].chunks.sort((a, b) => a.top - b.top);
             longChunks[key].sorted = true;
@@ -536,9 +562,11 @@ function repositionEvent(chunk, longChunks, height) {
 
 function runReposition(refs, data) {
     refs.length = data.length;
+    let result = [];
     for (let ref of refs) {
-        ref?.reposition?.();
+        result.push(ref?.reposition?.());
     }
+    return result;
 }
 
 /**
@@ -547,13 +575,10 @@ function runReposition(refs, data) {
  * @param start
  * @param end
  * @param [resource]
- * @param [timeMode]  Zero-length events should be allowed (@see https://github.com/vkurko/calendar/issues/50), except in time mode
  * @return boolean
  */
-function eventIntersects(event, start, end, resource, timeMode) {
-    return (
-        event.start < end && event.end > start || !timeMode && datesEqual(event.start, event.end, start)
-    ) && (
+function eventIntersects(event, start, end, resource) {
+    return event.start < end && event.end > start && (
         resource === undefined || event.resourceIds.includes(resource.id)
     );
 }
@@ -666,6 +691,69 @@ function _getParts(source, parts) {
     return result;
 }
 
+function createTimes(date, $slotDuration, $_slotTimeLimits, $_intlSlotLabel, $_intlDayHeaderAL) {
+    date = cloneDate(date);
+    let compact = $slotDuration.seconds < 3600;
+    let times = [];
+    let end = cloneDate(date);
+    let i = 1;
+    addDuration(date, $_slotTimeLimits.min);
+    addDuration(end, $_slotTimeLimits.max);
+    while (date < end) {
+        times.push([
+            toISOString(date),
+            $_intlSlotLabel.format(date),
+            times.length && (i || !compact),
+            $_intlDayHeaderAL && $_intlDayHeaderAL.format(date)
+        ]);
+        addDuration(date, $slotDuration);
+        i = 1 - i;
+    }
+
+    return times;
+}
+
+function createSlotTimeLimits($slotMinTime, $slotMaxTime, $flexibleSlotTimeLimits, $_viewDates, $_events) {
+    let min$1 = createDuration($slotMinTime);
+    let max$1 = createDuration($slotMaxTime);
+
+    if ($flexibleSlotTimeLimits) {
+        // If slotMaxTime goes past midnight, then extend it back by a maximum of 24 hours
+        let minMin = createDuration(min(toSeconds(min$1), max(0, toSeconds(max$1) - DAY_IN_SECONDS)));
+        let maxMax = createDuration(max(toSeconds(max$1), toSeconds(minMin) + DAY_IN_SECONDS));
+        let filter = is_function($flexibleSlotTimeLimits?.eventFilter)
+            ? $flexibleSlotTimeLimits.eventFilter
+            : event => !bgEvent(event.display);
+        loop: for (let date of $_viewDates) {
+            let start = addDuration(cloneDate(date), min$1);
+            let end = addDuration(cloneDate(date), max$1);
+            let minStart = addDuration(cloneDate(date), minMin);
+            let maxEnd = addDuration(cloneDate(date), maxMax);
+            for (let event of $_events) {
+                if (!event.allDay && filter(event) && event.start < maxEnd && event.end > minStart) {
+                    if (event.start < start) {
+                        let seconds = max((event.start - date) / 1000, toSeconds(minMin));
+                        if (seconds < toSeconds(min$1)) {
+                            min$1.seconds = seconds;
+                        }
+                    }
+                    if (event.end > end) {
+                        let seconds = min((event.end - date) / 1000, toSeconds(maxMax));
+                        if (seconds > toSeconds(max$1)) {
+                            max$1.seconds = seconds;
+                        }
+                    }
+                    if (toSeconds(min$1) === toSeconds(minMin) && toSeconds(max$1) === toSeconds(maxMax)) {
+                        break loop;
+                    }
+                }
+            }
+        }
+    }
+
+    return {min: min$1, max: max$1};
+}
+
 function createOptions(plugins) {
     let options = {
         allDayContent: undefined,
@@ -716,6 +804,9 @@ function createOptions(plugins) {
         loading: undefined,
         locale: undefined,
         nowIndicator: false,
+        resourceLabelContent: undefined,
+        resourceLabelDidMount: undefined,
+        resources: [],
         selectable: false,
         scrollTime: '06:00:00',
         slotDuration: '00:30:00',
@@ -727,6 +818,7 @@ function createOptions(plugins) {
         },
         slotMaxTime: '24:00:00',
         slotMinTime: '00:00:00',
+        slotWidth: 52,
         theme: {
             allDay: 'ec-all-day',
             active: 'ec-active',
@@ -756,6 +848,7 @@ function createOptions(plugins) {
             lines: 'ec-lines',
             nowIndicator: 'ec-now-indicator',
             otherMonth: 'ec-other-month',
+            resource: 'ec-resource',
             sidebar: 'ec-sidebar',
             sidebarTitle: 'ec-sidebar-title',
             today: 'ec-today',
@@ -2499,7 +2592,7 @@ function instance($$self, $$props, $$invalidate) {
 
 	function dateFromPoint(x, y) {
 		let dayEl = getElementWithPayload(x, y);
-		return dayEl ? getPayload(dayEl)(y) : null;
+		return dayEl ? getPayload(dayEl)(x, y) : null;
 	}
 
 	function destroy() {
@@ -2650,4 +2743,4 @@ class Calendar extends SvelteComponent {
 	}
 }
 
-export { DAY_IN_SECONDS, addDay, addDuration, ancestor, assign, bgEvent, btnTextDay, btnTextMonth, btnTextWeek, btnTextYear, cloneDate, cloneEvent, copyTime, createDate, createDuration, createElement, createEventChunk, createEventClasses, createEventContent, createEventSources, createEvents, createView, datesEqual, debounce, Calendar as default, eventIntersects, floor, flushDebounce, getElementWithPayload, getPayload, ghostEvent, hasPayload, hasYScroll, height, helperEvent, intl, intlRange, keyEnter, keys, listView, max, min, nextClosestDay, noTimePart, outsideEvent, pointerEvent, prepareEventChunks, prevClosestDay, previewEvent, rect, repositionEvent, runReposition, setContent, setMidnight, setPayload, sortEventChunks, subtractDay, subtractDuration, symbol, task, themeView, toEventWithLocalDates, toISOString, toLocalDate, toViewWithLocalDates };
+export { DAY_IN_SECONDS, addDay, addDuration, ancestor, assign, bgEvent, btnTextDay, btnTextMonth, btnTextWeek, btnTextYear, ceil, cloneDate, cloneEvent, copyTime, createDate, createDuration, createElement, createEventChunk, createEventClasses, createEventContent, createEventSources, createEvents, createSlotTimeLimits, createTimes, createView, datesEqual, debounce, Calendar as default, eventIntersects, floor, flushDebounce, getElementWithPayload, getPayload, ghostEvent, hasPayload, hasYScroll, height, helperEvent, intl, intlRange, keyEnter, keys, listView, max, min, nextClosestDay, noTimePart, outsideEvent, pointerEvent, prepareEventChunks, prevClosestDay, previewEvent, rect, repositionEvent, runReposition, setContent, setMidnight, setPayload, sortEventChunks, subtractDay, subtractDuration, symbol, task, themeView, timelineView, toEventWithLocalDates, toISOString, toLocalDate, toSeconds, toViewWithLocalDates };

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@event-calendar/core",
-  "version": "2.7.2",
+  "version": "3.0.0",
   "title": "Event Calendar Core package",
-  "description": "Full-sized drag & drop event calendar with resource view",
+  "description": "Full-sized drag & drop event calendar with resource & timeline views",
   "keywords": [
     "calendar",
     "event",
     "resource",
+    "timeline",
     "full-sized"
   ],
   "homepage": "https://vkurko.github.io/calendar/",

package/src/Calendar.svelte

@@ -104,7 +104,7 @@
 
     export function dateFromPoint(x, y) {
         let dayEl = getElementWithPayload(x, y);
-        return dayEl ? getPayload(dayEl)(y) : null;
+        return dayEl ? getPayload(dayEl)(x, y) : null;
     }
 
     export function destroy() {

package/src/lib/date.js

@@ -123,6 +123,13 @@ export function copyTime(toDate, fromDate) {
     return toDate;
 }
 
+/**
+ * Get duration value in seconds or default value if duration is undefined
+ */
+export function toSeconds(duration, defaultValue = 0) {
+    return duration?.seconds ?? defaultValue;
+}
+
 /**
  * Private functions
  */

package/src/lib/events.js

@@ -6,24 +6,41 @@ import {is_function} from 'svelte/internal';
 
 let eventId = 1;
 export function createEvents(input) {
-    return input.map(event => ({
-        id: 'id' in event ? String(event.id) : `{generated-${eventId++}}`,
-        resourceIds: Array.isArray(event.resourceIds)
-            ? event.resourceIds.map(String)
-            : ('resourceId' in event ? [String(event.resourceId)] : []),
-        allDay: event.allDay ?? (noTimePart(event.start) && noTimePart(event.end)),
-        start: createDate(event.start),
-        end: createDate(event.end),
-        title: event.title || '',
-        titleHTML: event.titleHTML || '',
-        editable: event.editable,
-        startEditable: event.startEditable,
-        durationEditable: event.durationEditable,
-        display: event.display || 'auto',
-        extendedProps: event.extendedProps || {},
-        backgroundColor: event.backgroundColor || event.color,
-        textColor: event.textColor
-    }));
+    return input.map(event => {
+        let result = {
+            id: 'id' in event ? String(event.id) : `{generated-${eventId++}}`,
+            resourceIds: Array.isArray(event.resourceIds)
+                ? event.resourceIds.map(String)
+                : ('resourceId' in event ? [String(event.resourceId)] : []),
+            allDay: event.allDay ?? (noTimePart(event.start) && noTimePart(event.end)),
+            start: createDate(event.start),
+            end: createDate(event.end),
+            title: event.title || '',
+            titleHTML: event.titleHTML || '',
+            editable: event.editable,
+            startEditable: event.startEditable,
+            durationEditable: event.durationEditable,
+            display: event.display || 'auto',
+            extendedProps: event.extendedProps || {},
+            backgroundColor: event.backgroundColor || event.color,
+            textColor: event.textColor
+        };
+
+        if (result.allDay) {
+            // Make sure all-day events start and end at midnight
+            setMidnight(result.start);
+            let end = cloneDate(result.end);
+            setMidnight(result.end);
+            if (
+                !datesEqual(result.end, end) ||
+                datesEqual(result.end, result.start)  /** @see https://github.com/vkurko/calendar/issues/50 */
+            ) {
+                addDay(result.end);
+            }
+        }
+
+        return result;
+    });
 }
 
 export function createEventSources(input) {
@@ -158,12 +175,6 @@ export function prepareEventChunks(chunks, hiddenDays) {
                 chunk.date = dates[0];
                 chunk.days = dates.length;
                 chunk.dates = dates;
-                if (chunk.start < dates[0]) {
-                    chunk.start = dates[0];
-                }
-                if (setMidnight(cloneDate(chunk.end)) > dates[dates.length - 1]) {
-                    chunk.end = dates[dates.length - 1];
-                }
             } else {
                 chunk.date = setMidnight(cloneDate(chunk.start));
                 chunk.days = 1;
@@ -188,7 +199,7 @@ export function repositionEvent(chunk, longChunks, height) {
     chunk.bottom = chunk.top + height;
     let margin = 1;
     let key = chunk.date.getTime();
-    if (longChunks[key]?.sorted || longChunks[key]?.chunks.every(chunk => 'top' in chunk)) {
+    if (longChunks[key]) {
         if (!longChunks[key].sorted) {
             longChunks[key].chunks.sort((a, b) => a.top - b.top);
             longChunks[key].sorted = true;
@@ -208,9 +219,11 @@ export function repositionEvent(chunk, longChunks, height) {
 
 export function runReposition(refs, data) {
     refs.length = data.length;
+    let result = [];
     for (let ref of refs) {
-        ref?.reposition?.();
+        result.push(ref?.reposition?.());
     }
+    return result;
 }
 
 /**
@@ -219,13 +232,10 @@ export function runReposition(refs, data) {
  * @param start
  * @param end
  * @param [resource]
- * @param [timeMode]  Zero-length events should be allowed (@see https://github.com/vkurko/calendar/issues/50), except in time mode
  * @return boolean
  */
-export function eventIntersects(event, start, end, resource, timeMode) {
-    return (
-        event.start < end && event.end > start || !timeMode && datesEqual(event.start, event.end, start)
-    ) && (
+export function eventIntersects(event, start, end, resource) {
+    return event.start < end && event.end > start && (
         resource === undefined || event.resourceIds.includes(resource.id)
     );
 }

package/src/lib/times.js

@@ -0,0 +1,67 @@
+import {is_function} from 'svelte/internal';
+import {addDuration, cloneDate, createDuration, DAY_IN_SECONDS, toISOString, toSeconds} from './date.js';
+import {max as maxFn, min as minFn} from './utils.js';
+import {bgEvent} from './events.js';
+
+export function createTimes(date, $slotDuration, $_slotTimeLimits, $_intlSlotLabel, $_intlDayHeaderAL) {
+    date = cloneDate(date);
+    let compact = $slotDuration.seconds < 3600;
+    let times = [];
+    let end = cloneDate(date);
+    let i = 1;
+    addDuration(date, $_slotTimeLimits.min);
+    addDuration(end, $_slotTimeLimits.max);
+    while (date < end) {
+        times.push([
+            toISOString(date),
+            $_intlSlotLabel.format(date),
+            times.length && (i || !compact),
+            $_intlDayHeaderAL && $_intlDayHeaderAL.format(date)
+        ]);
+        addDuration(date, $slotDuration);
+        i = 1 - i;
+    }
+
+    return times;
+}
+
+export function createSlotTimeLimits($slotMinTime, $slotMaxTime, $flexibleSlotTimeLimits, $_viewDates, $_events) {
+    let min = createDuration($slotMinTime);
+    let max = createDuration($slotMaxTime);
+
+    if ($flexibleSlotTimeLimits) {
+        // If slotMaxTime goes past midnight, then extend it back by a maximum of 24 hours
+        let minMin = createDuration(minFn(toSeconds(min), maxFn(0, toSeconds(max) - DAY_IN_SECONDS)));
+        let maxMax = createDuration(maxFn(toSeconds(max), toSeconds(minMin) + DAY_IN_SECONDS));
+        let filter = is_function($flexibleSlotTimeLimits?.eventFilter)
+            ? $flexibleSlotTimeLimits.eventFilter
+            : event => !bgEvent(event.display);
+        loop: for (let date of $_viewDates) {
+            let start = addDuration(cloneDate(date), min);
+            let end = addDuration(cloneDate(date), max);
+            let minStart = addDuration(cloneDate(date), minMin);
+            let maxEnd = addDuration(cloneDate(date), maxMax);
+            for (let event of $_events) {
+                if (!event.allDay && filter(event) && event.start < maxEnd && event.end > minStart) {
+                    if (event.start < start) {
+                        let seconds = maxFn((event.start - date) / 1000, toSeconds(minMin));
+                        if (seconds < toSeconds(min)) {
+                            min.seconds = seconds;
+                        }
+                    }
+                    if (event.end > end) {
+                        let seconds = minFn((event.end - date) / 1000, toSeconds(maxMax));
+                        if (seconds > toSeconds(max)) {
+                            max.seconds = seconds;
+                        }
+                    }
+                    if (toSeconds(min) === toSeconds(minMin) && toSeconds(max) === toSeconds(maxMax)) {
+                        break loop;
+                    }
+                }
+            }
+        }
+    }
+
+    return {min, max};
+}

package/src/lib/utils.js

@@ -10,6 +10,10 @@ export function floor(value) {
     return Math.floor(value);
 }
 
+export function ceil(value) {
+    return Math.ceil(value);
+}
+
 export function min(...args) {
     return Math.min(...args);
 }

package/src/lib/view.js

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

package/src/lib.js

@@ -1,10 +1,11 @@
 export * from './lib/a11y.js';
-export * from './lib/actions';
-export * from './lib/date';
-export * from './lib/debounce';
-export * from './lib/dom';
-export * from './lib/events';
-export * from './lib/options';
-export * from './lib/stores';
-export * from './lib/utils';
-export * from './lib/view';
+export * from './lib/actions.js';
+export * from './lib/date.js';
+export * from './lib/debounce.js';
+export * from './lib/dom.js';
+export * from './lib/events.js';
+export * from './lib/options.js';
+export * from './lib/stores.js';
+export * from './lib/times.js';
+export * from './lib/utils.js';
+export * from './lib/view.js';

package/src/storage/options.js

@@ -50,6 +50,9 @@ export function createOptions(plugins) {
         loading: undefined,
         locale: undefined,
         nowIndicator: false,
+        resourceLabelContent: undefined,
+        resourceLabelDidMount: undefined,
+        resources: [],
         selectable: false,
         scrollTime: '06:00:00',
         slotDuration: '00:30:00',
@@ -61,6 +64,7 @@ export function createOptions(plugins) {
         },
         slotMaxTime: '24:00:00',
         slotMinTime: '00:00:00',
+        slotWidth: 52,
         theme: {
             allDay: 'ec-all-day',
             active: 'ec-active',
@@ -90,6 +94,7 @@ export function createOptions(plugins) {
             lines: 'ec-lines',
             nowIndicator: 'ec-now-indicator',
             otherMonth: 'ec-other-month',
+            resource: 'ec-resource',
             sidebar: 'ec-sidebar',
             sidebarTitle: 'ec-sidebar-title',
             today: 'ec-today',