@event-calendar/core 3.5.0 → 3.6.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.
- package/README.md +28 -27
- package/index.js +86 -66
- package/package.json +3 -3
- package/src/Auxiliary.svelte +2 -3
- package/src/Calendar.svelte +0 -7
- package/src/index.js +10 -1
- package/src/index.svelte.js +4 -0
- package/src/lib/debounce.js +2 -2
- package/src/lib/dom.js +5 -0
- package/src/lib/events.js +3 -4
- package/src/lib/stores.js +3 -3
- package/src/lib/times.js +2 -3
- package/src/lib/utils.js +16 -0
- package/src/storage/state.js +5 -5
- package/src/storage/stores.js +5 -5
package/README.md
CHANGED
|
@@ -4,7 +4,7 @@ See [demo](https://vkurko.github.io/calendar/) and [changelog](CHANGELOG.md).
|
|
|
4
4
|
|
|
5
5
|
Full-sized drag & drop JavaScript event calendar with resource & timeline views:
|
|
6
6
|
|
|
7
|
-
* Lightweight (
|
|
7
|
+
* Lightweight (36kb [br](https://en.wikipedia.org/wiki/Brotli) compressed)
|
|
8
8
|
* Zero-dependency (pre-built bundle)
|
|
9
9
|
* Used on over 70,000 websites with [Bookly](https://wordpress.org/plugins/bookly-responsive-appointment-booking-tool/)
|
|
10
10
|
|
|
@@ -12,7 +12,7 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
|
|
|
12
12
|
|
|
13
13
|
## Table of contents
|
|
14
14
|
- [Usage](#usage)
|
|
15
|
-
- [
|
|
15
|
+
- [JavaScript module / Svelte component](#javascript-module--svelte-component)
|
|
16
16
|
- [Pre-built browser ready bundle](#pre-built-browser-ready-bundle)
|
|
17
17
|
- [Modifying options after initialization](#modifying-options-after-initialization)
|
|
18
18
|
- [Options](#options)
|
|
@@ -144,7 +144,7 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
|
|
|
144
144
|
- [Browser support](#browser-support)
|
|
145
145
|
|
|
146
146
|
## Usage
|
|
147
|
-
###
|
|
147
|
+
### JavaScript module / Svelte component
|
|
148
148
|
The first step is to install the Event Calendar `core` package:
|
|
149
149
|
```bash
|
|
150
150
|
npm install --save-dev @event-calendar/core
|
|
@@ -162,27 +162,12 @@ You must use at least one plugin that provides a view. The following plugins are
|
|
|
162
162
|
* `@event-calendar/time-grid`
|
|
163
163
|
* `@event-calendar/interaction` (doesn't provide a view)
|
|
164
164
|
|
|
165
|
-
Then, in your
|
|
166
|
-
```html
|
|
167
|
-
<script>
|
|
168
|
-
import Calendar from '@event-calendar/core';
|
|
169
|
-
import TimeGrid from '@event-calendar/time-grid';
|
|
170
|
-
|
|
171
|
-
let plugins = [TimeGrid];
|
|
172
|
-
let options = {
|
|
173
|
-
view: 'timeGridWeek',
|
|
174
|
-
events: [
|
|
175
|
-
// your list of events
|
|
176
|
-
]
|
|
177
|
-
};
|
|
178
|
-
</script>
|
|
179
|
-
|
|
180
|
-
<Calendar {plugins} {options} />
|
|
181
|
-
```
|
|
182
|
-
Or in ES6 module:
|
|
165
|
+
Then, in your JavaScript module:
|
|
183
166
|
```js
|
|
184
167
|
import Calendar from '@event-calendar/core';
|
|
185
168
|
import TimeGrid from '@event-calendar/time-grid';
|
|
169
|
+
// Import CSS if your build tool supports it
|
|
170
|
+
import '@event-calendar/core/index.css';
|
|
186
171
|
|
|
187
172
|
let ec = new Calendar({
|
|
188
173
|
target: document.getElementById('ec'),
|
|
@@ -197,16 +182,29 @@ let ec = new Calendar({
|
|
|
197
182
|
}
|
|
198
183
|
});
|
|
199
184
|
```
|
|
200
|
-
|
|
201
|
-
```
|
|
202
|
-
|
|
185
|
+
Or in your Svelte component, use the calendar like this:
|
|
186
|
+
```html
|
|
187
|
+
<script>
|
|
188
|
+
import Calendar from '@event-calendar/core';
|
|
189
|
+
import TimeGrid from '@event-calendar/time-grid';
|
|
190
|
+
|
|
191
|
+
let plugins = [TimeGrid];
|
|
192
|
+
let options = {
|
|
193
|
+
view: 'timeGridWeek',
|
|
194
|
+
events: [
|
|
195
|
+
// your list of events
|
|
196
|
+
]
|
|
197
|
+
};
|
|
198
|
+
</script>
|
|
199
|
+
|
|
200
|
+
<Calendar {plugins} {options} />
|
|
203
201
|
```
|
|
204
202
|
|
|
205
203
|
### Pre-built browser ready bundle
|
|
206
204
|
Include the following lines of code in the `<head>` section of your page:
|
|
207
205
|
```html
|
|
208
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@3.
|
|
209
|
-
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@3.
|
|
206
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@3.6.1/event-calendar.min.css">
|
|
207
|
+
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@3.6.1/event-calendar.min.js"></script>
|
|
210
208
|
```
|
|
211
209
|
|
|
212
210
|
<details>
|
|
@@ -221,7 +219,7 @@ Include the following lines of code in the `<head>` section of your page:
|
|
|
221
219
|
|
|
222
220
|
</details>
|
|
223
221
|
|
|
224
|
-
Then initialize the calendar
|
|
222
|
+
Then initialize the calendar like this:
|
|
225
223
|
```js
|
|
226
224
|
let ec = new EventCalendar(document.getElementById('ec'), {
|
|
227
225
|
view: 'timeGridWeek',
|
|
@@ -2394,9 +2392,12 @@ Using this method, you can, for example, find out on which day a click occurred
|
|
|
2394
2392
|
|
|
2395
2393
|
### destroy()
|
|
2396
2394
|
- Return value `undefined`
|
|
2395
|
+
- Not available in Svelte
|
|
2397
2396
|
|
|
2398
2397
|
Destroys the calendar, removing all DOM elements, event handlers, and internal data.
|
|
2399
2398
|
|
|
2399
|
+
Please note that this method is not available in Svelte. Instead, the calendar is destroyed gracefully when the component containing it is destroyed.
|
|
2400
|
+
|
|
2400
2401
|
### getView()
|
|
2401
2402
|
- Return value `View`
|
|
2402
2403
|
|
package/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { getContext, setContext, beforeUpdate, afterUpdate } from 'svelte';
|
|
1
|
+
import { SvelteComponent, init, safe_not_equal, ensure_array_like, empty, insert, noop as noop$1, detach, destroy_each, component_subscribe, set_store_value, element, text, attr, append, listen as listen$1, set_data, is_function, action_destroyer, run_all, transition_in, group_outros, check_outros, transition_out, space, create_component, mount_component, destroy_component, construct_svelte_component, set_style } from 'svelte/internal';
|
|
2
|
+
import { tick, getContext, setContext, beforeUpdate, afterUpdate } from 'svelte';
|
|
3
3
|
import { derived, get, writable, readable } from 'svelte/store';
|
|
4
4
|
|
|
5
5
|
function keyEnter(fn) {
|
|
@@ -227,25 +227,6 @@ function _fromISOString(str) {
|
|
|
227
227
|
));
|
|
228
228
|
}
|
|
229
229
|
|
|
230
|
-
function debounce(fn, handle, queueStore) {
|
|
231
|
-
queueStore.update(queue => queue.set(handle, fn));
|
|
232
|
-
}
|
|
233
|
-
|
|
234
|
-
function flushDebounce(queue) {
|
|
235
|
-
run_all(queue);
|
|
236
|
-
queue.clear();
|
|
237
|
-
}
|
|
238
|
-
|
|
239
|
-
function task(fn, handle, tasks) {
|
|
240
|
-
handle ??= fn;
|
|
241
|
-
if (!tasks.has(handle)) {
|
|
242
|
-
tasks.set(handle, setTimeout(() => {
|
|
243
|
-
tasks.delete(handle);
|
|
244
|
-
fn();
|
|
245
|
-
}));
|
|
246
|
-
}
|
|
247
|
-
}
|
|
248
|
-
|
|
249
230
|
function assign(...args) {
|
|
250
231
|
return Object.assign(...args);
|
|
251
232
|
}
|
|
@@ -278,6 +259,41 @@ function isArray(value) {
|
|
|
278
259
|
return Array.isArray(value);
|
|
279
260
|
}
|
|
280
261
|
|
|
262
|
+
function isFunction(value) {
|
|
263
|
+
return typeof value === 'function';
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
function run(fn) {
|
|
267
|
+
return fn();
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
function runAll(fns) {
|
|
271
|
+
fns.forEach(run);
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
function noop() {}
|
|
275
|
+
|
|
276
|
+
const identity = (x) => x;
|
|
277
|
+
|
|
278
|
+
function debounce(fn, handle, queueStore) {
|
|
279
|
+
queueStore.update(queue => queue.set(handle, fn));
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
function flushDebounce(queue) {
|
|
283
|
+
runAll(queue);
|
|
284
|
+
queue.clear();
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
function task(fn, handle, tasks) {
|
|
288
|
+
handle ??= fn;
|
|
289
|
+
if (!tasks.has(handle)) {
|
|
290
|
+
tasks.set(handle, setTimeout(() => {
|
|
291
|
+
tasks.delete(handle);
|
|
292
|
+
fn();
|
|
293
|
+
}));
|
|
294
|
+
}
|
|
295
|
+
}
|
|
296
|
+
|
|
281
297
|
function createElement(tag, className, content, attrs = []) {
|
|
282
298
|
let el = document.createElement(tag);
|
|
283
299
|
el.className = className;
|
|
@@ -342,6 +358,11 @@ function getElementWithPayload(x, y, root = document) {
|
|
|
342
358
|
return null;
|
|
343
359
|
}
|
|
344
360
|
|
|
361
|
+
function listen(node, event, handler, options) {
|
|
362
|
+
node.addEventListener(event, handler, options);
|
|
363
|
+
return () => node.removeEventListener(event, handler, options);
|
|
364
|
+
}
|
|
365
|
+
|
|
345
366
|
function createView(view, _viewTitle, _currentRange, _activeRange) {
|
|
346
367
|
return {
|
|
347
368
|
type: view,
|
|
@@ -447,7 +468,7 @@ function createEventContent(chunk, displayEventEnd, eventContent, theme, _intlEv
|
|
|
447
468
|
let content;
|
|
448
469
|
|
|
449
470
|
if (eventContent) {
|
|
450
|
-
content =
|
|
471
|
+
content = isFunction(eventContent)
|
|
451
472
|
? eventContent({
|
|
452
473
|
event: toEventWithLocalDates(chunk.event),
|
|
453
474
|
timeText,
|
|
@@ -489,7 +510,7 @@ function createTimeElement(timeText, chunk, theme) {
|
|
|
489
510
|
function createEventClasses(eventClassNames, event, _view) {
|
|
490
511
|
let result = event.classNames;
|
|
491
512
|
if (eventClassNames) {
|
|
492
|
-
if (
|
|
513
|
+
if (isFunction(eventClassNames)) {
|
|
493
514
|
eventClassNames = eventClassNames({
|
|
494
515
|
event: toEventWithLocalDates(event),
|
|
495
516
|
view: toViewWithLocalDates(_view)
|
|
@@ -705,7 +726,7 @@ function findResource(event, resources) {
|
|
|
705
726
|
|
|
706
727
|
function intl(locale, format) {
|
|
707
728
|
return derived([locale, format], ([$locale, $format]) => {
|
|
708
|
-
let intl =
|
|
729
|
+
let intl = isFunction($format)
|
|
709
730
|
? {format: $format}
|
|
710
731
|
: new Intl.DateTimeFormat($locale, $format);
|
|
711
732
|
return {
|
|
@@ -717,7 +738,7 @@ function intl(locale, format) {
|
|
|
717
738
|
function intlRange(locale, format) {
|
|
718
739
|
return derived([locale, format], ([$locale, $format]) => {
|
|
719
740
|
let formatRange;
|
|
720
|
-
if (
|
|
741
|
+
if (isFunction($format)) {
|
|
721
742
|
formatRange = $format;
|
|
722
743
|
} else {
|
|
723
744
|
let intl = new Intl.DateTimeFormat($locale, $format);
|
|
@@ -823,7 +844,7 @@ function createSlotTimeLimits($slotMinTime, $slotMaxTime, $flexibleSlotTimeLimit
|
|
|
823
844
|
// If slotMaxTime goes past midnight, then extend it back by a maximum of 24 hours
|
|
824
845
|
let minMin = createDuration(min(toSeconds(min$1), max(0, toSeconds(max$1) - DAY_IN_SECONDS)));
|
|
825
846
|
let maxMax = createDuration(max(toSeconds(max$1), toSeconds(minMin) + DAY_IN_SECONDS));
|
|
826
|
-
let filter =
|
|
847
|
+
let filter = isFunction($flexibleSlotTimeLimits?.eventFilter)
|
|
827
848
|
? $flexibleSlotTimeLimits.eventFilter
|
|
828
849
|
: event => !bgEvent(event.display);
|
|
829
850
|
loop: for (let date of $_viewDates) {
|
|
@@ -1123,11 +1144,11 @@ function events(state) {
|
|
|
1123
1144
|
// Create new abort controller
|
|
1124
1145
|
abortController = new AbortController();
|
|
1125
1146
|
// Call loading hook
|
|
1126
|
-
if (
|
|
1147
|
+
if (isFunction($loading) && !fetching) {
|
|
1127
1148
|
$loading(true);
|
|
1128
1149
|
}
|
|
1129
1150
|
let stopLoading = () => {
|
|
1130
|
-
if (--fetching === 0 &&
|
|
1151
|
+
if (--fetching === 0 && isFunction($loading)) {
|
|
1131
1152
|
$loading(false);
|
|
1132
1153
|
}
|
|
1133
1154
|
};
|
|
@@ -1144,7 +1165,7 @@ function events(state) {
|
|
|
1144
1165
|
let endStr = toISOString($_activeRange.end);
|
|
1145
1166
|
// Loop over event sources
|
|
1146
1167
|
for (let source of $eventSources) {
|
|
1147
|
-
if (
|
|
1168
|
+
if (isFunction(source.events)) {
|
|
1148
1169
|
// Events as a function
|
|
1149
1170
|
let result = source.events({
|
|
1150
1171
|
start: toLocalDate($_activeRange.start),
|
|
@@ -1158,7 +1179,7 @@ function events(state) {
|
|
|
1158
1179
|
} else {
|
|
1159
1180
|
// Events as a JSON feed
|
|
1160
1181
|
// Prepare params
|
|
1161
|
-
let params =
|
|
1182
|
+
let params = isFunction(source.extraParams) ? source.extraParams() : assign({}, source.extraParams);
|
|
1162
1183
|
params.start = startStr;
|
|
1163
1184
|
params.end = endStr;
|
|
1164
1185
|
params = new URLSearchParams(params);
|
|
@@ -1286,7 +1307,7 @@ class State {
|
|
|
1286
1307
|
// Set value in all views
|
|
1287
1308
|
set: ['buttonText', 'theme'].includes(key)
|
|
1288
1309
|
? value => {
|
|
1289
|
-
if (
|
|
1310
|
+
if (isFunction(value)) {
|
|
1290
1311
|
let result = value(defOpts[key]);
|
|
1291
1312
|
opts[key] = result;
|
|
1292
1313
|
set(set === _set ? result : value);
|
|
@@ -1308,7 +1329,7 @@ class State {
|
|
|
1308
1329
|
if (newView === view) {
|
|
1309
1330
|
// switch view component
|
|
1310
1331
|
this._viewComponent.set(component);
|
|
1311
|
-
if (
|
|
1332
|
+
if (isFunction(opts.viewDidMount)) {
|
|
1312
1333
|
tick().then(() => opts.viewDidMount(get(this._view)));
|
|
1313
1334
|
}
|
|
1314
1335
|
// update store values
|
|
@@ -1342,7 +1363,7 @@ function mergeOpts(...args) {
|
|
|
1342
1363
|
for (let opts of args) {
|
|
1343
1364
|
let override = {};
|
|
1344
1365
|
for (let key of ['buttonText', 'theme']) {
|
|
1345
|
-
if (
|
|
1366
|
+
if (isFunction(opts[key])) {
|
|
1346
1367
|
override[key] = opts[key](result[key]);
|
|
1347
1368
|
}
|
|
1348
1369
|
}
|
|
@@ -1400,7 +1421,7 @@ function create_if_block_5(ctx) {
|
|
|
1400
1421
|
append(button_1, t);
|
|
1401
1422
|
|
|
1402
1423
|
if (!mounted) {
|
|
1403
|
-
dispose = listen(button_1, "click", click_handler_1);
|
|
1424
|
+
dispose = listen$1(button_1, "click", click_handler_1);
|
|
1404
1425
|
mounted = true;
|
|
1405
1426
|
}
|
|
1406
1427
|
},
|
|
@@ -1446,7 +1467,7 @@ function create_if_block_4(ctx) {
|
|
|
1446
1467
|
|
|
1447
1468
|
if (!mounted) {
|
|
1448
1469
|
dispose = [
|
|
1449
|
-
listen(button_1, "click", function () {
|
|
1470
|
+
listen$1(button_1, "click", function () {
|
|
1450
1471
|
if (is_function(/*$customButtons*/ ctx[6][/*button*/ ctx[25]].click)) /*$customButtons*/ ctx[6][/*button*/ ctx[25]].click.apply(this, arguments);
|
|
1451
1472
|
}),
|
|
1452
1473
|
action_destroyer(setContent_action = setContent.call(null, button_1, /*$customButtons*/ ctx[6][/*button*/ ctx[25]].text))
|
|
@@ -1498,7 +1519,7 @@ function create_if_block_3(ctx) {
|
|
|
1498
1519
|
append(button_1, t);
|
|
1499
1520
|
|
|
1500
1521
|
if (!mounted) {
|
|
1501
|
-
dispose = listen(button_1, "click", /*click_handler*/ ctx[21]);
|
|
1522
|
+
dispose = listen$1(button_1, "click", /*click_handler*/ ctx[21]);
|
|
1502
1523
|
mounted = true;
|
|
1503
1524
|
}
|
|
1504
1525
|
},
|
|
@@ -1549,7 +1570,7 @@ function create_if_block_2(ctx) {
|
|
|
1549
1570
|
append(button_1, i);
|
|
1550
1571
|
|
|
1551
1572
|
if (!mounted) {
|
|
1552
|
-
dispose = listen(button_1, "click", /*next*/ ctx[19]);
|
|
1573
|
+
dispose = listen$1(button_1, "click", /*next*/ ctx[19]);
|
|
1553
1574
|
mounted = true;
|
|
1554
1575
|
}
|
|
1555
1576
|
},
|
|
@@ -1606,7 +1627,7 @@ function create_if_block_1(ctx) {
|
|
|
1606
1627
|
append(button_1, i);
|
|
1607
1628
|
|
|
1608
1629
|
if (!mounted) {
|
|
1609
|
-
dispose = listen(button_1, "click", /*prev*/ ctx[18]);
|
|
1630
|
+
dispose = listen$1(button_1, "click", /*prev*/ ctx[18]);
|
|
1610
1631
|
mounted = true;
|
|
1611
1632
|
}
|
|
1612
1633
|
},
|
|
@@ -1777,8 +1798,8 @@ function create_fragment$3(ctx) {
|
|
|
1777
1798
|
each_blocks.length = each_value.length;
|
|
1778
1799
|
}
|
|
1779
1800
|
},
|
|
1780
|
-
i: noop,
|
|
1781
|
-
o: noop,
|
|
1801
|
+
i: noop$1,
|
|
1802
|
+
o: noop$1,
|
|
1782
1803
|
d(detaching) {
|
|
1783
1804
|
if (detaching) {
|
|
1784
1805
|
detach(each_1_anchor);
|
|
@@ -2267,7 +2288,7 @@ function get_each_context(ctx, list, i) {
|
|
|
2267
2288
|
return child_ctx;
|
|
2268
2289
|
}
|
|
2269
2290
|
|
|
2270
|
-
// (
|
|
2291
|
+
// (24:0) {#each $_auxiliary as component}
|
|
2271
2292
|
function create_each_block(ctx) {
|
|
2272
2293
|
let switch_instance;
|
|
2273
2294
|
let switch_instance_anchor;
|
|
@@ -2435,7 +2456,7 @@ function instance$1($$self, $$props, $$invalidate) {
|
|
|
2435
2456
|
let debounceHandle = {};
|
|
2436
2457
|
|
|
2437
2458
|
function runDatesSet(_activeRange) {
|
|
2438
|
-
if (
|
|
2459
|
+
if (isFunction($datesSet)) {
|
|
2439
2460
|
debounce(
|
|
2440
2461
|
() => $datesSet({
|
|
2441
2462
|
start: toLocalDate(_activeRange.start),
|
|
@@ -2522,7 +2543,7 @@ function create_fragment(ctx) {
|
|
|
2522
2543
|
current = true;
|
|
2523
2544
|
|
|
2524
2545
|
if (!mounted) {
|
|
2525
|
-
dispose = listen(window, "resize", /*recheckScrollable*/ ctx[20]);
|
|
2546
|
+
dispose = listen$1(window, "resize", /*recheckScrollable*/ ctx[20]);
|
|
2526
2547
|
mounted = true;
|
|
2527
2548
|
}
|
|
2528
2549
|
},
|
|
@@ -2610,21 +2631,20 @@ function instance($$self, $$props, $$invalidate) {
|
|
|
2610
2631
|
let $_viewComponent;
|
|
2611
2632
|
let { plugins = [] } = $$props;
|
|
2612
2633
|
let { options = {} } = $$props;
|
|
2613
|
-
let component = get_current_component();
|
|
2614
2634
|
let state = new State(plugins, options);
|
|
2615
2635
|
setContext('state', state);
|
|
2616
2636
|
let { _viewComponent, _bodyEl, _interaction, _iClass, _events, _queue, _queue2, _tasks, _scrollable, date, duration, hiddenDays, height, theme, view } = state;
|
|
2617
2637
|
component_subscribe($$self, _viewComponent, value => $$invalidate(5, $_viewComponent = value));
|
|
2618
|
-
component_subscribe($$self, _bodyEl, value => $$invalidate(
|
|
2619
|
-
component_subscribe($$self, _interaction, value => $$invalidate(
|
|
2638
|
+
component_subscribe($$self, _bodyEl, value => $$invalidate(36, $_bodyEl = value));
|
|
2639
|
+
component_subscribe($$self, _interaction, value => $$invalidate(42, $_interaction = value));
|
|
2620
2640
|
component_subscribe($$self, _iClass, value => $$invalidate(2, $_iClass = value));
|
|
2621
|
-
component_subscribe($$self, _events, value => $$invalidate(
|
|
2622
|
-
component_subscribe($$self, _queue, value => $$invalidate(
|
|
2623
|
-
component_subscribe($$self, _queue2, value => $$invalidate(
|
|
2641
|
+
component_subscribe($$self, _events, value => $$invalidate(43, $_events = value));
|
|
2642
|
+
component_subscribe($$self, _queue, value => $$invalidate(38, $_queue = value));
|
|
2643
|
+
component_subscribe($$self, _queue2, value => $$invalidate(37, $_queue2 = value));
|
|
2624
2644
|
component_subscribe($$self, _scrollable, value => $$invalidate(0, $_scrollable = value));
|
|
2625
|
-
component_subscribe($$self, date, value => $$invalidate(
|
|
2626
|
-
component_subscribe($$self, duration, value => $$invalidate(
|
|
2627
|
-
component_subscribe($$self, hiddenDays, value => $$invalidate(
|
|
2645
|
+
component_subscribe($$self, date, value => $$invalidate(41, $date = value));
|
|
2646
|
+
component_subscribe($$self, duration, value => $$invalidate(40, $duration = value));
|
|
2647
|
+
component_subscribe($$self, hiddenDays, value => $$invalidate(39, $hiddenDays = value));
|
|
2628
2648
|
component_subscribe($$self, height, value => $$invalidate(3, $height = value));
|
|
2629
2649
|
component_subscribe($$self, theme, value => $$invalidate(1, $theme = value));
|
|
2630
2650
|
component_subscribe($$self, view, value => $$invalidate(4, $view = value));
|
|
@@ -2713,10 +2733,6 @@ function instance($$self, $$props, $$invalidate) {
|
|
|
2713
2733
|
return null;
|
|
2714
2734
|
}
|
|
2715
2735
|
|
|
2716
|
-
function destroy() {
|
|
2717
|
-
destroy_component(component, true);
|
|
2718
|
-
}
|
|
2719
|
-
|
|
2720
2736
|
function next() {
|
|
2721
2737
|
set_store_value(date, $date = nextDate($date, $duration), $date);
|
|
2722
2738
|
return this;
|
|
@@ -2790,7 +2806,6 @@ function instance($$self, $$props, $$invalidate) {
|
|
|
2790
2806
|
getView,
|
|
2791
2807
|
unselect,
|
|
2792
2808
|
dateFromPoint,
|
|
2793
|
-
destroy,
|
|
2794
2809
|
next,
|
|
2795
2810
|
prev
|
|
2796
2811
|
];
|
|
@@ -2820,9 +2835,8 @@ class Calendar extends SvelteComponent {
|
|
|
2820
2835
|
getView: 31,
|
|
2821
2836
|
unselect: 32,
|
|
2822
2837
|
dateFromPoint: 33,
|
|
2823
|
-
|
|
2824
|
-
|
|
2825
|
-
prev: 36
|
|
2838
|
+
next: 34,
|
|
2839
|
+
prev: 35
|
|
2826
2840
|
},
|
|
2827
2841
|
null,
|
|
2828
2842
|
[-1, -1]
|
|
@@ -2873,17 +2887,23 @@ class Calendar extends SvelteComponent {
|
|
|
2873
2887
|
return this.$$.ctx[33];
|
|
2874
2888
|
}
|
|
2875
2889
|
|
|
2876
|
-
get
|
|
2890
|
+
get next() {
|
|
2877
2891
|
return this.$$.ctx[34];
|
|
2878
2892
|
}
|
|
2879
2893
|
|
|
2880
|
-
get
|
|
2894
|
+
get prev() {
|
|
2881
2895
|
return this.$$.ctx[35];
|
|
2882
2896
|
}
|
|
2897
|
+
}
|
|
2883
2898
|
|
|
2884
|
-
|
|
2885
|
-
|
|
2886
|
-
|
|
2899
|
+
class index extends Calendar {
|
|
2900
|
+
destroy() {
|
|
2901
|
+
this.$destroy();
|
|
2902
|
+
}
|
|
2903
|
+
|
|
2904
|
+
get view() {
|
|
2905
|
+
return this.getView();
|
|
2906
|
+
}
|
|
2887
2907
|
}
|
|
2888
2908
|
|
|
2889
|
-
export { DAY_IN_SECONDS, addDay, addDuration, ancestor, assign, bgEvent, btnTextDay, btnTextMonth, btnTextWeek, btnTextYear, ceil, cloneDate, cloneEvent, copyTime, createDate, createDuration, createElement, createEventChunk, createEventClasses, createEventContent, createEventSources, createEvents, createResources, createSlotTimeLimits, createTimes, createView, datesEqual, debounce,
|
|
2909
|
+
export { DAY_IN_SECONDS, addDay, addDuration, ancestor, assign, bgEvent, btnTextDay, btnTextMonth, btnTextWeek, btnTextYear, ceil, cloneDate, cloneEvent, copyTime, createDate, createDuration, createElement, createEventChunk, createEventClasses, createEventContent, createEventSources, createEvents, createResources, createSlotTimeLimits, createTimes, createView, datesEqual, debounce, index as default, eventIntersects, floor, flushDebounce, getElementWithPayload, getPayload, ghostEvent, hasPayload, hasYScroll, height, helperEvent, identity, intl, intlRange, isArray, isFunction, keyEnter, keys, listView, listen, max, min, nextClosestDay, nextDate, noTimePart, noop, outsideEvent, pointerEvent, prepareEventChunks, prevClosestDay, prevDate, previewEvent, rect, repositionEvent, resourceBackgroundColor, resourceTextColor, run, runAll, runReposition, setContent, setMidnight, setPayload, sortEventChunks, subtractDay, subtractDuration, symbol, task, themeView, timelineView, toEventWithLocalDates, toISOString, toLocalDate, toSeconds, toViewWithLocalDates, viewResources };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@event-calendar/core",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.6.1",
|
|
4
4
|
"title": "Event Calendar Core package",
|
|
5
5
|
"description": "Full-sized drag & drop event calendar with resource & timeline views",
|
|
6
6
|
"keywords": [
|
|
@@ -18,10 +18,10 @@
|
|
|
18
18
|
},
|
|
19
19
|
"license": "MIT",
|
|
20
20
|
"type": "module",
|
|
21
|
-
"svelte": "src/index.js",
|
|
21
|
+
"svelte": "src/index.svelte.js",
|
|
22
22
|
"exports": {
|
|
23
23
|
".": {
|
|
24
|
-
"svelte": "./src/index.js",
|
|
24
|
+
"svelte": "./src/index.svelte.js",
|
|
25
25
|
"default": "./index.js"
|
|
26
26
|
},
|
|
27
27
|
"./index.css": "./index.css",
|
package/src/Auxiliary.svelte
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
<script>
|
|
2
2
|
import {getContext} from 'svelte';
|
|
3
|
-
import {
|
|
4
|
-
import {debounce, toISOString, toLocalDate, toViewWithLocalDates} from './lib.js';
|
|
3
|
+
import {debounce, toISOString, toLocalDate, toViewWithLocalDates, isFunction} from './lib.js';
|
|
5
4
|
|
|
6
5
|
let {datesSet, _auxiliary, _activeRange, _queue, _view} = getContext('state');
|
|
7
6
|
|
|
@@ -10,7 +9,7 @@
|
|
|
10
9
|
|
|
11
10
|
let debounceHandle = {};
|
|
12
11
|
function runDatesSet(_activeRange) {
|
|
13
|
-
if (
|
|
12
|
+
if (isFunction($datesSet)) {
|
|
14
13
|
debounce(() => $datesSet({
|
|
15
14
|
start: toLocalDate(_activeRange.start),
|
|
16
15
|
end: toLocalDate(_activeRange.end),
|
package/src/Calendar.svelte
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
<script>
|
|
2
2
|
import '../index.css';
|
|
3
3
|
import {setContext, beforeUpdate, afterUpdate} from 'svelte';
|
|
4
|
-
import {destroy_component, get_current_component} from 'svelte/internal';
|
|
5
4
|
import {get} from 'svelte/store';
|
|
6
5
|
import {diff} from './storage/options';
|
|
7
6
|
import State from './storage/state';
|
|
@@ -24,8 +23,6 @@
|
|
|
24
23
|
export let plugins = [];
|
|
25
24
|
export let options = {};
|
|
26
25
|
|
|
27
|
-
let component = get_current_component();
|
|
28
|
-
|
|
29
26
|
let state = new State(plugins, options);
|
|
30
27
|
setContext('state', state);
|
|
31
28
|
|
|
@@ -114,10 +111,6 @@
|
|
|
114
111
|
return null;
|
|
115
112
|
}
|
|
116
113
|
|
|
117
|
-
export function destroy() {
|
|
118
|
-
destroy_component(component, true);
|
|
119
|
-
}
|
|
120
|
-
|
|
121
114
|
export function next() {
|
|
122
115
|
$date = nextDate($date, $duration);
|
|
123
116
|
return this;
|
package/src/index.js
CHANGED
package/src/lib/debounce.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {runAll} from './utils.js';
|
|
2
2
|
|
|
3
3
|
export function debounce(fn, handle, queueStore) {
|
|
4
4
|
queueStore.update(queue => queue.set(handle, fn));
|
|
5
5
|
}
|
|
6
6
|
|
|
7
7
|
export function flushDebounce(queue) {
|
|
8
|
-
|
|
8
|
+
runAll(queue);
|
|
9
9
|
queue.clear();
|
|
10
10
|
}
|
|
11
11
|
|
package/src/lib/dom.js
CHANGED
|
@@ -63,3 +63,8 @@ export function getElementWithPayload(x, y, root = document) {
|
|
|
63
63
|
}
|
|
64
64
|
return null;
|
|
65
65
|
}
|
|
66
|
+
|
|
67
|
+
export function listen(node, event, handler, options) {
|
|
68
|
+
node.addEventListener(event, handler, options);
|
|
69
|
+
return () => node.removeEventListener(event, handler, options);
|
|
70
|
+
}
|
package/src/lib/events.js
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import {addDay, datesEqual, createDate, cloneDate, setMidnight, toLocalDate, toISOString, noTimePart, copyTime} from './date';
|
|
2
2
|
import {createElement} from './dom';
|
|
3
|
-
import {assign, isArray} from './utils';
|
|
3
|
+
import {assign, isArray, isFunction} from './utils';
|
|
4
4
|
import {toViewWithLocalDates} from './view';
|
|
5
|
-
import {is_function} from 'svelte/internal';
|
|
6
5
|
|
|
7
6
|
let eventId = 1;
|
|
8
7
|
export function createEvents(input) {
|
|
@@ -79,7 +78,7 @@ export function createEventContent(chunk, displayEventEnd, eventContent, theme,
|
|
|
79
78
|
let content;
|
|
80
79
|
|
|
81
80
|
if (eventContent) {
|
|
82
|
-
content =
|
|
81
|
+
content = isFunction(eventContent)
|
|
83
82
|
? eventContent({
|
|
84
83
|
event: toEventWithLocalDates(chunk.event),
|
|
85
84
|
timeText,
|
|
@@ -121,7 +120,7 @@ function createTimeElement(timeText, chunk, theme) {
|
|
|
121
120
|
export function createEventClasses(eventClassNames, event, _view) {
|
|
122
121
|
let result = event.classNames;
|
|
123
122
|
if (eventClassNames) {
|
|
124
|
-
if (
|
|
123
|
+
if (isFunction(eventClassNames)) {
|
|
125
124
|
eventClassNames = eventClassNames({
|
|
126
125
|
event: toEventWithLocalDates(event),
|
|
127
126
|
view: toViewWithLocalDates(_view)
|
package/src/lib/stores.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import {derived} from 'svelte/store';
|
|
2
|
-
import {
|
|
2
|
+
import {isFunction} from './utils.js';
|
|
3
3
|
import {toLocalDate} from './date';
|
|
4
4
|
import {createResources} from './resources.js';
|
|
5
5
|
|
|
6
6
|
export function intl(locale, format) {
|
|
7
7
|
return derived([locale, format], ([$locale, $format]) => {
|
|
8
|
-
let intl =
|
|
8
|
+
let intl = isFunction($format)
|
|
9
9
|
? {format: $format}
|
|
10
10
|
: new Intl.DateTimeFormat($locale, $format);
|
|
11
11
|
return {
|
|
@@ -17,7 +17,7 @@ export function intl(locale, format) {
|
|
|
17
17
|
export function intlRange(locale, format) {
|
|
18
18
|
return derived([locale, format], ([$locale, $format]) => {
|
|
19
19
|
let formatRange;
|
|
20
|
-
if (
|
|
20
|
+
if (isFunction($format)) {
|
|
21
21
|
formatRange = $format;
|
|
22
22
|
} else {
|
|
23
23
|
let intl = new Intl.DateTimeFormat($locale, $format);
|
package/src/lib/times.js
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import {is_function} from 'svelte/internal';
|
|
2
1
|
import {addDuration, cloneDate, createDuration, DAY_IN_SECONDS, toISOString, toSeconds} from './date.js';
|
|
3
|
-
import {max as maxFn, min as minFn} from './utils.js';
|
|
2
|
+
import {max as maxFn, min as minFn, isFunction} from './utils.js';
|
|
4
3
|
import {bgEvent} from './events.js';
|
|
5
4
|
|
|
6
5
|
export function createTimes(date, $slotDuration, $_slotTimeLimits, $_intlSlotLabel) {
|
|
@@ -32,7 +31,7 @@ export function createSlotTimeLimits($slotMinTime, $slotMaxTime, $flexibleSlotTi
|
|
|
32
31
|
// If slotMaxTime goes past midnight, then extend it back by a maximum of 24 hours
|
|
33
32
|
let minMin = createDuration(minFn(toSeconds(min), maxFn(0, toSeconds(max) - DAY_IN_SECONDS)));
|
|
34
33
|
let maxMax = createDuration(maxFn(toSeconds(max), toSeconds(minMin) + DAY_IN_SECONDS));
|
|
35
|
-
let filter =
|
|
34
|
+
let filter = isFunction($flexibleSlotTimeLimits?.eventFilter)
|
|
36
35
|
? $flexibleSlotTimeLimits.eventFilter
|
|
37
36
|
: event => !bgEvent(event.display);
|
|
38
37
|
loop: for (let date of $_viewDates) {
|
package/src/lib/utils.js
CHANGED
|
@@ -29,3 +29,19 @@ export function symbol() {
|
|
|
29
29
|
export function isArray(value) {
|
|
30
30
|
return Array.isArray(value);
|
|
31
31
|
}
|
|
32
|
+
|
|
33
|
+
export function isFunction(value) {
|
|
34
|
+
return typeof value === 'function';
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
export function run(fn) {
|
|
38
|
+
return fn();
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
export function runAll(fns) {
|
|
42
|
+
fns.forEach(run);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
export function noop() {}
|
|
46
|
+
|
|
47
|
+
export const identity = (x) => x;
|
package/src/storage/state.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import {get, writable} from 'svelte/store';
|
|
2
|
-
import {
|
|
2
|
+
import {tick} from 'svelte';
|
|
3
3
|
import {createOptions, createParsers} from './options';
|
|
4
4
|
import {
|
|
5
5
|
activeRange,
|
|
@@ -12,7 +12,7 @@ import {
|
|
|
12
12
|
viewTitle,
|
|
13
13
|
view as view2 // hack to avoid a runtime error in SvelteKit dev mode (ReferenceError: view is not defined)
|
|
14
14
|
} from './stores';
|
|
15
|
-
import {keys, intl, intlRange} from '../lib.js';
|
|
15
|
+
import {keys, intl, intlRange, isFunction, identity} from '../lib.js';
|
|
16
16
|
|
|
17
17
|
export default class {
|
|
18
18
|
constructor(plugins, input) {
|
|
@@ -97,7 +97,7 @@ export default class {
|
|
|
97
97
|
// Set value in all views
|
|
98
98
|
set: ['buttonText', 'theme'].includes(key)
|
|
99
99
|
? value => {
|
|
100
|
-
if (
|
|
100
|
+
if (isFunction(value)) {
|
|
101
101
|
let result = value(defOpts[key]);
|
|
102
102
|
opts[key] = result;
|
|
103
103
|
set(set === _set ? result : value);
|
|
@@ -119,7 +119,7 @@ export default class {
|
|
|
119
119
|
if (newView === view) {
|
|
120
120
|
// switch view component
|
|
121
121
|
this._viewComponent.set(component);
|
|
122
|
-
if (
|
|
122
|
+
if (isFunction(opts.viewDidMount)) {
|
|
123
123
|
tick().then(() => opts.viewDidMount(get(this._view)));
|
|
124
124
|
}
|
|
125
125
|
// update store values
|
|
@@ -153,7 +153,7 @@ function mergeOpts(...args) {
|
|
|
153
153
|
for (let opts of args) {
|
|
154
154
|
let override = {};
|
|
155
155
|
for (let key of ['buttonText', 'theme']) {
|
|
156
|
-
if (
|
|
156
|
+
if (isFunction(opts[key])) {
|
|
157
157
|
override[key] = opts[key](result[key]);
|
|
158
158
|
}
|
|
159
159
|
}
|
package/src/storage/stores.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import {derived, writable, readable, get} from 'svelte/store';
|
|
2
|
-
import {
|
|
2
|
+
import {isFunction} from '../lib/utils.js';
|
|
3
3
|
import {
|
|
4
4
|
DAY_IN_SECONDS,
|
|
5
5
|
assign,
|
|
@@ -127,11 +127,11 @@ export function events(state) {
|
|
|
127
127
|
// Create new abort controller
|
|
128
128
|
abortController = new AbortController();
|
|
129
129
|
// Call loading hook
|
|
130
|
-
if (
|
|
130
|
+
if (isFunction($loading) && !fetching) {
|
|
131
131
|
$loading(true);
|
|
132
132
|
}
|
|
133
133
|
let stopLoading = () => {
|
|
134
|
-
if (--fetching === 0 &&
|
|
134
|
+
if (--fetching === 0 && isFunction($loading)) {
|
|
135
135
|
$loading(false);
|
|
136
136
|
}
|
|
137
137
|
};
|
|
@@ -148,7 +148,7 @@ export function events(state) {
|
|
|
148
148
|
let endStr = toISOString($_activeRange.end);
|
|
149
149
|
// Loop over event sources
|
|
150
150
|
for (let source of $eventSources) {
|
|
151
|
-
if (
|
|
151
|
+
if (isFunction(source.events)) {
|
|
152
152
|
// Events as a function
|
|
153
153
|
let result = source.events({
|
|
154
154
|
start: toLocalDate($_activeRange.start),
|
|
@@ -162,7 +162,7 @@ export function events(state) {
|
|
|
162
162
|
} else {
|
|
163
163
|
// Events as a JSON feed
|
|
164
164
|
// Prepare params
|
|
165
|
-
let params =
|
|
165
|
+
let params = isFunction(source.extraParams) ? source.extraParams() : assign({}, source.extraParams);
|
|
166
166
|
params.start = startStr;
|
|
167
167
|
params.end = endStr;
|
|
168
168
|
params = new URLSearchParams(params);
|