npm - @event-calendar/core - Versions diffs - 0.16.1 → 0.17.1 - Mend

@event-calendar/core 0.16.1 → 0.17.1

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 (8) hide show

package/README.md CHANGED Viewed

@@ -1,4 +1,4 @@
-# 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)
+# 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)
 See [demo](https://vkurko.github.io/calendar/) and [changelog](CHANGELOG.md).
@@ -6,7 +6,7 @@ Full-sized drag & drop JavaScript event calendar with resource view:
 * Lightweight (37kb [br](https://en.wikipedia.org/wiki/Brotli) compressed)
 * Zero-dependency (pre-built bundle)
-* Used by [Bookly](https://wordpress.org/plugins/bookly-responsive-appointment-booking-tool/)
+* Used on over 60,000 websites with [Bookly](https://wordpress.org/plugins/bookly-responsive-appointment-booking-tool/)
 Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options.
@@ -117,6 +117,7 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
   </td><td>
   - [dateFromPoint](#datefrompoint-x-y-)
+  - [destroy](#destroy)
   - [getView](#getview)
   - [unselect](#unselect-1)
   </td></tr>
@@ -191,8 +192,8 @@ import '@event-calendar/core/index.css';
 ### Pre-built browser ready bundle
 Include the following lines of code in the `<head>` section of your page:
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@0.16.1/event-calendar.min.css">
-<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@0.16.1/event-calendar.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@0.17.1/event-calendar.min.css">
+<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@0.17.1/event-calendar.min.js"></script>
 ```
 <details>
@@ -475,6 +476,7 @@ Determines whether to display an event’s end time.
 ### dragScroll
 - Type `boolean`
 - Default `true`
+- Requires `Interaction` plugin
 Determines whether the calendar should automatically scroll during the event drag-and-drop when the mouse crosses the edge.
@@ -499,6 +501,7 @@ This should be a value that can be parsed into a [Duration](#duration-object) ob
 ### editable
 - Type `boolean`
 - Default `false`
+- Requires `Interaction` plugin
 Determines whether the events on the calendar can be dragged and resized (both at the same time).
@@ -667,12 +670,14 @@ The current [View](#view-object) object
 ### eventDragMinDistance
 - Type `integer`
 - Default `5`
+- Requires `Interaction` plugin
 Defines how many pixels the user’s mouse must move before the event dragging begins.
 ### eventDragStart
 - Type `function`
 - Default `undefined`
+- Requires `Interaction` plugin
 Callback function that is triggered when the event dragging begins.
@@ -713,6 +718,7 @@ The current [View](#view-object) object
 ### eventDragStop
 - Type `function`
 - Default `undefined`
+- Requires `Interaction` plugin
 Callback function that is triggered when the event dragging stops.
@@ -755,6 +761,7 @@ The current [View](#view-object) object
 ### eventDrop
 - Type `function`
 - Default `undefined`
+- Requires `Interaction` plugin
 Callback function that is triggered when dragging stops, and the event has moved to a different day/time.
@@ -847,12 +854,14 @@ The current [View](#view-object) object
 ### eventDurationEditable
 - Type `boolean`
 - Default `true`
+- Requires `Interaction` plugin
 Determines whether calendar events can be resized.
 ### eventLongPressDelay
 - Type `integer`
 - Default `undefined`
+- Requires `Interaction` plugin
 For touch devices, the amount of time (in milliseconds) the user must hold down a tap before the event becomes draggable/resizable.
@@ -955,6 +964,7 @@ The current [View](#view-object) object
 ### eventResize
 - Type `function`
 - Default `undefined`
+- Requires `Interaction` plugin
 Callback function that is triggered when resizing stops, and the duration of the event has changed.
@@ -1027,6 +1037,7 @@ The current [View](#view-object) object
 ### eventResizeStart
 - Type `function`
 - Default `undefined`
+- Requires `Interaction` plugin
 Callback function that is triggered when the event resizing begins.
@@ -1067,6 +1078,7 @@ The current [View](#view-object) object
 ### eventResizeStop
 - Type `function`
 - Default `undefined`
+- Requires `Interaction` plugin
 Callback function that is triggered when the event resizing stops.
@@ -1208,6 +1220,7 @@ Instead of calling `successCallback` and `failureCallback`, you may return the r
 ### eventStartEditable
 - Type `boolean`
 - Default `true`
+- Requires `Interaction` plugin
 Determines whether the events on the calendar can be dragged.
@@ -1506,6 +1519,7 @@ Enables a marker indicating the current time in `timeGrid`/`resourceTimeGrid` vi
 ### pointer
 - Type `boolean`
 - Default `false`
+- Requires `Interaction` plugin
 Enables mouse cursor pointer in `timeGrid`/`resourceTimeGrid` views.
@@ -1589,6 +1603,7 @@ The associated [Resource](#resource-object) object
 ### select
 - Type `function`
 - Default `undefined`
+- Requires `Interaction` plugin
 Callback function that is triggered when a date/time selection is made.
@@ -1666,12 +1681,14 @@ If the current view is a resource view, the [Resource](#resource-object) object
 ### selectable
 - Type `boolean`
 - Default `false`
+- Requires `Interaction` plugin
 Determines whether the user is allowed to highlight multiple days or time slots by clicking and moving the pointer.
 ### selectBackgroundColor
 - Type `string`
 - Default `undefined`
+- Requires `Interaction` plugin
 Sets the background color for the event indicating the current selection. See [selectable](#selectable).
@@ -1680,6 +1697,7 @@ You can use any of the CSS color formats such `'#f00'`, `'#ff0000'`, `'rgb(255,0
 ### selectLongPressDelay
 - Type `integer`
 - Default `undefined`
+- Requires `Interaction` plugin
 For touch devices, the amount of time (in milliseconds) the user must hold down a tap before the date becomes selectable.
@@ -1688,6 +1706,7 @@ If not specified, it falls back to [longPressDelay](#longpressdelay).
 ### selectMinDistance
 - Type `integer`
 - Default `5`
+- Requires `Interaction` plugin
 Defines how many pixels the user’s mouse must move before the selection begins.
@@ -1810,6 +1829,7 @@ function (date) {
 ### unselect
 - Type `function`
 - Default `undefined`
+- Requires `Interaction` plugin
 Callback function that is triggered when the current selection is cleared.
@@ -1851,12 +1871,14 @@ The current [View](#view-object) object
 ### unselectAuto
 - Type `boolean`
 - Default `true`
+- Requires `Interaction` plugin
 Determines whether clicking elsewhere on the page will clear the current selection. See [selectable](#selectable).
 ### unselectCancel
 - Type `string`
 - Default `''`
+- Requires `Interaction` plugin
 A CSS selector that specifies elements that will ignore the [unselectAuto](#unselectauto) option.
@@ -2001,6 +2023,11 @@ Using this method, you can, for example, find out on which day a click occurred
 </details>
+### destroy()
+- Return value `undefined`
+Destroys the calendar, removing all DOM elements, event handlers, and internal data.
 ### getView()
 - Return value `View`

package/index.css CHANGED Viewed

@@ -199,7 +199,6 @@
   height: 100%;
 }
 .ec-month .ec-uniform .ec-content {
-  /* Remove scroll because of hidden events */
   overflow: hidden;
 }
 .ec-list .ec-content {
@@ -221,8 +220,8 @@
   flex: 1 0 auto;
 }
 .ec-month .ec-uniform .ec-days {
-  flex: 1 1 0;
-  min-height: calc(5em + 1px);
+  flex: 1 1 0%;
+  min-height: 0;
 }
 .ec-day {
@@ -238,6 +237,9 @@
   min-height: 5em;
   position: relative;
 }
+.ec-month .ec-uniform .ec-day {
+  min-height: 0;
+}
 .ec-month .ec-day:first-child {
   border-left: none;
 }

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 { is_function, noop, identity, tick, 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, get_current_component } from 'svelte/internal';
+import { getContext, setContext, beforeUpdate } from 'svelte';
 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, hasFn, runFn, ignore } from '@event-calendar/common';
+import { assign, setMidnight, createDate, createDuration, createEvents, createEventSources, cloneDate, prevClosestDay, nextClosestDay, DAY_IN_SECONDS, addDuration, subtractDay, debounce, toLocalDate, toISOString, derived2, addDay, createView, writable2, intl, intlRange, subtractDuration, flushDebounce, toEventWithLocalDates, toViewWithLocalDates, hasFn, runFn, ignore } from '@event-calendar/common';
 function createOptions(plugins) {
     let options = {
@@ -179,19 +179,19 @@ function activeRange(state) {
         }
     );
-    let debounce = 0;
-    derived([_activeRange, state.datesSet], ([$_activeRange, $datesSet]) => {
-        if ($datesSet && !debounce) {
-            ++debounce;
-            tick().then(() => {
-                --debounce;
+    let debounceHandle = {};
+    derived([_activeRange, state.datesSet], values => {
+        let [, $datesSet] = values;
+        if ($datesSet) {
+            debounce(() => {
+                let [$_activeRange, $datesSet] = values;
                 $datesSet({
                     start: toLocalDate($_activeRange.start),
                     end: toLocalDate($_activeRange.end),
                     startStr: toISOString($_activeRange.start),
                     endStr: toISOString($_activeRange.end)
                 });
-            });
+            }, debounceHandle, state._queue);
         }
     }).subscribe(noop);
@@ -261,9 +261,11 @@ function events(state) {
     let _events = writable([]);
     let abortController;
     let fetching = 0;
+    let debounceHandle = {};
     derived(
         [state.events, state.eventSources, state._activeRange, state._fetchedRange, state.lazyFetching, state.loading],
-        ([$events, $eventSources, $_activeRange, $_fetchedRange, $lazyFetching, $loading], set) => {
+        (values, set) => debounce(() => {
+            let [$events, $eventSources, $_activeRange, $_fetchedRange, $lazyFetching, $loading] = values;
             if (!$eventSources.length) {
                 set($events);
                 return;
@@ -336,7 +338,7 @@ function events(state) {
                 $_fetchedRange.start = $_activeRange.start;
                 $_fetchedRange.end = $_activeRange.end;
             }
-        },
+        }, debounceHandle, state._queue),
         []
     ).subscribe(_events.set);
@@ -371,6 +373,7 @@ class State {
         }
         // Private stores
+        this._queue = writable(new Map());  // debounce queue
         this._currentRange = currentRange(this);
         this._activeRange = activeRange(this);
         this._fetchedRange = writable({start: undefined, end: undefined});
@@ -426,6 +429,7 @@ class State {
                     }
                 }
             });
+            // Process options
             for (let key of Object.keys(opts)) {
                 if (this.hasOwnProperty(key) && key[0] !== '_') {
                     let {set, _set, ...rest} = this[key];
@@ -1298,7 +1302,7 @@ function create_fragment(ctx) {
 			current = true;
 			if (!mounted) {
-				dispose = listen(window, "click", /*handleClick*/ ctx[16], true);
+				dispose = listen(window, "click", /*handleClick*/ ctx[17], true);
 				mounted = true;
 			}
 		},
@@ -1384,6 +1388,7 @@ function create_fragment(ctx) {
 }
 function instance($$self, $$props, $$invalidate) {
+	let $_queue;
 	let $_ignoreClick;
 	let $events;
 	let $_events;
@@ -1396,17 +1401,19 @@ function instance($$self, $$props, $$invalidate) {
 	let $_viewComponent;
 	let { plugins = [] } = $$props;
 	let { options = {} } = $$props;
+	let component = get_current_component();
 	let state = new State(plugins, options);
 	setContext('state', state);
-	let { _viewComponent, _viewClass, _ignoreClick, _interaction, _iClass, _events, events, eventSources, height, theme } = state;
+	let { _viewComponent, _viewClass, _ignoreClick, _interaction, _iClass, _events, _queue, 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(30, $_ignoreClick = value));
+	component_subscribe($$self, _ignoreClick, value => $$invalidate(33, $_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(32, $_events = value));
-	component_subscribe($$self, events, value => $$invalidate(31, $events = value));
-	component_subscribe($$self, eventSources, value => $$invalidate(33, $eventSources = value));
+	component_subscribe($$self, _events, value => $$invalidate(35, $_events = value));
+	component_subscribe($$self, _queue, value => $$invalidate(32, $_queue = value));
+	component_subscribe($$self, events, value => $$invalidate(34, $events = value));
+	component_subscribe($$self, eventSources, value => $$invalidate(36, $eventSources = value));
 	component_subscribe($$self, height, value => $$invalidate(4, $height = value));
 	component_subscribe($$self, theme, value => $$invalidate(1, $theme = value));
@@ -1436,11 +1443,11 @@ function instance($$self, $$props, $$invalidate) {
 	}
 	function getEvents() {
-		return get(state._events).map(toEventWithLocalDates);
+		return $_events.map(toEventWithLocalDates);
 	}
 	function getEventById(id) {
-		for (let event of get(state._events)) {
+		for (let event of $_events) {
 			if (event.id == id) {
 				return toEventWithLocalDates(event);
 			}
@@ -1497,6 +1504,10 @@ function instance($$self, $$props, $$invalidate) {
 		return null;
 	}
+	function destroy() {
+		destroy_component(component, true);
+	}
 	function updateEvents(func) {
 		if ($eventSources.length) {
 			set_store_value(_events, $_events = func($_events), $_events);
@@ -1512,13 +1523,17 @@ function instance($$self, $$props, $$invalidate) {
 		}
 	}
+	beforeUpdate(() => {
+		flushDebounce($_queue);
+	});
 	$$self.$$set = $$props => {
-		if ('plugins' in $$props) $$invalidate(17, plugins = $$props.plugins);
-		if ('options' in $$props) $$invalidate(18, options = $$props.options);
+		if ('plugins' in $$props) $$invalidate(18, plugins = $$props.plugins);
+		if ('options' in $$props) $$invalidate(19, options = $$props.options);
 	};
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty[0] & /*options*/ 262144) {
+		if ($$self.$$.dirty[0] & /*options*/ 524288) {
 			// Reactively update options that did change
 			for (let [name, value] of diff(options)) {
 				setOption(name, value);
@@ -1539,6 +1554,7 @@ function instance($$self, $$props, $$invalidate) {
 		_interaction,
 		_iClass,
 		_events,
+		_queue,
 		events,
 		eventSources,
 		height,
@@ -1556,7 +1572,8 @@ function instance($$self, $$props, $$invalidate) {
 		removeEventById,
 		getView,
 		unselect,
-		dateFromPoint
+		dateFromPoint,
+		destroy
 	];
 }
@@ -1571,19 +1588,20 @@ class Calendar extends SvelteComponent {
 			create_fragment,
 			safe_not_equal,
 			{
-				plugins: 17,
-				options: 18,
-				setOption: 19,
-				getOption: 20,
-				refetchEvents: 21,
-				getEvents: 22,
-				getEventById: 23,
-				addEvent: 24,
-				updateEvent: 25,
-				removeEventById: 26,
-				getView: 27,
-				unselect: 28,
-				dateFromPoint: 29
+				plugins: 18,
+				options: 19,
+				setOption: 20,
+				getOption: 21,
+				refetchEvents: 22,
+				getEvents: 23,
+				getEventById: 24,
+				addEvent: 25,
+				updateEvent: 26,
+				removeEventById: 27,
+				getView: 28,
+				unselect: 29,
+				dateFromPoint: 30,
+				destroy: 31
 			},
 			null,
 			[-1, -1]
@@ -1591,47 +1609,51 @@ class Calendar extends SvelteComponent {
 	}
 	get setOption() {
-		return this.$$.ctx[19];
+		return this.$$.ctx[20];
 	}
 	get getOption() {
-		return this.$$.ctx[20];
+		return this.$$.ctx[21];
 	}
 	get refetchEvents() {
-		return this.$$.ctx[21];
+		return this.$$.ctx[22];
 	}
 	get getEvents() {
-		return this.$$.ctx[22];
+		return this.$$.ctx[23];
 	}
 	get getEventById() {
-		return this.$$.ctx[23];
+		return this.$$.ctx[24];
 	}
 	get addEvent() {
-		return this.$$.ctx[24];
+		return this.$$.ctx[25];
 	}
 	get updateEvent() {
-		return this.$$.ctx[25];
+		return this.$$.ctx[26];
 	}
 	get removeEventById() {
-		return this.$$.ctx[26];
+		return this.$$.ctx[27];
 	}
 	get getView() {
-		return this.$$.ctx[27];
+		return this.$$.ctx[28];
 	}
 	get unselect() {
-		return this.$$.ctx[28];
+		return this.$$.ctx[29];
 	}
 	get dateFromPoint() {
-		return this.$$.ctx[29];
+		return this.$$.ctx[30];
+	}
+	get destroy() {
+		return this.$$.ctx[31];
 	}
 }

package/package.json CHANGED Viewed

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

package/src/Calendar.svelte CHANGED Viewed

@@ -1,6 +1,7 @@
 <script>
     import '../index.css';
-    import {setContext} from 'svelte';
+    import {setContext, beforeUpdate} from 'svelte';
+    import {destroy_component, get_current_component} from 'svelte/internal';
     import {get} from 'svelte/store';
     import {diff} from './storage/options';
     import State from './storage/state';
@@ -12,16 +13,19 @@
         toLocalDate,
         ignore,
         hasFn,
-        runFn
+        runFn,
+        flushDebounce
     } from '@event-calendar/common';
     export let plugins = [];
     export let options = {};
+    let component = get_current_component();
     let state = new State(plugins, options);
     setContext('state', state);
-    let {_viewComponent, _viewClass, _ignoreClick, _interaction, _iClass, _events,
+    let {_viewComponent, _viewClass, _ignoreClick, _interaction, _iClass, _events, _queue,
         events, eventSources, height, theme} = state;
     // Reactively update options that did change
@@ -50,11 +54,11 @@
     }
     export function getEvents() {
-        return get(state._events).map(toEventWithLocalDates);
+        return $_events.map(toEventWithLocalDates);
     }
     export function getEventById(id) {
-        for (let event of get(state._events)) {
+        for (let event of $_events) {
             if (event.id == id) {
                 return toEventWithLocalDates(event);
             }
@@ -106,6 +110,10 @@
         return null;
     }
+    export function destroy() {
+        destroy_component(component, true);
+    }
     function updateEvents(func) {
         if ($eventSources.length) {
             $_events = func($_events);
@@ -120,6 +128,10 @@
             $_ignoreClick = false;
         }
     }
+    beforeUpdate(() => {
+        flushDebounce($_queue);
+    });
 </script>
 <div

package/src/index.scss CHANGED Viewed

@@ -226,8 +226,7 @@
   }
   .ec-month .ec-uniform & {
-    /* Remove scroll because of hidden events */
-    overflow: hidden;
+    overflow: hidden;  // remove scrolling due to hidden events
   }
   .ec-list & {
@@ -253,8 +252,8 @@
   }
   .ec-month .ec-uniform & {
-    flex: 1 1 0;
-    min-height: calc(5em + 1px);
+    flex: 1 1 0%;  // % is required to work properly for both auto and fixed calendar height
+    min-height: 0;
   }
 }
@@ -274,6 +273,10 @@
     position: relative;
   }
+  .ec-month .ec-uniform & {
+    min-height: 0;
+  }
   .ec-month &:first-child {
     border-left: none;
   }

package/src/storage/state.js CHANGED Viewed

@@ -28,6 +28,7 @@ export default class {
         }
         // Private stores
+        this._queue = writable(new Map());  // debounce queue
         this._currentRange = currentRange(this);
         this._activeRange = activeRange(this);
         this._fetchedRange = writable({start: undefined, end: undefined});
@@ -83,6 +84,7 @@ export default class {
                     }
                 }
             });
+            // Process options
             for (let key of Object.keys(opts)) {
                 if (this.hasOwnProperty(key) && key[0] !== '_') {
                     let {set, _set, ...rest} = this[key];

package/src/storage/stores.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import {derived, writable, readable} from 'svelte/store';
-import {is_function, noop, tick} from 'svelte/internal';
+import {is_function, noop} from 'svelte/internal';
 import {
     DAY_IN_SECONDS,
     cloneDate,
@@ -11,7 +11,8 @@ import {
     nextClosestDay,
     prevClosestDay,
     setMidnight,
-    toLocalDate
+    toLocalDate,
+    debounce
 } from '@event-calendar/common';
 import {derived2} from '@event-calendar/common';
 import {createEvents} from '@event-calendar/common';
@@ -41,19 +42,19 @@ export function activeRange(state) {
         }
     );
-    let debounce = 0;
-    derived([_activeRange, state.datesSet], ([$_activeRange, $datesSet]) => {
-        if ($datesSet && !debounce) {
-            ++debounce;
-            tick().then(() => {
-                --debounce;
+    let debounceHandle = {};
+    derived([_activeRange, state.datesSet], values => {
+        let [, $datesSet] = values;
+        if ($datesSet) {
+            debounce(() => {
+                let [$_activeRange, $datesSet] = values;
                 $datesSet({
                     start: toLocalDate($_activeRange.start),
                     end: toLocalDate($_activeRange.end),
                     startStr: toISOString($_activeRange.start),
                     endStr: toISOString($_activeRange.end)
                 });
-            });
+            }, debounceHandle, state._queue);
         }
     }).subscribe(noop);
@@ -123,9 +124,11 @@ export function events(state) {
     let _events = writable([]);
     let abortController;
     let fetching = 0;
+    let debounceHandle = {};
     derived(
         [state.events, state.eventSources, state._activeRange, state._fetchedRange, state.lazyFetching, state.loading],
-        ([$events, $eventSources, $_activeRange, $_fetchedRange, $lazyFetching, $loading], set) => {
+        (values, set) => debounce(() => {
+            let [$events, $eventSources, $_activeRange, $_fetchedRange, $lazyFetching, $loading] = values;
             if (!$eventSources.length) {
                 set($events);
                 return;
@@ -198,7 +201,7 @@ export function events(state) {
                 $_fetchedRange.start = $_activeRange.start;
                 $_fetchedRange.end = $_activeRange.end;
             }
-        },
+        }, debounceHandle, state._queue),
         []
     ).subscribe(_events.set);