@event-calendar/core 0.12.0 → 0.13.1

package/README.md

@@ -4,7 +4,7 @@ See [demo](https://vkurko.github.io/calendar/).
 
 Full-sized drag & drop JavaScript event calendar with resource view:
 
-* Lightweight (52kb [br](https://en.wikipedia.org/wiki/Brotli) compressed `modern` version)
+* Lightweight (54kb [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/)
 
@@ -42,10 +42,11 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
   - [eventDragMinDistance](#eventdragmindistance)
   - [eventDragStart](#eventdragstart)
   - [eventDragStop](#eventdragstop)
+  - [eventDrop](#eventdrop)
   </td><td>
 
-  - [eventDrop](#eventdrop)
   - [eventDurationEditable](#eventdurationeditable)
+  - [eventLongPressDelay](#eventlongpressdelay)
   - [eventMouseEnter](#eventmouseenter)
   - [eventMouseLeave](#eventmouseleave)
   - [eventResize](#eventresize)
@@ -66,6 +67,7 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
   - [listDaySideFormat](#listdaysideformat)
   - [loading](#loading)
   - [locale](#locale)
+  - [longPressDelay](#longpressdelay)
   - [monthMode](#monthmode)
   </td><td>
   
@@ -78,6 +80,7 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
   - [select](#select)
   - [selectable](#selectable)
   - [selectBackgroundColor](#selectbackgroundcolor)
+  - [selectLongPressDelay](#selectlongpressdelay)
   - [selectMinDistance](#selectmindistance)
   - [scrollTime](#scrolltime)
   - [slotDuration](#slotduration)
@@ -822,6 +825,14 @@ The current [View](#view-object) object
 
 Determines whether calendar events can be resized.
 
+### eventLongPressDelay
+- Type `integer`
+- Default `undefined`
+
+For touch devices, the amount of time (in milliseconds) the user must hold down a tap before the event becomes draggable/resizable.
+
+If not specified, it falls back to [longPressDelay](#longpressdelay).
+
 ### eventMouseEnter
 - Type `function`
 - Default `undefined`
@@ -1367,6 +1378,14 @@ function (isLoading) { }
 
 Defines the `locales` parameter for the native JavaScript [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) object that the Event Calendar uses to format date and time strings in options such as [dayHeaderFormat](#dayheaderformat), [eventTimeFormat](#eventtimeformat), etc.
 
+### longPressDelay
+- Type `integer`
+- Default `1000`
+
+For touch devices, the amount of time (in milliseconds) the user must hold down a tap before the event becomes draggable/resizable or the date becomes selectable.
+
+For a more granular configuration, see [eventLongPressDelay](#eventlongpressdelay) and [selectLongPressDelay](#selectlongpressdelay).
+
 ### monthMode
 - Type `boolean`
 - Default `false`
@@ -1562,6 +1581,14 @@ Sets the background color for the event indicating the current selection. See [s
 
 You can use any of the CSS color formats such `'#f00'`, `'#ff0000'`, `'rgb(255,0,0)'`, or `'red'`.
 
+### selectLongPressDelay
+- Type `integer`
+- Default `undefined`
+
+For touch devices, the amount of time (in milliseconds) the user must hold down a tap before the date becomes selectable.
+
+If not specified, it falls back to [longPressDelay](#longpressdelay).
+
 ### selectMinDistance
 - Type `integer`
 - Default `0`

package/index.css

@@ -1 +1 @@
-.ec-flex{display:flex}.ec-month .ec-body,.ec-days,.ec-day,.ec-day-title,.ec-resource{flex:1 1 0%;min-width:0;max-width:100%}.ec{display:flex;flex-direction:column}.ec ::-webkit-scrollbar{background:#fff}.ec ::-webkit-scrollbar-thumb{border:4px solid #fff;box-shadow:none;background:#dadce0;border-radius:8px;min-height:40px}.ec :hover::-webkit-scrollbar-thumb{background:#bdc1c6}.ec-hidden-scroll{display:none;overflow-y:scroll;visibility:hidden;flex-shrink:0}.ec-with-scroll .ec-hidden-scroll{display:block}.ec-toolbar{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;margin-bottom:1em}.ec-toolbar>*{margin-bottom:-0.5em}.ec-toolbar>*>*{margin-bottom:.5em}.ec-toolbar>*>*:not(:last-child){margin-right:.75em}.ec-title{margin:0}.ec-button{background-color:#fff;border:1px solid #ced4da;padding:.375rem .75rem;font-size:1rem;line-height:1.5;border-radius:.25rem}.ec-button:not(:disabled){color:#212529;cursor:pointer}.ec-button:not(:disabled):hover,.ec-button.ec-active{background-color:#ececec;border-color:#b1bbc4}.ec-button-group{display:inline-flex}.ec-button-group .ec-button:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}.ec-button-group .ec-button:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.ec-icon{display:inline-block;width:1em}.ec-icon.ec-prev:after,.ec-icon.ec-next:after{content:"";position:relative;width:.5em;height:.5em;border-top:2px solid #212529;border-right:2px solid #212529;display:inline-block}.ec-icon.ec-prev:after{transform:rotate(-135deg) translate(-2px, 2px)}.ec-icon.ec-next:after{transform:rotate(45deg) translate(-2px, 2px)}.ec-header,.ec-all-day,.ec-body,.ec-days,.ec-day{border:1px solid #dadce0}.ec-header{display:flex;flex-shrink:0}.ec-header .ec-resource{flex-direction:column}.ec-header .ec-resource .ec-days{border-top-style:solid}.ec-header .ec-days{border-bottom:none}.ec-header .ec-day{min-height:24px;line-height:24px;text-align:center;overflow:hidden;text-overflow:ellipsis}.ec-all-day{display:flex;flex-shrink:0;border-top:none}.ec-all-day .ec-days{border-bottom:none}.ec-all-day .ec-day{padding-bottom:4px}.ec-all-day .ec-event-time{display:none}.ec-body{position:relative;overflow-x:hidden;overflow-y:auto}.ec-body:not(.ec-list){border-top:none}.ec-sidebar{flex:0 0 auto;width:auto;max-width:100%;padding:0 4px 0 8px;display:flex;flex-direction:column;justify-content:center}.ec-sidebar-title{visibility:hidden;overflow-y:hidden;height:0;text-align:right}.ec-all-day .ec-sidebar-title{visibility:visible;height:auto;padding:8px 0}.ec-content{display:flex}.ec-month .ec-content{flex-direction:column;height:100%}.ec-month .ec-uniform .ec-content{overflow:hidden}.ec-list .ec-content{flex-direction:column}.ec-resource{display:flex}.ec-days{display:flex;border-style:none none solid}.ec-days:last-child{border-bottom:none}.ec-month .ec-days,.ec-resource .ec-days{flex:1 0 auto}.ec-month .ec-uniform .ec-days{flex:1 1 0%;min-height:0}.ec-day{border-style:none none none solid}.ec-day.ec-today{background-color:#fcf8e3}.ec-day.ec-highlight{background-color:#e5f7fe}.ec-month .ec-body .ec-day{min-height:5em;position:relative}.ec-month .ec-uniform .ec-day{min-height:0}.ec-month .ec-day:first-child{border-left:none}.ec-day.ec-other-month .ec-day-head{opacity:.3}.ec-list .ec-day{flex:1 0 auto;background-color:#fff;border-style:solid none;padding:8px 14px;font-weight:bold;position:-webkit-sticky;position:sticky;top:0;z-index:2}.ec-list .ec-day:first-child{border-top:none}.ec-month .ec-day-head{text-align:right;padding:4px 4px 3px}.ec-month .ec-day-foot{position:absolute;bottom:0;padding:2px;font-size:.85em}.ec-month .ec-day-foot a{cursor:pointer}.ec-list .ec-day-side{float:right}.ec-list .ec-no-events{text-align:center;padding:5em 0}.ec-events{margin:0 6px 0 0}.ec-week .ec-events,.ec-events.ec-preview{position:relative}.ec-event{display:flex;padding:2px;color:#fff;box-sizing:border-box;box-shadow:0 0 1px 0 #dadce0;background-color:#039be5;border-radius:3px;font-size:.85em;line-height:1.5;z-index:1}.ec-month .ec-event,.ec-all-day .ec-event{position:relative}.ec-week .ec-body .ec-event{position:absolute}.ec-list .ec-event{flex-direction:row;padding:8px 14px;color:inherit;background-color:rgba(0,0,0,0);border-radius:0}.ec-event.ec-preview{position:absolute;z-index:1000;width:100%;-webkit-user-select:none;user-select:none;opacity:.8}.ec-event.ec-pointer{color:inherit;pointer-events:none;-webkit-user-select:none;user-select:none;position:absolute;z-index:0;box-shadow:none;display:none}.ec-day:hover .ec-event.ec-pointer{display:flex}.ec-event-body{display:flex;flex-direction:column;width:100%}.ec-month .ec-event-body,.ec-all-day .ec-event-body{flex-direction:row}.ec-event-tag{width:4px;border-radius:2px;margin-right:8px}.ec-event-time{overflow:hidden;white-space:nowrap;margin:0 0 1px 0;flex-shrink:0}.ec-month .ec-event-time{margin:0 3px 0 0;max-width:100%;text-overflow:ellipsis}.ec-event-title{overflow:hidden}.ec-month .ec-event-title,.ec-all-day .ec-event-title{min-height:1.5em;white-space:nowrap;text-overflow:ellipsis}.ec-week .ec-body .ec-event-title{position:-webkit-sticky;position:sticky;top:0}.ec-list .ec-event-title{font-size:1rem}.ec-draggable{cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none}.ec-ghost{opacity:.5;-webkit-user-select:none;user-select:none;touch-action:none}.ec-bg-events{position:relative}.ec-bg-event{position:absolute;background-color:#dadce0;opacity:.3;width:100%}.ec-hidden-times{visibility:hidden;overflow-y:hidden;height:0}.ec-time,.ec-line{height:24px}.ec-time{position:relative;line-height:24px;top:-12px;text-align:right;white-space:nowrap}.ec-lines{width:8px}.ec-line:not(:first-child):after{content:"";position:absolute;width:100%;border-bottom:1px solid #dadce0;pointer-events:none}.ec-body:not(.ec-compact) .ec-line:nth-child(even):after{border-bottom-style:dotted}.ec-popup{position:absolute;top:0;width:110%;min-width:180px;z-index:1010;padding:8px 10px 14px;background-color:#fff;border-radius:6px;outline:1px solid rgba(0,0,0,0);box-shadow:0 1px 3px 0 rgba(60,64,67,.3),0 4px 8px 3px rgba(60,64,67,.15)}.ec-popup .ec-day-head{text-align:left;display:flex;justify-content:space-between}.ec-popup .ec-day-head a{cursor:pointer;font-size:1.5em;line-height:.8}.ec-popup .ec-events{margin:0}.ec-extra{position:relative;height:100%;overflow:hidden;margin-left:-6.5px}.ec-now-indicator{position:absolute;z-index:1005;width:100%;border-top:#ea4335 solid 2px;pointer-events:none}.ec-now-indicator:before{background:#ea4335;border-radius:50%;content:"";position:absolute;height:12px;margin-top:-7px;width:12px;pointer-events:none}.ec-resizer{position:absolute;-webkit-user-select:none;user-select:none}.ec-month .ec-resizer,.ec-all-day .ec-resizer{top:0;right:0;bottom:0;width:50%;max-width:8px;cursor:ew-resize}.ec-week .ec-body .ec-resizer{left:0;right:0;bottom:0;height:50%;max-height:8px;cursor:ns-resize}.ec-dragging{cursor:pointer !important}.ec-resizing-y{cursor:ns-resize !important}.ec-resizing-x{cursor:ew-resize !important}
+.ec-flex{display:flex}.ec-month .ec-body,.ec-days,.ec-day,.ec-day-title,.ec-resource{flex:1 1 0%;min-width:0;max-width:100%}.ec{display:flex;flex-direction:column;-webkit-tap-highlight-color:rgba(0,0,0,0)}.ec ::-webkit-scrollbar{background:#fff}.ec ::-webkit-scrollbar-thumb{border:4px solid #fff;box-shadow:none;background:#dadce0;border-radius:8px;min-height:40px}.ec :hover::-webkit-scrollbar-thumb{background:#bdc1c6}.ec-hidden-scroll{display:none;overflow-y:scroll;visibility:hidden;flex-shrink:0}.ec-with-scroll .ec-hidden-scroll{display:block}.ec-toolbar{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;margin-bottom:1em}.ec-toolbar>*{margin-bottom:-0.5em}.ec-toolbar>*>*{margin-bottom:.5em}.ec-toolbar>*>*:not(:last-child){margin-right:.75em}.ec-title{margin:0}.ec-button{background-color:#fff;border:1px solid #ced4da;padding:.375rem .75rem;font-size:1rem;line-height:1.5;border-radius:.25rem}.ec-button:not(:disabled){color:#212529;cursor:pointer}.ec-button:not(:disabled):hover,.ec-button.ec-active{background-color:#ececec;border-color:#b1bbc4}.ec-button-group{display:inline-flex}.ec-button-group .ec-button:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}.ec-button-group .ec-button:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.ec-icon{display:inline-block;width:1em}.ec-icon.ec-prev:after,.ec-icon.ec-next:after{content:"";position:relative;width:.5em;height:.5em;border-top:2px solid #212529;border-right:2px solid #212529;display:inline-block}.ec-icon.ec-prev:after{transform:rotate(-135deg) translate(-2px, 2px)}.ec-icon.ec-next:after{transform:rotate(45deg) translate(-2px, 2px)}.ec-header,.ec-all-day,.ec-body,.ec-days,.ec-day{border:1px solid #dadce0}.ec-header{display:flex;flex-shrink:0}.ec-header .ec-resource{flex-direction:column}.ec-header .ec-resource .ec-days{border-top-style:solid}.ec-header .ec-days{border-bottom:none}.ec-header .ec-day{min-height:24px;line-height:24px;text-align:center;overflow:hidden;text-overflow:ellipsis}.ec-all-day{display:flex;flex-shrink:0;border-top:none}.ec-all-day .ec-days{border-bottom:none}.ec-all-day .ec-day{padding-bottom:4px}.ec-all-day .ec-event-time{display:none}.ec-body{position:relative;overflow-x:hidden;overflow-y:auto}.ec-body:not(.ec-list){border-top:none}.ec-sidebar{flex:0 0 auto;width:auto;max-width:100%;padding:0 4px 0 8px;display:flex;flex-direction:column;justify-content:center}.ec-sidebar-title{visibility:hidden;overflow-y:hidden;height:0;text-align:right}.ec-all-day .ec-sidebar-title{visibility:visible;height:auto;padding:8px 0}.ec-content{display:flex}.ec-month .ec-content{flex-direction:column;height:100%}.ec-month .ec-uniform .ec-content{overflow:hidden}.ec-list .ec-content{flex-direction:column}.ec-resource{display:flex}.ec-days{display:flex;border-style:none none solid}.ec-days:last-child{border-bottom:none}.ec-month .ec-days,.ec-resource .ec-days{flex:1 0 auto}.ec-month .ec-uniform .ec-days{flex:1 1 0%;min-height:0}.ec-day{border-style:none none none solid}.ec-day.ec-today{background-color:#fcf8e3}.ec-day.ec-highlight{background-color:#e5f7fe}.ec-month .ec-body .ec-day{min-height:5em;position:relative}.ec-month .ec-uniform .ec-day{min-height:0}.ec-month .ec-day:first-child{border-left:none}.ec-day.ec-other-month .ec-day-head{opacity:.3}.ec-list .ec-day{flex:1 0 auto;background-color:#fff;border-style:solid none;padding:8px 14px;font-weight:bold;position:-webkit-sticky;position:sticky;top:0;z-index:2}.ec-list .ec-day:first-child{border-top:none}.ec-month .ec-day-head{text-align:right;padding:4px 4px 3px}.ec-month .ec-day-foot{position:absolute;bottom:0;padding:2px;font-size:.85em}.ec-month .ec-day-foot a{cursor:pointer}.ec-list .ec-day-side{float:right}.ec-list .ec-no-events{text-align:center;padding:5em 0}.ec-events{margin:0 6px 0 0}.ec-week .ec-events,.ec-events.ec-preview{position:relative}.ec-event{display:flex;padding:2px;color:#fff;box-sizing:border-box;box-shadow:0 0 1px 0 #dadce0;background-color:#039be5;border-radius:3px;font-size:.85em;line-height:1.5;z-index:1}.ec-month .ec-event,.ec-all-day .ec-event{position:relative}.ec-week .ec-body .ec-event{position:absolute}.ec-list .ec-event{flex-direction:row;padding:8px 14px;color:inherit;background-color:rgba(0,0,0,0);border-radius:0}.ec-event.ec-preview{position:absolute;z-index:1000;width:100%;-webkit-user-select:none;user-select:none;opacity:.8}.ec-event.ec-pointer{color:inherit;pointer-events:none;-webkit-user-select:none;user-select:none;position:absolute;z-index:0;box-shadow:none;display:none}.ec-day:hover .ec-event.ec-pointer{display:flex}.ec-event-body{display:flex;flex-direction:column;width:100%}.ec-month .ec-event-body,.ec-all-day .ec-event-body{flex-direction:row}.ec-event-tag{width:4px;border-radius:2px;margin-right:8px}.ec-event-time{overflow:hidden;white-space:nowrap;margin:0 0 1px 0;flex-shrink:0}.ec-month .ec-event-time{margin:0 3px 0 0;max-width:100%;text-overflow:ellipsis}.ec-event-title{overflow:hidden}.ec-month .ec-event-title,.ec-all-day .ec-event-title{min-height:1.5em;white-space:nowrap;text-overflow:ellipsis}.ec-week .ec-body .ec-event-title{position:-webkit-sticky;position:sticky;top:0}.ec-list .ec-event-title{font-size:1rem}.ec-draggable{cursor:pointer;-webkit-user-select:none;user-select:none}.ec-ghost{opacity:.5;-webkit-user-select:none;user-select:none}.ec-bg-events{position:relative}.ec-bg-event{position:absolute;background-color:#dadce0;opacity:.3;width:100%}.ec-hidden-times{visibility:hidden;overflow-y:hidden;height:0}.ec-time,.ec-line{height:24px}.ec-time{position:relative;line-height:24px;top:-12px;text-align:right;white-space:nowrap}.ec-lines{width:8px}.ec-line:not(:first-child):after{content:"";position:absolute;width:100%;border-bottom:1px solid #dadce0;pointer-events:none}.ec-body:not(.ec-compact) .ec-line:nth-child(even):after{border-bottom-style:dotted}.ec-popup{position:absolute;top:0;width:110%;min-width:180px;z-index:1010;padding:8px 10px 14px;background-color:#fff;border-radius:6px;outline:1px solid rgba(0,0,0,0);box-shadow:0 1px 3px 0 rgba(60,64,67,.3),0 4px 8px 3px rgba(60,64,67,.15)}.ec-popup .ec-day-head{text-align:left;display:flex;justify-content:space-between}.ec-popup .ec-day-head a{cursor:pointer;font-size:1.5em;line-height:.8}.ec-popup .ec-events{margin:0}.ec-extra{position:relative;height:100%;overflow:hidden;margin-left:-6.5px;-webkit-user-select:none;user-select:none}.ec-now-indicator{position:absolute;z-index:1005;width:100%;border-top:#ea4335 solid 2px;pointer-events:none}.ec-now-indicator:before{background:#ea4335;border-radius:50%;content:"";position:absolute;height:12px;margin-top:-7px;width:12px;pointer-events:none}.ec-resizer{position:absolute;-webkit-user-select:none;user-select:none}.ec-month .ec-resizer,.ec-all-day .ec-resizer{top:0;right:0;bottom:0;width:50%;max-width:8px;cursor:ew-resize}.ec-week .ec-body .ec-resizer{left:0;right:0;bottom:0;height:50%;max-height:8px;cursor:ns-resize}.ec-dragging{cursor:pointer !important}.ec-resizing-y{cursor:ns-resize !important}.ec-resizing-x{cursor:ew-resize !important}

package/index.js

@@ -456,7 +456,7 @@ function get_each_context$1(ctx, list, i) {
 	return child_ctx;
 }
 
-// (38:1) {:else}
+// (38:4) {:else}
 function create_else_block$1(ctx) {
 	let button;
 	let t_value = /*$buttonText*/ ctx[5][/*button*/ ctx[23]] + "";
@@ -505,7 +505,7 @@ function create_else_block$1(ctx) {
 	};
 }
 
-// (36:30) 
+// (36:33) 
 function create_if_block_4(ctx) {
 	let button;
 	let t_value = /*$buttonText*/ ctx[5][/*button*/ ctx[23]] + "";
@@ -549,7 +549,7 @@ function create_if_block_4(ctx) {
 	};
 }
 
-// (34:29) 
+// (34:32) 
 function create_if_block_3(ctx) {
 	let button;
 	let i;
@@ -591,7 +591,7 @@ function create_if_block_3(ctx) {
 	};
 }
 
-// (32:28) 
+// (32:31) 
 function create_if_block_2(ctx) {
 	let button;
 	let i;
@@ -633,7 +633,7 @@ function create_if_block_2(ctx) {
 	};
 }
 
-// (30:29) 
+// (30:32) 
 function create_if_block_1(ctx) {
 	let h2;
 	let t;
@@ -662,7 +662,7 @@ function create_if_block_1(ctx) {
 	};
 }
 
-// (29:1) {#if button == ''}
+// (29:4) {#if button == ''}
 function create_if_block$1(ctx) {
 	return { c: noop, m: noop, p: noop, d: noop };
 }
@@ -865,7 +865,7 @@ function get_each_context_1(ctx, list, i) {
 	return child_ctx;
 }
 
-// (28:4) {:else}
+// (28:16) {:else}
 function create_else_block(ctx) {
 	let buttons;
 	let current;
@@ -899,7 +899,7 @@ function create_else_block(ctx) {
 	};
 }
 
-// (24:4) {#if buttons.length > 1}
+// (24:16) {#if buttons.length > 1}
 function create_if_block(ctx) {
 	let div;
 	let buttons;
@@ -943,7 +943,7 @@ function create_if_block(ctx) {
 	};
 }
 
-// (23:3) {#each sections[key] as buttons}
+// (23:12) {#each sections[key] as buttons}
 function create_each_block_1(ctx) {
 	let current_block_type_index;
 	let if_block;
@@ -1013,7 +1013,7 @@ function create_each_block_1(ctx) {
 	};
 }
 
-// (21:1) {#each Object.keys(sections) as key}
+// (21:4) {#each Object.keys(sections) as key}
 function create_each_block(ctx) {
 	let div;
 	let t;
@@ -1451,7 +1451,7 @@ function instance($$self, $$props, $$invalidate) {
 
 	function unselect() {
 		if ($_interaction.action) {
-			$_interaction.action.clearSelection();
+			$_interaction.action.unselect();
 		}
 
 		return this;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@event-calendar/core",
-  "version": "0.12.0",
+  "version": "0.13.1",
   "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.12.0",
+    "@event-calendar/common": "~0.13.1",
     "svelte": "^3.51.0"
   }
 }

package/src/Buttons.svelte

@@ -1,41 +1,41 @@
 <script>
-	import {getContext} from 'svelte';
-	import {createDate, cloneDate, subtractDay, addDuration, subtractDuration, setMidnight} from '@event-calendar/common';
+    import {getContext} from 'svelte';
+    import {createDate, cloneDate, subtractDay, addDuration, subtractDuration, setMidnight} from '@event-calendar/common';
 
-	export let buttons;
+    export let buttons;
 
-	let {_currentRange, _viewTitle, buttonText, date, duration, hiddenDays, theme, view} = getContext('state');
+    let {_currentRange, _viewTitle, buttonText, date, duration, hiddenDays, theme, view} = getContext('state');
 
-	let today = setMidnight(createDate()), isToday;
+    let today = setMidnight(createDate()), isToday;
 
-	$: isToday = today >= $_currentRange.start && today < $_currentRange.end || null;
+    $: isToday = today >= $_currentRange.start && today < $_currentRange.end || null;
 
-	function prev() {
-		let d = subtractDuration($date, $duration);
-		if ($hiddenDays.length && $hiddenDays.length < 7) {
-			while ($hiddenDays.includes(d.getUTCDay())) {
-				subtractDay(d);
-			}
-		}
-		$date = d;
-	}
+    function prev() {
+        let d = subtractDuration($date, $duration);
+        if ($hiddenDays.length && $hiddenDays.length < 7) {
+            while ($hiddenDays.includes(d.getUTCDay())) {
+                subtractDay(d);
+            }
+        }
+        $date = d;
+    }
 
-	function next() {
-		$date = addDuration($date, $duration);
-	}
+    function next() {
+        $date = addDuration($date, $duration);
+    }
 </script>
 
 {#each buttons as button}
-	{#if button == ''}
-	{:else if button == 'title'}
-		<h2 class="{$theme.title}">{$_viewTitle}</h2>
-	{:else if button == 'prev'}
-		<button class="{$theme.button} ec-{button}" on:click={prev}><i class="{$theme.icon} ec-{button}"></i></button>
-	{:else if button === 'next'}
-		<button class="{$theme.button} ec-{button}" 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>
-	{:else}
-		<button class="{$theme.button}{$view === button ? ' ' + $theme.active : ''} ec-{button}" on:click={() => $view = button}>{$buttonText[button]}</button>
-	{/if}
+    {#if button == ''}
+    {:else if button == 'title'}
+        <h2 class="{$theme.title}">{$_viewTitle}</h2>
+    {:else if button == 'prev'}
+        <button class="{$theme.button} ec-{button}" on:click={prev}><i class="{$theme.icon} ec-{button}"></i></button>
+    {:else if button === 'next'}
+        <button class="{$theme.button} ec-{button}" 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>
+    {:else}
+        <button class="{$theme.button}{$view === button ? ' ' + $theme.active : ''} ec-{button}" on:click={() => $view = button}>{$buttonText[button]}</button>
+    {/if}
 {/each}

package/src/Calendar.svelte

@@ -1,105 +1,105 @@
 <script>
-	import '../index.css';
-	import {setContext} from 'svelte';
-	import {get} from 'svelte/store';
-	import {diff} from './storage/options';
-	import State from './storage/state';
-	import Toolbar from './Toolbar.svelte';
-	import {assign, toEventWithLocalDates, toViewWithLocalDates} from '@event-calendar/common';
-
-	export let plugins = [];
-	export let options = {};
-
-	let state = new State(plugins, options);
-	setContext('state', state);
-
-	let {_viewComponent, _viewClass, _interaction, _iClass, _events, events, eventSources, height, theme} = state;
-
-	// Reactively update options that did change
-	$: for (let [name, value] of diff(options)) {
-		setOption(name, value);
-	}
-
-	export function setOption(name, value) {
-		if (state.hasOwnProperty(name)) {
-			if (state[name].parse) {
-				value = state[name].parse(value);
-			}
-			state[name].set(value);
-		}
-		return this;
-	}
-
-	export function getOption(name) {
-		return state.hasOwnProperty(name) ? get(state[name]) : undefined;
-	}
-
-	export function refetchEvents() {
-		state._fetchedRange.set({start: undefined, end: undefined});
-		return this;
-	}
-
-	export function getEvents() {
-		return get(state._events).map(toEventWithLocalDates);
-	}
-
-	export function getEventById(id) {
-		for (let event of get(state._events)) {
-			if (event.id == id) {
-				return toEventWithLocalDates(event);
-			}
-		}
-		return null;
-	}
-
-	export function addEvent(event) {
-		updateEvents(events => events.concat(state.events.parse([event])));
-		return this;
-	}
-
-	export function updateEvent(event) {
-		updateEvents(events => {
-			for (let e of events) {
-				if (e.id == event.id) {
-					assign(e, state.events.parse([event])[0]);
-					break;
-				}
-			}
-			return events;
-		});
-		return this;
-	}
-
-	export function removeEventById(id) {
-		updateEvents(events => events.filter(event => event.id != id));
-		return this;
-	}
-
-	export function getView() {
-		return toViewWithLocalDates(state._view.get());
-	}
-
-	export function unselect() {
-		if ($_interaction.action) {
-			$_interaction.action.clearSelection();
-		}
-		return this;
-	}
-
-	function updateEvents(func) {
-		if ($eventSources.length) {
-			$_events = func($_events);
-		} else {
-			$events = func($events);
-		}
-	}
+    import '../index.css';
+    import {setContext} from 'svelte';
+    import {get} from 'svelte/store';
+    import {diff} from './storage/options';
+    import State from './storage/state';
+    import Toolbar from './Toolbar.svelte';
+    import {assign, toEventWithLocalDates, toViewWithLocalDates} from '@event-calendar/common';
+
+    export let plugins = [];
+    export let options = {};
+
+    let state = new State(plugins, options);
+    setContext('state', state);
+
+    let {_viewComponent, _viewClass, _interaction, _iClass, _events, events, eventSources, height, theme} = state;
+
+    // Reactively update options that did change
+    $: for (let [name, value] of diff(options)) {
+        setOption(name, value);
+    }
+
+    export function setOption(name, value) {
+        if (state.hasOwnProperty(name)) {
+            if (state[name].parse) {
+                value = state[name].parse(value);
+            }
+            state[name].set(value);
+        }
+        return this;
+    }
+
+    export function getOption(name) {
+        return state.hasOwnProperty(name) ? get(state[name]) : undefined;
+    }
+
+    export function refetchEvents() {
+        state._fetchedRange.set({start: undefined, end: undefined});
+        return this;
+    }
+
+    export function getEvents() {
+        return get(state._events).map(toEventWithLocalDates);
+    }
+
+    export function getEventById(id) {
+        for (let event of get(state._events)) {
+            if (event.id == id) {
+                return toEventWithLocalDates(event);
+            }
+        }
+        return null;
+    }
+
+    export function addEvent(event) {
+        updateEvents(events => events.concat(state.events.parse([event])));
+        return this;
+    }
+
+    export function updateEvent(event) {
+        updateEvents(events => {
+            for (let e of events) {
+                if (e.id == event.id) {
+                    assign(e, state.events.parse([event])[0]);
+                    break;
+                }
+            }
+            return events;
+        });
+        return this;
+    }
+
+    export function removeEventById(id) {
+        updateEvents(events => events.filter(event => event.id != id));
+        return this;
+    }
+
+    export function getView() {
+        return toViewWithLocalDates(state._view.get());
+    }
+
+    export function unselect() {
+        if ($_interaction.action) {
+            $_interaction.action.unselect();
+        }
+        return this;
+    }
+
+    function updateEvents(func) {
+        if ($eventSources.length) {
+            $_events = func($_events);
+        } else {
+            $events = func($events);
+        }
+    }
 </script>
 
 <div
-	class="{$theme.calendar}{$_viewClass ? ' ' + $theme[$_viewClass] : ''}{$_iClass ? ' ' + $theme[$_iClass] : ''}"
-	style="height: {$height}"
+    class="{$theme.calendar}{$_viewClass ? ' ' + $theme[$_viewClass] : ''}{$_iClass ? ' ' + $theme[$_iClass] : ''}"
+    style="height: {$height}"
 >
-	<Toolbar/>
-	<svelte:component this={$_viewComponent}/>
-	<svelte:component this={$_interaction.component}/>
+    <Toolbar/>
+    <svelte:component this={$_viewComponent}/>
+    <svelte:component this={$_interaction.component}/>
 </div>

package/src/Toolbar.svelte

@@ -1,34 +1,34 @@
 <script>
-	import {getContext} from 'svelte';
-	import Buttons from './Buttons.svelte';
+    import {getContext} from 'svelte';
+    import Buttons from './Buttons.svelte';
 
-	let {headerToolbar, theme} = getContext('state');
+    let {headerToolbar, theme} = getContext('state');
 
-	let sections = {
-		start: [],
-		center: [],
-		end: []
-	};
+    let sections = {
+        start: [],
+        center: [],
+        end: []
+    };
 
-	$: {
-		for (let key of Object.keys(sections)) {
-			sections[key] = $headerToolbar[key].split(' ').map(group => group.split(','));
-		}
-	}
+    $: {
+        for (let key of Object.keys(sections)) {
+            sections[key] = $headerToolbar[key].split(' ').map(group => group.split(','));
+        }
+    }
 </script>
 
 <div class="{$theme.toolbar}">
-	{#each Object.keys(sections) as key}
-		<div>
-			{#each sections[key] as buttons}
-				{#if buttons.length > 1}
-					<div class="{$theme.buttonGroup}">
-						<Buttons {buttons}/>
-					</div>
-				{:else}
-					<Buttons {buttons}/>
-				{/if}
-			{/each}
-		</div>
-	{/each}
+    {#each Object.keys(sections) as key}
+        <div>
+            {#each sections[key] as buttons}
+                {#if buttons.length > 1}
+                    <div class="{$theme.buttonGroup}">
+                        <Buttons {buttons}/>
+                    </div>
+                {:else}
+                    <Buttons {buttons}/>
+                {/if}
+            {/each}
+        </div>
+    {/each}
 </div>

package/src/index.scss

@@ -16,6 +16,7 @@
 .ec {
   display: flex;
   flex-direction: column;
+  -webkit-tap-highlight-color: transparent;
 
   /* Scrollbar */
   ::-webkit-scrollbar {
@@ -443,13 +444,11 @@
 .ec-draggable {
   cursor: pointer;
   user-select: none;
-  touch-action: none;
 }
 
 .ec-ghost {
   opacity: .5;
   user-select: none;
-  touch-action: none;
 }
 
 .ec-bg-events {
@@ -532,6 +531,7 @@
   height: 100%;
   overflow: hidden;
   margin-left: -6.5px;
+  user-select: none;
 }
 
 .ec-now-indicator {