@event-calendar/interaction - npm Package Compare versions

Comparing version 0.11.2 to 0.12.0

index.js

@@ -1,7 +0,6 @@
-import { SvelteComponent, init, safe_not_equal, noop, listen, run_all, component_subscribe, globals, set_store_value, is_function, subscribe, create_component, space, empty, mount_component, insert, transition_in, group_outros, transition_out, check_outros, destroy_component, detach, binding_callbacks, element, attr, bubble } from 'svelte/internal';
+import { SvelteComponent, init, safe_not_equal, noop, listen, is_function, run_all, component_subscribe, globals, set_store_value, subscribe, create_component, space, empty, mount_component, insert, transition_in, group_outros, transition_out, check_outros, destroy_component, detach, binding_callbacks, element, attr, bubble } from 'svelte/internal';
 import { getContext } from 'svelte';
-import { ancestor, addDuration, cloneDate, addDay, rect, toEventWithLocalDates, toViewWithLocalDates, cloneEvent, assign, createDuration } from '@event-calendar/common';
+import { ancestor, addDuration, cloneDate, addDay, rect, createDuration, toEventWithLocalDates, toISOString, toViewWithLocalDates, cloneEvent, assign } from '@event-calendar/common';
 
-function traverseTimeGrid(el) {
-    let dayEl = ancestor(el, 2);
+function traverseTimeGrid(dayEl) {
     let colEl = child(ancestor(dayEl, 1), 1);
@@ -14,4 +13,3 @@ let bodyEl = ancestor(dayEl, 3);
 
-function traverseResourceTimeGrid(el, datesAboveResources) {
-    let dayEl = ancestor(el, 2);
+function traverseResourceTimeGrid(dayEl, datesAboveResources) {
     let colEl = child(child(ancestor(dayEl, 2), 1), 0);
@@ -26,4 +24,3 @@ let resourceEl = ancestor(dayEl, 1);
 
-function traverseDayGrid(el, inPopup) {
-    let dayEl = ancestor(el, inPopup ? 3 : 2);
+function traverseDayGrid(dayEl) {
     let daysEl = ancestor(dayEl, 1);
@@ -70,3 +67,3 @@ let contentEl = ancestor(daysEl, 1);
 
-/* packages/interaction/src/Drag.svelte generated by Svelte v3.49.0 */
+/* packages/interaction/src/Action.svelte generated by Svelte v3.51.0 */
 
@@ -84,6 +81,13 @@ const { window: window_1 } = globals;
 				dispose = [
-					listen(window_1, "pointermove", /*handlePointerMove*/ ctx[19]),
-					listen(window_1, "pointerup", /*handlePointerUp*/ ctx[20]),
-					listen(window_1, "selectstart", /*handleSelectStart*/ ctx[21]),
-					listen(window_1, "scroll", /*handleScroll*/ ctx[0])
+					listen(window_1, "pointermove", /*handlePointerMove*/ ctx[26]),
+					listen(window_1, "pointerup", /*handlePointerUp*/ ctx[27]),
+					listen(window_1, "selectstart", /*handleSelectStart*/ ctx[29]),
+					listen(window_1, "scroll", /*handleScroll*/ ctx[0]),
+					listen(window_1, "click", function () {
+						if (is_function(/*$unselectAuto*/ ctx[2]
+						? /*handleClick*/ ctx[28]
+						: undefined)) (/*$unselectAuto*/ ctx[2]
+						? /*handleClick*/ ctx[28]
+						: undefined).apply(this, arguments);
+					})
 				];
@@ -94,3 +98,5 @@
 		},
-		p: noop,
+		p(new_ctx, dirty) {
+			ctx = new_ctx;
+		},
 		i: noop,
@@ -105,9 +111,15 @@ o: noop,
 
-const INTERACTING_TIME_GRID = 1;
-const INTERACTING_DAY_GRID = 2;
+const ACTION_DRAG = 1;
+const ACTION_RESIZE = 2;
+const ACTION_SELECT = 3;
+const VIEW_TIME_GRID = 1;
+const VIEW_DAY_GRID = 2;
 
 function instance$3($$self, $$props, $$invalidate) {
+	let $unselectCancel;
+	let $_view;
+	let $unselect;
 	let $_events;
 	let $_iEvents;
-	let $_view;
+	let $selectBackgroundColor;
 	let $_iClass;
@@ -117,3 +129,3 @@
 		$$unsubscribe__viewResources = noop,
-		$$subscribe__viewResources = () => ($$unsubscribe__viewResources(), $$unsubscribe__viewResources = subscribe(_viewResources, $$value => $$invalidate(49, $_viewResources = $$value)), _viewResources);
+		$$subscribe__viewResources = () => ($$unsubscribe__viewResources(), $$unsubscribe__viewResources = subscribe(_viewResources, $$value => $$invalidate(65, $_viewResources = $$value)), _viewResources);
 
@@ -124,6 +136,6 @@ let $eventDrop;
 	let $eventResizeStop;
+	let $select;
 	let $dragScroll;
 	let $eventDragStart;
 	let $eventResizeStart;
-	let $eventDragMinDistance;
 	let $_viewDates;
@@ -134,23 +146,33 @@ let $hiddenDays;
 	let $datesAboveResources;
+	let $eventDragMinDistance;
+	let $selectMinDistance;
+	let $unselectAuto;
 	$$self.$$.on_destroy.push(() => $$unsubscribe__viewResources());
-	let { _iEvents, _iClass, _events, _viewDates, editable, eventStartEditable, eventDragMinDistance, eventDragStart, eventDragStop, eventDrop, eventResizeStart, eventResizeStop, eventResize, dragScroll, slotDuration, slotHeight, hiddenDays, _view, datesAboveResources } = getContext('state');
-	component_subscribe($$self, _iEvents, value => $$invalidate(46, $_iEvents = value));
-	component_subscribe($$self, _iClass, value => $$invalidate(48, $_iClass = value));
-	component_subscribe($$self, _events, value => $$invalidate(45, $_events = value));
-	component_subscribe($$self, _viewDates, value => $$invalidate(58, $_viewDates = value));
-	component_subscribe($$self, eventDragMinDistance, value => $$invalidate(57, $eventDragMinDistance = value));
-	component_subscribe($$self, eventDragStart, value => $$invalidate(55, $eventDragStart = value));
-	component_subscribe($$self, eventDragStop, value => $$invalidate(52, $eventDragStop = value));
-	component_subscribe($$self, eventDrop, value => $$invalidate(50, $eventDrop = value));
-	component_subscribe($$self, eventResizeStart, value => $$invalidate(56, $eventResizeStart = value));
-	component_subscribe($$self, eventResizeStop, value => $$invalidate(53, $eventResizeStop = value));
-	component_subscribe($$self, eventResize, value => $$invalidate(51, $eventResize = value));
-	component_subscribe($$self, dragScroll, value => $$invalidate(54, $dragScroll = value));
-	component_subscribe($$self, slotDuration, value => $$invalidate(60, $slotDuration = value));
-	component_subscribe($$self, slotHeight, value => $$invalidate(61, $slotHeight = value));
-	component_subscribe($$self, hiddenDays, value => $$invalidate(59, $hiddenDays = value));
-	component_subscribe($$self, _view, value => $$invalidate(47, $_view = value));
-	component_subscribe($$self, datesAboveResources, value => $$invalidate(62, $datesAboveResources = value));
-	let interacting = false;
-	let resizing; // whether it is resizing
+	let { _iEvents, _iClass, _events, _viewDates, _view, datesAboveResources, dragScroll, editable, eventStartEditable, eventDragMinDistance, eventDragStart, eventDragStop, eventDrop, eventResizeStart, eventResizeStop, eventResize, select, selectBackgroundColor, selectMinDistance, slotDuration, slotHeight, hiddenDays, unselect, unselectAuto, unselectCancel } = getContext('state');
+	component_subscribe($$self, _iEvents, value => $$invalidate(62, $_iEvents = value));
+	component_subscribe($$self, _iClass, value => $$invalidate(64, $_iClass = value));
+	component_subscribe($$self, _events, value => $$invalidate(61, $_events = value));
+	component_subscribe($$self, _viewDates, value => $$invalidate(74, $_viewDates = value));
+	component_subscribe($$self, _view, value => $$invalidate(59, $_view = value));
+	component_subscribe($$self, datesAboveResources, value => $$invalidate(78, $datesAboveResources = value));
+	component_subscribe($$self, dragScroll, value => $$invalidate(71, $dragScroll = value));
+	component_subscribe($$self, eventDragMinDistance, value => $$invalidate(79, $eventDragMinDistance = value));
+	component_subscribe($$self, eventDragStart, value => $$invalidate(72, $eventDragStart = value));
+	component_subscribe($$self, eventDragStop, value => $$invalidate(68, $eventDragStop = value));
+	component_subscribe($$self, eventDrop, value => $$invalidate(66, $eventDrop = value));
+	component_subscribe($$self, eventResizeStart, value => $$invalidate(73, $eventResizeStart = value));
+	component_subscribe($$self, eventResizeStop, value => $$invalidate(69, $eventResizeStop = value));
+	component_subscribe($$self, eventResize, value => $$invalidate(67, $eventResize = value));
+	component_subscribe($$self, select, value => $$invalidate(70, $select = value));
+	component_subscribe($$self, selectBackgroundColor, value => $$invalidate(63, $selectBackgroundColor = value));
+	component_subscribe($$self, selectMinDistance, value => $$invalidate(80, $selectMinDistance = value));
+	component_subscribe($$self, slotDuration, value => $$invalidate(76, $slotDuration = value));
+	component_subscribe($$self, slotHeight, value => $$invalidate(77, $slotHeight = value));
+	component_subscribe($$self, hiddenDays, value => $$invalidate(75, $hiddenDays = value));
+	component_subscribe($$self, unselect, value => $$invalidate(60, $unselect = value));
+	component_subscribe($$self, unselectAuto, value => $$invalidate(2, $unselectAuto = value));
+	component_subscribe($$self, unselectCancel, value => $$invalidate(58, $unselectCancel = value));
+	let action;
+	let view;
+	let moving;
 	let event;
@@ -168,12 +190,16 @@ let col, row;
 	let minEnd; // minimum end time when resizing
+	let selected; // whether selection has been made
 
-	function startTimeGrid(event, el, jsEvent, resourcesStore, allDay, resize) {
-		if (!interacting && jsEvent.isPrimary) {
+	function dragTimeGrid(eventToDrag, el, jsEvent, resourcesStore, allDay, resize) {
+		if (!action && jsEvent.isPrimary) {
+			let dayEl = ancestor(el, 2);
+
 			if (resourcesStore) {
-				[colEl, bodyEl, col, resourceCol] = traverseResourceTimeGrid(el, $datesAboveResources);
+				[colEl, bodyEl, col, resourceCol] = traverseResourceTimeGrid(dayEl, $datesAboveResources);
 			} else {
-				[colEl, bodyEl, col] = traverseTimeGrid(el);
+				[colEl, bodyEl, col] = traverseTimeGrid(dayEl);
 			}
 
-			start(event, jsEvent);
+			start(jsEvent);
+			event = eventToDrag;
 			offsetY = floor((jsEvent.clientY - colRect.top) / $slotHeight);
@@ -187,17 +213,24 @@ offsetX = 0; // applicable for all-day slot
 			$$subscribe__viewResources($$invalidate(1, _viewResources = resourcesStore));
-			interacting = INTERACTING_TIME_GRID;
+			view = VIEW_TIME_GRID;
 			isAllDay = allDay;
-			resizing = resize;
 
-			if (resizing) {
+			if (resize) {
+				action = ACTION_RESIZE;
 				minEnd = addDuration(cloneDate(event.start), $slotDuration);
 				set_store_value(_iClass, $_iClass = 'resizingY', $_iClass);
+			} else {
+				action = ACTION_DRAG;
+				set_store_value(_iClass, $_iClass = 'dragging', $_iClass);
 			}
+
+			move(jsEvent);
 		}
 	}
 
-	function startDayGrid(event, el, jsEvent, inPopup, resize) {
-		if (!interacting && jsEvent.isPrimary) {
-			[colEl, bodyEl, col, row, rowEls] = traverseDayGrid(el, inPopup);
-			start(event, jsEvent);
+	function dragDayGrid(eventToDrag, el, jsEvent, inPopup, resize) {
+		if (!action && jsEvent.isPrimary) {
+			let dayEl = ancestor(el, inPopup ? 3 : 2);
+			[colEl, bodyEl, col, row, rowEls] = traverseDayGrid(dayEl);
+			start(jsEvent);
+			event = eventToDrag;
 
@@ -208,8 +241,6 @@ offsetX = inPopup
 
-			$$subscribe__viewResources($$invalidate(1, _viewResources = undefined));
-			interacting = INTERACTING_DAY_GRID;
-			isAllDay = false;
-			resizing = resize;
+			view = VIEW_DAY_GRID;
 
-			if (resizing) {
+			if (resize) {
+				action = ACTION_RESIZE;
 				minEnd = cloneDate(event.start);
@@ -223,9 +254,78 @@ minEnd.setUTCHours(event.end.getUTCHours(), event.end.getUTCMinutes(), event.end.getUTCSeconds());
 				set_store_value(_iClass, $_iClass = 'resizingX', $_iClass);
+			} else {
+				action = ACTION_DRAG;
+				set_store_value(_iClass, $_iClass = 'dragging', $_iClass);
 			}
+
+			move(jsEvent);
 		}
 	}
 
-	function start(eventToDrag, jsEvent) {
+	function selectTimeGrid(colDate, dayEl, jsEvent, resourcesStore, _slotTimeLimits, allDay) {
+		if (!action && jsEvent.isPrimary) {
+			if (resourcesStore) {
+				[colEl, bodyEl, col, resourceCol] = traverseResourceTimeGrid(dayEl, $datesAboveResources);
+			} else {
+				[colEl, bodyEl, col] = traverseTimeGrid(dayEl);
+			}
+
+			start(jsEvent);
+			offsetY = floor((jsEvent.clientY - colRect.top) / $slotHeight);
+			offsetX = 0; // applicable for all-day slot
+
+			if (allDay && (!resourcesStore || !$datesAboveResources)) {
+				offsetX = floor((jsEvent.clientX - colRect.left) / colRect.width) - col - (resourceCol || 0) * $_viewDates.length;
+			}
+
+			$$subscribe__viewResources($$invalidate(1, _viewResources = resourcesStore));
+
+			// Create dummy source event
+			let date = cloneDate(colDate);
+
+			if (!allDay) {
+				addDuration(date, $slotDuration, offsetY + _slotTimeLimits.min.seconds / $slotDuration.seconds);
+			}
+
+			event = {
+				allDay,
+				start: date,
+				end: allDay
+				? addDay(cloneDate(date))
+				: addDuration(cloneDate(date), $slotDuration),
+				resourceIds: _viewResources ? [$_viewResources[resourceCol].id] : []
+			};
+
+			view = VIEW_TIME_GRID;
+			isAllDay = allDay;
+			action = ACTION_SELECT;
+			set_store_value(_iClass, $_iClass = 'selecting', $_iClass);
+			move(jsEvent);
+		}
+	}
+
+	function selectDayGrid(dayDate, dayEl, jsEvent) {
+		if (!action && jsEvent.isPrimary) {
+			[colEl, bodyEl, col, row, rowEls] = traverseDayGrid(dayEl);
+			start(jsEvent);
+			offsetX = floor((jsEvent.clientX - colRect.left) / colRect.width) - col;
+
+			// Create dummy source event
+			let date = cloneDate(dayDate);
+
+			event = {
+				allDay: false,
+				start: date,
+				end: addDay(cloneDate(date)),
+				resourceIds: []
+			};
+
+			view = VIEW_DAY_GRID;
+			action = ACTION_SELECT;
+			set_store_value(_iClass, $_iClass = 'selecting', $_iClass);
+			move(jsEvent);
+		}
+	}
+
+	function start(jsEvent) {
 		window.getSelection().removeAllRanges();
-		event = eventToDrag;
 		colRect = rect(colEl);
@@ -235,3 +335,2 @@ bodyRect = rect(bodyEl);
 		fromY = toY = jsEvent.clientY;
-		set_store_value(_iClass, $_iClass = 'dragging', $_iClass);
 	}
@@ -242,49 +341,60 @@
 		let ry = toY - colRect.top;
-		let newCol = floor(rx / colRect.width);
 
-		if (interacting === INTERACTING_TIME_GRID) {
-			// timeGrid
-			if (_viewResources) {
-				if ($datesAboveResources) {
-					let dayCol = limit(floor(newCol / $_viewResources.length), $_viewDates.length - 1);
-					newResourceCol = limit(newCol - dayCol * $_viewResources.length, $_viewResources.length - 1);
-					newCol = dayCol;
-				} else {
-					if (resizing) {
-						newCol -= resourceCol * $_viewDates.length;
+		if (moving || resizing() || distance() >= (selecting() ? $selectMinDistance : $eventDragMinDistance)) {
+			clearSelection(jsEvent);
+			moving = true;
+			let newCol = floor(rx / colRect.width);
+
+			if (view === VIEW_TIME_GRID) {
+				// timeGrid
+				if (_viewResources) {
+					if (dragging()) {
+						if ($datesAboveResources) {
+							let dayCol = limit(floor(newCol / $_viewResources.length), $_viewDates.length - 1);
+							newResourceCol = limit(newCol - dayCol * $_viewResources.length, $_viewResources.length - 1);
+							newCol = dayCol;
+						} else {
+							newResourceCol = limit(floor(newCol / $_viewDates.length), $_viewResources.length - 1);
+							newCol -= newResourceCol * $_viewDates.length;
+						}
 					} else {
-						newResourceCol = limit(floor(newCol / $_viewDates.length), $_viewResources.length - 1);
-						newCol -= newResourceCol * $_viewDates.length;
+						if ($datesAboveResources) {
+							newCol = floor(newCol / $_viewResources.length);
+						} else {
+							newCol -= resourceCol * $_viewDates.length;
+						}
 					}
 				}
-			}
 
-			newCol = limit(newCol, $_viewDates.length - 1);
+				newCol = limit(newCol, $_viewDates.length - 1);
 
-			delta = createDuration({
-				days: ($_viewDates[newCol] - $_viewDates[col]) / 1000 / 60 / 60 / 24 - offsetX,
-				seconds: isAllDay
-				? 0
-				: (floor(ry / $slotHeight) - offsetY) * $slotDuration.seconds
-			});
-		} else {
-			// dayGrid
-			let cols = 7 - $hiddenDays.length;
+				delta = createDuration({
+					days: ($_viewDates[newCol] - $_viewDates[col]) / 1000 / 60 / 60 / 24 - offsetX,
+					seconds: isAllDay
+					? 0
+					: (floor(ry / $slotHeight) - offsetY) * $slotDuration.seconds
+				});
+			} else {
+				// dayGrid
+				let cols = 7 - $hiddenDays.length;
 
-			newCol = limit(newCol, cols - 1);
-			let newRow = -1;
+				newCol = limit(newCol, cols - 1);
+				let newRow = -1;
 
-			do {
-				++newRow;
-				ry -= rowEls[newRow].offsetHeight;
-			} while (ry > 0 && newRow < rowEls.length - 1);
+				do {
+					++newRow;
+					ry -= rowEls[newRow].offsetHeight;
+				} while (ry > 0 && newRow < rowEls.length - 1);
 
-			delta = createDuration({
-				days: ($_viewDates[newRow * cols + newCol] - $_viewDates[row * cols + col]) / 1000 / 60 / 60 / 24 - offsetX
-			});
-		}
+				delta = createDuration({
+					days: ($_viewDates[newRow * cols + newCol] - $_viewDates[row * cols + col]) / 1000 / 60 / 60 / 24 - offsetX
+				});
+			}
 
-		if ($_iEvents[0] || resizing || distance() >= $eventDragMinDistance) {
 			if (!$_iEvents[0]) {
-				createIEvent(jsEvent, resizing ? $eventResizeStart : $eventDragStart);
+				if (selecting()) {
+					createIEventSelect();
+				} else {
+					createIEvent(jsEvent, resizing() ? $eventResizeStart : $eventDragStart);
+				}
 			}
@@ -294,3 +404,3 @@
 
-			if (resizing) {
+			if (resizing()) {
 				if ($_iEvents[0].end < minEnd) {
@@ -300,2 +410,9 @@ set_store_value(_iEvents, $_iEvents[0].end = minEnd, $_iEvents);
 				}
+			} else if (selecting()) {
+				if ($_iEvents[0].end < event.end) {
+					set_store_value(_iEvents, $_iEvents[0].end = event.end, $_iEvents);
+					set_store_value(_iEvents, $_iEvents[0].start = addDuration(cloneDate(event.start), delta), $_iEvents);
+				} else {
+					set_store_value(_iEvents, $_iEvents[0].start = event.start, $_iEvents);
+				}
 			} else {
@@ -333,3 +450,3 @@ set_store_value(_iEvents, $_iEvents[0].start = addDuration(cloneDate(event.start), delta), $_iEvents);
 	function handleScroll() {
-		if (interacting) {
+		if (action) {
 			colRect = rect(colEl);
@@ -342,3 +459,3 @@ bodyRect = rect(bodyEl);
 	function handlePointerMove(jsEvent) {
-		if (interacting && jsEvent.isPrimary) {
+		if (action && jsEvent.isPrimary) {
 			toX = jsEvent.clientX;
@@ -351,44 +468,63 @@ toY = jsEvent.clientY;
 	function handlePointerUp(jsEvent) {
-		if (interacting && jsEvent.isPrimary) {
-			if ($_iEvents[0]) {
-				event.display = 'auto';
-				let callback = resizing ? $eventResizeStop : $eventDragStop;
+		if (action && jsEvent.isPrimary) {
+			if (moving) {
+				if (selecting()) {
+					if (is_function($select)) {
+						let { start, end } = toEventWithLocalDates($_iEvents[0]);
 
-				if (is_function(callback)) {
-					callback({
-						event: toEventWithLocalDates(event),
-						jsEvent,
-						view: toViewWithLocalDates($_view)
-					});
-				}
+						$select({
+							start,
+							end,
+							startStr: toISOString($_iEvents[0].start),
+							endStr: toISOString($_iEvents[0].end),
+							allDay: isAllDay,
+							jsEvent,
+							view: toViewWithLocalDates($_view),
+							resource: resourceCol && $_viewResources[resourceCol]
+						});
+					}
 
-				let oldEvent = cloneEvent(event);
-				updateEvent(event, $_iEvents[0]);
-				set_store_value(_iEvents, $_iEvents[0] = null, $_iEvents);
-				callback = resizing ? $eventResize : $eventDrop;
+					setTimeout(() => selected = true);
+				} else {
+					event.display = 'auto';
+					let callback = resizing() ? $eventResizeStop : $eventDragStop;
 
-				if (is_function(callback)) {
-					let eventRef = event;
+					if (is_function(callback)) {
+						callback({
+							event: toEventWithLocalDates(event),
+							jsEvent,
+							view: toViewWithLocalDates($_view)
+						});
+					}
 
-					let info = resizing
-					? { endDelta: delta }
-					: {
-							delta,
-							oldResource: resourceCol !== newResourceCol
-							? $_viewResources[resourceCol]
-							: undefined,
-							newResource: resourceCol !== newResourceCol
-							? $_viewResources[newResourceCol]
-							: undefined
-						};
+					let oldEvent = cloneEvent(event);
+					updateEvent(event, $_iEvents[0]);
+					destroyIEvent();
+					callback = resizing() ? $eventResize : $eventDrop;
 
-					callback(assign(info, {
-						event: toEventWithLocalDates(event),
-						oldEvent: toEventWithLocalDates(oldEvent),
-						jsEvent,
-						view: toViewWithLocalDates($_view),
-						revert() {
-							updateEvent(eventRef, oldEvent);
-						}
-					}));
+					if (is_function(callback)) {
+						let eventRef = event;
+
+						let info = resizing()
+						? { endDelta: delta }
+						: {
+								delta,
+								oldResource: resourceCol !== newResourceCol
+								? $_viewResources[resourceCol]
+								: undefined,
+								newResource: resourceCol !== newResourceCol
+								? $_viewResources[newResourceCol]
+								: undefined
+							};
+
+						callback(assign(info, {
+							event: toEventWithLocalDates(event),
+							oldEvent: toEventWithLocalDates(oldEvent),
+							jsEvent,
+							view: toViewWithLocalDates($_view),
+							revert() {
+								updateEvent(eventRef, oldEvent);
+							}
+						}));
+					}
 				}
@@ -399,4 +535,6 @@ }
 			resourceCol = newResourceCol = undefined;
-			interacting = false;
+			action = view = moving = false;
+			isAllDay = false;
 			set_store_value(_iClass, $_iClass = undefined, $_iClass);
+			$$subscribe__viewResources($$invalidate(1, _viewResources = undefined));
 		}
@@ -420,2 +558,23 @@ }
 
+	function createIEventSelect() {
+		set_store_value(
+			_iEvents,
+			$_iEvents[0] = {
+				id: '{select}',
+				allDay: event.allDay,
+				start: event.start,
+				title: '',
+				display: 'preview',
+				extendedProps: {},
+				backgroundColor: $selectBackgroundColor,
+				resourceIds: event.resourceIds
+			},
+			$_iEvents
+		);
+	}
+
+	function destroyIEvent() {
+		set_store_value(_iEvents, $_iEvents[0] = null, $_iEvents);
+	}
+
 	function updateEvent(target, source) {
@@ -432,4 +591,39 @@ target.start = source.start;
 
+	function dragging() {
+		return action === ACTION_DRAG;
+	}
+
+	function resizing() {
+		return action === ACTION_RESIZE;
+	}
+
+	function selecting() {
+		return action === ACTION_SELECT;
+	}
+
+	function clearSelection(jsEvent) {
+		if (selected) {
+			selected = false;
+			destroyIEvent();
+
+			if (is_function($unselect)) {
+				$unselect({
+					jsEvent,
+					view: toViewWithLocalDates($_view)
+				});
+			}
+		}
+	}
+
+	// Clear selection on view params change
+	_view.subscribe(clearSelection);
+
+	function handleClick(jsEvent) {
+		if (selected && !($unselectCancel && jsEvent.target.closest($unselectCancel))) {
+			clearSelection();
+		}
+	}
+
 	function handleSelectStart(jsEvent) {
-		if (interacting) {
+		if (action) {
 			jsEvent.preventDefault();
@@ -442,2 +636,3 @@ }
 		_viewResources,
+		$unselectAuto,
 		_iEvents,
@@ -447,2 +642,5 @@ _iClass,
 		_viewDates,
+		_view,
+		datesAboveResources,
+		dragScroll,
 		eventDragMinDistance,
@@ -455,17 +653,24 @@ eventDragStart,
 		eventResize,
-		dragScroll,
+		select,
+		selectBackgroundColor,
+		selectMinDistance,
 		slotDuration,
 		slotHeight,
 		hiddenDays,
-		_view,
-		datesAboveResources,
+		unselect,
+		unselectAuto,
+		unselectCancel,
 		handlePointerMove,
 		handlePointerUp,
+		handleClick,
 		handleSelectStart,
-		startTimeGrid,
-		startDayGrid
+		dragTimeGrid,
+		dragDayGrid,
+		selectTimeGrid,
+		selectDayGrid,
+		clearSelection
 	];
 }
 
-class Drag extends SvelteComponent {
+class Action extends SvelteComponent {
 	constructor(options) {
@@ -481,5 +686,8 @@ super();
 			{
-				startTimeGrid: 22,
-				startDayGrid: 23,
-				handleScroll: 0
+				dragTimeGrid: 30,
+				dragDayGrid: 31,
+				selectTimeGrid: 32,
+				selectDayGrid: 33,
+				handleScroll: 0,
+				clearSelection: 34
 			},
@@ -491,16 +699,28 @@ null,
 
-	get startTimeGrid() {
-		return this.$$.ctx[22];
+	get dragTimeGrid() {
+		return this.$$.ctx[30];
 	}
 
-	get startDayGrid() {
-		return this.$$.ctx[23];
+	get dragDayGrid() {
+		return this.$$.ctx[31];
 	}
 
+	get selectTimeGrid() {
+		return this.$$.ctx[32];
+	}
+
+	get selectDayGrid() {
+		return this.$$.ctx[33];
+	}
+
 	get handleScroll() {
 		return this.$$.ctx[0];
 	}
+
+	get clearSelection() {
+		return this.$$.ctx[34];
+	}
 }
 
-/* packages/interaction/src/Pointer.svelte generated by Svelte v3.49.0 */
+/* packages/interaction/src/Pointer.svelte generated by Svelte v3.51.0 */
 
@@ -691,3 +911,3 @@ function create_fragment$2(ctx) {
 
-/* packages/interaction/src/Interaction.svelte generated by Svelte v3.49.0 */
+/* packages/interaction/src/Interaction.svelte generated by Svelte v3.51.0 */
 
@@ -730,9 +950,9 @@ function create_if_block$1(ctx) {
 function create_fragment$1(ctx) {
-	let drag;
+	let action;
 	let t;
 	let if_block_anchor;
 	let current;
-	let drag_props = {};
-	drag = new Drag({ props: drag_props });
-	/*drag_binding*/ ctx[17](drag);
+	let action_props = {};
+	action = new Action({ props: action_props });
+	/*action_binding*/ ctx[17](action);
 	let if_block = /*$pointer*/ ctx[1] && create_if_block$1(ctx);
@@ -742,3 +962,3 @@
 		c() {
-			create_component(drag.$$.fragment);
+			create_component(action.$$.fragment);
 			t = space();
@@ -749,3 +969,3 @@ if (if_block) if_block.c();
 		m(target, anchor) {
-			mount_component(drag, target, anchor);
+			mount_component(action, target, anchor);
 			insert(target, t, anchor);
@@ -757,4 +977,4 @@ if (if_block) if_block.m(target, anchor);
 		p(ctx, [dirty]) {
-			const drag_changes = {};
-			drag.$set(drag_changes);
+			const action_changes = {};
+			action.$set(action_changes);
 
@@ -786,3 +1006,3 @@ if (/*$pointer*/ ctx[1]) {
 			if (current) return;
-			transition_in(drag.$$.fragment, local);
+			transition_in(action.$$.fragment, local);
 			transition_in(if_block);
@@ -792,3 +1012,3 @@ current = true;
 		o(local) {
-			transition_out(drag.$$.fragment, local);
+			transition_out(action.$$.fragment, local);
 			transition_out(if_block);
@@ -798,4 +1018,4 @@ current = false;
 		d(detaching) {
-			/*drag_binding*/ ctx[17](null);
-			destroy_component(drag, detaching);
+			/*action_binding*/ ctx[17](null);
+			destroy_component(action, detaching);
 			if (detaching) detach(t);
@@ -841,5 +1061,5 @@ if (if_block) if_block.d(detaching);
 
-	function drag_binding($$value) {
+	function action_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
-			$_interaction.drag = $$value;
+			$_interaction.action = $$value;
 			_interaction.set($_interaction);
@@ -905,3 +1125,3 @@ });
 		$theme,
-		drag_binding,
+		action_binding,
 		pointer_1_binding
@@ -918,3 +1138,3 @@ ];
 
-/* packages/interaction/src/Resizer.svelte generated by Svelte v3.49.0 */
+/* packages/interaction/src/Resizer.svelte generated by Svelte v3.51.0 */
 
@@ -1032,2 +1252,8 @@ function create_if_block(ctx) {
 		options.pointer = false;
+		options.select = undefined;
+		options.selectBackgroundColor = undefined;  // ec option
+		options.selectMinDistance = 0;
+		options.unselect = undefined;
+		options.unselectAuto = true;
+		options.unselectCancel = '';
 		options.theme.draggable = 'ec-draggable';
@@ -1041,2 +1267,3 @@ options.theme.ghost = 'ec-ghost';
 		options.theme.resizingX = 'ec-resizing-x';
+		options.theme.selecting = 'ec-selecting';
 	},
@@ -1043,0 +1270,0 @@

package.json

 {
   "name": "@event-calendar/interaction",
-  "version": "0.11.2",
+  "version": "0.12.0",
   "title": "Event Calendar Interaction plugin",
@@ -36,5 +36,5 @@ "description": "Full-sized drag & drop event calendar with resource view",
   "dependencies": {
-    "@event-calendar/common": "~0.11.2",
-    "svelte": "^3.47.0"
+    "@event-calendar/common": "~0.12.0",
+    "svelte": "^3.51.0"
   }
 }

README.md

@@ -1,2 +0,2 @@
-# Event Calendar [![](https://data.jsdelivr.com/v1/package/npm/@event-calendar/build/badge)](https://www.jsdelivr.com/package/npm/@event-calendar/build) [![Sponsor](https://img.shields.io/badge/Sponsor-$10-green.svg)](https://www.paypal.me/vkurko/10usd) [![Sponsor](https://img.shields.io/badge/Sponsor-$1-green.svg)](https://www.paypal.me/vkurko/1usd)
+# Event Calendar [![](https://data.jsdelivr.com/v1/package/npm/@event-calendar/build/badge)](https://www.jsdelivr.com/package/npm/@event-calendar/build) [![npm](https://img.shields.io/npm/dm/@event-calendar/core?color=red&label=npm&style=flat-square)](https://www.npmjs.com/package/@event-calendar/core) [![Sponsor](https://img.shields.io/badge/Sponsor-$10-blue.svg?style=flat-square&logo=paypal)](https://www.paypal.me/vkurko/10usd)
 
@@ -7,3 +7,3 @@ See [demo](https://vkurko.github.io/calendar/).
 
-* Lightweight (51kb [br](https://en.wikipedia.org/wiki/Brotli) compressed `modern` version)
+* Lightweight (52kb [br](https://en.wikipedia.org/wiki/Brotli) compressed `modern` version)
 * Zero-dependency (pre-built bundle)
@@ -44,6 +44,6 @@ * Used by [Bookly](https://wordpress.org/plugins/bookly-responsive-appointment-booking-tool/)
   - [eventDragMinDistance](#eventdragmindistance)
+  - [eventDragStart](#eventdragstart)
+  - [eventDragStop](#eventdragstop)
   </td><td>
 
-  - [eventDragStart](#eventdragstart)
-  - [eventDragStop](#eventdragstop)
   - [eventDrop](#eventdrop)
@@ -68,4 +68,2 @@ - [eventDurationEditable](#eventdurationeditable)
   - [listDayFormat](#listdayformat)
-  </td><td>
-  
   - [listDaySideFormat](#listdaysideformat)
@@ -75,2 +73,4 @@ - [loading](#loading)
   - [monthMode](#monthmode)
+  </td><td>
+  
   - [moreLinkContent](#morelinkcontent)
@@ -82,2 +82,6 @@ - [noEventsClick](#noeventsclick)
   - [resources](#resources)
+  - [select](#select)
+  - [selectable](#selectable)
+  - [selectBackgroundColor](#selectbackgroundcolor)
+  - [selectMinDistance](#selectmindistance)
   - [scrollTime](#scrolltime)
@@ -90,2 +94,6 @@ - [slotDuration](#slotduration)
   - [theme](#theme)
+  - [titleFormat](#titleformat)
+  - [unselect](#unselect)
+  - [unselectAuto](#unselectauto)
+  - [unselectCancel](#unselectcancel)
   - [view](#view)
@@ -113,2 +121,5 @@ - [viewDidMount](#viewdidmount)
   - [getView](#getview)
+  </td><td>
+
+  - [unselect](#unselect-1)
   </td></tr>
@@ -1470,2 +1481,99 @@ </table>
 
+### select
+- Type `function`
+- Default `undefined`
+
+Callback function that is triggered when a date/time selection is made.
+
+```js
+function (selectInfo) { }
+```
+`selectInfo` is an object with the following properties:
+<table>
+<tr>
+<td>
+
+`start`
+</td>
+<td>JavaScript Date object indicating the start of the selection</td>
+</tr>
+<tr>
+<td>
+
+`end`
+</td>
+<td>JavaScript Date object indicating the end of the selection</td>
+</tr>
+<tr>
+<td>
+
+`startStr`
+</td>
+<td>ISO8601 string representation of the start date</td>
+</tr>
+<tr>
+<td>
+
+`endStr`
+</td>
+<td>ISO8601 string representation of the end date</td>
+</tr>
+<tr>
+<td>
+
+`allDay`
+</td>
+<td>
+
+Boolean (`true` or `false`). Determines if the selection has occurred in the `all-day` slot</td>
+</tr>
+<tr>
+<td>
+
+`jsEvent`
+</td>
+<td>JavaScript native event object with low-level information such as click coordinates</td>
+</tr>
+<tr>
+<td>
+
+`view`
+</td>
+<td>
+
+The current [View](#view-object) object
+</td>
+</tr>
+<tr>
+<td>
+
+`resource`
+</td>
+<td>
+
+If the current view is a resource view, the [Resource](#resource-object) object that was selected
+</td>
+</tr>
+</table>
+
+### selectable
+- Type `boolean`
+- Default `false`
+
+Determines whether the user is allowed to highlight multiple days or time slots by clicking and moving the pointer.
+
+### selectBackgroundColor
+- Type `string`
+- Default `undefined`
+
+Sets the background color for the event indicating the current selection. See [selectable](#selectable).
+
+You can use any of the CSS color formats such `'#f00'`, `'#ff0000'`, `'rgb(255,0,0)'`, or `'red'`.
+
+### selectMinDistance
+- Type `integer`
+- Default `0`
+
+Defines how many pixels the user’s mouse must move before the selection begins.
+
 ### scrollTime
@@ -1587,2 +1695,57 @@ - Type `string`, `integer` or `object`
 
+### unselect
+- Type `function`
+- Default `undefined`
+
+Callback function that is triggered when the current selection is cleared.
+
+A selection can be cleared for a number of reasons:
+
+- The user clicks away from the current selection (this does not happen when [unselectAuto](#unselectauto) is `false`).
+- The user makes a new selection. The unselect callback will be fired before the new selection occurs.
+- The user navigates forward or backward in the current view, or switches to a new view.
+- The [unselect](#unselect-1) method is called via the API.
+
+```js
+function (info) { }
+```
+`info` is an object with the following properties:
+<table>
+<tr>
+<td>
+
+`jsEvent`
+</td>
+<td>
+
+JavaScript native event object with low-level information such as click coordinates.
+
+If unselect has been triggered via the [unselect](#unselect-1) method, jsEvent will be `undefined`</td>
+</tr>
+<tr>
+<td>
+
+`view`
+</td>
+<td>
+
+The current [View](#view-object) object
+</td>
+</tr>
+</table>
+
+### unselectAuto
+- Type `boolean`
+- Default `true`
+
+Determines whether clicking elsewhere on the page will clear the current selection. See [selectable](#selectable).
+
+### unselectCancel
+- Type `string`
+- Default `''`
+
+A CSS selector that specifies elements that will ignore the [unselectAuto](#unselectauto) option.
+
+Clicking on elements that match this CSS selector will prevent the current selection from being cleared (because of the [unselectAuto](#unselectauto) option).
+
 ### view
@@ -1718,2 +1881,7 @@ - Type `string`
 
+### unselect()
+- Return value `EventCalendar` The calendar instance for chaining
+
+Clears the current selection. See [selectable](#selectable).
+
 ## Event object
@@ -1720,0 +1888,0 @@ This is a JavaScript object that the Event Calendar uses to store information about a calendar event.

src/index.js

@@ -18,2 +18,8 @@ import Interaction from './Interaction.svelte';
 		options.pointer = false;
+		options.select = undefined;
+		options.selectBackgroundColor = undefined;  // ec option
+		options.selectMinDistance = 0;
+		options.unselect = undefined;
+		options.unselectAuto = true;
+		options.unselectCancel = '';
 		options.theme.draggable = 'ec-draggable';
@@ -27,2 +33,3 @@ options.theme.ghost = 'ec-ghost';
 		options.theme.resizingX = 'ec-resizing-x';
+		options.theme.selecting = 'ec-selecting';
 	},
@@ -29,0 +36,0 @@

src/utils.js

 import {ancestor} from '@event-calendar/common';
 
-export function traverseTimeGrid(el) {
-    let dayEl = ancestor(el, 2);
+export function traverseTimeGrid(dayEl) {
     let colEl = child(ancestor(dayEl, 1), 1);
@@ -12,4 +11,3 @@ let bodyEl = ancestor(dayEl, 3);
 
-export function traverseResourceTimeGrid(el, datesAboveResources) {
-    let dayEl = ancestor(el, 2);
+export function traverseResourceTimeGrid(dayEl, datesAboveResources) {
     let colEl = child(child(ancestor(dayEl, 2), 1), 0);
@@ -24,4 +22,3 @@ let resourceEl = ancestor(dayEl, 1);
 
-export function traverseDayGrid(el, inPopup) {
-    let dayEl = ancestor(el, inPopup ? 3 : 2);
+export function traverseDayGrid(dayEl) {
     let daysEl = ancestor(dayEl, 1);
@@ -28,0 +25,0 @@ let contentEl = ancestor(daysEl, 1);

No alert changes

Improved metrics

Total package byte prevSize

107914

increased by17.04%

Lines of code

1170

increased by20.74%

Number of lines in readme file

2281

increased by7.95%

Dependency changes

• + Added@event-calendar/common@0.12.0(transitive)

• - Removed@event-calendar/common@0.11.2(transitive)

• Updated@event-calendar/common@~0.12.0

• Updatedsvelte@^3.51.0