npm - @event-calendar/core - Versions diffs - 1.5.1 → 2.0.0 - Mend

@event-calendar/core 1.5.1 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/README.md CHANGED Viewed

@@ -4,7 +4,7 @@ See [demo](https://vkurko.github.io/calendar/) and [changelog](CHANGELOG.md).
 Full-sized drag & drop JavaScript event calendar with resource view:
-* Lightweight (28kb [br](https://en.wikipedia.org/wiki/Brotli) compressed)
+* Lightweight (31kb [br](https://en.wikipedia.org/wiki/Brotli) compressed)
 * Zero-dependency (pre-built bundle)
 * Used on over 70,000 websites with [Bookly](https://wordpress.org/plugins/bookly-responsive-appointment-booking-tool/)
@@ -194,8 +194,8 @@ import '@event-calendar/core/index.css';
 ### Pre-built browser ready bundle
 Include the following lines of code in the `<head>` section of your page:
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@1.5.1/event-calendar.min.css">
-<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@1.5.1/event-calendar.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.0.0/event-calendar.min.css">
+<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.0.0/event-calendar.min.js"></script>
 ```
 <details>
@@ -248,16 +248,16 @@ In Svelte, you can simply update the original `options` object.
 ## Options
 ### allDayContent
-- Type `string`, `object`or `function`
+- Type `Content` or `function`
 - Default `'all-day'`
 Defines the content that is displayed as a title of the `all-day` slot.
-This value can be either a string containing text `'...'`, an object containing the HTML string `{html: '<p>...</p>'}`, an object containing an array of DOM nodes `{domNodes: [node1, node2, ...]}` or a function that returns any of the above formats:
+This value can be either a [Content](#content) or a function that returns content:
 ```js
 function (arg) {
-    // return string or object
+    // return Content
 }
 ```
 `arg` is an object with the following properties:
@@ -461,11 +461,11 @@ The current [View](#view-object) object
 Defines the text that is displayed on the calendar’s column headings.
-This value can be either an object with options for the native JavaScript [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) object, or a callback function that returns formatted string:
+This value can be either an object with options for the native JavaScript [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) object, or a callback function that returns a [Content](#content) with the formatted string:
 ```js
 function (date) {
-    // return formatted date string
+    // return Content with the formatted date string
 }
 ```
 <table>
@@ -494,8 +494,13 @@ Currently, only the value `true` is supported, which limits the number of events
 Defines the date format of title of the popover created by the [dayMaxEvents](#daymaxevents) option.
-This value can be either an object with options for the native JavaScript [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) object, or a callback function that returns formatted string:
+This value can be either an object with options for the native JavaScript [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) object, or a callback function that returns a [Content](#content) with the formatted string:
+```js
+function (date) {
+    // return Content with the formatted date string
+}
+```
 ### displayEventEnd
 - Type `boolean`
 - Default `true`
@@ -645,16 +650,16 @@ The current [View](#view-object) object
 This is currently an alias for the `eventBackgroundColor`.
 ### eventContent
-- Type `string`, `object` or `function`
+- Type `Content` or `function`
 - Default `undefined`
 Defines the content that is rendered inside an event’s element.
-This value can be either a string containing text `'...'`, an object containing the HTML string `{html: '<p>...</p>'}`, an object containing an array of DOM nodes `{domNodes: [node1, node2, ...]}` or a function that returns any of the above formats:
+This value can be either a [Content](#content) or a function that returns content:
 ```js
 function (info) {
-    // return string or object
+    // return Content
 }
 ```
 `info` is an object with the following properties:
@@ -1298,20 +1303,27 @@ Determines whether the events on the calendar can be dragged.
 Defines the time-text that is displayed on each event.
-This value can be either an object with options for the native JavaScript [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) object, or a callback function that returns formatted string:
+This value can be either an object with options for the native JavaScript [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) object, or a callback function that returns a [Content](#content) with formatted string:
 ```js
-function (time) {
-    // return formatted time string
+function (start, end) {
+    // return Content with the formatted time string
 }
 ```
 <table>
 <tr>
 <td>
-`time`
+`start`
 </td>
-<td>JavaScript Date object that needs to be formatted</td>
+<td>JavaScript Date object containing the beginning of the time span to be formatted</td>
+</tr>
+<tr>
+<td>
+`end`
+</td>
+<td>JavaScript Date object containing the end of the time span to be formatted</td>
 </tr>
 </table>
@@ -1462,11 +1474,11 @@ When set to `false`, the calendar will fetch events any time the view is switche
 Defines the text on the left side of the day headings in list view.
-This value can be either an object with options for the native JavaScript [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) object, or a callback function that returns formatted string:
+This value can be either an object with options for the native JavaScript [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) object, or a callback function that returns a [Content](#content) with the formatted string:
 ```js
 function (date) {
-  // return formatted date string
+  // return Content with the formatted date string
 }
 ```
 <table>
@@ -1485,11 +1497,11 @@ function (date) {
 Defines the text on the right side of the day headings in list view.
-This value can be either an object with options for the native JavaScript [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) object, or a callback function that returns formatted string:
+This value can be either an object with options for the native JavaScript [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) object, or a callback function that returns a [Content](#content) with the formatted string:
 ```js
 function (date) {
-  // return formatted date string
+  // return Content with the formatted date string
 }
 ```
 <table>
@@ -1539,16 +1551,16 @@ For touch devices, the amount of time (in milliseconds) the user must hold down
 For a more granular configuration, see [eventLongPressDelay](#eventlongpressdelay) and [selectLongPressDelay](#selectlongpressdelay).
 ### moreLinkContent
-- Type `string`, `object`or `function`
+- Type `Content` or `function`
 - Default `undefined`
 Defines the text that is displayed instead of the default `+2 more` created by the [dayMaxEvents](#daymaxevents) option.
-This value can be either a string containing text `'...'`, an object containing the HTML string `{html: '<p>...</p>'}`, an object containing an array of DOM nodes `{domNodes: [node1, node2, ...]}` or a function that returns any of the above formats:
+This value can be either a [Content](#content) or a function that returns content:
 ```js
 function (arg) {
-  // return string or object
+  // return Content
 }
 ```
 `arg` is an object with the following properties:
@@ -1603,16 +1615,16 @@ The current [View](#view-object) object
 </table>
 ### noEventsContent
-- Type `string`, `object`or `function`
+- Type `Content` or `function`
 - Default `'No events'`
 Defines the text that is displayed in list view when there are no events to display.
-This value can be either a string containing text `'...'`, an object containing the HTML string `{html: '<p>...</p>'}`, an object containing an array of DOM nodes `{domNodes: [node1, node2, ...]}` or a function that returns any of the above formats:
+This value can be either a [Content](#content) or a function that returns content:
 ```js
 function () {
-  // return string or object
+  // return Content
 }
 ```
@@ -1641,11 +1653,11 @@ Array of plain objects that will be parsed into [Resource](#resource-object) obj
 Defines the content that is rendered inside an element with a resource title.
-This value can be either a string containing text `'...'`, an object containing the HTML string `{html: '<p>...</p>'}`, an object containing an array of DOM nodes `{domNodes: [node1, node2, ...]}` or a function that returns any of the above formats:
+This value can be either a [Content](#content) or a function that returns content:
 ```js
 function (info) {
-    // return string or object
+    // return Content
 }
 ```
 `info` is an object with the following properties:
@@ -1858,11 +1870,11 @@ Defines the time slot height in pixels. When changing the setting, you must addi
 Defines the text that will be displayed within a time slot.
-This value can be either an object with options for the native JavaScript [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) object, or a callback function that returns formatted string:
+This value can be either an object with options for the native JavaScript [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) object, or a callback function that returns a [Content](#content) with the formatted string:
 ```js
 function (time) {
-  // return formatted time string
+  // return Content with the formatted time string
 }
 ```
 <table>
@@ -1923,23 +1935,40 @@ function (theme) {
 Defines the text that is displayed in the header toolbar’s title.
-This value can be either an object with options for the native JavaScript [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) object, or a callback function that returns formatted string:
+This value can be either an object with options for the native JavaScript [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) object, or a callback function that returns a [Content](#content) with the formatted string:
 ```js
-function (date) {
-  // return formatted date string
+function (start, end) {
+  // return Content with the formatted date string
 }
 ```
 <table>
 <tr>
 <td>
-`date`
+`start`
 </td>
-<td>JavaScript Date object that needs to be formatted</td>
+<td>JavaScript Date object containing the beginning of the time span to be formatted</td>
+</tr>
+<tr>
+<td>
+`end`
+</td>
+<td>JavaScript Date object containing the end of the time span to be formatted</td>
 </tr>
 </table>
+The callback function can return HTML markup. If you want to use HTML entities in the title, you must use the callback function:
+```js
+function (date) {
+  let month = date.toLocaleDateString('en-US', { month: 'long' })
+  let year = date.toLocaleDateString('en-US', { year: 'numeric' })
+  return `<span class="month">${month}</span> <span class="year">${year}</span>`
+}
+```
 ### unselect
 - Type `function`
 - Default `undefined`
@@ -2189,6 +2218,13 @@ Returns the [View](#view-object) object for the current view.
 Clears the current selection. See [selectable](#selectable).
+## Content
+The content can be presented in the following forms:
+* a string containing text `'some text'`
+* an object containing the HTML string `{html: '<p>some HTML</p>'}`
+* an object containing an array of DOM nodes `{domNodes: [node1, node2, ...]}`
 ## Event object
 This is a JavaScript object that the Event Calendar uses to store information about a calendar event.
@@ -2236,14 +2272,9 @@ Here are all properties that exist in Event object:
 `title`
 </td>
-<td>The text appearing on the event</td>
-</tr>
-<tr>
 <td>
-`titleHTML`
-</td>
-<td>The HTML version of the title</td>
+The text appearing on the event. See [Content](#content)</td>
 </tr>
 <tr>
 <td>
@@ -2391,17 +2422,7 @@ Here are all admissible fields for the event’s input object:
 </td>
 <td>
-`string` The text that will appear on the event. Default `''`
-</td>
-</tr>
-<tr>
-<td>
-`titleHTML`
-</td>
-<td>
-`string` The HTML version of the title to be displayed instead of the text version. Default `''`
+`Content` The text that will appear on the event. See [Content](#content). Default `''`
 </td>
 </tr>
 <tr>

package/index.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { run_all, is_function, noop, identity, tick, SvelteComponent, init, safe_not_equal, ensure_array_like, empty, insert, detach, destroy_each, component_subscribe, set_store_value, element, text, attr, append, listen, set_data, transition_in, group_outros, check_outros, transition_out, space, create_component, mount_component, destroy_component, construct_svelte_component, set_style, get_current_component } from 'svelte/internal';
+import { run_all, is_function, noop, identity, tick, SvelteComponent, init, safe_not_equal, ensure_array_like, empty, insert, detach, destroy_each, component_subscribe, set_store_value, element, text, attr, append, listen, set_data, action_destroyer, transition_in, group_outros, check_outros, transition_out, space, create_component, mount_component, destroy_component, construct_svelte_component, set_style, get_current_component } from 'svelte/internal';
 import { getContext, setContext, beforeUpdate } from 'svelte';
 import { writable, derived, get, readable } from 'svelte/store';
@@ -32,43 +32,14 @@ function btnText(text, period) {
     };
 }
-function assign(...args) {
-    return Object.assign(...args);
-}
-function floor(value) {
-    return Math.floor(value);
-}
-function min(...args) {
-    return Math.min(...args);
-}
-function max(...args) {
-    return Math.max(...args);
-}
-function isObject(test) {
-    return typeof test === 'object' && test !== null;
-}
-function symbol() {
-    return Symbol('ec');
-}
 function setContent(node, content) {
     let actions = {
         update(content) {
-            while (node.firstChild) {
-                node.removeChild(node.lastChild);
-            }
-            if (!isObject(content)) {
+            if (typeof content == 'string') {
                 node.innerText = content;
-            } else if (content.domNodes) {
-                for (let child of content.domNodes) {
-                    node.appendChild(child);
-                }
-            } else if (content.html) {
+            } else if (content?.domNodes) {
+                node.replaceChildren(...content.domNodes);
+            } else if (content?.html) {
                 node.innerHTML = content.html;
             }
         }
@@ -191,43 +162,6 @@ function toISOString(date) {
     return date.toISOString().substring(0, 19);
 }
-function formatRange(start, end, intl) {
-    if (start.getFullYear() !== end.getFullYear()) {
-        return intl.format(start) + ' - ' + intl.format(end);
-    }
-    let diff = [];
-    if (start.getMonth() !== end.getMonth()) {
-        diff.push('month');
-    }
-    if (start.getDate() !== end.getDate()) {
-        diff.push('day');
-    }
-    if (!diff.length) {
-        return intl.format(start);
-    }
-    let opts1 = intl.resolvedOptions();
-    let opts2 = {};
-    for (let key of diff) {
-        opts2[key] = opts1[key];
-    }
-    let intl2 = new Intl.DateTimeFormat(opts1.locale, opts2);
-    let full1 = intl.format(start);
-    let full2 = intl.format(end);
-    let part1 = intl2.format(start);
-    let part2 = intl2.format(end);
-    let common = _commonChunks(full1, part1, full2, part2);
-    if (common) {
-        return common.head + part1 + ' - ' + part2 + common.tail;
-    }
-    return full1 + ' - ' + full2;
-}
 function datesEqual(date1, ...dates2) {
     return dates2.every(date2 => date1.getTime() === date2.getTime());
 }
@@ -251,6 +185,15 @@ function noTimePart(date) {
     return typeof date === 'string' && date.length <= 10;
 }
+/**
+ * Copy time from one date to another
+ */
+function copyTime(toDate, fromDate) {
+    toDate.setUTCHours(fromDate.getUTCHours(), fromDate.getUTCMinutes(), fromDate.getUTCSeconds(), 0);
+    return toDate;
+}
 /**
  * Private functions
  */
@@ -278,62 +221,48 @@ function _fromISOString(str) {
     ));
 }
-function _commonChunks(str1, substr1, str2, substr2) {
-    let i = 0;
-    while (i < str1.length) {
-        let res1;
-        [i, res1] = _cut(str1, substr1, i);
-        if (!res1) {
-            break;
-        }
-        let j = 0;
-        while (j < str2.length) {
-            let res2;
-            [j, res2] = _cut(str2, substr2, j);
-            if (!res2) {
-                break;
-            }
+function debounce(fn, handle, queueStore) {
+    queueStore.update(queue => queue.set(handle, fn));
+}
-            if (res1.head === res2.head && res1.tail === res2.tail) {
-                return res1;
-            }
-        }
-    }
+function flushDebounce(queue) {
+    run_all(queue);
+    queue.clear();
+}
-    return null
+function assign(...args) {
+    return Object.assign(...args);
 }
-function _cut(str, substr, from) {
-    let start = str.indexOf(substr, from);
-    if (start >= 0) {
-        let end = start + substr.length;
+function keys(object) {
+    return Object.keys(object);
+}
-        return [end, {
-            head: str.substr(0, start),
-            tail: str.substr(end)
-        }];
-    }
+function floor(value) {
+    return Math.floor(value);
+}
-    return [-1, null];
+function min(...args) {
+    return Math.min(...args);
 }
-function debounce(fn, handle, queueStore) {
-    queueStore.update(queue => queue.set(handle, fn));
+function max(...args) {
+    return Math.max(...args);
 }
-function flushDebounce(queue) {
-    run_all(queue);
-    queue.clear();
+function symbol() {
+    return Symbol('ec');
 }
-function createElement(tag, className, html, text) {
+function createElement(tag, className, content) {
     let el = document.createElement(tag);
     el.className = className;
-    if (html) {
-        el.innerHTML = html;
-    } else if (text) {
-        el.innerText = text;
+    if (typeof content == 'string') {
+        el.innerText = content;
+    } else if (content.domNodes) {
+        el.replaceChildren(...content.domNodes);
+    } else if (content.html) {
+        el.innerHTML = content.html;
     }
     return el;
 }
@@ -535,10 +464,14 @@ function repositionEvent(chunk, longChunks, height) {
 }
 function createEventContent(chunk, displayEventEnd, eventContent, theme, _intlEventTime, _view) {
-    let timeText = _intlEventTime.format(chunk.start), content;
-    if (displayEventEnd && chunk.event.display !== 'pointer') {
-        timeText += ` - ${_intlEventTime.format(chunk.end)}`;
-    }
+    let timeText = _intlEventTime.formatRange(
+        chunk.start,
+        displayEventEnd && chunk.event.display !== 'pointer'
+            ? copyTime(cloneDate(chunk.start), chunk.end)  // make Intl.formatRange output only the time part
+            : chunk.start
+    );
+    let content;
     if (eventContent) {
         content = is_function(eventContent)
             ? eventContent({
@@ -554,14 +487,14 @@ function createEventContent(chunk, displayEventEnd, eventContent, theme, _intlEv
                 break;
             case 'pointer':
                 content = {
-                    domNodes: [createElement('div', theme.eventTime, null, timeText)]
+                    domNodes: [createElement('div', theme.eventTime, timeText)]
                 };
                 break;
             default:
                 content = {
                     domNodes: [
-                        ...chunk.event.allDay ? [] : [createElement('div', theme.eventTime, null, timeText)],
-                        createElement('div', theme.eventTitle, chunk.event.titleHTML, chunk.event.title)
+                        ...chunk.event.allDay ? [] : [createElement('div', theme.eventTime, timeText)],
+                        createElement('div', theme.eventTitle, chunk.event.title)
                     ]
                 };
         }
@@ -638,7 +571,7 @@ function pointerEvent(display) {
 function writable2(value, parser, start) {
     return {
-        ...writable(parser ? parser(value) : value, start),
+        ...writable(value, start),
         parse: parser
     };
 }
@@ -677,12 +610,11 @@ function intl(locale, format) {
 function intlRange(locale, format) {
     return derived([locale, format], ([$locale, $format]) => {
-        if (is_function($format)) {
-            return {format: (start, end) => $format(toLocalDate(start), toLocalDate(end))};
-        }
-        let intl = new Intl.DateTimeFormat($locale, $format);
+        let intl = is_function($format)
+            ? {formatRange: $format}
+            : new Intl.DateTimeFormat($locale, $format);
         return {
-            format: (start, end) => formatRange(toLocalDate(start), toLocalDate(end), intl)
+            formatRange: (start, end) => intl.formatRange(toLocalDate(start), toLocalDate(end))
         };
     });
 }
@@ -910,11 +842,11 @@ function viewDates(state) {
 function viewTitle(state) {
     return derived(
-        [state.date, state._activeRange, state._titleIntlRange, state._monthMode],
-        ([$date, $_activeRange, $_titleIntlRange, $_monthMode]) => {
+        [state.date, state._activeRange, state._intlTitle, state._monthMode],
+        ([$date, $_activeRange, $_intlTitle, $_monthMode]) => {
             return $_monthMode
-                ? $_titleIntlRange.format($date, $date)
-                : $_titleIntlRange.format($_activeRange.start, subtractDay(cloneDate($_activeRange.end)));
+                ? $_intlTitle.formatRange($date, $date)
+                : $_intlTitle.formatRange($_activeRange.start, subtractDay(cloneDate($_activeRange.end)));
         }
     );
 }
@@ -1030,9 +962,13 @@ class State {
         plugins = plugins || [];
         // Create options
-        let options = createOptions(plugins);
+        let options= createOptions(plugins);
         let parsers = createParsers(options, plugins);
+        // Parse options
+        options = parseOpts(options, parsers);
+        input = parseOpts(input, parsers);
         // Create stores for options
         for (let [option, value] of Object.entries(options)) {
             this[option] = writable2(value, parsers[option]);
@@ -1048,10 +984,10 @@ class State {
         this._events = events(this);
         this._now = now();
         this._today = today(this);
-        this._intlEventTime = intl(this.locale, this.eventTimeFormat);
+        this._intlEventTime = intlRange(this.locale, this.eventTimeFormat);
         this._intlSlotLabel = intl(this.locale, this.slotLabelFormat);
         this._intlDayHeader = intl(this.locale, this.dayHeaderFormat);
-        this._titleIntlRange = intlRange(this.locale, this.titleFormat);
+        this._intlTitle = intlRange(this.locale, this.titleFormat);
         this._bodyEl = writable(undefined);
         this._scrollable = writable(false);
         this._viewTitle = viewTitle(this);
@@ -1079,13 +1015,9 @@ class State {
         }
         // Set options for each view
-        let commonOpts = assign({}, options, input);
-        parseOpts(commonOpts, this);
-        let views = new Set([...Object.keys(options.views), ...Object.keys(input.views || {})]);
+        let views = new Set([...keys(options.views), ...keys(input.views ?? {})]);
         for (let view of views) {
-            let viewOpts = assign({}, options.views[view] ?? {}, input.views?.[view] ?? {});
-            parseOpts(viewOpts, this);
-            let opts = assign({}, commonOpts, viewOpts);
+            let opts = assign({}, options, options.views[view] ?? {}, input, input.views?.[view] ?? {});
             // Change view component when view changes
             this.view.subscribe(newView => {
                 if (newView === view) {
@@ -1096,7 +1028,7 @@ class State {
                 }
             });
             // Process options
-            for (let key of Object.keys(opts)) {
+            for (let key of keys(opts)) {
                 if (this.hasOwnProperty(key) && key[0] !== '_') {
                     let {set, _set, ...rest} = this[key];
@@ -1124,14 +1056,17 @@ class State {
     }
 }
-function parseOpts(opts, state) {
-    for (let key of Object.keys(opts)) {
-        if (state.hasOwnProperty(key) && key[0] !== '_') {
-            if (state[key].parse) {
-                opts[key] = state[key].parse(opts[key]);
-            }
+function parseOpts(opts, parsers) {
+    let result = {};
+    for (let key of keys(opts)) {
+        result[key] = parsers[key] ? parsers[key](opts[key]) : opts[key];
+    }
+    if (opts.views) {
+        for (let view of keys(opts.views)) {
+            result.views[view] = parseOpts(opts.views[view], parsers);
         }
     }
+    return result;
 }
 /* packages/core/src/Buttons.svelte generated by Svelte v4.1.1 */
@@ -1142,7 +1077,7 @@ function get_each_context$2(ctx, list, i) {
 	return child_ctx;
 }
-// (37:27)
+// (38:27)
 function create_if_block_4(ctx) {
 	let button_1;
 	let t_value = /*$buttonText*/ ctx[5][/*button*/ ctx[23]] + "";
@@ -1194,7 +1129,7 @@ function create_if_block_4(ctx) {
 	};
 }
-// (35:32)
+// (36:32)
 function create_if_block_3(ctx) {
 	let button_1;
 	let t_value = /*$buttonText*/ ctx[5][/*button*/ ctx[23]] + "";
@@ -1241,7 +1176,7 @@ function create_if_block_3(ctx) {
 	};
 }
-// (33:31)
+// (34:31)
 function create_if_block_2(ctx) {
 	let button_1;
 	let i;
@@ -1292,7 +1227,7 @@ function create_if_block_2(ctx) {
 	};
 }
-// (31:31)
+// (32:31)
 function create_if_block_1(ctx) {
 	let button_1;
 	let i;
@@ -1346,30 +1281,38 @@ function create_if_block_1(ctx) {
 // (29:4) {#if button == 'title'}
 function create_if_block$1(ctx) {
 	let h2;
-	let t;
 	let h2_class_value;
+	let setContent_action;
+	let mounted;
+	let dispose;
 	return {
 		c() {
 			h2 = element("h2");
-			t = text(/*$_viewTitle*/ ctx[4]);
 			attr(h2, "class", h2_class_value = /*$theme*/ ctx[3].title);
 		},
 		m(target, anchor) {
 			insert(target, h2, anchor);
-			append(h2, t);
+			if (!mounted) {
+				dispose = action_destroyer(setContent_action = setContent.call(null, h2, /*$_viewTitle*/ ctx[4]));
+				mounted = true;
+			}
 		},
 		p(ctx, dirty) {
-			if (dirty & /*$_viewTitle*/ 16) set_data(t, /*$_viewTitle*/ ctx[4]);
 			if (dirty & /*$theme*/ 8 && h2_class_value !== (h2_class_value = /*$theme*/ ctx[3].title)) {
 				attr(h2, "class", h2_class_value);
 			}
+			if (setContent_action && is_function(setContent_action.update) && dirty & /*$_viewTitle*/ 16) setContent_action.update.call(null, /*$_viewTitle*/ ctx[4]);
 		},
 		d(detaching) {
 			if (detaching) {
 				detach(h2);
 			}
+			mounted = false;
+			dispose();
 		}
 	};
 }
@@ -2552,4 +2495,4 @@ class Calendar extends SvelteComponent {
 	}
 }
-export { DAY_IN_SECONDS, addDay, addDuration, ancestor, assign, bgEvent, btnTextDay, btnTextMonth, btnTextWeek, btnTextYear, cloneDate, cloneEvent, createDate, createDuration, createElement, createEventChunk, createEventClasses, createEventContent, createEventSources, createEvents, createView, datesEqual, debounce, Calendar as default, derived2, eventIntersects, floor, flushDebounce, formatRange, getElementWithPayload, getPayload, ghostEvent, hasPayload, hasYScroll, height, helperEvent, intl, intlRange, isObject, keyEnter, max, min, nextClosestDay, noTimePart, outsideEvent, pointerEvent, prepareEventChunks, prevClosestDay, previewEvent, rect, repositionEvent, setContent, setMidnight, setPayload, sortEventChunks, subtractDay, subtractDuration, symbol, toEventWithLocalDates, toISOString, toLocalDate, toViewWithLocalDates, writable2 };
+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, derived2, eventIntersects, floor, flushDebounce, getElementWithPayload, getPayload, ghostEvent, hasPayload, hasYScroll, height, helperEvent, intl, intlRange, keyEnter, keys, max, min, nextClosestDay, noTimePart, outsideEvent, pointerEvent, prepareEventChunks, prevClosestDay, previewEvent, rect, repositionEvent, setContent, setMidnight, setPayload, sortEventChunks, subtractDay, subtractDuration, symbol, toEventWithLocalDates, toISOString, toLocalDate, toViewWithLocalDates, writable2 };

package/package.json CHANGED Viewed

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

package/src/Buttons.svelte CHANGED Viewed

@@ -1,6 +1,6 @@
 <script>
     import {getContext} from 'svelte';
-    import {createDate, cloneDate, subtractDay, addDuration, subtractDuration, setMidnight} from './lib.js';
+    import {createDate, cloneDate, subtractDay, addDuration, setContent, subtractDuration, setMidnight} from './lib.js';
     export let buttons;
@@ -27,7 +27,8 @@
 {#each buttons as button}
     {#if button == 'title'}
-        <h2 class="{$theme.title}">{$_viewTitle}</h2>
+        <!-- svelte-ignore a11y-missing-content -->
+        <h2 class="{$theme.title}" use:setContent={$_viewTitle}></h2>
     {:else if button == 'prev'}
         <button class="{$theme.button} ec-{button}" aria-label={$buttonText.prev} on:click={prev}><i class="{$theme.icon} ec-{button}"></i></button>
     {:else if button == 'next'}

package/src/lib/actions.js CHANGED Viewed

@@ -1,18 +1,12 @@
-import {isObject} from './utils.js';
 export function setContent(node, content) {
     let actions = {
         update(content) {
-            while (node.firstChild) {
-                node.removeChild(node.lastChild);
-            }
-            if (!isObject(content)) {
+            if (typeof content == 'string') {
                 node.innerText = content;
-            } else if (content.domNodes) {
-                for (let child of content.domNodes) {
-                    node.appendChild(child);
-                }
-            } else if (content.html) {
+            } else if (content?.domNodes) {
+                node.replaceChildren(...content.domNodes);
+            } else if (content?.html) {
                 node.innerHTML = content.html;
             }
         }

package/src/lib/date.js CHANGED Viewed

@@ -91,43 +91,6 @@ export function toISOString(date) {
     return date.toISOString().substring(0, 19);
 }
-export function formatRange(start, end, intl) {
-    if (start.getFullYear() !== end.getFullYear()) {
-        return intl.format(start) + ' - ' + intl.format(end);
-    }
-    let diff = [];
-    if (start.getMonth() !== end.getMonth()) {
-        diff.push('month');
-    }
-    if (start.getDate() !== end.getDate()) {
-        diff.push('day');
-    }
-    if (!diff.length) {
-        return intl.format(start);
-    }
-    let opts1 = intl.resolvedOptions();
-    let opts2 = {};
-    for (let key of diff) {
-        opts2[key] = opts1[key];
-    }
-    let intl2 = new Intl.DateTimeFormat(opts1.locale, opts2);
-    let full1 = intl.format(start);
-    let full2 = intl.format(end);
-    let part1 = intl2.format(start);
-    let part2 = intl2.format(end);
-    let common = _commonChunks(full1, part1, full2, part2);
-    if (common) {
-        return common.head + part1 + ' - ' + part2 + common.tail;
-    }
-    return full1 + ' - ' + full2;
-}
 export function datesEqual(date1, ...dates2) {
     return dates2.every(date2 => date1.getTime() === date2.getTime());
 }
@@ -151,6 +114,15 @@ export function noTimePart(date) {
     return typeof date === 'string' && date.length <= 10;
 }
+/**
+ * Copy time from one date to another
+ */
+export function copyTime(toDate, fromDate) {
+    toDate.setUTCHours(fromDate.getUTCHours(), fromDate.getUTCMinutes(), fromDate.getUTCSeconds(), 0);
+    return toDate;
+}
 /**
  * Private functions
  */
@@ -177,43 +149,3 @@ function _fromISOString(str) {
         Number(parts[5] || 0)
     ));
 }
-function _commonChunks(str1, substr1, str2, substr2) {
-    let i = 0;
-    while (i < str1.length) {
-        let res1;
-        [i, res1] = _cut(str1, substr1, i);
-        if (!res1) {
-            break;
-        }
-        let j = 0;
-        while (j < str2.length) {
-            let res2;
-            [j, res2] = _cut(str2, substr2, j);
-            if (!res2) {
-                break;
-            }
-            if (res1.head === res2.head && res1.tail === res2.tail) {
-                return res1;
-            }
-        }
-    }
-    return null
-}
-function _cut(str, substr, from) {
-    let start = str.indexOf(substr, from);
-    if (start >= 0) {
-        let end = start + substr.length;
-        return [end, {
-            head: str.substr(0, start),
-            tail: str.substr(end)
-        }];
-    }
-    return [-1, null];
-}

package/src/lib/dom.js CHANGED Viewed

@@ -1,12 +1,14 @@
 import {symbol} from './utils.js';
-export function createElement(tag, className, html, text) {
+export function createElement(tag, className, content) {
     let el = document.createElement(tag);
     el.className = className;
-    if (html) {
-        el.innerHTML = html;
-    } else if (text) {
-        el.innerText = text;
+    if (typeof content == 'string') {
+        el.innerText = content;
+    } else if (content.domNodes) {
+        el.replaceChildren(...content.domNodes);
+    } else if (content.html) {
+        el.innerHTML = content.html;
     }
     return el;
 }

package/src/lib/events.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import {addDay, datesEqual, createDate, cloneDate, setMidnight, toLocalDate, noTimePart} from './date';
+import {addDay, datesEqual, createDate, cloneDate, setMidnight, toLocalDate, noTimePart, copyTime} from './date';
 import {createElement} from './dom';
 import {assign} from './utils';
 import {toViewWithLocalDates} from './view';
@@ -131,10 +131,14 @@ export function repositionEvent(chunk, longChunks, height) {
 }
 export function createEventContent(chunk, displayEventEnd, eventContent, theme, _intlEventTime, _view) {
-    let timeText = _intlEventTime.format(chunk.start), content;
-    if (displayEventEnd && chunk.event.display !== 'pointer') {
-        timeText += ` - ${_intlEventTime.format(chunk.end)}`;
-    }
+    let timeText = _intlEventTime.formatRange(
+        chunk.start,
+        displayEventEnd && chunk.event.display !== 'pointer'
+            ? copyTime(cloneDate(chunk.start), chunk.end)  // make Intl.formatRange output only the time part
+            : chunk.start
+    );
+    let content;
     if (eventContent) {
         content = is_function(eventContent)
             ? eventContent({
@@ -150,14 +154,14 @@ export function createEventContent(chunk, displayEventEnd, eventContent, theme,
                 break;
             case 'pointer':
                 content = {
-                    domNodes: [createElement('div', theme.eventTime, null, timeText)]
+                    domNodes: [createElement('div', theme.eventTime, timeText)]
                 };
                 break;
             default:
                 content = {
                     domNodes: [
-                        ...chunk.event.allDay ? [] : [createElement('div', theme.eventTime, null, timeText)],
-                        createElement('div', theme.eventTitle, chunk.event.titleHTML, chunk.event.title)
+                        ...chunk.event.allDay ? [] : [createElement('div', theme.eventTime, timeText)],
+                        createElement('div', theme.eventTitle, chunk.event.title)
                     ]
                 };
         }

package/src/lib/stores.js CHANGED Viewed

@@ -1,10 +1,10 @@
 import {derived, writable, get} from 'svelte/store';
 import {is_function} from 'svelte/internal';
-import {toLocalDate, formatRange} from './date';
+import {toLocalDate} from './date';
 export function writable2(value, parser, start) {
     return {
-        ...writable(parser ? parser(value) : value, start),
+        ...writable(value, start),
         parse: parser
     };
 }
@@ -43,12 +43,11 @@ export function intl(locale, format) {
 export function intlRange(locale, format) {
     return derived([locale, format], ([$locale, $format]) => {
-        if (is_function($format)) {
-            return {format: (start, end) => $format(toLocalDate(start), toLocalDate(end))};
-        }
-        let intl = new Intl.DateTimeFormat($locale, $format);
+        let intl = is_function($format)
+            ? {formatRange: $format}
+            : new Intl.DateTimeFormat($locale, $format);
         return {
-            format: (start, end) => formatRange(toLocalDate(start), toLocalDate(end), intl)
+            formatRange: (start, end) => intl.formatRange(toLocalDate(start), toLocalDate(end))
         };
     });
 }

package/src/lib/utils.js CHANGED Viewed

@@ -2,6 +2,10 @@ export function assign(...args) {
     return Object.assign(...args);
 }
+export function keys(object) {
+    return Object.keys(object);
+}
 export function floor(value) {
     return Math.floor(value);
 }
@@ -14,10 +18,6 @@ export function max(...args) {
     return Math.max(...args);
 }
-export function isObject(test) {
-    return typeof test === 'object' && test !== null;
-}
 export function symbol() {
     return Symbol('ec');
 }

package/src/storage/state.js CHANGED Viewed

@@ -12,16 +12,20 @@ import {
     viewTitle,
     view as view2  // hack to avoid a runtime error in SvelteKit dev mode (ReferenceError: view is not defined)
 } from './stores';
-import {assign, writable2, intl, intlRange} from '../lib.js';
+import {assign, keys, writable2, intl, intlRange} from '../lib.js';
 export default class {
     constructor(plugins, input) {
         plugins = plugins || [];
         // Create options
-        let options = createOptions(plugins);
+        let options= createOptions(plugins);
         let parsers = createParsers(options, plugins);
+        // Parse options
+        options = parseOpts(options, parsers);
+        input = parseOpts(input, parsers);
         // Create stores for options
         for (let [option, value] of Object.entries(options)) {
             this[option] = writable2(value, parsers[option]);
@@ -37,10 +41,10 @@ export default class {
         this._events = events(this);
         this._now = now();
         this._today = today(this);
-        this._intlEventTime = intl(this.locale, this.eventTimeFormat);
+        this._intlEventTime = intlRange(this.locale, this.eventTimeFormat);
         this._intlSlotLabel = intl(this.locale, this.slotLabelFormat);
         this._intlDayHeader = intl(this.locale, this.dayHeaderFormat);
-        this._titleIntlRange = intlRange(this.locale, this.titleFormat);
+        this._intlTitle = intlRange(this.locale, this.titleFormat);
         this._bodyEl = writable(undefined);
         this._scrollable = writable(false);
         this._viewTitle = viewTitle(this);
@@ -68,13 +72,9 @@ export default class {
         }
         // Set options for each view
-        let commonOpts = assign({}, options, input);
-        parseOpts(commonOpts, this);
-        let views = new Set([...Object.keys(options.views), ...Object.keys(input.views || {})]);
+        let views = new Set([...keys(options.views), ...keys(input.views ?? {})]);
         for (let view of views) {
-            let viewOpts = assign({}, options.views[view] ?? {}, input.views?.[view] ?? {});
-            parseOpts(viewOpts, this);
-            let opts = assign({}, commonOpts, viewOpts);
+            let opts = assign({}, options, options.views[view] ?? {}, input, input.views?.[view] ?? {});
             // Change view component when view changes
             this.view.subscribe(newView => {
                 if (newView === view) {
@@ -85,7 +85,7 @@ export default class {
                 }
             });
             // Process options
-            for (let key of Object.keys(opts)) {
+            for (let key of keys(opts)) {
                 if (this.hasOwnProperty(key) && key[0] !== '_') {
                     let {set, _set, ...rest} = this[key];
@@ -113,12 +113,15 @@ export default class {
     }
 }
-function parseOpts(opts, state) {
-    for (let key of Object.keys(opts)) {
-        if (state.hasOwnProperty(key) && key[0] !== '_') {
-            if (state[key].parse) {
-                opts[key] = state[key].parse(opts[key]);
-            }
+function parseOpts(opts, parsers) {
+    let result = {};
+    for (let key of keys(opts)) {
+        result[key] = parsers[key] ? parsers[key](opts[key]) : opts[key];
+    }
+    if (opts.views) {
+        for (let view of keys(opts.views)) {
+            result.views[view] = parseOpts(opts.views[view], parsers);
         }
     }
+    return result;
 }

package/src/storage/stores.js CHANGED Viewed

@@ -93,11 +93,11 @@ export function viewDates(state) {
 export function viewTitle(state) {
     return derived(
-        [state.date, state._activeRange, state._titleIntlRange, state._monthMode],
-        ([$date, $_activeRange, $_titleIntlRange, $_monthMode]) => {
+        [state.date, state._activeRange, state._intlTitle, state._monthMode],
+        ([$date, $_activeRange, $_intlTitle, $_monthMode]) => {
             return $_monthMode
-                ? $_titleIntlRange.format($date, $date)
-                : $_titleIntlRange.format($_activeRange.start, subtractDay(cloneDate($_activeRange.end)));
+                ? $_intlTitle.formatRange($date, $date)
+                : $_intlTitle.formatRange($_activeRange.start, subtractDay(cloneDate($_activeRange.end)));
         }
     );
 }