@event-calendar/core 1.3.1 → 1.4.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 +3 -3
- package/index.css +0 -3
- package/index.js +15 -16
- package/package.json +1 -1
- package/src/index.scss +0 -4
- package/src/lib/dom.js +9 -2
- package/src/lib/events.js +4 -12
- package/src/storage/state.js +1 -1
- package/src/storage/stores.js +1 -1
package/README.md
CHANGED
|
@@ -6,7 +6,7 @@ Full-sized drag & drop JavaScript event calendar with resource view:
|
|
|
6
6
|
|
|
7
7
|
* Lightweight (28kb [br](https://en.wikipedia.org/wiki/Brotli) compressed)
|
|
8
8
|
* Zero-dependency (pre-built bundle)
|
|
9
|
-
* Used on over
|
|
9
|
+
* Used on over 70,000 websites with [Bookly](https://wordpress.org/plugins/bookly-responsive-appointment-booking-tool/)
|
|
10
10
|
|
|
11
11
|
Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options.
|
|
12
12
|
|
|
@@ -193,8 +193,8 @@ import '@event-calendar/core/index.css';
|
|
|
193
193
|
### Pre-built browser ready bundle
|
|
194
194
|
Include the following lines of code in the `<head>` section of your page:
|
|
195
195
|
```html
|
|
196
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@1.
|
|
197
|
-
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@1.
|
|
196
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@1.4.1/event-calendar.min.css">
|
|
197
|
+
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@1.4.1/event-calendar.min.js"></script>
|
|
198
198
|
```
|
|
199
199
|
|
|
200
200
|
<details>
|
package/index.css
CHANGED
package/index.js
CHANGED
|
@@ -340,11 +340,18 @@ function getPayload(el) {
|
|
|
340
340
|
return el[payloadProp];
|
|
341
341
|
}
|
|
342
342
|
|
|
343
|
-
function getElementWithPayload(x, y) {
|
|
344
|
-
for (let el of
|
|
343
|
+
function getElementWithPayload(x, y, root = document) {
|
|
344
|
+
for (let el of root.elementsFromPoint(x, y)) {
|
|
345
345
|
if (hasPayload(el)) {
|
|
346
346
|
return el;
|
|
347
347
|
}
|
|
348
|
+
/** @see https://github.com/vkurko/calendar/issues/142 */
|
|
349
|
+
if (el.shadowRoot) {
|
|
350
|
+
let shadowEl = getElementWithPayload(x, y, el.shadowRoot);
|
|
351
|
+
if (shadowEl) {
|
|
352
|
+
return shadowEl;
|
|
353
|
+
}
|
|
354
|
+
}
|
|
348
355
|
}
|
|
349
356
|
return null;
|
|
350
357
|
}
|
|
@@ -411,16 +418,8 @@ function createEventChunk(event, start, end) {
|
|
|
411
418
|
}
|
|
412
419
|
|
|
413
420
|
function sortEventChunks(chunks) {
|
|
414
|
-
// Sort by start date
|
|
415
|
-
chunks.sort((a, b) =>
|
|
416
|
-
if (a.start < b.start) {
|
|
417
|
-
return -1;
|
|
418
|
-
}
|
|
419
|
-
if (a.start > b.start) {
|
|
420
|
-
return 1;
|
|
421
|
-
}
|
|
422
|
-
return 0;
|
|
423
|
-
});
|
|
421
|
+
// Sort by start date (all-day events always on top)
|
|
422
|
+
chunks.sort((a, b) => a.start - b.start || b.event.allDay - a.event.allDay);
|
|
424
423
|
}
|
|
425
424
|
|
|
426
425
|
/**
|
|
@@ -487,7 +486,7 @@ function repositionEvent(chunk, longChunks, height) {
|
|
|
487
486
|
chunk.bottom = chunk.top + height;
|
|
488
487
|
let margin = 1;
|
|
489
488
|
let key = chunk.date.getTime();
|
|
490
|
-
if (longChunks[key]) {
|
|
489
|
+
if (longChunks[key]?.sorted || longChunks[key]?.chunks.every(chunk => 'top' in chunk)) {
|
|
491
490
|
if (!longChunks[key].sorted) {
|
|
492
491
|
longChunks[key].chunks.sort((a, b) => a.top - b.top);
|
|
493
492
|
longChunks[key].sorted = true;
|
|
@@ -531,7 +530,7 @@ function createEventContent(chunk, displayEventEnd, eventContent, theme, _intlEv
|
|
|
531
530
|
default:
|
|
532
531
|
content = {
|
|
533
532
|
domNodes: [
|
|
534
|
-
createElement('div', theme.eventTime, null, timeText),
|
|
533
|
+
...chunk.event.allDay ? [] : [createElement('div', theme.eventTime, null, timeText)],
|
|
535
534
|
createElement('div', theme.eventTitle, chunk.event.titleHTML, chunk.event.title)
|
|
536
535
|
]
|
|
537
536
|
};
|
|
@@ -794,7 +793,7 @@ function diff(options) {
|
|
|
794
793
|
}
|
|
795
794
|
|
|
796
795
|
function monthMode(state) {
|
|
797
|
-
return derived(state.
|
|
796
|
+
return derived(state.view, $view => $view.startsWith?.('dayGrid'));
|
|
798
797
|
}
|
|
799
798
|
|
|
800
799
|
function activeRange(state) {
|
|
@@ -998,7 +997,6 @@ class State {
|
|
|
998
997
|
// Private stores
|
|
999
998
|
this._queue = writable(new Map()); // debounce queue
|
|
1000
999
|
this._auxiliary = writable([]); // auxiliary components
|
|
1001
|
-
this._viewClass = writable(undefined);
|
|
1002
1000
|
this._monthMode = monthMode(this);
|
|
1003
1001
|
this._currentRange = currentRange(this);
|
|
1004
1002
|
this._activeRange = activeRange(this);
|
|
@@ -1015,6 +1013,7 @@ class State {
|
|
|
1015
1013
|
this._viewTitle = viewTitle(this);
|
|
1016
1014
|
this._viewDates = viewDates(this);
|
|
1017
1015
|
this._view = view(this);
|
|
1016
|
+
this._viewClass = writable(undefined);
|
|
1018
1017
|
this._viewComponent = writable(undefined);
|
|
1019
1018
|
// Resources
|
|
1020
1019
|
this._resBgColor = writable(noop);
|
package/package.json
CHANGED
package/src/index.scss
CHANGED
package/src/lib/dom.js
CHANGED
|
@@ -43,11 +43,18 @@ export function getPayload(el) {
|
|
|
43
43
|
return el[payloadProp];
|
|
44
44
|
}
|
|
45
45
|
|
|
46
|
-
export function getElementWithPayload(x, y) {
|
|
47
|
-
for (let el of
|
|
46
|
+
export function getElementWithPayload(x, y, root = document) {
|
|
47
|
+
for (let el of root.elementsFromPoint(x, y)) {
|
|
48
48
|
if (hasPayload(el)) {
|
|
49
49
|
return el;
|
|
50
50
|
}
|
|
51
|
+
/** @see https://github.com/vkurko/calendar/issues/142 */
|
|
52
|
+
if (el.shadowRoot) {
|
|
53
|
+
let shadowEl = getElementWithPayload(x, y, el.shadowRoot);
|
|
54
|
+
if (shadowEl) {
|
|
55
|
+
return shadowEl;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
51
58
|
}
|
|
52
59
|
return null;
|
|
53
60
|
}
|
package/src/lib/events.js
CHANGED
|
@@ -44,16 +44,8 @@ export function createEventChunk(event, start, end) {
|
|
|
44
44
|
}
|
|
45
45
|
|
|
46
46
|
export function sortEventChunks(chunks) {
|
|
47
|
-
// Sort by start date
|
|
48
|
-
chunks.sort((a, b) =>
|
|
49
|
-
if (a.start < b.start) {
|
|
50
|
-
return -1;
|
|
51
|
-
}
|
|
52
|
-
if (a.start > b.start) {
|
|
53
|
-
return 1;
|
|
54
|
-
}
|
|
55
|
-
return 0;
|
|
56
|
-
});
|
|
47
|
+
// Sort by start date (all-day events always on top)
|
|
48
|
+
chunks.sort((a, b) => a.start - b.start || b.event.allDay - a.event.allDay);
|
|
57
49
|
}
|
|
58
50
|
|
|
59
51
|
/**
|
|
@@ -120,7 +112,7 @@ export function repositionEvent(chunk, longChunks, height) {
|
|
|
120
112
|
chunk.bottom = chunk.top + height;
|
|
121
113
|
let margin = 1;
|
|
122
114
|
let key = chunk.date.getTime();
|
|
123
|
-
if (longChunks[key]) {
|
|
115
|
+
if (longChunks[key]?.sorted || longChunks[key]?.chunks.every(chunk => 'top' in chunk)) {
|
|
124
116
|
if (!longChunks[key].sorted) {
|
|
125
117
|
longChunks[key].chunks.sort((a, b) => a.top - b.top);
|
|
126
118
|
longChunks[key].sorted = true;
|
|
@@ -164,7 +156,7 @@ export function createEventContent(chunk, displayEventEnd, eventContent, theme,
|
|
|
164
156
|
default:
|
|
165
157
|
content = {
|
|
166
158
|
domNodes: [
|
|
167
|
-
createElement('div', theme.eventTime, null, timeText),
|
|
159
|
+
...chunk.event.allDay ? [] : [createElement('div', theme.eventTime, null, timeText)],
|
|
168
160
|
createElement('div', theme.eventTitle, chunk.event.titleHTML, chunk.event.title)
|
|
169
161
|
]
|
|
170
162
|
};
|
package/src/storage/state.js
CHANGED
|
@@ -30,7 +30,6 @@ export default class {
|
|
|
30
30
|
// Private stores
|
|
31
31
|
this._queue = writable(new Map()); // debounce queue
|
|
32
32
|
this._auxiliary = writable([]); // auxiliary components
|
|
33
|
-
this._viewClass = writable(undefined);
|
|
34
33
|
this._monthMode = monthMode(this);
|
|
35
34
|
this._currentRange = currentRange(this);
|
|
36
35
|
this._activeRange = activeRange(this);
|
|
@@ -47,6 +46,7 @@ export default class {
|
|
|
47
46
|
this._viewTitle = viewTitle(this);
|
|
48
47
|
this._viewDates = viewDates(this);
|
|
49
48
|
this._view = view2(this);
|
|
49
|
+
this._viewClass = writable(undefined);
|
|
50
50
|
this._viewComponent = writable(undefined);
|
|
51
51
|
// Resources
|
|
52
52
|
this._resBgColor = writable(noop);
|
package/src/storage/stores.js
CHANGED
|
@@ -20,7 +20,7 @@ import {
|
|
|
20
20
|
} from '../lib.js';
|
|
21
21
|
|
|
22
22
|
export function monthMode(state) {
|
|
23
|
-
return derived(state.
|
|
23
|
+
return derived(state.view, $view => $view.startsWith?.('dayGrid'));
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
export function activeRange(state) {
|