npm - @event-calendar/core - Versions diffs - 0.13.3 → 0.14.0 - Mend

@event-calendar/core 0.13.3 → 0.14.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 (6) hide show

package/README.md CHANGED Viewed

@@ -4,7 +4,7 @@ See [demo](https://vkurko.github.io/calendar/).
 Full-sized drag & drop JavaScript event calendar with resource view:
-* Lightweight (54kb [br](https://en.wikipedia.org/wiki/Brotli) compressed `modern` version)
+* Lightweight (55kb [br](https://en.wikipedia.org/wiki/Brotli) compressed `modern` version)
 * Zero-dependency (pre-built bundle)
 * Used by [Bookly](https://wordpress.org/plugins/bookly-responsive-appointment-booking-tool/)
@@ -182,6 +182,10 @@ let ec = new Calendar({
     }
 });
 ```
+The CSS is located at `@event-calendar/core/index.css`. If your build tool supports CSS processing, you can import it like this:
+```js
+import '@event-calendar/core/index.css';
+```
 ### Pre-built browser ready bundle
 Include the following lines of code in the `<head>` section of your page:
@@ -234,7 +238,7 @@ In Svelte, you can simply update the original `options` object.
 Defines the content that is displayed as a title of the `all-day` slot.
-This value can be either a string containing HTML `'<p>...</p>'`, 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 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:
 ```js
 function (arg) {
@@ -284,9 +288,9 @@ This value can be either a JavaScript Date object, or an ISO8601 date string lik
 Callback function that is triggered when the user clicks on a date or a time.
 ```js
-function (dateClickInfo) {}
+function (info) {}
 ```
-`dateClickInfo` is an object with the following properties:
+`info` is an object with the following properties:
 <table>
 <tr>
 <td>
@@ -305,6 +309,15 @@ function (dateClickInfo) {}
 <tr>
 <td>
+`allDay`
+</td>
+<td>
+`true` or `false`. Determines if the click has occurred in the `all-day` slot. Clicks in month and list views are treated as all-day too</td>
+</tr>
+<tr>
+<td>
 `dayEl`
 </td>
 <td>HTML element that represents the whole-day that was clicked on</td>
@@ -502,9 +515,9 @@ You can use any of the CSS color formats such `'#f00'`, `'#ff0000'`, `'rgb(255,0
 Callback function that is triggered when the user clicks an event.
 ```js
-function (eventClickInfo) { }
+function (info) { }
 ```
-`eventClickInfo` is an object with the following properties:
+`info` is an object with the following properties:
 <table>
 <tr>
 <td>
@@ -554,14 +567,14 @@ This is currently an alias for the `eventBackgroundColor`.
 Defines the content that is rendered inside an event’s element.
-This value can be either a string containing HTML `'<p>...</p>'`, 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 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:
 ```js
-function (eventInfo) {
+function (info) {
     // return string or object
 }
 ```
-`eventInfo` is an object with the following properties:
+`info` is an object with the following properties:
 <table>
 <tr>
 <td>
@@ -599,9 +612,9 @@ The current [View](#view-object) object
 Callback function that is triggered right after the element has been added to the DOM. If the event data changes, this is not called again.
 ```js
-function (mountInfo) { }
+function (info) { }
 ```
-`mountInfo` is an object with the following properties:
+`info` is an object with the following properties:
 <table>
 <tr>
 <td>
@@ -840,9 +853,9 @@ If not specified, it falls back to [longPressDelay](#longpressdelay).
 Callback function that is triggered when the user hovers over an event with the cursor (mouse pointer).
 ```js
-function (mouseEnterInfo) { }
+function (info) { }
 ```
-`mouseEnterInfo` is an object with the following properties:
+`info` is an object with the following properties:
 <table>
 <tr>
 <td>
@@ -887,9 +900,9 @@ The current [View](#view-object) object
 Callback function that is triggered when the cursor (mouse pointer) is moved out of an event.
 ```js
-function (mouseLeaveInfo) { }
+function (info) { }
 ```
-`mouseLeaveInfo` is an object with the following properties:
+`info` is an object with the following properties:
 <table>
 <tr>
 <td>
@@ -1400,7 +1413,7 @@ Tells the calendar that visible dates should start from the [firstDay](#firstday
 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 HTML `'<p>...</p>'`, 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 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:
 ```js
 function (arg) {
@@ -1435,9 +1448,9 @@ The default text like `+2 more`
 Callback function that is triggered when the user clicks _No events_ area in list view.
 ```js
-function (clickInfo) { }
+function (info) { }
 ```
-`clickInfo` is an object with the following properties:
+`info` is an object with the following properties:
 <table>
 <tr>
 <td>
@@ -1464,7 +1477,7 @@ The current [View](#view-object) object
 Defines the text that is displayed in list view when there are no events to display.
-This value can be either a string containing HTML `'<p>...</p>'`, 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 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:
 ```js
 function () {
@@ -1497,9 +1510,9 @@ Array of plain objects that will be parsed into [Resource](#resource-object) obj
 Callback function that is triggered when a date/time selection is made.
 ```js
-function (selectInfo) { }
+function (info) { }
 ```
-`selectInfo` is an object with the following properties:
+`info` is an object with the following properties:
 <table>
 <tr>
 <td>
@@ -1536,7 +1549,7 @@ function (selectInfo) { }
 </td>
 <td>
-Boolean (`true` or `false`). Determines if the selection has occurred in the `all-day` slot</td>
+`true` or `false`. Determines if the selection has occurred in the `all-day` slot</td>
 </tr>
 <tr>
 <td>
@@ -1591,7 +1604,7 @@ If not specified, it falls back to [longPressDelay](#longpressdelay).
 ### selectMinDistance
 - Type `integer`
-- Default `0`
+- Default `5`
 Defines how many pixels the user’s mouse must move before the selection begins.
@@ -1779,9 +1792,9 @@ The view that is displayed in the calendar. Can be `'dayGridMonth'`, `'listDay'`
 Callback function that is triggered right after the view has been added to the DOM.
 ```js
-function (mountInfo) { }
+function (info) { }
 ```
-`mountInfo` is an object with the following properties:
+`info` is an object with the following properties:
 <table>
 <tr>
 <td>
@@ -1927,7 +1940,7 @@ Here are all properties that exist in Event object:
 </td>
 <td>
-Boolean (`true` or `false`). Determines if the event is shown in the `all-day` slot</td>
+`true` or `false`. Determines if the event is shown in the `all-day` slot</td>
 </tr>
 <tr>
 <td>
@@ -1953,11 +1966,18 @@ Boolean (`true` or `false`). Determines if the event is shown in the `all-day` s
 <tr>
 <td>
+`titleHTML`
+</td>
+<td>The HTML version of the title</td>
+</tr>
+<tr>
+<td>
 `editable`
 </td>
 <td>
-Boolean (`true` or `false`) or `undefined`. The value overriding the [editable](#editable) setting for this specific event
+`true`, `false` or `undefined`. The value overriding the [editable](#editable) setting for this specific event
 </td>
 </tr>
 <tr>
@@ -1967,7 +1987,7 @@ Boolean (`true` or `false`) or `undefined`. The value overriding the [editable](
 </td>
 <td>
-Boolean (`true` or `false`) or `undefined`. The value overriding the [eventStartEditable](#eventstarteditable) setting for this specific event
+`true`, `false` or `undefined`. The value overriding the [eventStartEditable](#eventstarteditable) setting for this specific event
 </td>
 </tr>
 <tr>
@@ -1977,7 +1997,7 @@ Boolean (`true` or `false`) or `undefined`. The value overriding the [eventStart
 </td>
 <td>
-Boolean (`true` or `false`) or `undefined`. The value overriding the [eventDurationEditable](#eventdurationeditable) setting for this specific event
+`true`, `false` or `undefined`. The value overriding the [eventDurationEditable](#eventdurationeditable) setting for this specific event
 </td>
 </tr>
 <tr>
@@ -2092,6 +2112,16 @@ Here are all admissible fields for the event’s input object:
 <tr>
 <td>
+`titleHTML`
+</td>
+<td>
+`string` The HTML version of the title to be displayed instead of the text version. Default `''`
+</td>
+</tr>
+<tr>
+<td>
 `editable`
 </td>
 <td>
@@ -2220,6 +2250,13 @@ Here are all properties that exist in Resource object:
 </td>
 <td>The title of the resource</td>
 </tr>
+<tr>
+<td>
+`titleHTML`
+</td>
+<td>The HTML version of the title</td>
+</tr>
 </table>
 ### Parsing resource from a plain object
@@ -2247,6 +2284,16 @@ Here are all admissible fields for the resource’s input object:
 `string` Text that will be displayed on the resource when it is rendered. Default `''`
 </td>
 </tr>
+<tr>
+<td>
+`titleHTML`
+</td>
+<td>
+`string` The HTML version of the title to be displayed instead of the text version. Default `''`
+</td>
+</tr>
 </table>
 ## View object

package/index.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { is_function, tick, noop, identity, SvelteComponent, init, safe_not_equal, empty, insert, destroy_each, detach, 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 } from 'svelte/internal';
 import { getContext, setContext } from 'svelte';
-import { derived, writable, get } from 'svelte/store';
-import { assign, setMidnight, createDate, createDuration, createEvents, createEventSources, cloneDate, prevClosestDay, nextClosestDay, DAY_IN_SECONDS, addDuration, subtractDay, toLocalDate, toISOString, derived2, addDay, createView, writable2, intl, intlRange, subtractDuration, toEventWithLocalDates, toViewWithLocalDates } from '@event-calendar/common';
+import { derived, writable, readable, get } from 'svelte/store';
+import { assign, setMidnight, createDate, createDuration, createEvents, createEventSources, cloneDate, prevClosestDay, nextClosestDay, DAY_IN_SECONDS, addDuration, subtractDay, toLocalDate, toISOString, derived2, addDay, createView, writable2, intl, intlRange, subtractDuration, toEventWithLocalDates, toViewWithLocalDates, ignore } from '@event-calendar/common';
 function createOptions(plugins) {
     let options = {
@@ -344,6 +344,20 @@ function events(state) {
     return _events;
 }
+function now() {
+    return readable(createDate(), set => {
+        let interval = setInterval(() => {
+            set(createDate());
+        }, 1000);
+        return () => clearInterval(interval);
+    });
+}
+function today(state) {
+    return derived(state._now, $_now => setMidnight(cloneDate($_now)));
+}
 class State {
     constructor(plugins, input) {
         plugins = plugins || [];
@@ -362,6 +376,9 @@ class State {
         this._activeRange = activeRange(this);
         this._fetchedRange = writable({start: undefined, end: undefined});
         this._events = events(this);
+        this._now = now();
+        this._today = today(this);
+        this._ignoreClick = writable(false);
         this._intlEventTime = intl(this.locale, this.eventTimeFormat);
         this._intlSlotLabel = intl(this.locale, this.slotLabelFormat);
         this._intlDayHeader = intl(this.locale, this.dayHeaderFormat);
@@ -1232,6 +1249,8 @@ function create_fragment(ctx) {
 	let switch_instance1;
 	let div_class_value;
 	let current;
+	let mounted;
+	let dispose;
 	toolbar = new Toolbar({});
 	var switch_value = /*$_viewComponent*/ ctx[5];
@@ -1278,6 +1297,11 @@ function create_fragment(ctx) {
 			append(div, t1);
 			if (switch_instance1) mount_component(switch_instance1, div, null);
 			current = true;
+			if (!mounted) {
+				dispose = listen(window, "click", /*handleClick*/ ctx[16], true);
+				mounted = true;
+			}
 		},
 		p(ctx, dirty) {
 			if (switch_value !== (switch_value = /*$_viewComponent*/ ctx[5])) {
@@ -1354,11 +1378,14 @@ function create_fragment(ctx) {
 			destroy_component(toolbar);
 			if (switch_instance0) destroy_component(switch_instance0);
 			if (switch_instance1) destroy_component(switch_instance1);
+			mounted = false;
+			dispose();
 		}
 	};
 }
 function instance($$self, $$props, $$invalidate) {
+	let $_ignoreClick;
 	let $events;
 	let $_events;
 	let $eventSources;
@@ -1372,14 +1399,15 @@ function instance($$self, $$props, $$invalidate) {
 	let { options = {} } = $$props;
 	let state = new State(plugins, options);
 	setContext('state', state);
-	let { _viewComponent, _viewClass, _interaction, _iClass, _events, events, eventSources, height, theme } = state;
+	let { _viewComponent, _viewClass, _ignoreClick, _interaction, _iClass, _events, events, eventSources, height, theme } = state;
 	component_subscribe($$self, _viewComponent, value => $$invalidate(5, $_viewComponent = value));
 	component_subscribe($$self, _viewClass, value => $$invalidate(2, $_viewClass = value));
+	component_subscribe($$self, _ignoreClick, value => $$invalidate(29, $_ignoreClick = value));
 	component_subscribe($$self, _interaction, value => $$invalidate(0, $_interaction = value));
 	component_subscribe($$self, _iClass, value => $$invalidate(3, $_iClass = value));
-	component_subscribe($$self, _events, value => $$invalidate(28, $_events = value));
-	component_subscribe($$self, events, value => $$invalidate(27, $events = value));
-	component_subscribe($$self, eventSources, value => $$invalidate(29, $eventSources = value));
+	component_subscribe($$self, _events, value => $$invalidate(31, $_events = value));
+	component_subscribe($$self, events, value => $$invalidate(30, $events = value));
+	component_subscribe($$self, eventSources, value => $$invalidate(32, $eventSources = value));
 	component_subscribe($$self, height, value => $$invalidate(4, $height = value));
 	component_subscribe($$self, theme, value => $$invalidate(1, $theme = value));
@@ -1465,13 +1493,20 @@ function instance($$self, $$props, $$invalidate) {
 		}
 	}
+	function handleClick(jsEvent) {
+		if ($_ignoreClick) {
+			ignore(jsEvent);
+			set_store_value(_ignoreClick, $_ignoreClick = false, $_ignoreClick);
+		}
+	}
 	$$self.$$set = $$props => {
-		if ('plugins' in $$props) $$invalidate(15, plugins = $$props.plugins);
-		if ('options' in $$props) $$invalidate(16, options = $$props.options);
+		if ('plugins' in $$props) $$invalidate(17, plugins = $$props.plugins);
+		if ('options' in $$props) $$invalidate(18, options = $$props.options);
 	};
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty[0] & /*options*/ 65536) {
+		if ($$self.$$.dirty[0] & /*options*/ 262144) {
 			// Reactively update options that did change
 			for (let [name, value] of diff(options)) {
 				setOption(name, value);
@@ -1488,6 +1523,7 @@ function instance($$self, $$props, $$invalidate) {
 		$_viewComponent,
 		_viewComponent,
 		_viewClass,
+		_ignoreClick,
 		_interaction,
 		_iClass,
 		_events,
@@ -1495,6 +1531,7 @@ function instance($$self, $$props, $$invalidate) {
 		eventSources,
 		height,
 		theme,
+		handleClick,
 		plugins,
 		options,
 		setOption,
@@ -1521,18 +1558,18 @@ class Calendar extends SvelteComponent {
 			create_fragment,
 			safe_not_equal,
 			{
-				plugins: 15,
-				options: 16,
-				setOption: 17,
-				getOption: 18,
-				refetchEvents: 19,
-				getEvents: 20,
-				getEventById: 21,
-				addEvent: 22,
-				updateEvent: 23,
-				removeEventById: 24,
-				getView: 25,
-				unselect: 26
+				plugins: 17,
+				options: 18,
+				setOption: 19,
+				getOption: 20,
+				refetchEvents: 21,
+				getEvents: 22,
+				getEventById: 23,
+				addEvent: 24,
+				updateEvent: 25,
+				removeEventById: 26,
+				getView: 27,
+				unselect: 28
 			},
 			null,
 			[-1, -1]
@@ -1540,43 +1577,43 @@ class Calendar extends SvelteComponent {
 	}
 	get setOption() {
-		return this.$$.ctx[17];
+		return this.$$.ctx[19];
 	}
 	get getOption() {
-		return this.$$.ctx[18];
+		return this.$$.ctx[20];
 	}
 	get refetchEvents() {
-		return this.$$.ctx[19];
+		return this.$$.ctx[21];
 	}
 	get getEvents() {
-		return this.$$.ctx[20];
+		return this.$$.ctx[22];
 	}
 	get getEventById() {
-		return this.$$.ctx[21];
+		return this.$$.ctx[23];
 	}
 	get addEvent() {
-		return this.$$.ctx[22];
+		return this.$$.ctx[24];
 	}
 	get updateEvent() {
-		return this.$$.ctx[23];
+		return this.$$.ctx[25];
 	}
 	get removeEventById() {
-		return this.$$.ctx[24];
+		return this.$$.ctx[26];
 	}
 	get getView() {
-		return this.$$.ctx[25];
+		return this.$$.ctx[27];
 	}
 	get unselect() {
-		return this.$$.ctx[26];
+		return this.$$.ctx[28];
 	}
 }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@event-calendar/core",
-  "version": "0.13.3",
+  "version": "0.14.0",
   "title": "Event Calendar Core package",
   "description": "Full-sized drag & drop event calendar with resource view",
   "keywords": [
@@ -34,7 +34,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@event-calendar/common": "~0.13.3",
+    "@event-calendar/common": "~0.14.0",
     "svelte": "^3.51.0"
   }
 }

package/src/Calendar.svelte CHANGED Viewed

@@ -5,7 +5,7 @@
     import {diff} from './storage/options';
     import State from './storage/state';
     import Toolbar from './Toolbar.svelte';
-    import {assign, toEventWithLocalDates, toViewWithLocalDates} from '@event-calendar/common';
+    import {assign, toEventWithLocalDates, toViewWithLocalDates, ignore} from '@event-calendar/common';
     export let plugins = [];
     export let options = {};
@@ -13,7 +13,8 @@
     let state = new State(plugins, options);
     setContext('state', state);
-    let {_viewComponent, _viewClass, _interaction, _iClass, _events, events, eventSources, height, theme} = state;
+    let {_viewComponent, _viewClass, _ignoreClick, _interaction, _iClass, _events,
+        events, eventSources, height, theme} = state;
     // Reactively update options that did change
     $: for (let [name, value] of diff(options)) {
@@ -93,6 +94,13 @@
             $events = func($events);
         }
     }
+    function handleClick(jsEvent) {
+        if ($_ignoreClick) {
+            ignore(jsEvent);
+            $_ignoreClick = false;
+        }
+    }
 </script>
 <div
@@ -103,3 +111,4 @@
     <svelte:component this={$_viewComponent}/>
     <svelte:component this={$_interaction.component}/>
 </div>
+<svelte:window on:click|capture={handleClick}/>

package/src/storage/state.js CHANGED Viewed

@@ -5,6 +5,8 @@ import {
     activeRange,
     currentRange,
     events,
+    now,
+    today,
     viewDates,
     viewTitle,
     view as view2  // hack to avoid a runtime error in SvelteKit dev mode (ReferenceError: view is not defined)
@@ -30,6 +32,9 @@ export default class {
         this._activeRange = activeRange(this);
         this._fetchedRange = writable({start: undefined, end: undefined});
         this._events = events(this);
+        this._now = now();
+        this._today = today(this);
+        this._ignoreClick = writable(false);
         this._intlEventTime = intl(this.locale, this.eventTimeFormat);
         this._intlSlotLabel = intl(this.locale, this.slotLabelFormat);
         this._intlDayHeader = intl(this.locale, this.dayHeaderFormat);

package/src/storage/stores.js CHANGED Viewed

@@ -1,8 +1,9 @@
-import {derived, writable} from 'svelte/store';
+import {derived, writable, readable} from 'svelte/store';
 import {is_function, noop, tick} from 'svelte/internal';
 import {
     DAY_IN_SECONDS,
     cloneDate,
+    createDate,
     addDuration,
     addDay,
     subtractDay,
@@ -204,3 +205,17 @@ export function events(state) {
     return _events;
 }
+export function now() {
+    return readable(createDate(), set => {
+        let interval = setInterval(() => {
+            set(createDate());
+        }, 1000);
+        return () => clearInterval(interval);
+    });
+}
+export function today(state) {
+    return derived(state._now, $_now => setMidnight(cloneDate($_now)));
+}