@event-calendar/core 2.5.0 → 2.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +31 -4
- package/index.css +1 -0
- package/index.js +139 -112
- package/package.json +1 -1
- package/src/Calendar.svelte +9 -4
- package/src/lib/debounce.js +10 -0
- package/src/lib/events.js +80 -73
- package/src/storage/options.js +1 -0
- package/src/storage/state.js +3 -1
- package/src/styles/index.scss +1 -0
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 view:
|
|
6
6
|
|
|
7
|
-
* Lightweight (
|
|
7
|
+
* Lightweight (32kb [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
|
|
|
@@ -27,6 +27,7 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
|
|
|
27
27
|
- [datesAboveResources](#datesaboveresources)
|
|
28
28
|
- [datesSet](#datesset)
|
|
29
29
|
- [dayCellFormat](#daycellformat)
|
|
30
|
+
- [dayHeaderAriaLabelFormat](#dayheaderarialabelformat)
|
|
30
31
|
- [dayHeaderFormat](#dayheaderformat)
|
|
31
32
|
- [dayMaxEvents](#daymaxevents)
|
|
32
33
|
- [dayPopoverFormat](#daypopoverformat)
|
|
@@ -35,6 +36,7 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
|
|
|
35
36
|
- [duration](#duration)
|
|
36
37
|
- [editable](#editable)
|
|
37
38
|
- [events](#events)
|
|
39
|
+
- [eventAllUpdated](#eventallupdated)
|
|
38
40
|
- [eventBackgroundColor](#eventbackgroundcolor)
|
|
39
41
|
- [eventClassNames](#eventclassnames)
|
|
40
42
|
- [eventClick](#eventclick)
|
|
@@ -44,9 +46,9 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
|
|
|
44
46
|
- [eventDragMinDistance](#eventdragmindistance)
|
|
45
47
|
- [eventDragStart](#eventdragstart)
|
|
46
48
|
- [eventDragStop](#eventdragstop)
|
|
47
|
-
- [eventDrop](#eventdrop)
|
|
48
49
|
</td><td>
|
|
49
50
|
|
|
51
|
+
- [eventDrop](#eventdrop)
|
|
50
52
|
- [eventDurationEditable](#eventdurationeditable)
|
|
51
53
|
- [eventLongPressDelay](#eventlongpressdelay)
|
|
52
54
|
- [eventMouseEnter](#eventmouseenter)
|
|
@@ -197,8 +199,8 @@ import '@event-calendar/core/index.css';
|
|
|
197
199
|
### Pre-built browser ready bundle
|
|
198
200
|
Include the following lines of code in the `<head>` section of your page:
|
|
199
201
|
```html
|
|
200
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.
|
|
201
|
-
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.
|
|
202
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.6.0/event-calendar.min.css">
|
|
203
|
+
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.6.0/event-calendar.min.js"></script>
|
|
202
204
|
```
|
|
203
205
|
|
|
204
206
|
<details>
|
|
@@ -602,6 +604,31 @@ Array of plain objects that will be parsed into [Event](#event-object) objects a
|
|
|
602
604
|
|
|
603
605
|
This option is not used if the `eventSources` option is provided.
|
|
604
606
|
|
|
607
|
+
### eventAllUpdated
|
|
608
|
+
- Type `function`
|
|
609
|
+
- Default `undefined`
|
|
610
|
+
|
|
611
|
+
Callback function that is triggered when all events have finished updating.
|
|
612
|
+
|
|
613
|
+
This is an experimental feature and its behavior may change in the future. The function is called at the end of the cycle of rendering all events. The rendering occurs when new events are added, already displayed events are modified, or events are deleted.
|
|
614
|
+
|
|
615
|
+
```js
|
|
616
|
+
function (info) { }
|
|
617
|
+
```
|
|
618
|
+
`info` is an object with the following properties:
|
|
619
|
+
<table>
|
|
620
|
+
<tr>
|
|
621
|
+
<td>
|
|
622
|
+
|
|
623
|
+
`view`
|
|
624
|
+
</td>
|
|
625
|
+
<td>
|
|
626
|
+
|
|
627
|
+
The current [View](#view-object) object
|
|
628
|
+
</td>
|
|
629
|
+
</tr>
|
|
630
|
+
</table>
|
|
631
|
+
|
|
605
632
|
### eventBackgroundColor
|
|
606
633
|
- Type `string`
|
|
607
634
|
- Default `undefined`
|
package/index.css
CHANGED
package/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { run_all, is_function, noop, identity, tick, SvelteComponent, init, safe_not_equal, ensure_array_like, empty, insert, detach, destroy_each, component_subscribe, set_store_value, element, text, attr, append, listen, set_data, action_destroyer, 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';
|
|
2
|
-
import { getContext, setContext, beforeUpdate } from 'svelte';
|
|
2
|
+
import { getContext, setContext, beforeUpdate, afterUpdate } from 'svelte';
|
|
3
3
|
import { derived, get, writable, readable } from 'svelte/store';
|
|
4
4
|
|
|
5
5
|
function keyEnter(fn) {
|
|
@@ -208,6 +208,16 @@ function flushDebounce(queue) {
|
|
|
208
208
|
queue.clear();
|
|
209
209
|
}
|
|
210
210
|
|
|
211
|
+
function task(fn, handle, tasks) {
|
|
212
|
+
handle ??= fn;
|
|
213
|
+
if (!tasks.has(handle)) {
|
|
214
|
+
tasks.set(handle, setTimeout(() => {
|
|
215
|
+
tasks.delete(handle);
|
|
216
|
+
fn();
|
|
217
|
+
}));
|
|
218
|
+
}
|
|
219
|
+
}
|
|
220
|
+
|
|
211
221
|
function assign(...args) {
|
|
212
222
|
return Object.assign(...args);
|
|
213
223
|
}
|
|
@@ -366,6 +376,82 @@ function sortEventChunks(chunks) {
|
|
|
366
376
|
chunks.sort((a, b) => a.start - b.start || b.event.allDay - a.event.allDay);
|
|
367
377
|
}
|
|
368
378
|
|
|
379
|
+
function createEventContent(chunk, displayEventEnd, eventContent, theme, _intlEventTime, _view) {
|
|
380
|
+
let timeText = _intlEventTime.formatRange(
|
|
381
|
+
chunk.start,
|
|
382
|
+
displayEventEnd && chunk.event.display !== 'pointer'
|
|
383
|
+
? copyTime(cloneDate(chunk.start), chunk.end) // make Intl.formatRange output only the time part
|
|
384
|
+
: chunk.start
|
|
385
|
+
);
|
|
386
|
+
let content;
|
|
387
|
+
|
|
388
|
+
if (eventContent) {
|
|
389
|
+
content = is_function(eventContent)
|
|
390
|
+
? eventContent({
|
|
391
|
+
event: toEventWithLocalDates(chunk.event),
|
|
392
|
+
timeText,
|
|
393
|
+
view: toViewWithLocalDates(_view)
|
|
394
|
+
})
|
|
395
|
+
: eventContent;
|
|
396
|
+
} else {
|
|
397
|
+
let domNodes;
|
|
398
|
+
switch (chunk.event.display) {
|
|
399
|
+
case 'background':
|
|
400
|
+
domNodes = [];
|
|
401
|
+
break;
|
|
402
|
+
case 'pointer':
|
|
403
|
+
domNodes = [createTimeElement(timeText, chunk, theme)];
|
|
404
|
+
break;
|
|
405
|
+
default:
|
|
406
|
+
domNodes = [
|
|
407
|
+
...chunk.event.allDay ? [] : [createTimeElement(timeText, chunk, theme)],
|
|
408
|
+
createElement('h4', theme.eventTitle, chunk.event.title)
|
|
409
|
+
];
|
|
410
|
+
}
|
|
411
|
+
content = {domNodes};
|
|
412
|
+
}
|
|
413
|
+
|
|
414
|
+
return [timeText, content];
|
|
415
|
+
}
|
|
416
|
+
|
|
417
|
+
function createTimeElement(timeText, chunk, theme) {
|
|
418
|
+
return createElement(
|
|
419
|
+
'time',
|
|
420
|
+
theme.eventTime,
|
|
421
|
+
timeText,
|
|
422
|
+
[['datetime', toISOString(chunk.start)]]
|
|
423
|
+
);
|
|
424
|
+
}
|
|
425
|
+
|
|
426
|
+
function createEventClasses(eventClassNames, event, _view) {
|
|
427
|
+
if (eventClassNames) {
|
|
428
|
+
if (is_function(eventClassNames)) {
|
|
429
|
+
eventClassNames = eventClassNames({
|
|
430
|
+
event: toEventWithLocalDates(event),
|
|
431
|
+
view: toViewWithLocalDates(_view)
|
|
432
|
+
});
|
|
433
|
+
}
|
|
434
|
+
return Array.isArray(eventClassNames) ? eventClassNames : [eventClassNames];
|
|
435
|
+
}
|
|
436
|
+
return [];
|
|
437
|
+
}
|
|
438
|
+
|
|
439
|
+
function toEventWithLocalDates(event) {
|
|
440
|
+
return _cloneEvent(event, toLocalDate);
|
|
441
|
+
}
|
|
442
|
+
|
|
443
|
+
function cloneEvent(event) {
|
|
444
|
+
return _cloneEvent(event, cloneDate);
|
|
445
|
+
}
|
|
446
|
+
|
|
447
|
+
function _cloneEvent(event, dateFn) {
|
|
448
|
+
event = assign({}, event);
|
|
449
|
+
event.start = dateFn(event.start);
|
|
450
|
+
event.end = dateFn(event.end);
|
|
451
|
+
|
|
452
|
+
return event;
|
|
453
|
+
}
|
|
454
|
+
|
|
369
455
|
/**
|
|
370
456
|
* Prepare event chunks for month view and all-day slot in week view
|
|
371
457
|
*/
|
|
@@ -448,80 +534,11 @@ function repositionEvent(chunk, longChunks, height) {
|
|
|
448
534
|
return margin;
|
|
449
535
|
}
|
|
450
536
|
|
|
451
|
-
function
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
? copyTime(cloneDate(chunk.start), chunk.end) // make Intl.formatRange output only the time part
|
|
456
|
-
: chunk.start
|
|
457
|
-
);
|
|
458
|
-
let content;
|
|
459
|
-
|
|
460
|
-
if (eventContent) {
|
|
461
|
-
content = is_function(eventContent)
|
|
462
|
-
? eventContent({
|
|
463
|
-
event: toEventWithLocalDates(chunk.event),
|
|
464
|
-
timeText,
|
|
465
|
-
view: toViewWithLocalDates(_view)
|
|
466
|
-
})
|
|
467
|
-
: eventContent;
|
|
468
|
-
} else {
|
|
469
|
-
let domNodes;
|
|
470
|
-
switch (chunk.event.display) {
|
|
471
|
-
case 'background':
|
|
472
|
-
domNodes = [];
|
|
473
|
-
break;
|
|
474
|
-
case 'pointer':
|
|
475
|
-
domNodes = [createTimeElement(timeText, chunk, theme)];
|
|
476
|
-
break;
|
|
477
|
-
default:
|
|
478
|
-
domNodes = [
|
|
479
|
-
...chunk.event.allDay ? [] : [createTimeElement(timeText, chunk, theme)],
|
|
480
|
-
createElement('h4', theme.eventTitle, chunk.event.title)
|
|
481
|
-
];
|
|
482
|
-
}
|
|
483
|
-
content = {domNodes};
|
|
484
|
-
}
|
|
485
|
-
|
|
486
|
-
return [timeText, content];
|
|
487
|
-
}
|
|
488
|
-
|
|
489
|
-
function createTimeElement(timeText, chunk, theme) {
|
|
490
|
-
return createElement(
|
|
491
|
-
'time',
|
|
492
|
-
theme.eventTime,
|
|
493
|
-
timeText,
|
|
494
|
-
[['datetime', toISOString(chunk.start)]]
|
|
495
|
-
);
|
|
496
|
-
}
|
|
497
|
-
|
|
498
|
-
function createEventClasses(eventClassNames, event, _view) {
|
|
499
|
-
if (eventClassNames) {
|
|
500
|
-
if (is_function(eventClassNames)) {
|
|
501
|
-
eventClassNames = eventClassNames({
|
|
502
|
-
event: toEventWithLocalDates(event),
|
|
503
|
-
view: toViewWithLocalDates(_view)
|
|
504
|
-
});
|
|
505
|
-
}
|
|
506
|
-
return Array.isArray(eventClassNames) ? eventClassNames : [eventClassNames];
|
|
537
|
+
function runReposition(refs, data) {
|
|
538
|
+
refs.length = data.length;
|
|
539
|
+
for (let ref of refs) {
|
|
540
|
+
ref?.reposition?.();
|
|
507
541
|
}
|
|
508
|
-
return [];
|
|
509
|
-
}
|
|
510
|
-
|
|
511
|
-
function toEventWithLocalDates(event) {
|
|
512
|
-
return _cloneEvent(event, toLocalDate);
|
|
513
|
-
}
|
|
514
|
-
|
|
515
|
-
function cloneEvent(event) {
|
|
516
|
-
return _cloneEvent(event, cloneDate);
|
|
517
|
-
}
|
|
518
|
-
|
|
519
|
-
function _cloneEvent(event, dateFn) {
|
|
520
|
-
event = assign({}, event);
|
|
521
|
-
event.start = dateFn(event.start);
|
|
522
|
-
event.end = dateFn(event.end);
|
|
523
|
-
|
|
524
|
-
return event;
|
|
525
542
|
}
|
|
526
543
|
|
|
527
544
|
/**
|
|
@@ -631,6 +648,7 @@ function createOptions(plugins) {
|
|
|
631
648
|
displayEventEnd: true,
|
|
632
649
|
duration: {weeks: 1},
|
|
633
650
|
events: [],
|
|
651
|
+
eventAllUpdated: undefined,
|
|
634
652
|
eventBackgroundColor: undefined,
|
|
635
653
|
eventTextColor: undefined,
|
|
636
654
|
eventClassNames: undefined,
|
|
@@ -966,7 +984,9 @@ class State {
|
|
|
966
984
|
}
|
|
967
985
|
|
|
968
986
|
// Private stores
|
|
969
|
-
this._queue = writable(new Map()); // debounce queue
|
|
987
|
+
this._queue = writable(new Map()); // debounce queue (beforeUpdate)
|
|
988
|
+
this._queue2 = writable(new Map()); // debounce queue (afterUpdate)
|
|
989
|
+
this._tasks = new Map(); // timeout IDs for tasks
|
|
970
990
|
this._auxiliary = writable([]); // auxiliary components
|
|
971
991
|
this._dayGrid = dayGrid(this);
|
|
972
992
|
this._currentRange = currentRange(this);
|
|
@@ -2213,7 +2233,7 @@ function create_fragment(ctx) {
|
|
|
2213
2233
|
current = true;
|
|
2214
2234
|
|
|
2215
2235
|
if (!mounted) {
|
|
2216
|
-
dispose = listen(window, "resize", /*recheckScrollable*/ ctx[
|
|
2236
|
+
dispose = listen(window, "resize", /*recheckScrollable*/ ctx[17]);
|
|
2217
2237
|
mounted = true;
|
|
2218
2238
|
}
|
|
2219
2239
|
},
|
|
@@ -2287,6 +2307,7 @@ function create_fragment(ctx) {
|
|
|
2287
2307
|
function instance($$self, $$props, $$invalidate) {
|
|
2288
2308
|
let $_bodyEl;
|
|
2289
2309
|
let $_scrollable;
|
|
2310
|
+
let $_queue2;
|
|
2290
2311
|
let $_queue;
|
|
2291
2312
|
let $_interaction;
|
|
2292
2313
|
let $_events;
|
|
@@ -2300,13 +2321,14 @@ function instance($$self, $$props, $$invalidate) {
|
|
|
2300
2321
|
let component = get_current_component();
|
|
2301
2322
|
let state = new State(plugins, options);
|
|
2302
2323
|
setContext('state', state);
|
|
2303
|
-
let { _viewComponent, _bodyEl, _interaction, _iClass, _events, _queue, _scrollable, height, theme, view } = state;
|
|
2324
|
+
let { _viewComponent, _bodyEl, _interaction, _iClass, _events, _queue, _queue2, _tasks, _scrollable, height, theme, view } = state;
|
|
2304
2325
|
component_subscribe($$self, _viewComponent, value => $$invalidate(5, $_viewComponent = value));
|
|
2305
|
-
component_subscribe($$self, _bodyEl, value => $$invalidate(
|
|
2306
|
-
component_subscribe($$self, _interaction, value => $$invalidate(
|
|
2326
|
+
component_subscribe($$self, _bodyEl, value => $$invalidate(32, $_bodyEl = value));
|
|
2327
|
+
component_subscribe($$self, _interaction, value => $$invalidate(35, $_interaction = value));
|
|
2307
2328
|
component_subscribe($$self, _iClass, value => $$invalidate(2, $_iClass = value));
|
|
2308
|
-
component_subscribe($$self, _events, value => $$invalidate(
|
|
2309
|
-
component_subscribe($$self, _queue, value => $$invalidate(
|
|
2329
|
+
component_subscribe($$self, _events, value => $$invalidate(36, $_events = value));
|
|
2330
|
+
component_subscribe($$self, _queue, value => $$invalidate(34, $_queue = value));
|
|
2331
|
+
component_subscribe($$self, _queue2, value => $$invalidate(33, $_queue2 = value));
|
|
2310
2332
|
component_subscribe($$self, _scrollable, value => $$invalidate(0, $_scrollable = value));
|
|
2311
2333
|
component_subscribe($$self, height, value => $$invalidate(3, $height = value));
|
|
2312
2334
|
component_subscribe($$self, theme, value => $$invalidate(1, $theme = value));
|
|
@@ -2396,7 +2418,11 @@ function instance($$self, $$props, $$invalidate) {
|
|
|
2396
2418
|
|
|
2397
2419
|
beforeUpdate(() => {
|
|
2398
2420
|
flushDebounce($_queue);
|
|
2399
|
-
|
|
2421
|
+
});
|
|
2422
|
+
|
|
2423
|
+
afterUpdate(() => {
|
|
2424
|
+
flushDebounce($_queue2);
|
|
2425
|
+
task(recheckScrollable, null, _tasks);
|
|
2400
2426
|
});
|
|
2401
2427
|
|
|
2402
2428
|
function recheckScrollable() {
|
|
@@ -2406,12 +2432,12 @@ function instance($$self, $$props, $$invalidate) {
|
|
|
2406
2432
|
}
|
|
2407
2433
|
|
|
2408
2434
|
$$self.$$set = $$props => {
|
|
2409
|
-
if ('plugins' in $$props) $$invalidate(
|
|
2410
|
-
if ('options' in $$props) $$invalidate(
|
|
2435
|
+
if ('plugins' in $$props) $$invalidate(18, plugins = $$props.plugins);
|
|
2436
|
+
if ('options' in $$props) $$invalidate(19, options = $$props.options);
|
|
2411
2437
|
};
|
|
2412
2438
|
|
|
2413
2439
|
$$self.$$.update = () => {
|
|
2414
|
-
if ($$self.$$.dirty[0] & /*options*/
|
|
2440
|
+
if ($$self.$$.dirty[0] & /*options*/ 524288) {
|
|
2415
2441
|
for (let [name, value] of diff(options, prevOptions)) {
|
|
2416
2442
|
setOption(name, value);
|
|
2417
2443
|
}
|
|
@@ -2431,6 +2457,7 @@ function instance($$self, $$props, $$invalidate) {
|
|
|
2431
2457
|
_iClass,
|
|
2432
2458
|
_events,
|
|
2433
2459
|
_queue,
|
|
2460
|
+
_queue2,
|
|
2434
2461
|
_scrollable,
|
|
2435
2462
|
height,
|
|
2436
2463
|
theme,
|
|
@@ -2464,20 +2491,20 @@ class Calendar extends SvelteComponent {
|
|
|
2464
2491
|
create_fragment,
|
|
2465
2492
|
safe_not_equal,
|
|
2466
2493
|
{
|
|
2467
|
-
plugins:
|
|
2468
|
-
options:
|
|
2469
|
-
setOption:
|
|
2470
|
-
getOption:
|
|
2471
|
-
refetchEvents:
|
|
2472
|
-
getEvents:
|
|
2473
|
-
getEventById:
|
|
2474
|
-
addEvent:
|
|
2475
|
-
updateEvent:
|
|
2476
|
-
removeEventById:
|
|
2477
|
-
getView:
|
|
2478
|
-
unselect:
|
|
2479
|
-
dateFromPoint:
|
|
2480
|
-
destroy:
|
|
2494
|
+
plugins: 18,
|
|
2495
|
+
options: 19,
|
|
2496
|
+
setOption: 20,
|
|
2497
|
+
getOption: 21,
|
|
2498
|
+
refetchEvents: 22,
|
|
2499
|
+
getEvents: 23,
|
|
2500
|
+
getEventById: 24,
|
|
2501
|
+
addEvent: 25,
|
|
2502
|
+
updateEvent: 26,
|
|
2503
|
+
removeEventById: 27,
|
|
2504
|
+
getView: 28,
|
|
2505
|
+
unselect: 29,
|
|
2506
|
+
dateFromPoint: 30,
|
|
2507
|
+
destroy: 31
|
|
2481
2508
|
},
|
|
2482
2509
|
null,
|
|
2483
2510
|
[-1, -1]
|
|
@@ -2485,52 +2512,52 @@ class Calendar extends SvelteComponent {
|
|
|
2485
2512
|
}
|
|
2486
2513
|
|
|
2487
2514
|
get setOption() {
|
|
2488
|
-
return this.$$.ctx[
|
|
2515
|
+
return this.$$.ctx[20];
|
|
2489
2516
|
}
|
|
2490
2517
|
|
|
2491
2518
|
get getOption() {
|
|
2492
|
-
return this.$$.ctx[
|
|
2519
|
+
return this.$$.ctx[21];
|
|
2493
2520
|
}
|
|
2494
2521
|
|
|
2495
2522
|
get refetchEvents() {
|
|
2496
|
-
return this.$$.ctx[
|
|
2523
|
+
return this.$$.ctx[22];
|
|
2497
2524
|
}
|
|
2498
2525
|
|
|
2499
2526
|
get getEvents() {
|
|
2500
|
-
return this.$$.ctx[
|
|
2527
|
+
return this.$$.ctx[23];
|
|
2501
2528
|
}
|
|
2502
2529
|
|
|
2503
2530
|
get getEventById() {
|
|
2504
|
-
return this.$$.ctx[
|
|
2531
|
+
return this.$$.ctx[24];
|
|
2505
2532
|
}
|
|
2506
2533
|
|
|
2507
2534
|
get addEvent() {
|
|
2508
|
-
return this.$$.ctx[
|
|
2535
|
+
return this.$$.ctx[25];
|
|
2509
2536
|
}
|
|
2510
2537
|
|
|
2511
2538
|
get updateEvent() {
|
|
2512
|
-
return this.$$.ctx[
|
|
2539
|
+
return this.$$.ctx[26];
|
|
2513
2540
|
}
|
|
2514
2541
|
|
|
2515
2542
|
get removeEventById() {
|
|
2516
|
-
return this.$$.ctx[
|
|
2543
|
+
return this.$$.ctx[27];
|
|
2517
2544
|
}
|
|
2518
2545
|
|
|
2519
2546
|
get getView() {
|
|
2520
|
-
return this.$$.ctx[
|
|
2547
|
+
return this.$$.ctx[28];
|
|
2521
2548
|
}
|
|
2522
2549
|
|
|
2523
2550
|
get unselect() {
|
|
2524
|
-
return this.$$.ctx[
|
|
2551
|
+
return this.$$.ctx[29];
|
|
2525
2552
|
}
|
|
2526
2553
|
|
|
2527
2554
|
get dateFromPoint() {
|
|
2528
|
-
return this.$$.ctx[
|
|
2555
|
+
return this.$$.ctx[30];
|
|
2529
2556
|
}
|
|
2530
2557
|
|
|
2531
2558
|
get destroy() {
|
|
2532
|
-
return this.$$.ctx[
|
|
2559
|
+
return this.$$.ctx[31];
|
|
2533
2560
|
}
|
|
2534
2561
|
}
|
|
2535
2562
|
|
|
2536
|
-
export { DAY_IN_SECONDS, addDay, addDuration, ancestor, assign, bgEvent, btnTextDay, btnTextMonth, btnTextWeek, btnTextYear, cloneDate, cloneEvent, copyTime, createDate, createDuration, createElement, createEventChunk, createEventClasses, createEventContent, createEventSources, createEvents, createView, datesEqual, debounce, Calendar as default, eventIntersects, floor, flushDebounce, getElementWithPayload, getPayload, ghostEvent, hasPayload, hasYScroll, height, helperEvent, intl, intlRange, keyEnter, keys, listView, max, min, nextClosestDay, noTimePart, outsideEvent, pointerEvent, prepareEventChunks, prevClosestDay, previewEvent, rect, repositionEvent, setContent, setMidnight, setPayload, sortEventChunks, subtractDay, subtractDuration, symbol, themeView, toEventWithLocalDates, toISOString, toLocalDate, toViewWithLocalDates };
|
|
2563
|
+
export { DAY_IN_SECONDS, addDay, addDuration, ancestor, assign, bgEvent, btnTextDay, btnTextMonth, btnTextWeek, btnTextYear, cloneDate, cloneEvent, copyTime, createDate, createDuration, createElement, createEventChunk, createEventClasses, createEventContent, createEventSources, createEvents, createView, datesEqual, debounce, Calendar as default, eventIntersects, floor, flushDebounce, getElementWithPayload, getPayload, ghostEvent, hasPayload, hasYScroll, height, helperEvent, intl, intlRange, keyEnter, keys, listView, max, min, nextClosestDay, noTimePart, outsideEvent, pointerEvent, prepareEventChunks, prevClosestDay, previewEvent, rect, repositionEvent, runReposition, setContent, setMidnight, setPayload, sortEventChunks, subtractDay, subtractDuration, symbol, task, themeView, toEventWithLocalDates, toISOString, toLocalDate, toViewWithLocalDates };
|
package/package.json
CHANGED
package/src/Calendar.svelte
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<script>
|
|
2
2
|
import '../index.css';
|
|
3
|
-
import {setContext, beforeUpdate} from 'svelte';
|
|
3
|
+
import {setContext, beforeUpdate, afterUpdate} from 'svelte';
|
|
4
4
|
import {destroy_component, get_current_component} from 'svelte/internal';
|
|
5
5
|
import {get} from 'svelte/store';
|
|
6
6
|
import {diff} from './storage/options';
|
|
@@ -17,7 +17,8 @@
|
|
|
17
17
|
getPayload,
|
|
18
18
|
flushDebounce,
|
|
19
19
|
hasYScroll,
|
|
20
|
-
listView
|
|
20
|
+
listView,
|
|
21
|
+
task
|
|
21
22
|
} from './lib.js';
|
|
22
23
|
|
|
23
24
|
export let plugins = [];
|
|
@@ -28,7 +29,7 @@
|
|
|
28
29
|
let state = new State(plugins, options);
|
|
29
30
|
setContext('state', state);
|
|
30
31
|
|
|
31
|
-
let {_viewComponent, _bodyEl, _interaction, _iClass, _events, _queue, _scrollable, height, theme, view} = state;
|
|
32
|
+
let {_viewComponent, _bodyEl, _interaction, _iClass, _events, _queue, _queue2, _tasks, _scrollable, height, theme, view} = state;
|
|
32
33
|
|
|
33
34
|
// Reactively update options that did change
|
|
34
35
|
let prevOptions = {...options};
|
|
@@ -112,7 +113,11 @@
|
|
|
112
113
|
|
|
113
114
|
beforeUpdate(() => {
|
|
114
115
|
flushDebounce($_queue);
|
|
115
|
-
|
|
116
|
+
});
|
|
117
|
+
|
|
118
|
+
afterUpdate(() => {
|
|
119
|
+
flushDebounce($_queue2);
|
|
120
|
+
task(recheckScrollable, null, _tasks);
|
|
116
121
|
});
|
|
117
122
|
|
|
118
123
|
function recheckScrollable() {
|
package/src/lib/debounce.js
CHANGED
|
@@ -8,3 +8,13 @@ export function flushDebounce(queue) {
|
|
|
8
8
|
run_all(queue);
|
|
9
9
|
queue.clear();
|
|
10
10
|
}
|
|
11
|
+
|
|
12
|
+
export function task(fn, handle, tasks) {
|
|
13
|
+
handle ??= fn;
|
|
14
|
+
if (!tasks.has(handle)) {
|
|
15
|
+
tasks.set(handle, setTimeout(() => {
|
|
16
|
+
tasks.delete(handle);
|
|
17
|
+
fn();
|
|
18
|
+
}));
|
|
19
|
+
}
|
|
20
|
+
}
|
package/src/lib/events.js
CHANGED
|
@@ -48,6 +48,82 @@ export function sortEventChunks(chunks) {
|
|
|
48
48
|
chunks.sort((a, b) => a.start - b.start || b.event.allDay - a.event.allDay);
|
|
49
49
|
}
|
|
50
50
|
|
|
51
|
+
export function createEventContent(chunk, displayEventEnd, eventContent, theme, _intlEventTime, _view) {
|
|
52
|
+
let timeText = _intlEventTime.formatRange(
|
|
53
|
+
chunk.start,
|
|
54
|
+
displayEventEnd && chunk.event.display !== 'pointer'
|
|
55
|
+
? copyTime(cloneDate(chunk.start), chunk.end) // make Intl.formatRange output only the time part
|
|
56
|
+
: chunk.start
|
|
57
|
+
);
|
|
58
|
+
let content;
|
|
59
|
+
|
|
60
|
+
if (eventContent) {
|
|
61
|
+
content = is_function(eventContent)
|
|
62
|
+
? eventContent({
|
|
63
|
+
event: toEventWithLocalDates(chunk.event),
|
|
64
|
+
timeText,
|
|
65
|
+
view: toViewWithLocalDates(_view)
|
|
66
|
+
})
|
|
67
|
+
: eventContent;
|
|
68
|
+
} else {
|
|
69
|
+
let domNodes;
|
|
70
|
+
switch (chunk.event.display) {
|
|
71
|
+
case 'background':
|
|
72
|
+
domNodes = [];
|
|
73
|
+
break;
|
|
74
|
+
case 'pointer':
|
|
75
|
+
domNodes = [createTimeElement(timeText, chunk, theme)];
|
|
76
|
+
break;
|
|
77
|
+
default:
|
|
78
|
+
domNodes = [
|
|
79
|
+
...chunk.event.allDay ? [] : [createTimeElement(timeText, chunk, theme)],
|
|
80
|
+
createElement('h4', theme.eventTitle, chunk.event.title)
|
|
81
|
+
];
|
|
82
|
+
}
|
|
83
|
+
content = {domNodes};
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
return [timeText, content];
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
function createTimeElement(timeText, chunk, theme) {
|
|
90
|
+
return createElement(
|
|
91
|
+
'time',
|
|
92
|
+
theme.eventTime,
|
|
93
|
+
timeText,
|
|
94
|
+
[['datetime', toISOString(chunk.start)]]
|
|
95
|
+
);
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
export function createEventClasses(eventClassNames, event, _view) {
|
|
99
|
+
if (eventClassNames) {
|
|
100
|
+
if (is_function(eventClassNames)) {
|
|
101
|
+
eventClassNames = eventClassNames({
|
|
102
|
+
event: toEventWithLocalDates(event),
|
|
103
|
+
view: toViewWithLocalDates(_view)
|
|
104
|
+
});
|
|
105
|
+
}
|
|
106
|
+
return Array.isArray(eventClassNames) ? eventClassNames : [eventClassNames];
|
|
107
|
+
}
|
|
108
|
+
return [];
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
export function toEventWithLocalDates(event) {
|
|
112
|
+
return _cloneEvent(event, toLocalDate);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
export function cloneEvent(event) {
|
|
116
|
+
return _cloneEvent(event, cloneDate);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
function _cloneEvent(event, dateFn) {
|
|
120
|
+
event = assign({}, event);
|
|
121
|
+
event.start = dateFn(event.start);
|
|
122
|
+
event.end = dateFn(event.end);
|
|
123
|
+
|
|
124
|
+
return event;
|
|
125
|
+
}
|
|
126
|
+
|
|
51
127
|
/**
|
|
52
128
|
* Prepare event chunks for month view and all-day slot in week view
|
|
53
129
|
*/
|
|
@@ -130,80 +206,11 @@ export function repositionEvent(chunk, longChunks, height) {
|
|
|
130
206
|
return margin;
|
|
131
207
|
}
|
|
132
208
|
|
|
133
|
-
export function
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
? copyTime(cloneDate(chunk.start), chunk.end) // make Intl.formatRange output only the time part
|
|
138
|
-
: chunk.start
|
|
139
|
-
);
|
|
140
|
-
let content;
|
|
141
|
-
|
|
142
|
-
if (eventContent) {
|
|
143
|
-
content = is_function(eventContent)
|
|
144
|
-
? eventContent({
|
|
145
|
-
event: toEventWithLocalDates(chunk.event),
|
|
146
|
-
timeText,
|
|
147
|
-
view: toViewWithLocalDates(_view)
|
|
148
|
-
})
|
|
149
|
-
: eventContent;
|
|
150
|
-
} else {
|
|
151
|
-
let domNodes;
|
|
152
|
-
switch (chunk.event.display) {
|
|
153
|
-
case 'background':
|
|
154
|
-
domNodes = [];
|
|
155
|
-
break;
|
|
156
|
-
case 'pointer':
|
|
157
|
-
domNodes = [createTimeElement(timeText, chunk, theme)];
|
|
158
|
-
break;
|
|
159
|
-
default:
|
|
160
|
-
domNodes = [
|
|
161
|
-
...chunk.event.allDay ? [] : [createTimeElement(timeText, chunk, theme)],
|
|
162
|
-
createElement('h4', theme.eventTitle, chunk.event.title)
|
|
163
|
-
];
|
|
164
|
-
}
|
|
165
|
-
content = {domNodes};
|
|
166
|
-
}
|
|
167
|
-
|
|
168
|
-
return [timeText, content];
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
function createTimeElement(timeText, chunk, theme) {
|
|
172
|
-
return createElement(
|
|
173
|
-
'time',
|
|
174
|
-
theme.eventTime,
|
|
175
|
-
timeText,
|
|
176
|
-
[['datetime', toISOString(chunk.start)]]
|
|
177
|
-
);
|
|
178
|
-
}
|
|
179
|
-
|
|
180
|
-
export function createEventClasses(eventClassNames, event, _view) {
|
|
181
|
-
if (eventClassNames) {
|
|
182
|
-
if (is_function(eventClassNames)) {
|
|
183
|
-
eventClassNames = eventClassNames({
|
|
184
|
-
event: toEventWithLocalDates(event),
|
|
185
|
-
view: toViewWithLocalDates(_view)
|
|
186
|
-
});
|
|
187
|
-
}
|
|
188
|
-
return Array.isArray(eventClassNames) ? eventClassNames : [eventClassNames];
|
|
209
|
+
export function runReposition(refs, data) {
|
|
210
|
+
refs.length = data.length;
|
|
211
|
+
for (let ref of refs) {
|
|
212
|
+
ref?.reposition?.();
|
|
189
213
|
}
|
|
190
|
-
return [];
|
|
191
|
-
}
|
|
192
|
-
|
|
193
|
-
export function toEventWithLocalDates(event) {
|
|
194
|
-
return _cloneEvent(event, toLocalDate);
|
|
195
|
-
}
|
|
196
|
-
|
|
197
|
-
export function cloneEvent(event) {
|
|
198
|
-
return _cloneEvent(event, cloneDate);
|
|
199
|
-
}
|
|
200
|
-
|
|
201
|
-
function _cloneEvent(event, dateFn) {
|
|
202
|
-
event = assign({}, event);
|
|
203
|
-
event.start = dateFn(event.start);
|
|
204
|
-
event.end = dateFn(event.end);
|
|
205
|
-
|
|
206
|
-
return event;
|
|
207
214
|
}
|
|
208
215
|
|
|
209
216
|
/**
|
package/src/storage/options.js
CHANGED
package/src/storage/state.js
CHANGED
|
@@ -32,7 +32,9 @@ export default class {
|
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
// Private stores
|
|
35
|
-
this._queue = writable(new Map()); // debounce queue
|
|
35
|
+
this._queue = writable(new Map()); // debounce queue (beforeUpdate)
|
|
36
|
+
this._queue2 = writable(new Map()); // debounce queue (afterUpdate)
|
|
37
|
+
this._tasks = new Map(); // timeout IDs for tasks
|
|
36
38
|
this._auxiliary = writable([]); // auxiliary components
|
|
37
39
|
this._dayGrid = dayGrid(this);
|
|
38
40
|
this._currentRange = currentRange(this);
|