@event-calendar/core 0.7.0 → 0.8.2
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 +12 -5
- package/index.css +1 -1
- package/index.js +70 -49
- package/package.json +4 -3
- package/src/Buttons.svelte +41 -0
- package/src/Calendar.svelte +91 -0
- package/src/Toolbar.svelte +34 -0
- package/src/index.js +3 -0
- package/src/index.scss +507 -0
- package/src/storage/options.js +150 -0
- package/src/storage/state.js +114 -0
- package/src/storage/stores.js +206 -0
package/README.md
CHANGED
|
@@ -4,7 +4,7 @@ See [demo](https://vkurko.github.io/calendar/).
|
|
|
4
4
|
|
|
5
5
|
Full-sized drag & drop JavaScript event calendar with resource view:
|
|
6
6
|
|
|
7
|
-
* Lightweight (
|
|
7
|
+
* Lightweight (47kb [br](https://en.wikipedia.org/wiki/Brotli) compressed `modern` version)
|
|
8
8
|
* Zero-dependency (pre-built bundle)
|
|
9
9
|
* Used by [Bookly](https://wordpress.org/plugins/bookly-responsive-appointment-booking-tool/)
|
|
10
10
|
|
|
@@ -37,9 +37,9 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
|
|
|
37
37
|
- [eventColor](#eventcolor)
|
|
38
38
|
- [eventContent](#eventcontent)
|
|
39
39
|
- [eventDidMount](#eventdidmount)
|
|
40
|
+
- [eventDragMinDistance](#eventdragmindistance)
|
|
40
41
|
</td><td>
|
|
41
42
|
|
|
42
|
-
- [eventDragMinDistance](#eventdragmindistance)
|
|
43
43
|
- [eventDragStart](#eventdragstart)
|
|
44
44
|
- [eventDragStop](#eventdragstop)
|
|
45
45
|
- [eventDrop](#eventdrop)
|
|
@@ -57,15 +57,16 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
|
|
|
57
57
|
- [highlightedDates](#highlighteddates)
|
|
58
58
|
- [lazyFetching](#lazyfetching)
|
|
59
59
|
- [listDayFormat](#listdayformat)
|
|
60
|
-
</td><td>
|
|
61
|
-
|
|
62
60
|
- [listDaySideFormat](#listdaysideformat)
|
|
63
61
|
- [loading](#loading)
|
|
62
|
+
</td><td>
|
|
63
|
+
|
|
64
64
|
- [locale](#locale)
|
|
65
65
|
- [monthMode](#monthmode)
|
|
66
66
|
- [moreLinkContent](#morelinkcontent)
|
|
67
67
|
- [noEventsClick](#noeventsclick)
|
|
68
68
|
- [noEventsContent](#noeventscontent)
|
|
69
|
+
- [nowIndicator](#nowindicator)
|
|
69
70
|
- [pointer](#pointer)
|
|
70
71
|
- [resources](#resources)
|
|
71
72
|
- [scrollTime](#scrolltime)
|
|
@@ -1239,6 +1240,12 @@ function () {
|
|
|
1239
1240
|
}
|
|
1240
1241
|
```
|
|
1241
1242
|
|
|
1243
|
+
### nowIndicator
|
|
1244
|
+
- Type `boolean`
|
|
1245
|
+
- Default `false`
|
|
1246
|
+
|
|
1247
|
+
Enables a marker indicating the current time in `timeGrid`/`resourceTimeGrid` views.
|
|
1248
|
+
|
|
1242
1249
|
### pointer
|
|
1243
1250
|
- Type `boolean`
|
|
1244
1251
|
- Default `false`
|
|
@@ -1320,7 +1327,7 @@ This should be a value that can be parsed into a [Duration](#duration-object) ob
|
|
|
1320
1327
|
|
|
1321
1328
|
### theme
|
|
1322
1329
|
- Type `object` or `function`
|
|
1323
|
-
- Default `{
|
|
1330
|
+
- Default `{active: 'ec-active', bgEvent: 'ec-bg-event', bgEvents: 'ec-bg-events', body: 'ec-body', button: 'ec-button', buttonGroup: 'ec-button-group', calendar: 'ec', compact: 'ec-compact', content: 'ec-content', day: 'ec-day', dayHead: 'ec-day-head', days: 'ec-days', event: 'ec-event', eventTime: 'ec-event-time', eventTitle: 'ec-event-title', events: 'ec-events', extra: 'ec-extra', handle: 'ec-handle', header: 'ec-header', hiddenScroll: 'ec-hidden-scroll', hiddenTimes: 'ec-hidden-times', highlight: 'ec-highlight', icon: 'ec-icon', line: 'ec-line', lines: 'ec-lines', nowIndicator: 'ec-now-indicator', otherMonth: 'ec-other-month', sidebar: 'ec-sidebar', today: 'ec-today', time: 'ec-time', title: 'ec-title', toolbar: 'ec-toolbar', week: 'ec-week', withScroll: 'ec-with-scroll', uniform: 'ec-uniform', dayFoot: 'ec-day-foot', month: 'ec-month', popup: 'ec-popup', daySide: 'ec-day-side', eventTag: 'ec-event-tag', list: 'ec-list', noEvents: 'ec-no-events', resource: 'ec-resource', resourceTitle: 'ec-resource-title', draggable: 'ec-draggable', ghost: 'ec-ghost', preview: 'ec-preview', pointer: 'ec-pointer'}`
|
|
1324
1331
|
|
|
1325
1332
|
Defines the CSS classes that the Event Calendar uses to generate HTML markup.
|
|
1326
1333
|
|
package/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.ec-flex{display:flex}.ec-body.ec-month,.ec-days,.ec-day,.ec-day-title,.ec-resource{flex:1 1 0%;min-width:0;max-width:100%}.ec{display:flex;flex-direction:column}.ec ::-webkit-scrollbar{background:#fff}.ec ::-webkit-scrollbar-thumb{border:4px solid #fff;box-shadow:none;background:#dadce0;border-radius:8px;min-height:40px}.ec :hover::-webkit-scrollbar-thumb{background:#bdc1c6}.ec-hidden-scroll{display:none;overflow-y:scroll;visibility:hidden;flex-shrink:0}.ec-with-scroll .ec-hidden-scroll{display:block}.ec-toolbar{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;margin-bottom:1em}.ec-toolbar>*{margin-bottom:-0.5em}.ec-toolbar>*>*{margin-bottom:.5em}.ec-toolbar>*>*:not(:last-child){margin-right:.75em}.ec-title{margin:0}.ec-button{background-color:#fff;border:1px solid #ced4da;padding:.375rem .75rem;font-size:1rem;line-height:1.5;border-radius:.25rem}.ec-button:not(:disabled){color:#212529;cursor:pointer}.ec-button:not(:disabled):hover,.ec-button.ec-active{background-color:#ececec;border-color:#b1bbc4}.ec-button-group{display:inline-flex}.ec-button-group .ec-button:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}.ec-button-group .ec-button:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.ec-icon{display:inline-block;width:1em}.ec-icon.ec-prev:after,.ec-icon.ec-next:after{content:"";position:relative;width:.5em;height:.5em;border-top:2px solid #212529;border-right:2px solid #212529;display:inline-block}.ec-icon.ec-prev:after{transform:rotate(-135deg) translate(-2px, 2px)}.ec-icon.ec-next:after{transform:rotate(45deg) translate(-2px, 2px)}.ec-header,.ec-body,.ec-days,.ec-day{border:1px solid #dadce0}.ec-header{display:flex;flex-shrink:0}.ec-header .ec-resource{flex-direction:column}.ec-header .ec-resource .ec-days{border-top-style:solid}.ec-header .ec-days{border-bottom:none}.ec-header .ec-day{min-height:24px;line-height:24px;text-align:center;overflow:hidden;text-overflow:ellipsis}.ec-body{position:relative;overflow-x:hidden;overflow-y:auto}.ec-body:not(.ec-list){border-top:none}.ec-sidebar{flex:0 0 auto;width:auto;max-width:100%;padding:0 4px 0 8px}.ec-content{display:flex}.ec-month .ec-content{flex-direction:column;height:100%}.ec-month.ec-uniform .ec-content{overflow:hidden}.ec-list .ec-content{flex-direction:column}.ec-resource{display:flex}.ec-days{display:flex;border-style:none none solid}.ec-days:last-child{border-bottom:none}.ec-month .ec-days,.ec-resource .ec-days{flex:1 0 auto}.ec-month.ec-uniform .ec-days{flex:1 1 0%;min-height:0}.ec-day{border-style:none none none solid}.ec-day.ec-today{background-color:#fcf8e3}.ec-day.ec-highlight{background-color:#e5f7fe}.ec-month.ec-body .ec-day{min-height:5em;position:relative}.ec-month.ec-uniform .ec-day{min-height:0}.ec-month .ec-day:first-child{border-left:none}.ec-day.ec-other-month .ec-day-head{opacity:.3}.ec-list .ec-day{flex:1 0 auto;background-color:#fff;border-style:solid none;padding:8px 14px;font-weight:bold;position:sticky;top:0;z-index:
|
|
1
|
+
.ec-flex{display:flex}.ec-body.ec-month,.ec-days,.ec-day,.ec-day-title,.ec-resource{flex:1 1 0%;min-width:0;max-width:100%}.ec{display:flex;flex-direction:column}.ec ::-webkit-scrollbar{background:#fff}.ec ::-webkit-scrollbar-thumb{border:4px solid #fff;box-shadow:none;background:#dadce0;border-radius:8px;min-height:40px}.ec :hover::-webkit-scrollbar-thumb{background:#bdc1c6}.ec-hidden-scroll{display:none;overflow-y:scroll;visibility:hidden;flex-shrink:0}.ec-with-scroll .ec-hidden-scroll{display:block}.ec-toolbar{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;margin-bottom:1em}.ec-toolbar>*{margin-bottom:-0.5em}.ec-toolbar>*>*{margin-bottom:.5em}.ec-toolbar>*>*:not(:last-child){margin-right:.75em}.ec-title{margin:0}.ec-button{background-color:#fff;border:1px solid #ced4da;padding:.375rem .75rem;font-size:1rem;line-height:1.5;border-radius:.25rem}.ec-button:not(:disabled){color:#212529;cursor:pointer}.ec-button:not(:disabled):hover,.ec-button.ec-active{background-color:#ececec;border-color:#b1bbc4}.ec-button-group{display:inline-flex}.ec-button-group .ec-button:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}.ec-button-group .ec-button:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.ec-icon{display:inline-block;width:1em}.ec-icon.ec-prev:after,.ec-icon.ec-next:after{content:"";position:relative;width:.5em;height:.5em;border-top:2px solid #212529;border-right:2px solid #212529;display:inline-block}.ec-icon.ec-prev:after{transform:rotate(-135deg) translate(-2px, 2px)}.ec-icon.ec-next:after{transform:rotate(45deg) translate(-2px, 2px)}.ec-header,.ec-body,.ec-days,.ec-day{border:1px solid #dadce0}.ec-header{display:flex;flex-shrink:0}.ec-header .ec-resource{flex-direction:column}.ec-header .ec-resource .ec-days{border-top-style:solid}.ec-header .ec-days{border-bottom:none}.ec-header .ec-day{min-height:24px;line-height:24px;text-align:center;overflow:hidden;text-overflow:ellipsis}.ec-body{position:relative;overflow-x:hidden;overflow-y:auto}.ec-body:not(.ec-list){border-top:none}.ec-sidebar{flex:0 0 auto;width:auto;max-width:100%;padding:0 4px 0 8px}.ec-content{display:flex}.ec-month .ec-content{flex-direction:column;height:100%}.ec-month.ec-uniform .ec-content{overflow:hidden}.ec-list .ec-content{flex-direction:column}.ec-resource{display:flex}.ec-days{display:flex;border-style:none none solid}.ec-days:last-child{border-bottom:none}.ec-month .ec-days,.ec-resource .ec-days{flex:1 0 auto}.ec-month.ec-uniform .ec-days{flex:1 1 0%;min-height:0}.ec-day{border-style:none none none solid}.ec-day.ec-today{background-color:#fcf8e3}.ec-day.ec-highlight{background-color:#e5f7fe}.ec-month.ec-body .ec-day{min-height:5em;position:relative}.ec-month.ec-uniform .ec-day{min-height:0}.ec-month .ec-day:first-child{border-left:none}.ec-day.ec-other-month .ec-day-head{opacity:.3}.ec-list .ec-day{flex:1 0 auto;background-color:#fff;border-style:solid none;padding:8px 14px;font-weight:bold;position:-webkit-sticky;position:sticky;top:0;z-index:2}.ec-list .ec-day:first-child{border-top:none}.ec-month .ec-day-head{text-align:right;padding:4px 4px 3px}.ec-month .ec-day-foot{position:absolute;bottom:0;padding:2px;font-size:.85em}.ec-month .ec-day-foot a{cursor:pointer}.ec-list .ec-day-side{float:right}.ec-list .ec-no-events{text-align:center;padding:5em 0}.ec-events{margin:0 6px 0 0}.ec-week .ec-events,.ec-events.ec-preview{position:relative}.ec-event{display:flex;flex-direction:column;padding:2px;color:#fff;box-sizing:border-box;box-shadow:0 0 1px 0 #dadce0;background-color:#039be5;border-radius:3px;font-size:.85em;line-height:1.5;z-index:1}.ec-month .ec-event{position:relative;flex-direction:row}.ec-week .ec-event{position:absolute}.ec-list .ec-event{flex-direction:row;padding:8px 14px;color:inherit;background-color:transparent;border-radius:0}.ec-event.ec-preview{cursor:pointer;position:absolute;z-index:1000;width:100%;-webkit-user-select:none;user-select:none;opacity:.8}.ec-event.ec-pointer{color:inherit;pointer-events:none;-webkit-user-select:none;user-select:none;position:absolute;z-index:0;box-shadow:none;display:none}.ec-day:hover .ec-event.ec-pointer{display:flex}.ec-event-tag{width:4px;border-radius:2px;margin-right:8px}.ec-event-time{overflow:hidden;white-space:nowrap;margin:0 0 1px 0;flex-shrink:0}.ec-month .ec-event-time{margin:0 3px 0 0;max-width:100%;text-overflow:ellipsis}.ec-event-title{overflow:hidden}.ec-month .ec-event-title{white-space:nowrap;text-overflow:ellipsis}.ec-week .ec-event-title{position:-webkit-sticky;position:sticky;top:0}.ec-list .ec-event-title{font-size:1rem}.ec-draggable{cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none}.ec-ghost{opacity:.5;-webkit-user-select:none;user-select:none;touch-action:none}.ec-bg-events{position:relative}.ec-bg-event{position:absolute;background-color:#dadce0;opacity:.3;width:100%}.ec-hidden-times{visibility:hidden;overflow-y:hidden;height:0}.ec-time,.ec-line{height:24px}.ec-time{position:relative;line-height:24px;top:-12px;text-align:right;white-space:nowrap}.ec-lines{width:8px}.ec-line:not(:first-child):after{content:"";position:absolute;width:100%;border-bottom:1px solid #dadce0;pointer-events:none}.ec-body:not(.ec-compact) .ec-line:nth-child(even):after{border-bottom-style:dotted}.ec-popup{position:absolute;top:0;width:110%;min-width:180px;z-index:1010;padding:8px 10px 14px;background-color:#fff;border-radius:6px;outline:1px solid transparent;box-shadow:0 1px 3px 0 rgba(60,64,67,.3),0 4px 8px 3px rgba(60,64,67,.15)}.ec-popup .ec-day-head{text-align:left;display:flex;justify-content:space-between}.ec-popup .ec-day-head a{cursor:pointer;font-size:1.5em;line-height:.8}.ec-popup .ec-events{margin:0}.ec-extra{position:relative;height:100%;overflow:hidden;margin-left:-6.5px}.ec-now-indicator{position:absolute;z-index:1005;width:100%;border-top:#ea4335 solid 2px;pointer-events:none}.ec-now-indicator:before{background:#ea4335;border-radius:50%;content:"";position:absolute;height:12px;margin-top:-7px;width:12px;pointer-events:none}
|
package/index.js
CHANGED
|
@@ -45,6 +45,7 @@ function createOptions(plugins) {
|
|
|
45
45
|
loading: undefined,
|
|
46
46
|
locale: undefined,
|
|
47
47
|
monthMode: false,
|
|
48
|
+
nowIndicator: false,
|
|
48
49
|
scrollTime: '06:00:00',
|
|
49
50
|
slotDuration: '00:30:00',
|
|
50
51
|
slotHeight: 24, // ec option
|
|
@@ -55,37 +56,40 @@ function createOptions(plugins) {
|
|
|
55
56
|
slotMaxTime: '24:00:00',
|
|
56
57
|
slotMinTime: '00:00:00',
|
|
57
58
|
theme: {
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
hiddenScroll: 'ec-hidden-scroll',
|
|
59
|
+
active: 'ec-active',
|
|
60
|
+
bgEvent: 'ec-bg-event',
|
|
61
|
+
bgEvents: 'ec-bg-events',
|
|
62
62
|
body: 'ec-body',
|
|
63
|
-
|
|
63
|
+
button: 'ec-button',
|
|
64
|
+
buttonGroup: 'ec-button-group',
|
|
65
|
+
calendar: 'ec',
|
|
64
66
|
compact: 'ec-compact',
|
|
65
|
-
toolbar: 'ec-toolbar',
|
|
66
|
-
sidebar: 'ec-sidebar',
|
|
67
67
|
content: 'ec-content',
|
|
68
|
-
lines: 'ec-lines',
|
|
69
|
-
line: 'ec-line',
|
|
70
|
-
days: 'ec-days',
|
|
71
68
|
day: 'ec-day',
|
|
72
69
|
dayHead: 'ec-day-head',
|
|
73
|
-
|
|
74
|
-
otherMonth: 'ec-other-month',
|
|
75
|
-
highlight: 'ec-highlight',
|
|
76
|
-
events: 'ec-events',
|
|
70
|
+
days: 'ec-days',
|
|
77
71
|
event: 'ec-event',
|
|
78
72
|
eventTime: 'ec-event-time',
|
|
79
73
|
eventTitle: 'ec-event-title',
|
|
80
|
-
|
|
81
|
-
|
|
74
|
+
events: 'ec-events',
|
|
75
|
+
extra: 'ec-extra',
|
|
76
|
+
handle: 'ec-handle',
|
|
77
|
+
header: 'ec-header',
|
|
78
|
+
hiddenScroll: 'ec-hidden-scroll',
|
|
82
79
|
hiddenTimes: 'ec-hidden-times',
|
|
83
|
-
|
|
84
|
-
button: 'ec-button',
|
|
85
|
-
buttonGroup: 'ec-button-group',
|
|
80
|
+
highlight: 'ec-highlight',
|
|
86
81
|
icon: 'ec-icon',
|
|
87
|
-
|
|
88
|
-
|
|
82
|
+
line: 'ec-line',
|
|
83
|
+
lines: 'ec-lines',
|
|
84
|
+
nowIndicator: 'ec-now-indicator',
|
|
85
|
+
otherMonth: 'ec-other-month',
|
|
86
|
+
sidebar: 'ec-sidebar',
|
|
87
|
+
today: 'ec-today',
|
|
88
|
+
time: 'ec-time',
|
|
89
|
+
title: 'ec-title',
|
|
90
|
+
toolbar: 'ec-toolbar',
|
|
91
|
+
week: 'ec-week',
|
|
92
|
+
withScroll: 'ec-with-scroll'
|
|
89
93
|
},
|
|
90
94
|
titleFormat: {
|
|
91
95
|
year: 'numeric',
|
|
@@ -435,7 +439,7 @@ function parseOpts(opts, state) {
|
|
|
435
439
|
}
|
|
436
440
|
}
|
|
437
441
|
|
|
438
|
-
/* packages/core/src/Buttons.svelte generated by Svelte v3.
|
|
442
|
+
/* packages/core/src/Buttons.svelte generated by Svelte v3.46.4 */
|
|
439
443
|
|
|
440
444
|
function get_each_context$1(ctx, list, i) {
|
|
441
445
|
const child_ctx = ctx.slice();
|
|
@@ -838,7 +842,7 @@ class Buttons extends SvelteComponent {
|
|
|
838
842
|
}
|
|
839
843
|
}
|
|
840
844
|
|
|
841
|
-
/* packages/core/src/Toolbar.svelte generated by Svelte v3.
|
|
845
|
+
/* packages/core/src/Toolbar.svelte generated by Svelte v3.46.4 */
|
|
842
846
|
|
|
843
847
|
function get_each_context(ctx, list, i) {
|
|
844
848
|
const child_ctx = ctx.slice();
|
|
@@ -1208,7 +1212,7 @@ class Toolbar extends SvelteComponent {
|
|
|
1208
1212
|
}
|
|
1209
1213
|
}
|
|
1210
1214
|
|
|
1211
|
-
/* packages/core/src/Calendar.svelte generated by Svelte v3.
|
|
1215
|
+
/* packages/core/src/Calendar.svelte generated by Svelte v3.46.4 */
|
|
1212
1216
|
|
|
1213
1217
|
function create_fragment(ctx) {
|
|
1214
1218
|
let div;
|
|
@@ -1344,6 +1348,9 @@ function create_fragment(ctx) {
|
|
|
1344
1348
|
}
|
|
1345
1349
|
|
|
1346
1350
|
function instance($$self, $$props, $$invalidate) {
|
|
1351
|
+
let $events;
|
|
1352
|
+
let $_events;
|
|
1353
|
+
let $eventSources;
|
|
1347
1354
|
let $theme;
|
|
1348
1355
|
let $height;
|
|
1349
1356
|
let $_viewComponent;
|
|
@@ -1352,9 +1359,12 @@ function instance($$self, $$props, $$invalidate) {
|
|
|
1352
1359
|
let { options = {} } = $$props;
|
|
1353
1360
|
let state = new State(plugins, options);
|
|
1354
1361
|
setContext('state', state);
|
|
1355
|
-
let { _viewComponent, _interaction, height, theme } = state;
|
|
1362
|
+
let { _viewComponent, _interaction, _events, events, eventSources, height, theme } = state;
|
|
1356
1363
|
component_subscribe($$self, _viewComponent, value => $$invalidate(2, $_viewComponent = value));
|
|
1357
1364
|
component_subscribe($$self, _interaction, value => $$invalidate(3, $_interaction = value));
|
|
1365
|
+
component_subscribe($$self, _events, value => $$invalidate(22, $_events = value));
|
|
1366
|
+
component_subscribe($$self, events, value => $$invalidate(21, $events = value));
|
|
1367
|
+
component_subscribe($$self, eventSources, value => $$invalidate(23, $eventSources = value));
|
|
1358
1368
|
component_subscribe($$self, height, value => $$invalidate(1, $height = value));
|
|
1359
1369
|
component_subscribe($$self, theme, value => $$invalidate(0, $theme = value));
|
|
1360
1370
|
|
|
@@ -1392,12 +1402,12 @@ function instance($$self, $$props, $$invalidate) {
|
|
|
1392
1402
|
}
|
|
1393
1403
|
|
|
1394
1404
|
function addEvent(event) {
|
|
1395
|
-
|
|
1405
|
+
updateEvents(events => events.concat(state.events.parse([event])));
|
|
1396
1406
|
return this;
|
|
1397
1407
|
}
|
|
1398
1408
|
|
|
1399
1409
|
function updateEvent(event) {
|
|
1400
|
-
|
|
1410
|
+
updateEvents(events => {
|
|
1401
1411
|
for (let e of events) {
|
|
1402
1412
|
if (e.id == event.id) {
|
|
1403
1413
|
assign(e, state.events.parse([event])[0]);
|
|
@@ -1412,7 +1422,7 @@ function instance($$self, $$props, $$invalidate) {
|
|
|
1412
1422
|
}
|
|
1413
1423
|
|
|
1414
1424
|
function removeEventById(id) {
|
|
1415
|
-
|
|
1425
|
+
updateEvents(events => events.filter(event => event.id != id));
|
|
1416
1426
|
return this;
|
|
1417
1427
|
}
|
|
1418
1428
|
|
|
@@ -1420,13 +1430,21 @@ function instance($$self, $$props, $$invalidate) {
|
|
|
1420
1430
|
return toViewWithLocalDates(state._view.get());
|
|
1421
1431
|
}
|
|
1422
1432
|
|
|
1433
|
+
function updateEvents(func) {
|
|
1434
|
+
if ($eventSources.length) {
|
|
1435
|
+
set_store_value(_events, $_events = func($_events), $_events);
|
|
1436
|
+
} else {
|
|
1437
|
+
set_store_value(events, $events = func($events), $events);
|
|
1438
|
+
}
|
|
1439
|
+
}
|
|
1440
|
+
|
|
1423
1441
|
$$self.$$set = $$props => {
|
|
1424
|
-
if ('plugins' in $$props) $$invalidate(
|
|
1425
|
-
if ('options' in $$props) $$invalidate(
|
|
1442
|
+
if ('plugins' in $$props) $$invalidate(11, plugins = $$props.plugins);
|
|
1443
|
+
if ('options' in $$props) $$invalidate(12, options = $$props.options);
|
|
1426
1444
|
};
|
|
1427
1445
|
|
|
1428
1446
|
$$self.$$.update = () => {
|
|
1429
|
-
if ($$self.$$.dirty & /*options*/
|
|
1447
|
+
if ($$self.$$.dirty & /*options*/ 4096) {
|
|
1430
1448
|
// Reactively update options that did change
|
|
1431
1449
|
for (let [name, value] of diff(options)) {
|
|
1432
1450
|
setOption(name, value);
|
|
@@ -1441,6 +1459,9 @@ function instance($$self, $$props, $$invalidate) {
|
|
|
1441
1459
|
$_interaction,
|
|
1442
1460
|
_viewComponent,
|
|
1443
1461
|
_interaction,
|
|
1462
|
+
_events,
|
|
1463
|
+
events,
|
|
1464
|
+
eventSources,
|
|
1444
1465
|
height,
|
|
1445
1466
|
theme,
|
|
1446
1467
|
plugins,
|
|
@@ -1461,49 +1482,49 @@ class Calendar extends SvelteComponent {
|
|
|
1461
1482
|
super();
|
|
1462
1483
|
|
|
1463
1484
|
init(this, options, instance, create_fragment, safe_not_equal, {
|
|
1464
|
-
plugins:
|
|
1465
|
-
options:
|
|
1466
|
-
setOption:
|
|
1467
|
-
getOption:
|
|
1468
|
-
refetchEvents:
|
|
1469
|
-
getEventById:
|
|
1470
|
-
addEvent:
|
|
1471
|
-
updateEvent:
|
|
1472
|
-
removeEventById:
|
|
1473
|
-
getView:
|
|
1485
|
+
plugins: 11,
|
|
1486
|
+
options: 12,
|
|
1487
|
+
setOption: 13,
|
|
1488
|
+
getOption: 14,
|
|
1489
|
+
refetchEvents: 15,
|
|
1490
|
+
getEventById: 16,
|
|
1491
|
+
addEvent: 17,
|
|
1492
|
+
updateEvent: 18,
|
|
1493
|
+
removeEventById: 19,
|
|
1494
|
+
getView: 20
|
|
1474
1495
|
});
|
|
1475
1496
|
}
|
|
1476
1497
|
|
|
1477
1498
|
get setOption() {
|
|
1478
|
-
return this.$$.ctx[
|
|
1499
|
+
return this.$$.ctx[13];
|
|
1479
1500
|
}
|
|
1480
1501
|
|
|
1481
1502
|
get getOption() {
|
|
1482
|
-
return this.$$.ctx[
|
|
1503
|
+
return this.$$.ctx[14];
|
|
1483
1504
|
}
|
|
1484
1505
|
|
|
1485
1506
|
get refetchEvents() {
|
|
1486
|
-
return this.$$.ctx[
|
|
1507
|
+
return this.$$.ctx[15];
|
|
1487
1508
|
}
|
|
1488
1509
|
|
|
1489
1510
|
get getEventById() {
|
|
1490
|
-
return this.$$.ctx[
|
|
1511
|
+
return this.$$.ctx[16];
|
|
1491
1512
|
}
|
|
1492
1513
|
|
|
1493
1514
|
get addEvent() {
|
|
1494
|
-
return this.$$.ctx[
|
|
1515
|
+
return this.$$.ctx[17];
|
|
1495
1516
|
}
|
|
1496
1517
|
|
|
1497
1518
|
get updateEvent() {
|
|
1498
|
-
return this.$$.ctx[
|
|
1519
|
+
return this.$$.ctx[18];
|
|
1499
1520
|
}
|
|
1500
1521
|
|
|
1501
1522
|
get removeEventById() {
|
|
1502
|
-
return this.$$.ctx[
|
|
1523
|
+
return this.$$.ctx[19];
|
|
1503
1524
|
}
|
|
1504
1525
|
|
|
1505
1526
|
get getView() {
|
|
1506
|
-
return this.$$.ctx[
|
|
1527
|
+
return this.$$.ctx[20];
|
|
1507
1528
|
}
|
|
1508
1529
|
}
|
|
1509
1530
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@event-calendar/core",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.8.2",
|
|
4
4
|
"title": "Event Calendar Core package",
|
|
5
5
|
"description": "Full-sized drag & drop event calendar with resource view",
|
|
6
6
|
"keywords": ["calendar", "event", "resource", "full-sized"],
|
|
@@ -12,13 +12,14 @@
|
|
|
12
12
|
},
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"type": "module",
|
|
15
|
+
"svelte": "src/index.js",
|
|
15
16
|
"exports": {
|
|
16
17
|
".": "./index.js",
|
|
17
18
|
"./index.css": "./index.css",
|
|
18
19
|
"./package.json": "./package.json"
|
|
19
20
|
},
|
|
20
21
|
"dependencies": {
|
|
21
|
-
"@event-calendar/common": "~0.
|
|
22
|
-
"svelte": "^3.
|
|
22
|
+
"@event-calendar/common": "~0.8.2",
|
|
23
|
+
"svelte": "^3.46.4"
|
|
23
24
|
}
|
|
24
25
|
}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import {getContext} from 'svelte';
|
|
3
|
+
import {createDate, cloneDate, subtractDay, addDuration, subtractDuration, setMidnight} from '@event-calendar/common';
|
|
4
|
+
|
|
5
|
+
export let buttons;
|
|
6
|
+
|
|
7
|
+
let {_currentRange, _viewTitle, buttonText, date, duration, hiddenDays, theme, view} = getContext('state');
|
|
8
|
+
|
|
9
|
+
let today = setMidnight(createDate()), isToday;
|
|
10
|
+
|
|
11
|
+
$: isToday = today >= $_currentRange.start && today < $_currentRange.end || null;
|
|
12
|
+
|
|
13
|
+
function prev() {
|
|
14
|
+
let d = subtractDuration($date, $duration);
|
|
15
|
+
if ($hiddenDays.length && $hiddenDays.length < 7) {
|
|
16
|
+
while ($hiddenDays.includes(d.getUTCDay())) {
|
|
17
|
+
subtractDay(d);
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
$date = d;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
function next() {
|
|
24
|
+
$date = addDuration($date, $duration);
|
|
25
|
+
}
|
|
26
|
+
</script>
|
|
27
|
+
|
|
28
|
+
{#each buttons as button}
|
|
29
|
+
{#if button == ''}
|
|
30
|
+
{:else if button == 'title'}
|
|
31
|
+
<h2 class="{$theme.title}">{$_viewTitle}</h2>
|
|
32
|
+
{:else if button == 'prev'}
|
|
33
|
+
<button class="{$theme.button} ec-{button}" on:click={prev}><i class="{$theme.icon} ec-{button}"></i></button>
|
|
34
|
+
{:else if button === 'next'}
|
|
35
|
+
<button class="{$theme.button} ec-{button}" on:click={next}><i class="{$theme.icon} ec-{button}"></i></button>
|
|
36
|
+
{:else if button === 'today'}
|
|
37
|
+
<button class="{$theme.button} ec-{button}" on:click={() => $date = cloneDate(today)} disabled={isToday}>{$buttonText[button]}</button>
|
|
38
|
+
{:else}
|
|
39
|
+
<button class="{$theme.button}{$view === button ? ' ' + $theme.active : ''} ec-{button}" on:click={() => $view = button}>{$buttonText[button]}</button>
|
|
40
|
+
{/if}
|
|
41
|
+
{/each}
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import './index.scss';
|
|
3
|
+
import {setContext} from 'svelte';
|
|
4
|
+
import {get} from 'svelte/store';
|
|
5
|
+
import {diff} from './storage/options';
|
|
6
|
+
import State from './storage/state';
|
|
7
|
+
import Toolbar from './Toolbar.svelte';
|
|
8
|
+
import {assign, toEventWithLocalDates, toViewWithLocalDates} from '@event-calendar/common';
|
|
9
|
+
|
|
10
|
+
export let plugins = [];
|
|
11
|
+
export let options = {};
|
|
12
|
+
|
|
13
|
+
let state = new State(plugins, options);
|
|
14
|
+
setContext('state', state);
|
|
15
|
+
|
|
16
|
+
let {_viewComponent, _interaction, _events, events, eventSources, height, theme} = state;
|
|
17
|
+
|
|
18
|
+
// Reactively update options that did change
|
|
19
|
+
$: for (let [name, value] of diff(options)) {
|
|
20
|
+
setOption(name, value);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
export function setOption(name, value) {
|
|
24
|
+
if (state.hasOwnProperty(name)) {
|
|
25
|
+
if (state[name].parse) {
|
|
26
|
+
value = state[name].parse(value);
|
|
27
|
+
}
|
|
28
|
+
state[name].set(value);
|
|
29
|
+
}
|
|
30
|
+
return this;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
export function getOption(name) {
|
|
34
|
+
return state.hasOwnProperty(name) ? get(state[name]) : undefined;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
export function refetchEvents() {
|
|
38
|
+
state._fetchedRange.set({start: undefined, end: undefined});
|
|
39
|
+
return this;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
export function getEventById(id) {
|
|
43
|
+
for (let event of get(state._events)) {
|
|
44
|
+
if (event.id == id) {
|
|
45
|
+
return toEventWithLocalDates(event);
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
return null;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
export function addEvent(event) {
|
|
52
|
+
updateEvents(events => events.concat(state.events.parse([event])));
|
|
53
|
+
return this;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
export function updateEvent(event) {
|
|
57
|
+
updateEvents(events => {
|
|
58
|
+
for (let e of events) {
|
|
59
|
+
if (e.id == event.id) {
|
|
60
|
+
assign(e, state.events.parse([event])[0]);
|
|
61
|
+
break;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
return events;
|
|
65
|
+
});
|
|
66
|
+
return this;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
export function removeEventById(id) {
|
|
70
|
+
updateEvents(events => events.filter(event => event.id != id));
|
|
71
|
+
return this;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
export function getView() {
|
|
75
|
+
return toViewWithLocalDates(state._view.get());
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
function updateEvents(func) {
|
|
79
|
+
if ($eventSources.length) {
|
|
80
|
+
$_events = func($_events);
|
|
81
|
+
} else {
|
|
82
|
+
$events = func($events);
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
</script>
|
|
86
|
+
|
|
87
|
+
<div class="{$theme.calendar}" style="height: {$height}">
|
|
88
|
+
<Toolbar/>
|
|
89
|
+
<svelte:component this={$_viewComponent}/>
|
|
90
|
+
<svelte:component this={$_interaction.component}/>
|
|
91
|
+
</div>
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import {getContext} from 'svelte';
|
|
3
|
+
import Buttons from './Buttons.svelte';
|
|
4
|
+
|
|
5
|
+
let {headerToolbar, theme} = getContext('state');
|
|
6
|
+
|
|
7
|
+
let sections = {
|
|
8
|
+
start: [],
|
|
9
|
+
center: [],
|
|
10
|
+
end: []
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
$: {
|
|
14
|
+
for (let key of Object.keys(sections)) {
|
|
15
|
+
sections[key] = $headerToolbar[key].split(' ').map(group => group.split(','));
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
</script>
|
|
19
|
+
|
|
20
|
+
<div class="{$theme.toolbar}">
|
|
21
|
+
{#each Object.keys(sections) as key}
|
|
22
|
+
<div>
|
|
23
|
+
{#each sections[key] as buttons}
|
|
24
|
+
{#if buttons.length > 1}
|
|
25
|
+
<div class="{$theme.buttonGroup}">
|
|
26
|
+
<Buttons {buttons}/>
|
|
27
|
+
</div>
|
|
28
|
+
{:else}
|
|
29
|
+
<Buttons {buttons}/>
|
|
30
|
+
{/if}
|
|
31
|
+
{/each}
|
|
32
|
+
</div>
|
|
33
|
+
{/each}
|
|
34
|
+
</div>
|
package/src/index.js
ADDED