@event-calendar/build 0.9.0 → 0.10.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 +182 -8
- package/event-calendar-modern.min.css +1 -1
- package/event-calendar-modern.min.js +2 -2
- package/event-calendar-modern.min.js.map +1 -1
- package/event-calendar.min.css +1 -1
- package/event-calendar.min.js +2 -2
- package/event-calendar.min.js.map +1 -1
- package/package.json +16 -6
package/README.md
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
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
|
|
|
5
5
|
Full-sized drag & drop JavaScript event calendar with resource view:
|
|
6
6
|
|
|
7
|
-
* Lightweight (
|
|
7
|
+
* Lightweight (49kb [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
|
|
|
@@ -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>
|
|
@@ -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;width:100%}.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}
|