@event-calendar/core 0.9.0 → 0.10.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 +181 -7
- package/index.css +1 -1
- package/index.js +62 -40
- package/package.json +12 -2
- package/src/Calendar.svelte +5 -2
- package/src/index.scss +43 -7
- package/src/storage/options.js +1 -0
- package/src/storage/state.js +4 -1
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
# Event Calendar [](https://www.jsdelivr.com/package/npm/@event-calendar/build)
|
|
1
|
+
# Event Calendar [](https://www.jsdelivr.com/package/npm/@event-calendar/build) [](https://www.paypal.me/vkurko/10usd) [](https://www.paypal.me/vkurko/1usd)
|
|
2
2
|
|
|
3
3
|
See [demo](https://vkurko.github.io/calendar/).
|
|
4
4
|
|
|
@@ -38,13 +38,17 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
|
|
|
38
38
|
- [eventContent](#eventcontent)
|
|
39
39
|
- [eventDidMount](#eventdidmount)
|
|
40
40
|
- [eventDragMinDistance](#eventdragmindistance)
|
|
41
|
+
- [eventDragStart](#eventdragstart)
|
|
41
42
|
</td><td>
|
|
42
43
|
|
|
43
|
-
- [eventDragStart](#eventdragstart)
|
|
44
44
|
- [eventDragStop](#eventdragstop)
|
|
45
45
|
- [eventDrop](#eventdrop)
|
|
46
|
+
- [eventDurationEditable](#eventdurationeditable)
|
|
46
47
|
- [eventMouseEnter](#eventmouseenter)
|
|
47
48
|
- [eventMouseLeave](#eventmouseleave)
|
|
49
|
+
- [eventResize](#eventresize)
|
|
50
|
+
- [eventResizeStart](#eventresizestart)
|
|
51
|
+
- [eventResizeStop](#eventresizestop)
|
|
48
52
|
- [eventSources](#eventsources)
|
|
49
53
|
- [eventStartEditable](#eventstarteditable)
|
|
50
54
|
- [eventTimeFormat](#eventtimeformat)
|
|
@@ -57,10 +61,10 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
|
|
|
57
61
|
- [highlightedDates](#highlighteddates)
|
|
58
62
|
- [lazyFetching](#lazyfetching)
|
|
59
63
|
- [listDayFormat](#listdayformat)
|
|
64
|
+
</td><td>
|
|
65
|
+
|
|
60
66
|
- [listDaySideFormat](#listdaysideformat)
|
|
61
67
|
- [loading](#loading)
|
|
62
|
-
</td><td>
|
|
63
|
-
|
|
64
68
|
- [locale](#locale)
|
|
65
69
|
- [monthMode](#monthmode)
|
|
66
70
|
- [moreLinkContent](#morelinkcontent)
|
|
@@ -422,7 +426,7 @@ This should be a value that can be parsed into a [Duration](#duration-object) ob
|
|
|
422
426
|
|
|
423
427
|
Determines whether the events on the calendar can be dragged and resized (both at the same time).
|
|
424
428
|
|
|
425
|
-
|
|
429
|
+
If you don't need both, use the more specific [eventStartEditable](#eventstarteditable) and [eventDurationEditable](#eventdurationeditable) instead.
|
|
426
430
|
|
|
427
431
|
### events
|
|
428
432
|
- Type `Array`
|
|
@@ -678,7 +682,7 @@ The current [View](#view-object) object
|
|
|
678
682
|
|
|
679
683
|
Callback function that is triggered when dragging stops, and the event has moved to a different day/time.
|
|
680
684
|
|
|
681
|
-
It is triggered after the event’s information has been modified and after the [eventDragStop](#
|
|
685
|
+
It is triggered after the event’s information has been modified and after the [eventDragStop](#eventdragstop) callback has been triggered.
|
|
682
686
|
|
|
683
687
|
```js
|
|
684
688
|
function (info) { }
|
|
@@ -764,6 +768,12 @@ The current [View](#view-object) object
|
|
|
764
768
|
</tr>
|
|
765
769
|
</table>
|
|
766
770
|
|
|
771
|
+
### eventDurationEditable
|
|
772
|
+
- Type `boolean`
|
|
773
|
+
- Default `true`
|
|
774
|
+
|
|
775
|
+
Determines whether calendar events can be resized.
|
|
776
|
+
|
|
767
777
|
### eventMouseEnter
|
|
768
778
|
- Type `function`
|
|
769
779
|
- Default `undefined`
|
|
@@ -858,6 +868,160 @@ The current [View](#view-object) object
|
|
|
858
868
|
</tr>
|
|
859
869
|
</table>
|
|
860
870
|
|
|
871
|
+
### eventResize
|
|
872
|
+
- Type `function`
|
|
873
|
+
- Default `undefined`
|
|
874
|
+
|
|
875
|
+
Callback function that is triggered when resizing stops, and the duration of the event has changed.
|
|
876
|
+
|
|
877
|
+
It is triggered after the event’s information has been modified and after the [eventResizeStop](#eventresizestop) callback has been triggered.
|
|
878
|
+
|
|
879
|
+
```js
|
|
880
|
+
function (info) { }
|
|
881
|
+
```
|
|
882
|
+
`info` is an object with the following properties:
|
|
883
|
+
<table>
|
|
884
|
+
<tr>
|
|
885
|
+
<td>
|
|
886
|
+
|
|
887
|
+
`event`
|
|
888
|
+
</td>
|
|
889
|
+
<td>
|
|
890
|
+
|
|
891
|
+
The associated [Event](#event-object) object
|
|
892
|
+
</td>
|
|
893
|
+
</tr>
|
|
894
|
+
<tr>
|
|
895
|
+
<td>
|
|
896
|
+
|
|
897
|
+
`oldEvent`
|
|
898
|
+
</td>
|
|
899
|
+
<td>
|
|
900
|
+
|
|
901
|
+
An [Event](#event-object) object that holds information about the event before the resize
|
|
902
|
+
</td>
|
|
903
|
+
</tr>
|
|
904
|
+
<tr>
|
|
905
|
+
<td>
|
|
906
|
+
|
|
907
|
+
`endDelta`
|
|
908
|
+
</td>
|
|
909
|
+
<td>
|
|
910
|
+
|
|
911
|
+
A [Duration](#duration-object) object that represents the amount of time the event’s end date was moved by
|
|
912
|
+
</td>
|
|
913
|
+
</tr>
|
|
914
|
+
<tr>
|
|
915
|
+
<td>
|
|
916
|
+
|
|
917
|
+
`revert`
|
|
918
|
+
</td>
|
|
919
|
+
<td>
|
|
920
|
+
|
|
921
|
+
A function that, if called, reverts the event’s end date to the values before the resize
|
|
922
|
+
</td>
|
|
923
|
+
</tr>
|
|
924
|
+
<tr>
|
|
925
|
+
<td>
|
|
926
|
+
|
|
927
|
+
`jsEvent`
|
|
928
|
+
</td>
|
|
929
|
+
<td>JavaScript native event object with low-level information such as click coordinates</td>
|
|
930
|
+
</tr>
|
|
931
|
+
<tr>
|
|
932
|
+
<td>
|
|
933
|
+
|
|
934
|
+
`view`
|
|
935
|
+
</td>
|
|
936
|
+
<td>
|
|
937
|
+
|
|
938
|
+
The current [View](#view-object) object
|
|
939
|
+
</td>
|
|
940
|
+
</tr>
|
|
941
|
+
</table>
|
|
942
|
+
|
|
943
|
+
### eventResizeStart
|
|
944
|
+
- Type `function`
|
|
945
|
+
- Default `undefined`
|
|
946
|
+
|
|
947
|
+
Callback function that is triggered when the event resizing begins.
|
|
948
|
+
|
|
949
|
+
```js
|
|
950
|
+
function (info) { }
|
|
951
|
+
```
|
|
952
|
+
`info` is an object with the following properties:
|
|
953
|
+
<table>
|
|
954
|
+
<tr>
|
|
955
|
+
<td>
|
|
956
|
+
|
|
957
|
+
`event`
|
|
958
|
+
</td>
|
|
959
|
+
<td>
|
|
960
|
+
|
|
961
|
+
The associated [Event](#event-object) object
|
|
962
|
+
</td>
|
|
963
|
+
</tr>
|
|
964
|
+
<tr>
|
|
965
|
+
<td>
|
|
966
|
+
|
|
967
|
+
`jsEvent`
|
|
968
|
+
</td>
|
|
969
|
+
<td>JavaScript native event object with low-level information such as click coordinates</td>
|
|
970
|
+
</tr>
|
|
971
|
+
<tr>
|
|
972
|
+
<td>
|
|
973
|
+
|
|
974
|
+
`view`
|
|
975
|
+
</td>
|
|
976
|
+
<td>
|
|
977
|
+
|
|
978
|
+
The current [View](#view-object) object
|
|
979
|
+
</td>
|
|
980
|
+
</tr>
|
|
981
|
+
</table>
|
|
982
|
+
|
|
983
|
+
### eventResizeStop
|
|
984
|
+
- Type `function`
|
|
985
|
+
- Default `undefined`
|
|
986
|
+
|
|
987
|
+
Callback function that is triggered when the event resizing stops.
|
|
988
|
+
|
|
989
|
+
It is triggered before the event’s information has been modified (if duration is changed) and before the [eventResize](#eventresize) callback is triggered.
|
|
990
|
+
|
|
991
|
+
```js
|
|
992
|
+
function (info) { }
|
|
993
|
+
```
|
|
994
|
+
`info` is an object with the following properties:
|
|
995
|
+
<table>
|
|
996
|
+
<tr>
|
|
997
|
+
<td>
|
|
998
|
+
|
|
999
|
+
`event`
|
|
1000
|
+
</td>
|
|
1001
|
+
<td>
|
|
1002
|
+
|
|
1003
|
+
The associated [Event](#event-object) object
|
|
1004
|
+
</td>
|
|
1005
|
+
</tr>
|
|
1006
|
+
<tr>
|
|
1007
|
+
<td>
|
|
1008
|
+
|
|
1009
|
+
`jsEvent`
|
|
1010
|
+
</td>
|
|
1011
|
+
<td>JavaScript native event object with low-level information such as click coordinates</td>
|
|
1012
|
+
</tr>
|
|
1013
|
+
<tr>
|
|
1014
|
+
<td>
|
|
1015
|
+
|
|
1016
|
+
`view`
|
|
1017
|
+
</td>
|
|
1018
|
+
<td>
|
|
1019
|
+
|
|
1020
|
+
The current [View](#view-object) object
|
|
1021
|
+
</td>
|
|
1022
|
+
</tr>
|
|
1023
|
+
</table>
|
|
1024
|
+
|
|
861
1025
|
### eventSources
|
|
862
1026
|
- Type `EventSource[]`
|
|
863
1027
|
- Default `[]`
|
|
@@ -1328,7 +1492,7 @@ This should be a value that can be parsed into a [Duration](#duration-object) ob
|
|
|
1328
1492
|
|
|
1329
1493
|
### theme
|
|
1330
1494
|
- Type `object` or `function`
|
|
1331
|
-
- 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'}`
|
|
1495
|
+
- 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', eventBody: 'ec-event-body', 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', resizer: 'ec-resizer', dragging: 'ec-dragging', resizingY: 'ec-resizing-y', resizingX: 'ec-resizing-x'}`
|
|
1332
1496
|
|
|
1333
1497
|
Defines the CSS classes that the Event Calendar uses to generate HTML markup.
|
|
1334
1498
|
|
|
@@ -1568,6 +1732,16 @@ Boolean (`true` or `false`) or `undefined`. The value overriding the [eventStart
|
|
|
1568
1732
|
<tr>
|
|
1569
1733
|
<td>
|
|
1570
1734
|
|
|
1735
|
+
`durationEditable`
|
|
1736
|
+
</td>
|
|
1737
|
+
<td>
|
|
1738
|
+
|
|
1739
|
+
Boolean (`true` or `false`) or `undefined`. The value overriding the [eventDurationEditable](#eventdurationeditable) setting for this specific event
|
|
1740
|
+
</td>
|
|
1741
|
+
</tr>
|
|
1742
|
+
<tr>
|
|
1743
|
+
<td>
|
|
1744
|
+
|
|
1571
1745
|
`display`
|
|
1572
1746
|
</td>
|
|
1573
1747
|
<td>
|
package/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.ec-flex{display:flex}.ec-
|
|
1
|
+
.ec-flex{display:flex}.ec-month .ec-body,.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;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:rgba(0,0,0,0);border-radius:0}.ec-event.ec-preview{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-body{display:flex;flex-direction:column}.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 rgba(0,0,0,0);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}.ec-resizer{position:absolute;-webkit-user-select:none;user-select:none}.ec-month .ec-resizer{top:0;right:0;bottom:0;width:50%;max-width:8px;cursor:ew-resize}.ec-week .ec-resizer{left:0;right:0;bottom:0;height:50%;max-height:8px;cursor:ns-resize}.ec-dragging{cursor:pointer !important}.ec-resizing-y{cursor:ns-resize !important}.ec-resizing-x{cursor:ew-resize !important}
|
package/index.js
CHANGED
|
@@ -69,6 +69,7 @@ function createOptions(plugins) {
|
|
|
69
69
|
dayHead: 'ec-day-head',
|
|
70
70
|
days: 'ec-days',
|
|
71
71
|
event: 'ec-event',
|
|
72
|
+
eventBody: 'ec-event-body',
|
|
72
73
|
eventTime: 'ec-event-time',
|
|
73
74
|
eventTitle: 'ec-event-title',
|
|
74
75
|
events: 'ec-events',
|
|
@@ -365,11 +366,14 @@ class State {
|
|
|
365
366
|
this._viewDates = viewDates(this);
|
|
366
367
|
this._view = view(this);
|
|
367
368
|
this._viewComponent = writable(undefined);
|
|
369
|
+
this._viewClass = writable(undefined);
|
|
368
370
|
// Interaction
|
|
369
371
|
this._interaction = writable({});
|
|
370
|
-
this.
|
|
372
|
+
this._iEvents = writable([null, null]); // interaction events: [drag/resize, pointer]
|
|
371
373
|
this._draggable = writable(noop);
|
|
374
|
+
this._resizable = writable(noop);
|
|
372
375
|
this._classes = writable(identity);
|
|
376
|
+
this._iClass = writable(undefined);
|
|
373
377
|
this._scroll = writable(undefined);
|
|
374
378
|
|
|
375
379
|
// Let plugins create their private stores
|
|
@@ -1224,7 +1228,7 @@ function create_fragment(ctx) {
|
|
|
1224
1228
|
let div_class_value;
|
|
1225
1229
|
let current;
|
|
1226
1230
|
toolbar = new Toolbar({});
|
|
1227
|
-
var switch_value = /*$_viewComponent*/ ctx[
|
|
1231
|
+
var switch_value = /*$_viewComponent*/ ctx[4];
|
|
1228
1232
|
|
|
1229
1233
|
function switch_props(ctx) {
|
|
1230
1234
|
return {};
|
|
@@ -1234,7 +1238,7 @@ function create_fragment(ctx) {
|
|
|
1234
1238
|
switch_instance0 = new switch_value(switch_props());
|
|
1235
1239
|
}
|
|
1236
1240
|
|
|
1237
|
-
var switch_value_1 = /*$_interaction*/ ctx[
|
|
1241
|
+
var switch_value_1 = /*$_interaction*/ ctx[5].component;
|
|
1238
1242
|
|
|
1239
1243
|
function switch_props_1(ctx) {
|
|
1240
1244
|
return {};
|
|
@@ -1252,8 +1256,14 @@ function create_fragment(ctx) {
|
|
|
1252
1256
|
if (switch_instance0) create_component(switch_instance0.$$.fragment);
|
|
1253
1257
|
t1 = space();
|
|
1254
1258
|
if (switch_instance1) create_component(switch_instance1.$$.fragment);
|
|
1255
|
-
|
|
1256
|
-
|
|
1259
|
+
|
|
1260
|
+
attr(div, "class", div_class_value = "" + (/*$theme*/ ctx[0].calendar + (/*$_viewClass*/ ctx[1]
|
|
1261
|
+
? ' ' + /*$theme*/ ctx[0][/*$_viewClass*/ ctx[1]]
|
|
1262
|
+
: '') + (/*$_iClass*/ ctx[2]
|
|
1263
|
+
? ' ' + /*$theme*/ ctx[0][/*$_iClass*/ ctx[2]]
|
|
1264
|
+
: '')));
|
|
1265
|
+
|
|
1266
|
+
set_style(div, "height", /*$height*/ ctx[3]);
|
|
1257
1267
|
},
|
|
1258
1268
|
m(target, anchor) {
|
|
1259
1269
|
insert(target, div, anchor);
|
|
@@ -1273,7 +1283,7 @@ function create_fragment(ctx) {
|
|
|
1273
1283
|
current = true;
|
|
1274
1284
|
},
|
|
1275
1285
|
p(ctx, [dirty]) {
|
|
1276
|
-
if (switch_value !== (switch_value = /*$_viewComponent*/ ctx[
|
|
1286
|
+
if (switch_value !== (switch_value = /*$_viewComponent*/ ctx[4])) {
|
|
1277
1287
|
if (switch_instance0) {
|
|
1278
1288
|
group_outros();
|
|
1279
1289
|
const old_component = switch_instance0;
|
|
@@ -1295,7 +1305,7 @@ function create_fragment(ctx) {
|
|
|
1295
1305
|
}
|
|
1296
1306
|
}
|
|
1297
1307
|
|
|
1298
|
-
if (switch_value_1 !== (switch_value_1 = /*$_interaction*/ ctx[
|
|
1308
|
+
if (switch_value_1 !== (switch_value_1 = /*$_interaction*/ ctx[5].component)) {
|
|
1299
1309
|
if (switch_instance1) {
|
|
1300
1310
|
group_outros();
|
|
1301
1311
|
const old_component = switch_instance1;
|
|
@@ -1317,12 +1327,16 @@ function create_fragment(ctx) {
|
|
|
1317
1327
|
}
|
|
1318
1328
|
}
|
|
1319
1329
|
|
|
1320
|
-
if (!current || dirty & /*$theme*/
|
|
1330
|
+
if (!current || dirty & /*$theme, $_viewClass, $_iClass*/ 7 && div_class_value !== (div_class_value = "" + (/*$theme*/ ctx[0].calendar + (/*$_viewClass*/ ctx[1]
|
|
1331
|
+
? ' ' + /*$theme*/ ctx[0][/*$_viewClass*/ ctx[1]]
|
|
1332
|
+
: '') + (/*$_iClass*/ ctx[2]
|
|
1333
|
+
? ' ' + /*$theme*/ ctx[0][/*$_iClass*/ ctx[2]]
|
|
1334
|
+
: '')))) {
|
|
1321
1335
|
attr(div, "class", div_class_value);
|
|
1322
1336
|
}
|
|
1323
1337
|
|
|
1324
|
-
if (!current || dirty & /*$height*/
|
|
1325
|
-
set_style(div, "height", /*$height*/ ctx[
|
|
1338
|
+
if (!current || dirty & /*$height*/ 8) {
|
|
1339
|
+
set_style(div, "height", /*$height*/ ctx[3]);
|
|
1326
1340
|
}
|
|
1327
1341
|
},
|
|
1328
1342
|
i(local) {
|
|
@@ -1352,6 +1366,8 @@ function instance($$self, $$props, $$invalidate) {
|
|
|
1352
1366
|
let $_events;
|
|
1353
1367
|
let $eventSources;
|
|
1354
1368
|
let $theme;
|
|
1369
|
+
let $_viewClass;
|
|
1370
|
+
let $_iClass;
|
|
1355
1371
|
let $height;
|
|
1356
1372
|
let $_viewComponent;
|
|
1357
1373
|
let $_interaction;
|
|
@@ -1359,13 +1375,15 @@ function instance($$self, $$props, $$invalidate) {
|
|
|
1359
1375
|
let { options = {} } = $$props;
|
|
1360
1376
|
let state = new State(plugins, options);
|
|
1361
1377
|
setContext('state', state);
|
|
1362
|
-
let { _viewComponent, _interaction, _events, events, eventSources, height, theme } = state;
|
|
1363
|
-
component_subscribe($$self, _viewComponent, value => $$invalidate(
|
|
1364
|
-
component_subscribe($$self,
|
|
1365
|
-
component_subscribe($$self,
|
|
1366
|
-
component_subscribe($$self,
|
|
1367
|
-
component_subscribe($$self,
|
|
1368
|
-
component_subscribe($$self,
|
|
1378
|
+
let { _viewComponent, _viewClass, _interaction, _iClass, _events, events, eventSources, height, theme } = state;
|
|
1379
|
+
component_subscribe($$self, _viewComponent, value => $$invalidate(4, $_viewComponent = value));
|
|
1380
|
+
component_subscribe($$self, _viewClass, value => $$invalidate(1, $_viewClass = value));
|
|
1381
|
+
component_subscribe($$self, _interaction, value => $$invalidate(5, $_interaction = value));
|
|
1382
|
+
component_subscribe($$self, _iClass, value => $$invalidate(2, $_iClass = value));
|
|
1383
|
+
component_subscribe($$self, _events, value => $$invalidate(27, $_events = value));
|
|
1384
|
+
component_subscribe($$self, events, value => $$invalidate(26, $events = value));
|
|
1385
|
+
component_subscribe($$self, eventSources, value => $$invalidate(28, $eventSources = value));
|
|
1386
|
+
component_subscribe($$self, height, value => $$invalidate(3, $height = value));
|
|
1369
1387
|
component_subscribe($$self, theme, value => $$invalidate(0, $theme = value));
|
|
1370
1388
|
|
|
1371
1389
|
function setOption(name, value) {
|
|
@@ -1443,12 +1461,12 @@ function instance($$self, $$props, $$invalidate) {
|
|
|
1443
1461
|
}
|
|
1444
1462
|
|
|
1445
1463
|
$$self.$$set = $$props => {
|
|
1446
|
-
if ('plugins' in $$props) $$invalidate(
|
|
1447
|
-
if ('options' in $$props) $$invalidate(
|
|
1464
|
+
if ('plugins' in $$props) $$invalidate(15, plugins = $$props.plugins);
|
|
1465
|
+
if ('options' in $$props) $$invalidate(16, options = $$props.options);
|
|
1448
1466
|
};
|
|
1449
1467
|
|
|
1450
1468
|
$$self.$$.update = () => {
|
|
1451
|
-
if ($$self.$$.dirty & /*options*/
|
|
1469
|
+
if ($$self.$$.dirty & /*options*/ 65536) {
|
|
1452
1470
|
// Reactively update options that did change
|
|
1453
1471
|
for (let [name, value] of diff(options)) {
|
|
1454
1472
|
setOption(name, value);
|
|
@@ -1458,11 +1476,15 @@ function instance($$self, $$props, $$invalidate) {
|
|
|
1458
1476
|
|
|
1459
1477
|
return [
|
|
1460
1478
|
$theme,
|
|
1479
|
+
$_viewClass,
|
|
1480
|
+
$_iClass,
|
|
1461
1481
|
$height,
|
|
1462
1482
|
$_viewComponent,
|
|
1463
1483
|
$_interaction,
|
|
1464
1484
|
_viewComponent,
|
|
1485
|
+
_viewClass,
|
|
1465
1486
|
_interaction,
|
|
1487
|
+
_iClass,
|
|
1466
1488
|
_events,
|
|
1467
1489
|
events,
|
|
1468
1490
|
eventSources,
|
|
@@ -1487,54 +1509,54 @@ class Calendar extends SvelteComponent {
|
|
|
1487
1509
|
super();
|
|
1488
1510
|
|
|
1489
1511
|
init(this, options, instance, create_fragment, safe_not_equal, {
|
|
1490
|
-
plugins:
|
|
1491
|
-
options:
|
|
1492
|
-
setOption:
|
|
1493
|
-
getOption:
|
|
1494
|
-
refetchEvents:
|
|
1495
|
-
getEvents:
|
|
1496
|
-
getEventById:
|
|
1497
|
-
addEvent:
|
|
1498
|
-
updateEvent:
|
|
1499
|
-
removeEventById:
|
|
1500
|
-
getView:
|
|
1512
|
+
plugins: 15,
|
|
1513
|
+
options: 16,
|
|
1514
|
+
setOption: 17,
|
|
1515
|
+
getOption: 18,
|
|
1516
|
+
refetchEvents: 19,
|
|
1517
|
+
getEvents: 20,
|
|
1518
|
+
getEventById: 21,
|
|
1519
|
+
addEvent: 22,
|
|
1520
|
+
updateEvent: 23,
|
|
1521
|
+
removeEventById: 24,
|
|
1522
|
+
getView: 25
|
|
1501
1523
|
});
|
|
1502
1524
|
}
|
|
1503
1525
|
|
|
1504
1526
|
get setOption() {
|
|
1505
|
-
return this.$$.ctx[
|
|
1527
|
+
return this.$$.ctx[17];
|
|
1506
1528
|
}
|
|
1507
1529
|
|
|
1508
1530
|
get getOption() {
|
|
1509
|
-
return this.$$.ctx[
|
|
1531
|
+
return this.$$.ctx[18];
|
|
1510
1532
|
}
|
|
1511
1533
|
|
|
1512
1534
|
get refetchEvents() {
|
|
1513
|
-
return this.$$.ctx[
|
|
1535
|
+
return this.$$.ctx[19];
|
|
1514
1536
|
}
|
|
1515
1537
|
|
|
1516
1538
|
get getEvents() {
|
|
1517
|
-
return this.$$.ctx[
|
|
1539
|
+
return this.$$.ctx[20];
|
|
1518
1540
|
}
|
|
1519
1541
|
|
|
1520
1542
|
get getEventById() {
|
|
1521
|
-
return this.$$.ctx[
|
|
1543
|
+
return this.$$.ctx[21];
|
|
1522
1544
|
}
|
|
1523
1545
|
|
|
1524
1546
|
get addEvent() {
|
|
1525
|
-
return this.$$.ctx[
|
|
1547
|
+
return this.$$.ctx[22];
|
|
1526
1548
|
}
|
|
1527
1549
|
|
|
1528
1550
|
get updateEvent() {
|
|
1529
|
-
return this.$$.ctx[
|
|
1551
|
+
return this.$$.ctx[23];
|
|
1530
1552
|
}
|
|
1531
1553
|
|
|
1532
1554
|
get removeEventById() {
|
|
1533
|
-
return this.$$.ctx[
|
|
1555
|
+
return this.$$.ctx[24];
|
|
1534
1556
|
}
|
|
1535
1557
|
|
|
1536
1558
|
get getView() {
|
|
1537
|
-
return this.$$.ctx[
|
|
1559
|
+
return this.$$.ctx[25];
|
|
1538
1560
|
}
|
|
1539
1561
|
}
|
|
1540
1562
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@event-calendar/core",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.10.0",
|
|
4
4
|
"title": "Event Calendar Core package",
|
|
5
5
|
"description": "Full-sized drag & drop event calendar with resource view",
|
|
6
6
|
"keywords": [
|
|
@@ -15,6 +15,16 @@
|
|
|
15
15
|
"url": "https://github.com/vkurko/calendar.git",
|
|
16
16
|
"directory": "packages/core"
|
|
17
17
|
},
|
|
18
|
+
"funding": [
|
|
19
|
+
{
|
|
20
|
+
"type": "paypal_$10",
|
|
21
|
+
"url": "https://paypal.me/vkurko/10usd"
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
"type": "paypal_$1",
|
|
25
|
+
"url": "https://paypal.me/vkurko/1usd"
|
|
26
|
+
}
|
|
27
|
+
],
|
|
18
28
|
"license": "MIT",
|
|
19
29
|
"type": "module",
|
|
20
30
|
"svelte": "src/index.js",
|
|
@@ -24,7 +34,7 @@
|
|
|
24
34
|
"./package.json": "./package.json"
|
|
25
35
|
},
|
|
26
36
|
"dependencies": {
|
|
27
|
-
"@event-calendar/common": "~0.
|
|
37
|
+
"@event-calendar/common": "~0.10.0",
|
|
28
38
|
"svelte": "^3.46.6"
|
|
29
39
|
}
|
|
30
40
|
}
|
package/src/Calendar.svelte
CHANGED
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
let state = new State(plugins, options);
|
|
14
14
|
setContext('state', state);
|
|
15
15
|
|
|
16
|
-
let {_viewComponent, _interaction, _events, events, eventSources, height, theme} = state;
|
|
16
|
+
let {_viewComponent, _viewClass, _interaction, _iClass, _events, events, eventSources, height, theme} = state;
|
|
17
17
|
|
|
18
18
|
// Reactively update options that did change
|
|
19
19
|
$: for (let [name, value] of diff(options)) {
|
|
@@ -88,7 +88,10 @@
|
|
|
88
88
|
}
|
|
89
89
|
</script>
|
|
90
90
|
|
|
91
|
-
<div
|
|
91
|
+
<div
|
|
92
|
+
class="{$theme.calendar}{$_viewClass ? ' ' + $theme[$_viewClass] : ''}{$_iClass ? ' ' + $theme[$_iClass] : ''}"
|
|
93
|
+
style="height: {$height}"
|
|
94
|
+
>
|
|
92
95
|
<Toolbar/>
|
|
93
96
|
<svelte:component this={$_viewComponent}/>
|
|
94
97
|
<svelte:component this={$_interaction.component}/>
|
package/src/index.scss
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
display: flex;
|
|
4
4
|
}
|
|
5
5
|
|
|
6
|
-
.ec-
|
|
6
|
+
.ec-month .ec-body,
|
|
7
7
|
.ec-days,
|
|
8
8
|
.ec-day,
|
|
9
9
|
.ec-day-title,
|
|
@@ -189,7 +189,7 @@
|
|
|
189
189
|
height: 100%; /* ie11 */
|
|
190
190
|
}
|
|
191
191
|
|
|
192
|
-
.ec-month.ec-uniform & {
|
|
192
|
+
.ec-month .ec-uniform & {
|
|
193
193
|
overflow: hidden;
|
|
194
194
|
}
|
|
195
195
|
|
|
@@ -215,7 +215,7 @@
|
|
|
215
215
|
flex: 1 0 auto; /* ie11 */
|
|
216
216
|
}
|
|
217
217
|
|
|
218
|
-
.ec-month.ec-uniform & {
|
|
218
|
+
.ec-month .ec-uniform & {
|
|
219
219
|
flex: 1 1 0%;
|
|
220
220
|
min-height: 0;
|
|
221
221
|
}
|
|
@@ -232,12 +232,12 @@
|
|
|
232
232
|
background-color: #e5f7fe;
|
|
233
233
|
}
|
|
234
234
|
|
|
235
|
-
.ec-month.ec-body & {
|
|
235
|
+
.ec-month .ec-body & {
|
|
236
236
|
min-height: 5em;
|
|
237
237
|
position: relative;
|
|
238
238
|
}
|
|
239
239
|
|
|
240
|
-
.ec-month.ec-uniform & {
|
|
240
|
+
.ec-month .ec-uniform & {
|
|
241
241
|
min-height: 0;
|
|
242
242
|
}
|
|
243
243
|
|
|
@@ -305,7 +305,6 @@
|
|
|
305
305
|
|
|
306
306
|
.ec-event {
|
|
307
307
|
display: flex;
|
|
308
|
-
flex-direction: column;
|
|
309
308
|
padding: 2px;
|
|
310
309
|
color: #fff;
|
|
311
310
|
box-sizing: border-box;
|
|
@@ -334,7 +333,6 @@
|
|
|
334
333
|
}
|
|
335
334
|
|
|
336
335
|
&.ec-preview {
|
|
337
|
-
cursor: pointer;
|
|
338
336
|
position: absolute;
|
|
339
337
|
z-index: 1000;
|
|
340
338
|
width: 100%;
|
|
@@ -356,6 +354,11 @@
|
|
|
356
354
|
}
|
|
357
355
|
}
|
|
358
356
|
|
|
357
|
+
.ec-event-body {
|
|
358
|
+
display: flex;
|
|
359
|
+
flex-direction: column;
|
|
360
|
+
}
|
|
361
|
+
|
|
359
362
|
.ec-event-tag {
|
|
360
363
|
width: 4px;
|
|
361
364
|
border-radius: 2px;
|
|
@@ -504,4 +507,37 @@
|
|
|
504
507
|
width: 12px;
|
|
505
508
|
pointer-events: none;
|
|
506
509
|
}
|
|
510
|
+
}
|
|
511
|
+
|
|
512
|
+
.ec-resizer {
|
|
513
|
+
position: absolute;
|
|
514
|
+
user-select: none;
|
|
515
|
+
|
|
516
|
+
.ec-month & {
|
|
517
|
+
top: 0;
|
|
518
|
+
right: 0;
|
|
519
|
+
bottom: 0;
|
|
520
|
+
width: 50%;
|
|
521
|
+
max-width: 8px;
|
|
522
|
+
cursor: ew-resize;
|
|
523
|
+
}
|
|
524
|
+
|
|
525
|
+
.ec-week & {
|
|
526
|
+
left: 0;
|
|
527
|
+
right: 0;
|
|
528
|
+
bottom: 0;
|
|
529
|
+
height: 50%;
|
|
530
|
+
max-height: 8px;
|
|
531
|
+
cursor: ns-resize;
|
|
532
|
+
}
|
|
533
|
+
}
|
|
534
|
+
|
|
535
|
+
.ec-dragging {
|
|
536
|
+
cursor: pointer!important;
|
|
537
|
+
}
|
|
538
|
+
.ec-resizing-y {
|
|
539
|
+
cursor: ns-resize!important;
|
|
540
|
+
}
|
|
541
|
+
.ec-resizing-x {
|
|
542
|
+
cursor: ew-resize!important;
|
|
507
543
|
}
|
package/src/storage/options.js
CHANGED
package/src/storage/state.js
CHANGED
|
@@ -39,11 +39,14 @@ export default class {
|
|
|
39
39
|
this._viewDates = viewDates(this);
|
|
40
40
|
this._view = view2(this);
|
|
41
41
|
this._viewComponent = writable(undefined);
|
|
42
|
+
this._viewClass = writable(undefined);
|
|
42
43
|
// Interaction
|
|
43
44
|
this._interaction = writable({});
|
|
44
|
-
this.
|
|
45
|
+
this._iEvents = writable([null, null]); // interaction events: [drag/resize, pointer]
|
|
45
46
|
this._draggable = writable(noop);
|
|
47
|
+
this._resizable = writable(noop);
|
|
46
48
|
this._classes = writable(identity);
|
|
49
|
+
this._iClass = writable(undefined);
|
|
47
50
|
this._scroll = writable(undefined);
|
|
48
51
|
|
|
49
52
|
// Let plugins create their private stores
|