@event-calendar/core 0.3.2 → 0.6.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.
Files changed (4) hide show
  1. package/README.md +183 -56
  2. package/index.css +1 -1
  3. package/index.js +47 -20
  4. package/package.json +3 -3
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 (40.6kb [br](https://en.wikipedia.org/wiki/Brotli) compressed `modern` version)
7
+ * Lightweight (40.8kb [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
 
@@ -23,6 +23,7 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
23
23
  - [date](#date)
24
24
  - [dateClick](#dateclick)
25
25
  - [datesAboveResources](#datesaboveresources)
26
+ - [datesSet](#datesset)
26
27
  - [dayHeaderFormat](#dayheaderformat)
27
28
  - [displayEventEnd](#displayeventend)
28
29
  - [dragScroll](#dragscroll)
@@ -35,9 +36,9 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
35
36
  - [eventContent](#eventcontent)
36
37
  - [eventDidMount](#eventdidmount)
37
38
  - [eventDragMinDistance](#eventdragmindistance)
38
- - [eventDragStart](#eventdragstart)
39
39
  </td><td>
40
40
 
41
+ - [eventDragStart](#eventdragstart)
41
42
  - [eventDragStop](#eventdragstop)
42
43
  - [eventDrop](#eventdrop)
43
44
  - [eventMouseEnter](#eventmouseenter)
@@ -54,14 +55,15 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
54
55
  - [highlightedDates](#highlighteddates)
55
56
  - [lazyFetching](#lazyfetching)
56
57
  - [listDayFormat](#listdayformat)
57
- - [listDaySideFormat](#listdaysideformat)
58
58
  </td><td>
59
59
 
60
+ - [listDaySideFormat](#listdaysideformat)
60
61
  - [loading](#loading)
61
62
  - [locale](#locale)
62
63
  - [monthMode](#monthmode)
63
64
  - [noEventsClick](#noeventsclick)
64
65
  - [noEventsContent](#noeventscontent)
66
+ - [pointer](#pointer)
65
67
  - [resources](#resources)
66
68
  - [scrollTime](#scrolltime)
67
69
  - [slotDuration](#slotduration)
@@ -123,16 +125,16 @@ You must use at least one plugin that provides a view. The following plugins are
123
125
  Then, in your Svelte component, use the calendar something like this:
124
126
  ```html
125
127
  <script>
126
- import Calendar from '@event-calendar/core';
127
- import TimeGrid from '@event-calendar/time-grid';
128
-
129
- let plugins = [TimeGrid];
130
- let options = {
131
- view: 'timeGridWeek',
132
- events: [
133
- // your list of events
134
- ]
135
- };
128
+ import Calendar from '@event-calendar/core';
129
+ import TimeGrid from '@event-calendar/time-grid';
130
+
131
+ let plugins = [TimeGrid];
132
+ let options = {
133
+ view: 'timeGridWeek',
134
+ events: [
135
+ // your list of events
136
+ ]
137
+ };
136
138
  </script>
137
139
 
138
140
  <Calendar {plugins} {options} />
@@ -143,16 +145,16 @@ import Calendar from '@event-calendar/core';
143
145
  import TimeGrid from '@event-calendar/time-grid';
144
146
 
145
147
  let ec = new Calendar({
146
- target: document.getElementById('ec'),
147
- props: {
148
- plugins: [TimeGrid],
149
- options: {
150
- view: 'timeGridWeek',
151
- events: [
152
- // your list of events
153
- ]
148
+ target: document.getElementById('ec'),
149
+ props: {
150
+ plugins: [TimeGrid],
151
+ options: {
152
+ view: 'timeGridWeek',
153
+ events: [
154
+ // your list of events
155
+ ]
156
+ }
154
157
  }
155
- }
156
158
  });
157
159
  ```
158
160
 
@@ -167,10 +169,10 @@ Include the following lines of code in the `<head>` section of your page:
167
169
  Then initialize the calendar with something like this:
168
170
  ```js
169
171
  let ec = new EventCalendar(document.getElementById('ec'), {
170
- view: 'timeGridWeek',
171
- events: [
172
- // your list of events
173
- ]
172
+ view: 'timeGridWeek',
173
+ events: [
174
+ // your list of events
175
+ ]
174
176
  });
175
177
  ```
176
178
 
@@ -182,17 +184,17 @@ ec.setOption('slotDuration', '01:00');
182
184
  In Svelte, you can simply update the original `options` object.
183
185
  ```html
184
186
  <script>
185
- import Calendar from '@event-calendar/core';
186
- import TimeGrid from '@event-calendar/time-grid';
187
+ import Calendar from '@event-calendar/core';
188
+ import TimeGrid from '@event-calendar/time-grid';
187
189
 
188
- let plugins = [TimeGrid];
189
- let options = {
190
- view: 'timeGridWeek'
191
- };
190
+ let plugins = [TimeGrid];
191
+ let options = {
192
+ view: 'timeGridWeek'
193
+ };
192
194
 
193
- function updateOptions() {
194
- options.slotDuration = '01:00';
195
- }
195
+ function updateOptions() {
196
+ options.slotDuration = '01:00';
197
+ }
196
198
  </script>
197
199
 
198
200
  <button on:click={updateOptions}>Change slot duration</button>
@@ -236,6 +238,20 @@ function (dateClickInfo) {}
236
238
  <tr>
237
239
  <td>
238
240
 
241
+ `dateStr`
242
+ </td>
243
+ <td>ISO8601 string representation of the date</td>
244
+ </tr>
245
+ <tr>
246
+ <td>
247
+
248
+ `dayEl`
249
+ </td>
250
+ <td>HTML element that represents the whole-day that was clicked on</td>
251
+ </tr>
252
+ <tr>
253
+ <td>
254
+
239
255
  `jsEvent`
240
256
  </td>
241
257
  <td>JavaScript native event object with low-level information such as click coordinates</td>
@@ -268,6 +284,57 @@ If the current view is a resource view, the [Resource](#resource-object) object
268
284
 
269
285
  Determines whether the resource view should render the date headings above the resource headings.
270
286
 
287
+ ### datesSet
288
+ - Type `function`
289
+ - Default `undefined`
290
+
291
+ Callback function that is triggered when the date range of the calendar was originally set or changed by clicking the previous/next buttons, changing the view, manipulating the current date via the API, etc.
292
+
293
+ ```js
294
+ function (info) {}
295
+ ```
296
+ `info` is an object with the following properties:
297
+ <table>
298
+ <tr>
299
+ <td>
300
+
301
+ `start`
302
+ </td>
303
+ <td>JavaScript Date object for the beginning of the range the calendar needs events for</td>
304
+ </tr>
305
+ <tr>
306
+ <td>
307
+
308
+ `end`
309
+ </td>
310
+ <td>JavaScript Date object for the end of the range the calendar needs events for. Note: This value is exclusive</td>
311
+ </tr>
312
+ <tr>
313
+ <td>
314
+
315
+ `startStr`
316
+ </td>
317
+ <td>ISO8601 string representation of the start date</td>
318
+ </tr>
319
+ <tr>
320
+ <td>
321
+
322
+ `endStr`
323
+ </td>
324
+ <td>ISO8601 string representation of the end date</td>
325
+ </tr>
326
+ <tr>
327
+ <td>
328
+
329
+ `view`
330
+ </td>
331
+ <td>
332
+
333
+ The current [View](#view-object) object
334
+ </td>
335
+ </tr>
336
+ </table>
337
+
271
338
  ### dayHeaderFormat
272
339
  - Type `object` or `function`
273
340
  - Default `{weekday: 'short', month: 'numeric', day: 'numeric'}`
@@ -281,7 +348,7 @@ This value can be either an object with options for the native JavaScript [Intl.
281
348
 
282
349
  ```js
283
350
  function (date) {
284
- // return formatted date string
351
+ // return formatted date string
285
352
  }
286
353
  ```
287
354
  <table>
@@ -413,7 +480,7 @@ This value can be either a string containing HTML `'<p>...</p>'`, an object cont
413
480
 
414
481
  ```js
415
482
  function (eventInfo) {
416
- // return string or object
483
+ // return string or object
417
484
  }
418
485
  ```
419
486
  `eventInfo` is an object with the following properties:
@@ -842,6 +909,20 @@ function(fetchInfo, successCallback, failureCallback) { }
842
909
  </td>
843
910
  <td>JavaScript Date object for the end of the range the calendar needs events for. Note: This value is exclusive</td>
844
911
  </tr>
912
+ <tr>
913
+ <td>
914
+
915
+ `startStr`
916
+ </td>
917
+ <td>ISO8601 string representation of the start date</td>
918
+ </tr>
919
+ <tr>
920
+ <td>
921
+
922
+ `endStr`
923
+ </td>
924
+ <td>ISO8601 string representation of the end date</td>
925
+ </tr>
845
926
  </table>
846
927
 
847
928
  The `successCallback` function must be called by the custom function with an array of parsable [Event](#event-object) objects.
@@ -869,7 +950,7 @@ This value can be either an object with options for the native JavaScript [Intl.
869
950
 
870
951
  ```js
871
952
  function (time) {
872
- // return formatted time string
953
+ // return formatted time string
873
954
  }
874
955
  ```
875
956
  <table>
@@ -1103,6 +1184,12 @@ function () {
1103
1184
  }
1104
1185
  ```
1105
1186
 
1187
+ ### pointer
1188
+ - Type `boolean`
1189
+ - Default `false`
1190
+
1191
+ Enables mouse cursor pointer in `timeGrid`/`resourceTimeGrid` views.
1192
+
1106
1193
  ### resources
1107
1194
  - Type `Array`
1108
1195
  - Default `[]`
@@ -1266,22 +1353,22 @@ Methods allow you to manipulate the Event Calendar after initialization. They ar
1266
1353
  In Svelte, methods are available from a component instance:
1267
1354
  ```html
1268
1355
  <script>
1269
- import Calendar from '@event-calendar/core';
1270
- import TimeGrid from '@event-calendar/time-grid';
1271
-
1272
- let ec;
1273
- let plugins = [TimeGrid];
1274
- let options = {
1275
- view: 'timeGridWeek',
1276
- eventSources: [{events: function() {
1277
- console.log('fetching...');
1278
- return [];
1279
- }}]
1280
- };
1281
-
1282
- function invokeMethod() {
1283
- ec.refetchEvents();
1284
- }
1356
+ import Calendar from '@event-calendar/core';
1357
+ import TimeGrid from '@event-calendar/time-grid';
1358
+
1359
+ let ec;
1360
+ let plugins = [TimeGrid];
1361
+ let options = {
1362
+ view: 'timeGridWeek',
1363
+ eventSources: [{events: function() {
1364
+ console.log('fetching...');
1365
+ return [];
1366
+ }}]
1367
+ };
1368
+
1369
+ function invokeMethod() {
1370
+ ec.refetchEvents();
1371
+ }
1285
1372
  </script>
1286
1373
 
1287
1374
  <button on:click={invokeMethod}>Refetch events</button>
@@ -1393,11 +1480,33 @@ Here are all properties that exist in Event object:
1393
1480
  <tr>
1394
1481
  <td>
1395
1482
 
1483
+ `editable`
1484
+ </td>
1485
+ <td>
1486
+
1487
+ Boolean (`true` or `false`) or `undefined`. The value overriding the [editable](#editable) setting for this specific event
1488
+ </td>
1489
+ </tr>
1490
+ <tr>
1491
+ <td>
1492
+
1493
+ `startEditable`
1494
+ </td>
1495
+ <td>
1496
+
1497
+ Boolean (`true` or `false`) or `undefined`. The value overriding the [eventStartEditable](#eventstarteditable) setting for this specific event
1498
+ </td>
1499
+ </tr>
1500
+ <tr>
1501
+ <td>
1502
+
1396
1503
  `display`
1397
1504
  </td>
1398
1505
  <td>
1399
1506
 
1400
1507
  The rendering type of the event. Can be `'auto'` or `'background'`
1508
+
1509
+ In addition, in your callback functions, you may get the `'ghost'` and `'preview'` for this property, which are internal values and are used to display events during drag-and-drop operations
1401
1510
  </td>
1402
1511
  </tr>
1403
1512
  <tr>
@@ -1490,13 +1599,31 @@ Here are all admissible fields for the event’s input object:
1490
1599
  <tr>
1491
1600
  <td>
1492
1601
 
1602
+ `editable`
1603
+ </td>
1604
+ <td>
1605
+
1606
+ `boolean` Overrides the master [editable](#editable) option for this single event. Default `undefined`
1607
+ </td>
1608
+ </tr>
1609
+ <tr>
1610
+ <td>
1611
+
1612
+ `startEditable`
1613
+ </td>
1614
+ <td>
1615
+
1616
+ `boolean` Overrides the master [eventStartEditable](#eventstarteditable) option for this single event. Default `undefined`
1617
+ </td>
1618
+ </tr>
1619
+ <tr>
1620
+ <td>
1621
+
1493
1622
  `display`
1494
1623
  </td>
1495
1624
  <td>
1496
1625
 
1497
1626
  `string` The rendering type of the event. Can be `'auto'` or `'background'`. Default `'auto'`
1498
-
1499
- In addition, in your callback functions, you may get the `'ghost'` and `'preview'` for this property, which are internal values and are used to display events during drag-and-drop operations
1500
1627
  </td>
1501
1628
  </tr>
1502
1629
  <tr>
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-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-day{border-style:none none none solid}.ec-day.ec-today{background-color:#fcf8e3}.ec-day.ec-highlight{background-color:#e5f7fe}.ec-month .ec-day{min-height:5em}.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-list .ec-day:first-child{border-top:none}.ec-month .ec-day-head{text-align:right;padding:4px}.ec-month .ec-preview{top:0}.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}.ec-month .ec-event{position:relative}.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:99999;width:100%;-webkit-user-select:none;user-select:none;opacity:.8}.ec-event-tag{width:4px;border-radius:2px;margin-right:8px}.ec-event-time{overflow:hidden;white-space:nowrap;margin-bottom:1px;flex-shrink:0}.ec-event-title{overflow:hidden}.ec-week .ec-event-title{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}.ec-body:not(.ec-compact) .ec-line:nth-child(even):after{border-bottom-style:dotted}
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-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-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}.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-list .ec-day:first-child{border-top:none}.ec-month .ec-day-head{text-align:right;padding:4px}.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}.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:99999;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;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-bottom:1px;flex-shrink:0}.ec-event-title{overflow:hidden}.ec-week .ec-event-title{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}
package/index.js CHANGED
@@ -1,7 +1,7 @@
1
- import { is_function, tick, SvelteComponent, init, safe_not_equal, empty, insert, detach, noop, destroy_each, component_subscribe, set_store_value, element, text, attr, append, listen, set_data, space, transition_in, group_outros, transition_out, check_outros, create_component, mount_component, destroy_component, set_style } from 'svelte/internal';
1
+ import { is_function, tick, noop, identity, SvelteComponent, init, safe_not_equal, empty, insert, detach, destroy_each, component_subscribe, set_store_value, element, text, attr, append, listen, set_data, space, transition_in, group_outros, transition_out, check_outros, create_component, mount_component, destroy_component, set_style } from 'svelte/internal';
2
2
  import { getContext, setContext } from 'svelte';
3
3
  import { derived, writable, get } from 'svelte/store';
4
- import { setMidnight, createDate, createDuration, createEvents, createEventSources, assign, cloneDate, prevClosestDay, addDuration, nextClosestDay, DAY_IN_SECONDS, subtractDay, derived2, addDay, createView, toLocalDate, toISOString, writable2, intl, intlRange, subtractDuration, toEventWithLocalDates, toViewWithLocalDates } from '@event-calendar/common';
4
+ import { setMidnight, createDate, createDuration, createEvents, createEventSources, assign, cloneDate, prevClosestDay, addDuration, subtractDay, derived2, addDay, createView, nextClosestDay, DAY_IN_SECONDS, toLocalDate, toISOString, writable2, intl, intlRange, subtractDuration, toEventWithLocalDates, toViewWithLocalDates } from '@event-calendar/common';
5
5
 
6
6
  function createOptions(plugins) {
7
7
  let options = {
@@ -10,6 +10,7 @@ function createOptions(plugins) {
10
10
  },
11
11
  date: new Date(),
12
12
  dateClick: undefined,
13
+ datesSet: undefined,
13
14
  dayHeaderFormat: {
14
15
  weekday: 'short',
15
16
  month: 'numeric',
@@ -146,7 +147,7 @@ function diff(options) {
146
147
  }
147
148
 
148
149
  function activeRange(state) {
149
- return derived(
150
+ let _activeRange = derived(
150
151
  [state._currentRange, state.firstDay, state.monthMode, state.slotMinTime, state.slotMaxTime],
151
152
  ([$_currentRange, $firstDay, $monthMode, $slotMinTime, $slotMaxTime]) => {
152
153
  let start = cloneDate($_currentRange.start);
@@ -167,6 +168,24 @@ function activeRange(state) {
167
168
  return {start, end};
168
169
  }
169
170
  );
171
+
172
+ let debounce = 0;
173
+ derived([_activeRange, state.datesSet], ([$_activeRange, $datesSet]) => {
174
+ if ($datesSet && !debounce) {
175
+ ++debounce;
176
+ tick().then(() => {
177
+ --debounce;
178
+ $datesSet({
179
+ start: toLocalDate($_activeRange.start),
180
+ end: toLocalDate($_activeRange.end),
181
+ startStr: toISOString($_activeRange.start),
182
+ endStr: toISOString($_activeRange.end)
183
+ });
184
+ });
185
+ }
186
+ }).subscribe(noop);
187
+
188
+ return _activeRange;
170
189
  }
171
190
 
172
191
  function currentRange(state) {
@@ -265,13 +284,18 @@ function events(state) {
265
284
  set(events);
266
285
  stopLoading();
267
286
  };
287
+ // Prepare other stuff
288
+ let startStr = toISOString($_activeRange.start);
289
+ let endStr = toISOString($_activeRange.end);
268
290
  // Loop over event sources
269
291
  for (let source of $eventSources) {
270
292
  if (is_function(source.events)) {
271
293
  // Events as a function
272
294
  let result = source.events({
273
295
  start: toLocalDate($_activeRange.start),
274
- end: toLocalDate($_activeRange.end)
296
+ end: toLocalDate($_activeRange.end),
297
+ startStr,
298
+ endStr
275
299
  }, success, failure);
276
300
  if (result !== undefined) {
277
301
  Promise.resolve(result).then(success, failure);
@@ -280,8 +304,8 @@ function events(state) {
280
304
  // Events as a JSON feed
281
305
  // Prepare params
282
306
  let params = is_function(source.extraParams) ? source.extraParams() : assign({}, source.extraParams);
283
- params.start = toISOString($_activeRange.start);
284
- params.end = toISOString($_activeRange.end);
307
+ params.start = startStr;
308
+ params.end = endStr;
285
309
  params = new URLSearchParams(params);
286
310
  // Prepare fetch
287
311
  let url = source.url, headers = {}, body;
@@ -337,9 +361,12 @@ class State {
337
361
  this._viewDates = viewDates(this);
338
362
  this._view = view(this);
339
363
  this._viewComponent = writable(undefined);
364
+ // Interaction
340
365
  this._interaction = writable({});
341
- this._interactionComponent = writable(null);
342
- this._dragEvent = writable(null);
366
+ this._interactionEvents = writable([null, null]); // drag, pointer
367
+ this._draggable = writable(noop);
368
+ this._classes = writable(identity);
369
+ this._scroll = writable(undefined);
343
370
 
344
371
  // Let plugins create their private stores
345
372
  for (let plugin of plugins) {
@@ -408,7 +435,7 @@ function parseOpts(opts, state) {
408
435
  }
409
436
  }
410
437
 
411
- /* packages/core/src/Buttons.svelte generated by Svelte v3.42.3 */
438
+ /* packages/core/src/Buttons.svelte generated by Svelte v3.42.4 */
412
439
 
413
440
  function get_each_context$1(ctx, list, i) {
414
441
  const child_ctx = ctx.slice();
@@ -811,7 +838,7 @@ class Buttons extends SvelteComponent {
811
838
  }
812
839
  }
813
840
 
814
- /* packages/core/src/Toolbar.svelte generated by Svelte v3.42.3 */
841
+ /* packages/core/src/Toolbar.svelte generated by Svelte v3.42.4 */
815
842
 
816
843
  function get_each_context(ctx, list, i) {
817
844
  const child_ctx = ctx.slice();
@@ -1181,7 +1208,7 @@ class Toolbar extends SvelteComponent {
1181
1208
  }
1182
1209
  }
1183
1210
 
1184
- /* packages/core/src/Calendar.svelte generated by Svelte v3.42.3 */
1211
+ /* packages/core/src/Calendar.svelte generated by Svelte v3.42.4 */
1185
1212
 
1186
1213
  function create_fragment(ctx) {
1187
1214
  let div;
@@ -1203,7 +1230,7 @@ function create_fragment(ctx) {
1203
1230
  switch_instance0 = new switch_value(switch_props());
1204
1231
  }
1205
1232
 
1206
- var switch_value_1 = /*$_interactionComponent*/ ctx[3];
1233
+ var switch_value_1 = /*$_interaction*/ ctx[3].component;
1207
1234
 
1208
1235
  function switch_props_1(ctx) {
1209
1236
  return {};
@@ -1264,7 +1291,7 @@ function create_fragment(ctx) {
1264
1291
  }
1265
1292
  }
1266
1293
 
1267
- if (switch_value_1 !== (switch_value_1 = /*$_interactionComponent*/ ctx[3])) {
1294
+ if (switch_value_1 !== (switch_value_1 = /*$_interaction*/ ctx[3].component)) {
1268
1295
  if (switch_instance1) {
1269
1296
  group_outros();
1270
1297
  const old_component = switch_instance1;
@@ -1320,14 +1347,14 @@ function instance($$self, $$props, $$invalidate) {
1320
1347
  let $theme;
1321
1348
  let $height;
1322
1349
  let $_viewComponent;
1323
- let $_interactionComponent;
1350
+ let $_interaction;
1324
1351
  let { plugins = [] } = $$props;
1325
1352
  let { options = {} } = $$props;
1326
1353
  let state = new State(plugins, options);
1327
1354
  setContext('state', state);
1328
- let { _viewComponent, _interactionComponent, height, theme } = state;
1355
+ let { _viewComponent, _interaction, height, theme } = state;
1329
1356
  component_subscribe($$self, _viewComponent, value => $$invalidate(2, $_viewComponent = value));
1330
- component_subscribe($$self, _interactionComponent, value => $$invalidate(3, $_interactionComponent = value));
1357
+ component_subscribe($$self, _interaction, value => $$invalidate(3, $_interaction = value));
1331
1358
  component_subscribe($$self, height, value => $$invalidate(1, $height = value));
1332
1359
  component_subscribe($$self, theme, value => $$invalidate(0, $theme = value));
1333
1360
 
@@ -1384,8 +1411,8 @@ function instance($$self, $$props, $$invalidate) {
1384
1411
  return this;
1385
1412
  }
1386
1413
 
1387
- function removeEventById(eventId) {
1388
- state._events.update(events => events.filter(event => event.id != eventId));
1414
+ function removeEventById(id) {
1415
+ state._events.update(events => events.filter(event => event.id != id));
1389
1416
  return this;
1390
1417
  }
1391
1418
 
@@ -1411,9 +1438,9 @@ function instance($$self, $$props, $$invalidate) {
1411
1438
  $theme,
1412
1439
  $height,
1413
1440
  $_viewComponent,
1414
- $_interactionComponent,
1441
+ $_interaction,
1415
1442
  _viewComponent,
1416
- _interactionComponent,
1443
+ _interaction,
1417
1444
  height,
1418
1445
  theme,
1419
1446
  plugins,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@event-calendar/core",
3
- "version": "0.3.2",
3
+ "version": "0.6.0",
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"],
@@ -18,7 +18,7 @@
18
18
  "./package.json": "./package.json"
19
19
  },
20
20
  "dependencies": {
21
- "@event-calendar/common": "~0.3.2",
22
- "svelte": "^3.42.3"
21
+ "@event-calendar/common": "~0.6.0",
22
+ "svelte": "^3.42.4"
23
23
  }
24
24
  }