@event-calendar/core 1.5.1 → 2.1.0

package/package.json

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

package/src/Buttons.svelte

@@ -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,14 +27,32 @@
 
 {#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>
+        <button
+            class="{$theme.button} ec-{button}"
+            aria-label={$buttonText.prev}
+            title={$buttonText.prev}
+            on:click={prev}
+        ><i class="{$theme.icon} ec-{button}"></i></button>
     {:else if button == 'next'}
-        <button class="{$theme.button} ec-{button}" aria-label={$buttonText.next} on:click={next}><i class="{$theme.icon} ec-{button}"></i></button>
+        <button
+            class="{$theme.button} ec-{button}"
+            aria-label={$buttonText.next}
+            title={$buttonText.next}
+            on:click={next}
+        ><i class="{$theme.icon} ec-{button}"></i></button>
     {:else if button == 'today'}
-        <button class="{$theme.button} ec-{button}" on:click={() => $date = cloneDate(today)} disabled={isToday}>{$buttonText[button]}</button>
+        <button
+            class="{$theme.button} ec-{button}"
+            on:click={() => $date = cloneDate(today)}
+            disabled={isToday}
+        >{$buttonText[button]}</button>
     {:else if button != ''}
-        <button class="{$theme.button}{$view === button ? ' ' + $theme.active : ''} ec-{button}" on:click={() => $view = button}>{$buttonText[button]}</button>
+        <button
+            class="{$theme.button}{$view === button ? ' ' + $theme.active : ''} ec-{button}"
+            on:click={() => $view = button}
+        >{$buttonText[button]}</button>
     {/if}
 {/each}

package/src/Calendar.svelte

@@ -26,7 +26,7 @@
     let state = new State(plugins, options);
     setContext('state', state);
 
-    let {_viewComponent, _viewClass, _bodyEl, _interaction, _iClass, _events, _queue, _scrollable,
+    let {_viewComponent, _bodyEl, _interaction, _iClass, _events, _queue, _scrollable,
         events, eventSources, height, theme} = state;
 
     // Reactively update options that did change
@@ -130,7 +130,7 @@
 </script>
 
 <div
-    class="{$theme.calendar}{$_viewClass ? ' ' + $theme[$_viewClass] : ''}{$_scrollable ? ' ' + $theme.withScroll : ''}{$_iClass ? ' ' + $theme[$_iClass] : ''}"
+    class="{$theme.calendar} {$theme.view}{$_scrollable ? ' ' + $theme.withScroll : ''}{$_iClass ? ' ' + $theme[$_iClass] : ''}"
     style="height: {$height}"
 >
     <Toolbar/>

package/src/index.scss

@@ -184,7 +184,7 @@
     border-top: none;
   }
 
-  .ec-month & {
+  .ec-day-grid & {
     flex: 1 1 auto;
   }
 }
@@ -215,12 +215,12 @@
 .ec-content {
   display: flex;
 
-  .ec-month & {
+  .ec-day-grid & {
     flex-direction: column;
     height: 100%;
   }
 
-  .ec-month .ec-uniform & {
+  .ec-day-grid .ec-uniform & {
     overflow: hidden;  // remove scrolling due to hidden events
   }
 
@@ -241,12 +241,12 @@
     border-bottom: none;
   }
 
-  .ec-month &,
+  .ec-day-grid &,
   .ec-resource & {
     flex: 1 0 auto;
   }
 
-  .ec-month .ec-uniform & {
+  .ec-day-grid .ec-uniform & {
     flex: 1 1 0%;  // % is required to work properly for both auto and fixed calendar height
     min-height: 0;
   }
@@ -263,16 +263,16 @@
     background-color: #e5f7fe;
   }
 
-  .ec-month .ec-body & {
+  .ec-day-grid .ec-body & {
     min-height: 5em;
     position: relative;
   }
 
-  .ec-month .ec-uniform & {
+  .ec-day-grid .ec-uniform & {
     min-height: 0;
   }
 
-  .ec-month &:first-child {
+  .ec-day-grid &:first-child {
     border-left: none;
   }
 
@@ -296,7 +296,7 @@
   }
 }
 
-.ec-month {
+.ec-day-grid {
   .ec-day-head {
     text-align: right;
     padding: 4px 4px 3px;
@@ -328,7 +328,7 @@
 .ec-events {
   margin: 0 6px 0 0;
 
-  .ec-week &,
+  .ec-time-grid &,
   &.ec-preview {
     position: relative;
   }
@@ -346,12 +346,12 @@
   line-height: 1.5;
   z-index: 1;  // put it above the pointer event (for multi-day events in month view)
 
-  .ec-month &,
+  .ec-day-grid &,
   .ec-all-day & {
     position: relative;
   }
 
-  .ec-week .ec-body & {
+  .ec-time-grid .ec-body & {
     position: absolute;
   }
 
@@ -390,7 +390,7 @@
   flex-direction: column;
   width: 100%;
 
-  .ec-month &,
+  .ec-day-grid &,
   .ec-all-day & {
     flex-direction: row;
   }
@@ -408,7 +408,7 @@
   margin: 0 0 1px 0;
   flex-shrink: 0;
 
-  .ec-month & {
+  .ec-day-grid & {
     margin: 0 3px 0 0;
     max-width: 100%;
     text-overflow: ellipsis;
@@ -418,14 +418,14 @@
 .ec-event-title {
   overflow: hidden;
 
-  .ec-month &,
+  .ec-day-grid &,
   .ec-all-day & {
     min-height: 1.5em;
     white-space: nowrap;
     text-overflow: ellipsis;
   }
 
-  .ec-week .ec-body & {
+  .ec-time-grid .ec-body & {
     position: sticky;
     top: 0;
   }
@@ -557,7 +557,7 @@
   position: absolute;
   user-select: none;
 
-  .ec-month &,
+  .ec-day-grid &,
   .ec-all-day & {
     top: 0;
     right: 0;
@@ -567,7 +567,7 @@
     cursor: ew-resize;
   }
 
-  .ec-week .ec-body & {
+  .ec-time-grid .ec-body & {
     left: 0;
     right: 0;
     bottom: 0;

package/src/lib/a11y.js

@@ -4,27 +4,3 @@ export function keyEnter(fn) {
         return e.key === 'Enter' || e.key === ' ' ? fn.call(this, e) : undefined;
     };
 }
-
-export function btnTextDay(text) {
-    return btnText(text, 'day');
-}
-
-export function btnTextWeek(text) {
-    return btnText(text, 'week');
-}
-
-export function btnTextMonth(text) {
-    return btnText(text, 'month');
-}
-
-export function btnTextYear(text) {
-    return btnText(text, 'year');
-}
-
-function btnText(text, period) {
-    return {
-        ...text,
-        next: 'Next ' + period,
-        prev: 'Previous ' + period
-    };
-}

package/src/lib/actions.js

@@ -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

@@ -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

@@ -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

@@ -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/options.js

@@ -0,0 +1,28 @@
+
+export function btnTextDay(text) {
+    return btnText(text, 'day');
+}
+
+export function btnTextWeek(text) {
+    return btnText(text, 'week');
+}
+
+export function btnTextMonth(text) {
+    return btnText(text, 'month');
+}
+
+export function btnTextYear(text) {
+    return btnText(text, 'year');
+}
+
+function btnText(text, period) {
+    return {
+        ...text,
+        next: 'Next ' + period,
+        prev: 'Previous ' + period
+    };
+}
+
+export function themeView(view) {
+    return theme => ({...theme, view});
+}

package/src/lib/stores.js

@@ -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

@@ -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/lib.js

@@ -4,6 +4,7 @@ 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';

package/src/storage/options.js

@@ -1,5 +1,4 @@
 import {assign, createDate, createDuration, setMidnight, createEvents, createEventSources} from '../lib.js';
-import {is_function} from 'svelte/internal';
 
 export function createOptions(plugins) {
     let options = {
@@ -92,7 +91,7 @@ export function createOptions(plugins) {
             time: 'ec-time',
             title: 'ec-title',
             toolbar: 'ec-toolbar',
-            week: 'ec-week',
+            view: '',
             withScroll: 'ec-with-scroll'
         },
         titleFormat: {
@@ -112,9 +111,8 @@ export function createOptions(plugins) {
     return options;
 }
 
-export function createParsers(options, plugins) {
+export function createParsers(plugins) {
     let parsers = {
-        buttonText: input => is_function(input) ? input(options.buttonText) : input,
         date: date => setMidnight(createDate(date)),
         duration: createDuration,
         events: createEvents,
@@ -124,12 +122,11 @@ export function createParsers(options, plugins) {
         scrollTime: createDuration,
         slotDuration: createDuration,
         slotMaxTime: createDuration,
-        slotMinTime: createDuration,
-        theme: input => is_function(input) ? input(options.theme) : input
+        slotMinTime: createDuration
     };
 
     for (let plugin of plugins) {
-        plugin.createParsers?.(parsers, options);
+        plugin.createParsers?.(parsers);
     }
 
     return parsers;

package/src/storage/state.js

@@ -4,15 +4,15 @@ import {createOptions, createParsers} from './options';
 import {
     activeRange,
     currentRange,
+    dayGrid,
     events,
-    monthMode,
     now,
     today,
     viewDates,
     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 {keys, writable2, intl, intlRange} from '../lib.js';
 
 export default class {
     constructor(plugins, input) {
@@ -20,7 +20,11 @@ export default class {
 
         // Create options
         let options = createOptions(plugins);
-        let parsers = createParsers(options, plugins);
+        let parsers = createParsers(plugins);
+
+        // Parse options
+        options = parseOpts(options, parsers);
+        input = parseOpts(input, parsers);
 
         // Create stores for options
         for (let [option, value] of Object.entries(options)) {
@@ -30,23 +34,22 @@ export default class {
         // Private stores
         this._queue = writable(new Map());  // debounce queue
         this._auxiliary = writable([]);  // auxiliary components
-        this._monthMode = monthMode(this);
+        this._dayGrid = dayGrid(this);
         this._currentRange = currentRange(this);
         this._activeRange = activeRange(this);
         this._fetchedRange = writable({start: undefined, end: undefined});
         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);
         this._viewDates = viewDates(this);
         this._view = view2(this);
-        this._viewClass = writable(undefined);
         this._viewComponent = writable(undefined);
         // Resources
         this._resBgColor = writable(noop);
@@ -68,13 +71,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 = mergeOpts(options, options.views[view] ?? {}, input, input.views?.[view] ?? {});
             // Change view component when view changes
             this.view.subscribe(newView => {
                 if (newView === view) {
@@ -85,7 +84,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 +112,26 @@ 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;
+}
+
+function mergeOpts(...args) {
+    let mergable = ['buttonText', 'theme'];
+    let result = {};
+    for (let opts of args) {
+        for (let key of keys(opts)) {
+            result[key] = mergable.includes(key) && is_function(opts[key]) ? opts[key](result[key]) : opts[key];
         }
     }
+    return result;
 }