@event-calendar/core 1.4.0 → 1.5.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 +42 -4
- package/index.js +27 -15
- package/package.json +1 -1
- package/src/Calendar.svelte +1 -1
- package/src/lib/events.js +18 -1
- package/src/storage/options.js +3 -6
- package/src/storage/state.js +4 -6
- 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
|
|
|
@@ -35,6 +35,7 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
|
|
|
35
35
|
- [editable](#editable)
|
|
36
36
|
- [events](#events)
|
|
37
37
|
- [eventBackgroundColor](#eventbackgroundcolor)
|
|
38
|
+
- [eventClassNames](#eventclassnames)
|
|
38
39
|
- [eventClick](#eventclick)
|
|
39
40
|
- [eventColor](#eventcolor)
|
|
40
41
|
- [eventContent](#eventcontent)
|
|
@@ -193,8 +194,8 @@ import '@event-calendar/core/index.css';
|
|
|
193
194
|
### Pre-built browser ready bundle
|
|
194
195
|
Include the following lines of code in the `<head>` section of your page:
|
|
195
196
|
```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.
|
|
197
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@1.5.0/event-calendar.min.css">
|
|
198
|
+
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@1.5.0/event-calendar.min.js"></script>
|
|
198
199
|
```
|
|
199
200
|
|
|
200
201
|
<details>
|
|
@@ -542,6 +543,43 @@ Sets the default background color for events on the calendar.
|
|
|
542
543
|
|
|
543
544
|
You can use any of the CSS color formats such `'#f00'`, `'#ff0000'`, `'rgb(255,0,0)'`, or `'red'`.
|
|
544
545
|
|
|
546
|
+
### eventClassNames
|
|
547
|
+
- Type `string`, `array` or `function`
|
|
548
|
+
- Default `undefined`
|
|
549
|
+
|
|
550
|
+
Sets additional CSS classes for events.
|
|
551
|
+
|
|
552
|
+
This value can be either a string containing class names `'class-1 class-2 ...'`, an array of strings `['class-1', 'class-2', ...]` or a function that returns any of the above formats:
|
|
553
|
+
|
|
554
|
+
```js
|
|
555
|
+
function (info) {
|
|
556
|
+
// return string or array
|
|
557
|
+
}
|
|
558
|
+
```
|
|
559
|
+
`info` is an object with the following properties:
|
|
560
|
+
<table>
|
|
561
|
+
<tr>
|
|
562
|
+
<td>
|
|
563
|
+
|
|
564
|
+
`event`
|
|
565
|
+
</td>
|
|
566
|
+
<td>
|
|
567
|
+
|
|
568
|
+
The associated [Event](#event-object) object
|
|
569
|
+
</td>
|
|
570
|
+
</tr>
|
|
571
|
+
<tr>
|
|
572
|
+
<td>
|
|
573
|
+
|
|
574
|
+
`view`
|
|
575
|
+
</td>
|
|
576
|
+
<td>
|
|
577
|
+
|
|
578
|
+
The current [View](#view-object) object
|
|
579
|
+
</td>
|
|
580
|
+
</tr>
|
|
581
|
+
</table>
|
|
582
|
+
|
|
545
583
|
### eventClick
|
|
546
584
|
- Type `function`
|
|
547
585
|
- Default `undefined`
|
|
@@ -596,7 +634,7 @@ The current [View](#view-object) object
|
|
|
596
634
|
This is currently an alias for the `eventBackgroundColor`.
|
|
597
635
|
|
|
598
636
|
### eventContent
|
|
599
|
-
- Type `string`, `object`or `function`
|
|
637
|
+
- Type `string`, `object` or `function`
|
|
600
638
|
- Default `undefined`
|
|
601
639
|
|
|
602
640
|
Defines the content that is rendered inside an event’s element.
|
package/index.js
CHANGED
|
@@ -540,6 +540,19 @@ function createEventContent(chunk, displayEventEnd, eventContent, theme, _intlEv
|
|
|
540
540
|
return [timeText, content];
|
|
541
541
|
}
|
|
542
542
|
|
|
543
|
+
function createEventClasses(eventClassNames, event, _view) {
|
|
544
|
+
if (eventClassNames) {
|
|
545
|
+
if (is_function(eventClassNames)) {
|
|
546
|
+
eventClassNames = eventClassNames({
|
|
547
|
+
event: toEventWithLocalDates(event),
|
|
548
|
+
view: toViewWithLocalDates(_view)
|
|
549
|
+
});
|
|
550
|
+
}
|
|
551
|
+
return Array.isArray(eventClassNames) ? eventClassNames : [eventClassNames];
|
|
552
|
+
}
|
|
553
|
+
return [];
|
|
554
|
+
}
|
|
555
|
+
|
|
543
556
|
function toEventWithLocalDates(event) {
|
|
544
557
|
return _cloneEvent(event, toLocalDate);
|
|
545
558
|
}
|
|
@@ -574,7 +587,7 @@ function eventIntersects(event, start, end, resource, timeMode) {
|
|
|
574
587
|
}
|
|
575
588
|
|
|
576
589
|
function helperEvent(display) {
|
|
577
|
-
return display
|
|
590
|
+
return previewEvent(display) || ghostEvent(display) || pointerEvent(display);
|
|
578
591
|
}
|
|
579
592
|
|
|
580
593
|
function bgEvent(display) {
|
|
@@ -589,6 +602,10 @@ function ghostEvent(display) {
|
|
|
589
602
|
return display === 'ghost';
|
|
590
603
|
}
|
|
591
604
|
|
|
605
|
+
function pointerEvent(display) {
|
|
606
|
+
return display === 'pointer';
|
|
607
|
+
}
|
|
608
|
+
|
|
592
609
|
function writable2(value, parser, start) {
|
|
593
610
|
return {
|
|
594
611
|
...writable(parser ? parser(value) : value, start),
|
|
@@ -659,6 +676,7 @@ function createOptions(plugins) {
|
|
|
659
676
|
events: [],
|
|
660
677
|
eventBackgroundColor: undefined,
|
|
661
678
|
eventTextColor: undefined,
|
|
679
|
+
eventClassNames: undefined,
|
|
662
680
|
eventClick: undefined,
|
|
663
681
|
eventColor: undefined,
|
|
664
682
|
eventContent: undefined,
|
|
@@ -744,9 +762,7 @@ function createOptions(plugins) {
|
|
|
744
762
|
};
|
|
745
763
|
|
|
746
764
|
for (let plugin of plugins) {
|
|
747
|
-
|
|
748
|
-
plugin.createOptions(options);
|
|
749
|
-
}
|
|
765
|
+
plugin.createOptions?.(options);
|
|
750
766
|
}
|
|
751
767
|
|
|
752
768
|
return options;
|
|
@@ -769,9 +785,7 @@ function createParsers(options, plugins) {
|
|
|
769
785
|
};
|
|
770
786
|
|
|
771
787
|
for (let plugin of plugins) {
|
|
772
|
-
|
|
773
|
-
plugin.createParsers(parsers, options);
|
|
774
|
-
}
|
|
788
|
+
plugin.createParsers?.(parsers, options);
|
|
775
789
|
}
|
|
776
790
|
|
|
777
791
|
return parsers;
|
|
@@ -793,7 +807,7 @@ function diff(options) {
|
|
|
793
807
|
}
|
|
794
808
|
|
|
795
809
|
function monthMode(state) {
|
|
796
|
-
return derived(state.
|
|
810
|
+
return derived(state.view, $view => $view.startsWith?.('dayGrid'));
|
|
797
811
|
}
|
|
798
812
|
|
|
799
813
|
function activeRange(state) {
|
|
@@ -997,7 +1011,6 @@ class State {
|
|
|
997
1011
|
// Private stores
|
|
998
1012
|
this._queue = writable(new Map()); // debounce queue
|
|
999
1013
|
this._auxiliary = writable([]); // auxiliary components
|
|
1000
|
-
this._viewClass = writable(undefined);
|
|
1001
1014
|
this._monthMode = monthMode(this);
|
|
1002
1015
|
this._currentRange = currentRange(this);
|
|
1003
1016
|
this._activeRange = activeRange(this);
|
|
@@ -1014,6 +1027,7 @@ class State {
|
|
|
1014
1027
|
this._viewTitle = viewTitle(this);
|
|
1015
1028
|
this._viewDates = viewDates(this);
|
|
1016
1029
|
this._view = view(this);
|
|
1030
|
+
this._viewClass = writable(undefined);
|
|
1017
1031
|
this._viewComponent = writable(undefined);
|
|
1018
1032
|
// Resources
|
|
1019
1033
|
this._resBgColor = writable(noop);
|
|
@@ -1021,14 +1035,12 @@ class State {
|
|
|
1021
1035
|
// Interaction
|
|
1022
1036
|
this._interaction = writable({});
|
|
1023
1037
|
this._iEvents = writable([null, null]); // interaction events: [drag/resize, pointer]
|
|
1024
|
-
this.
|
|
1025
|
-
this._iClass = writable(undefined);
|
|
1038
|
+
this._iClasses = writable(identity); // interaction event css classes
|
|
1039
|
+
this._iClass = writable(undefined); // interaction css class for entire calendar
|
|
1026
1040
|
|
|
1027
1041
|
// Let plugins create their private stores
|
|
1028
1042
|
for (let plugin of plugins) {
|
|
1029
|
-
|
|
1030
|
-
plugin.createStores(this);
|
|
1031
|
-
}
|
|
1043
|
+
plugin.createStores?.(this);
|
|
1032
1044
|
}
|
|
1033
1045
|
|
|
1034
1046
|
if (input.view) {
|
|
@@ -2461,4 +2473,4 @@ class Calendar extends SvelteComponent {
|
|
|
2461
2473
|
}
|
|
2462
2474
|
}
|
|
2463
2475
|
|
|
2464
|
-
export { DAY_IN_SECONDS, addDay, addDuration, ancestor, assign, bgEvent, cloneDate, cloneEvent, createDate, createDuration, createElement, createEventChunk, createEventContent, createEventSources, createEvents, createView, datesEqual, debounce, Calendar as default, derived2, eventIntersects, floor, flushDebounce, formatRange, getElementWithPayload, getPayload, ghostEvent, hasPayload, hasYScroll, height, helperEvent, intl, intlRange, isObject, max, min, nextClosestDay, noTimePart, outsideEvent, prepareEventChunks, prevClosestDay, previewEvent, rect, repositionEvent, setContent, setMidnight, setPayload, sortEventChunks, subtractDay, subtractDuration, symbol, toEventWithLocalDates, toISOString, toLocalDate, toViewWithLocalDates, writable2 };
|
|
2476
|
+
export { DAY_IN_SECONDS, addDay, addDuration, ancestor, assign, bgEvent, cloneDate, cloneEvent, createDate, createDuration, createElement, createEventChunk, createEventClasses, createEventContent, createEventSources, createEvents, createView, datesEqual, debounce, Calendar as default, derived2, eventIntersects, floor, flushDebounce, formatRange, getElementWithPayload, getPayload, ghostEvent, hasPayload, hasYScroll, height, helperEvent, intl, intlRange, isObject, max, min, nextClosestDay, noTimePart, outsideEvent, pointerEvent, prepareEventChunks, prevClosestDay, previewEvent, rect, repositionEvent, setContent, setMidnight, setPayload, sortEventChunks, subtractDay, subtractDuration, symbol, toEventWithLocalDates, toISOString, toLocalDate, toViewWithLocalDates, writable2 };
|
package/package.json
CHANGED
package/src/Calendar.svelte
CHANGED
package/src/lib/events.js
CHANGED
|
@@ -166,6 +166,19 @@ export function createEventContent(chunk, displayEventEnd, eventContent, theme,
|
|
|
166
166
|
return [timeText, content];
|
|
167
167
|
}
|
|
168
168
|
|
|
169
|
+
export function createEventClasses(eventClassNames, event, _view) {
|
|
170
|
+
if (eventClassNames) {
|
|
171
|
+
if (is_function(eventClassNames)) {
|
|
172
|
+
eventClassNames = eventClassNames({
|
|
173
|
+
event: toEventWithLocalDates(event),
|
|
174
|
+
view: toViewWithLocalDates(_view)
|
|
175
|
+
});
|
|
176
|
+
}
|
|
177
|
+
return Array.isArray(eventClassNames) ? eventClassNames : [eventClassNames];
|
|
178
|
+
}
|
|
179
|
+
return [];
|
|
180
|
+
}
|
|
181
|
+
|
|
169
182
|
export function toEventWithLocalDates(event) {
|
|
170
183
|
return _cloneEvent(event, toLocalDate);
|
|
171
184
|
}
|
|
@@ -200,7 +213,7 @@ export function eventIntersects(event, start, end, resource, timeMode) {
|
|
|
200
213
|
}
|
|
201
214
|
|
|
202
215
|
export function helperEvent(display) {
|
|
203
|
-
return display
|
|
216
|
+
return previewEvent(display) || ghostEvent(display) || pointerEvent(display);
|
|
204
217
|
}
|
|
205
218
|
|
|
206
219
|
export function bgEvent(display) {
|
|
@@ -214,3 +227,7 @@ export function previewEvent(display) {
|
|
|
214
227
|
export function ghostEvent(display) {
|
|
215
228
|
return display === 'ghost';
|
|
216
229
|
}
|
|
230
|
+
|
|
231
|
+
export function pointerEvent(display) {
|
|
232
|
+
return display === 'pointer';
|
|
233
|
+
}
|
package/src/storage/options.js
CHANGED
|
@@ -20,6 +20,7 @@ export function createOptions(plugins) {
|
|
|
20
20
|
events: [],
|
|
21
21
|
eventBackgroundColor: undefined,
|
|
22
22
|
eventTextColor: undefined,
|
|
23
|
+
eventClassNames: undefined,
|
|
23
24
|
eventClick: undefined,
|
|
24
25
|
eventColor: undefined,
|
|
25
26
|
eventContent: undefined,
|
|
@@ -105,9 +106,7 @@ export function createOptions(plugins) {
|
|
|
105
106
|
};
|
|
106
107
|
|
|
107
108
|
for (let plugin of plugins) {
|
|
108
|
-
|
|
109
|
-
plugin.createOptions(options);
|
|
110
|
-
}
|
|
109
|
+
plugin.createOptions?.(options);
|
|
111
110
|
}
|
|
112
111
|
|
|
113
112
|
return options;
|
|
@@ -130,9 +129,7 @@ export function createParsers(options, plugins) {
|
|
|
130
129
|
};
|
|
131
130
|
|
|
132
131
|
for (let plugin of plugins) {
|
|
133
|
-
|
|
134
|
-
plugin.createParsers(parsers, options);
|
|
135
|
-
}
|
|
132
|
+
plugin.createParsers?.(parsers, options);
|
|
136
133
|
}
|
|
137
134
|
|
|
138
135
|
return parsers;
|
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);
|
|
@@ -54,14 +54,12 @@ export default class {
|
|
|
54
54
|
// Interaction
|
|
55
55
|
this._interaction = writable({});
|
|
56
56
|
this._iEvents = writable([null, null]); // interaction events: [drag/resize, pointer]
|
|
57
|
-
this.
|
|
58
|
-
this._iClass = writable(undefined);
|
|
57
|
+
this._iClasses = writable(identity); // interaction event css classes
|
|
58
|
+
this._iClass = writable(undefined); // interaction css class for entire calendar
|
|
59
59
|
|
|
60
60
|
// Let plugins create their private stores
|
|
61
61
|
for (let plugin of plugins) {
|
|
62
|
-
|
|
63
|
-
plugin.createStores(this);
|
|
64
|
-
}
|
|
62
|
+
plugin.createStores?.(this);
|
|
65
63
|
}
|
|
66
64
|
|
|
67
65
|
if (input.view) {
|
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) {
|