@event-calendar/core 0.8.2 → 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 CHANGED
@@ -1,4 +1,4 @@
1
- # Event Calendar [![](https://data.jsdelivr.com/v1/package/npm/@event-calendar/build/badge)](https://www.jsdelivr.com/package/npm/@event-calendar/build)
1
+ # Event Calendar [![](https://data.jsdelivr.com/v1/package/npm/@event-calendar/build/badge)](https://www.jsdelivr.com/package/npm/@event-calendar/build) [![Donate](https://img.shields.io/badge/Donate_$10-PayPal-green.svg)](https://www.paypal.me/vkurko/10usd) [![Donate](https://img.shields.io/badge/Donate_$1-PayPal-green.svg)](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)
@@ -89,6 +93,7 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
89
93
  - [setOption](#setoption-name-value-)
90
94
  </td><td>
91
95
 
96
+ - [getEvents](#getevents)
92
97
  - [getEventById](#geteventbyid-id-)
93
98
  - [removeEventById](#removeeventbyid-id-)
94
99
  - [addEvent](#addevent-event-)
@@ -421,7 +426,7 @@ This should be a value that can be parsed into a [Duration](#duration-object) ob
421
426
 
422
427
  Determines whether the events on the calendar can be dragged and resized (both at the same time).
423
428
 
424
- Currently, only **dragging** is supported. See [eventStartEditable](#eventstarteditable).
429
+ If you don't need both, use the more specific [eventStartEditable](#eventstarteditable) and [eventDurationEditable](#eventdurationeditable) instead.
425
430
 
426
431
  ### events
427
432
  - Type `Array`
@@ -677,7 +682,7 @@ The current [View](#view-object) object
677
682
 
678
683
  Callback function that is triggered when dragging stops, and the event has moved to a different day/time.
679
684
 
680
- It is triggered after the event’s information has been modified and after the [eventDragStop](#eventdrop) callback has been triggered.
685
+ It is triggered after the event’s information has been modified and after the [eventDragStop](#eventdragstop) callback has been triggered.
681
686
 
682
687
  ```js
683
688
  function (info) { }
@@ -763,6 +768,12 @@ The current [View](#view-object) object
763
768
  </tr>
764
769
  </table>
765
770
 
771
+ ### eventDurationEditable
772
+ - Type `boolean`
773
+ - Default `true`
774
+
775
+ Determines whether calendar events can be resized.
776
+
766
777
  ### eventMouseEnter
767
778
  - Type `function`
768
779
  - Default `undefined`
@@ -857,6 +868,160 @@ The current [View](#view-object) object
857
868
  </tr>
858
869
  </table>
859
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
+
860
1025
  ### eventSources
861
1026
  - Type `EventSource[]`
862
1027
  - Default `[]`
@@ -1327,7 +1492,7 @@ This should be a value that can be parsed into a [Duration](#duration-object) ob
1327
1492
 
1328
1493
  ### theme
1329
1494
  - Type `object` or `function`
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'}`
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'}`
1331
1496
 
1332
1497
  Defines the CSS classes that the Event Calendar uses to generate HTML markup.
1333
1498
 
@@ -1461,6 +1626,11 @@ This method allows you to set new value to any calendar option.
1461
1626
  // E.g. Change the current date
1462
1627
  ec.setOption('date', new Date());
1463
1628
  ```
1629
+ ### getEvents()
1630
+ - Return value `Event[]` Array of [Event](#event-object) objects
1631
+
1632
+ Returns an array of events that the calendar has in memory.
1633
+
1464
1634
  ### getEventById( id )
1465
1635
  - Parameters
1466
1636
  - `id` `string|integer` The ID of the event
@@ -1562,6 +1732,16 @@ Boolean (`true` or `false`) or `undefined`. The value overriding the [eventStart
1562
1732
  <tr>
1563
1733
  <td>
1564
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
+
1565
1745
  `display`
1566
1746
  </td>
1567
1747
  <td>
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:-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}
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._interactionEvents = writable([null, null]); // drag, pointer
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
@@ -439,7 +443,7 @@ function parseOpts(opts, state) {
439
443
  }
440
444
  }
441
445
 
442
- /* packages/core/src/Buttons.svelte generated by Svelte v3.46.4 */
446
+ /* packages/core/src/Buttons.svelte generated by Svelte v3.46.6 */
443
447
 
444
448
  function get_each_context$1(ctx, list, i) {
445
449
  const child_ctx = ctx.slice();
@@ -842,7 +846,7 @@ class Buttons extends SvelteComponent {
842
846
  }
843
847
  }
844
848
 
845
- /* packages/core/src/Toolbar.svelte generated by Svelte v3.46.4 */
849
+ /* packages/core/src/Toolbar.svelte generated by Svelte v3.46.6 */
846
850
 
847
851
  function get_each_context(ctx, list, i) {
848
852
  const child_ctx = ctx.slice();
@@ -1212,7 +1216,7 @@ class Toolbar extends SvelteComponent {
1212
1216
  }
1213
1217
  }
1214
1218
 
1215
- /* packages/core/src/Calendar.svelte generated by Svelte v3.46.4 */
1219
+ /* packages/core/src/Calendar.svelte generated by Svelte v3.46.6 */
1216
1220
 
1217
1221
  function create_fragment(ctx) {
1218
1222
  let div;
@@ -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[2];
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[3].component;
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
- attr(div, "class", div_class_value = /*$theme*/ ctx[0].calendar);
1256
- set_style(div, "height", /*$height*/ ctx[1]);
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[2])) {
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[3].component)) {
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*/ 1 && div_class_value !== (div_class_value = /*$theme*/ ctx[0].calendar)) {
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*/ 2) {
1325
- set_style(div, "height", /*$height*/ ctx[1]);
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(2, $_viewComponent = value));
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));
1368
- component_subscribe($$self, height, value => $$invalidate(1, $height = value));
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) {
@@ -1391,6 +1409,10 @@ function instance($$self, $$props, $$invalidate) {
1391
1409
  return this;
1392
1410
  }
1393
1411
 
1412
+ function getEvents() {
1413
+ return get(state._events).map(toEventWithLocalDates);
1414
+ }
1415
+
1394
1416
  function getEventById(id) {
1395
1417
  for (let event of get(state._events)) {
1396
1418
  if (event.id == id) {
@@ -1439,12 +1461,12 @@ function instance($$self, $$props, $$invalidate) {
1439
1461
  }
1440
1462
 
1441
1463
  $$self.$$set = $$props => {
1442
- if ('plugins' in $$props) $$invalidate(11, plugins = $$props.plugins);
1443
- if ('options' in $$props) $$invalidate(12, options = $$props.options);
1464
+ if ('plugins' in $$props) $$invalidate(15, plugins = $$props.plugins);
1465
+ if ('options' in $$props) $$invalidate(16, options = $$props.options);
1444
1466
  };
1445
1467
 
1446
1468
  $$self.$$.update = () => {
1447
- if ($$self.$$.dirty & /*options*/ 4096) {
1469
+ if ($$self.$$.dirty & /*options*/ 65536) {
1448
1470
  // Reactively update options that did change
1449
1471
  for (let [name, value] of diff(options)) {
1450
1472
  setOption(name, value);
@@ -1454,11 +1476,15 @@ function instance($$self, $$props, $$invalidate) {
1454
1476
 
1455
1477
  return [
1456
1478
  $theme,
1479
+ $_viewClass,
1480
+ $_iClass,
1457
1481
  $height,
1458
1482
  $_viewComponent,
1459
1483
  $_interaction,
1460
1484
  _viewComponent,
1485
+ _viewClass,
1461
1486
  _interaction,
1487
+ _iClass,
1462
1488
  _events,
1463
1489
  events,
1464
1490
  eventSources,
@@ -1469,6 +1495,7 @@ function instance($$self, $$props, $$invalidate) {
1469
1495
  setOption,
1470
1496
  getOption,
1471
1497
  refetchEvents,
1498
+ getEvents,
1472
1499
  getEventById,
1473
1500
  addEvent,
1474
1501
  updateEvent,
@@ -1482,49 +1509,54 @@ class Calendar extends SvelteComponent {
1482
1509
  super();
1483
1510
 
1484
1511
  init(this, options, instance, create_fragment, safe_not_equal, {
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
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
1495
1523
  });
1496
1524
  }
1497
1525
 
1498
1526
  get setOption() {
1499
- return this.$$.ctx[13];
1527
+ return this.$$.ctx[17];
1500
1528
  }
1501
1529
 
1502
1530
  get getOption() {
1503
- return this.$$.ctx[14];
1531
+ return this.$$.ctx[18];
1504
1532
  }
1505
1533
 
1506
1534
  get refetchEvents() {
1507
- return this.$$.ctx[15];
1535
+ return this.$$.ctx[19];
1536
+ }
1537
+
1538
+ get getEvents() {
1539
+ return this.$$.ctx[20];
1508
1540
  }
1509
1541
 
1510
1542
  get getEventById() {
1511
- return this.$$.ctx[16];
1543
+ return this.$$.ctx[21];
1512
1544
  }
1513
1545
 
1514
1546
  get addEvent() {
1515
- return this.$$.ctx[17];
1547
+ return this.$$.ctx[22];
1516
1548
  }
1517
1549
 
1518
1550
  get updateEvent() {
1519
- return this.$$.ctx[18];
1551
+ return this.$$.ctx[23];
1520
1552
  }
1521
1553
 
1522
1554
  get removeEventById() {
1523
- return this.$$.ctx[19];
1555
+ return this.$$.ctx[24];
1524
1556
  }
1525
1557
 
1526
1558
  get getView() {
1527
- return this.$$.ctx[20];
1559
+ return this.$$.ctx[25];
1528
1560
  }
1529
1561
  }
1530
1562
 
package/package.json CHANGED
@@ -1,15 +1,30 @@
1
1
  {
2
2
  "name": "@event-calendar/core",
3
- "version": "0.8.2",
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
- "keywords": ["calendar", "event", "resource", "full-sized"],
6
+ "keywords": [
7
+ "calendar",
8
+ "event",
9
+ "resource",
10
+ "full-sized"
11
+ ],
7
12
  "homepage": "https://vkurko.github.io/calendar/",
8
13
  "repository": {
9
14
  "type": "git",
10
15
  "url": "https://github.com/vkurko/calendar.git",
11
16
  "directory": "packages/core"
12
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
+ ],
13
28
  "license": "MIT",
14
29
  "type": "module",
15
30
  "svelte": "src/index.js",
@@ -19,7 +34,7 @@
19
34
  "./package.json": "./package.json"
20
35
  },
21
36
  "dependencies": {
22
- "@event-calendar/common": "~0.8.2",
23
- "svelte": "^3.46.4"
37
+ "@event-calendar/common": "~0.10.0",
38
+ "svelte": "^3.46.6"
24
39
  }
25
- }
40
+ }
@@ -1,5 +1,5 @@
1
1
  <script>
2
- import './index.scss';
2
+ import '../index.css';
3
3
  import {setContext} from 'svelte';
4
4
  import {get} from 'svelte/store';
5
5
  import {diff} from './storage/options';
@@ -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)) {
@@ -39,6 +39,10 @@
39
39
  return this;
40
40
  }
41
41
 
42
+ export function getEvents() {
43
+ return get(state._events).map(toEventWithLocalDates);
44
+ }
45
+
42
46
  export function getEventById(id) {
43
47
  for (let event of get(state._events)) {
44
48
  if (event.id == id) {
@@ -84,7 +88,10 @@
84
88
  }
85
89
  </script>
86
90
 
87
- <div class="{$theme.calendar}" style="height: {$height}">
91
+ <div
92
+ class="{$theme.calendar}{$_viewClass ? ' ' + $theme[$_viewClass] : ''}{$_iClass ? ' ' + $theme[$_iClass] : ''}"
93
+ style="height: {$height}"
94
+ >
88
95
  <Toolbar/>
89
96
  <svelte:component this={$_viewComponent}/>
90
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-body.ec-month,
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
  }
@@ -68,6 +68,7 @@ export function createOptions(plugins) {
68
68
  dayHead: 'ec-day-head',
69
69
  days: 'ec-days',
70
70
  event: 'ec-event',
71
+ eventBody: 'ec-event-body',
71
72
  eventTime: 'ec-event-time',
72
73
  eventTitle: 'ec-event-title',
73
74
  events: 'ec-events',
@@ -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._interactionEvents = writable([null, null]); // drag, pointer
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