@event-calendar/core 0.11.2 → 0.13.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 +201 -6
- package/index.css +1 -1
- package/index.js +86 -70
- package/package.json +3 -3
- package/src/Buttons.svelte +30 -30
- package/src/Calendar.svelte +99 -92
- package/src/Toolbar.svelte +26 -26
- package/src/index.scss +7 -3
- package/src/storage/options.js +1 -0
package/README.md
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
# Event Calendar [](https://www.jsdelivr.com/package/npm/@event-calendar/build) [](https://www.jsdelivr.com/package/npm/@event-calendar/build) [](https://www.npmjs.com/package/@event-calendar/core) [](https://www.paypal.me/vkurko/10usd)
|
|
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 (54kb [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
|
|
|
@@ -40,12 +40,13 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
|
|
|
40
40
|
- [eventContent](#eventcontent)
|
|
41
41
|
- [eventDidMount](#eventdidmount)
|
|
42
42
|
- [eventDragMinDistance](#eventdragmindistance)
|
|
43
|
-
</td><td>
|
|
44
|
-
|
|
45
43
|
- [eventDragStart](#eventdragstart)
|
|
46
44
|
- [eventDragStop](#eventdragstop)
|
|
47
45
|
- [eventDrop](#eventdrop)
|
|
46
|
+
</td><td>
|
|
47
|
+
|
|
48
48
|
- [eventDurationEditable](#eventdurationeditable)
|
|
49
|
+
- [eventLongPressDelay](#eventlongpressdelay)
|
|
49
50
|
- [eventMouseEnter](#eventmouseenter)
|
|
50
51
|
- [eventMouseLeave](#eventmouseleave)
|
|
51
52
|
- [eventResize](#eventresize)
|
|
@@ -63,18 +64,24 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
|
|
|
63
64
|
- [highlightedDates](#highlighteddates)
|
|
64
65
|
- [lazyFetching](#lazyfetching)
|
|
65
66
|
- [listDayFormat](#listdayformat)
|
|
66
|
-
</td><td>
|
|
67
|
-
|
|
68
67
|
- [listDaySideFormat](#listdaysideformat)
|
|
69
68
|
- [loading](#loading)
|
|
70
69
|
- [locale](#locale)
|
|
70
|
+
- [longPressDelay](#longpressdelay)
|
|
71
71
|
- [monthMode](#monthmode)
|
|
72
|
+
</td><td>
|
|
73
|
+
|
|
72
74
|
- [moreLinkContent](#morelinkcontent)
|
|
73
75
|
- [noEventsClick](#noeventsclick)
|
|
74
76
|
- [noEventsContent](#noeventscontent)
|
|
75
77
|
- [nowIndicator](#nowindicator)
|
|
76
78
|
- [pointer](#pointer)
|
|
77
79
|
- [resources](#resources)
|
|
80
|
+
- [select](#select)
|
|
81
|
+
- [selectable](#selectable)
|
|
82
|
+
- [selectBackgroundColor](#selectbackgroundcolor)
|
|
83
|
+
- [selectLongPressDelay](#selectlongpressdelay)
|
|
84
|
+
- [selectMinDistance](#selectmindistance)
|
|
78
85
|
- [scrollTime](#scrolltime)
|
|
79
86
|
- [slotDuration](#slotduration)
|
|
80
87
|
- [slotHeight](#slotheight)
|
|
@@ -82,6 +89,10 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
|
|
|
82
89
|
- [slotMaxTime](#slotmaxtime)
|
|
83
90
|
- [slotMinTime](#slotmintime)
|
|
84
91
|
- [theme](#theme)
|
|
92
|
+
- [titleFormat](#titleformat)
|
|
93
|
+
- [unselect](#unselect)
|
|
94
|
+
- [unselectAuto](#unselectauto)
|
|
95
|
+
- [unselectCancel](#unselectcancel)
|
|
85
96
|
- [view](#view)
|
|
86
97
|
- [viewDidMount](#viewdidmount)
|
|
87
98
|
- [views](#views)
|
|
@@ -104,6 +115,9 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
|
|
|
104
115
|
</td><td>
|
|
105
116
|
|
|
106
117
|
- [getView](#getview)
|
|
118
|
+
</td><td>
|
|
119
|
+
|
|
120
|
+
- [unselect](#unselect-1)
|
|
107
121
|
</td></tr>
|
|
108
122
|
</table>
|
|
109
123
|
- [Event object](#event-object)
|
|
@@ -811,6 +825,14 @@ The current [View](#view-object) object
|
|
|
811
825
|
|
|
812
826
|
Determines whether calendar events can be resized.
|
|
813
827
|
|
|
828
|
+
### eventLongPressDelay
|
|
829
|
+
- Type `integer`
|
|
830
|
+
- Default `undefined`
|
|
831
|
+
|
|
832
|
+
For touch devices, the amount of time (in milliseconds) the user must hold down a tap before the event becomes draggable/resizable.
|
|
833
|
+
|
|
834
|
+
If not specified, it falls back to [longPressDelay](#longpressdelay).
|
|
835
|
+
|
|
814
836
|
### eventMouseEnter
|
|
815
837
|
- Type `function`
|
|
816
838
|
- Default `undefined`
|
|
@@ -1356,6 +1378,14 @@ function (isLoading) { }
|
|
|
1356
1378
|
|
|
1357
1379
|
Defines the `locales` parameter for the native JavaScript [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) object that the Event Calendar uses to format date and time strings in options such as [dayHeaderFormat](#dayheaderformat), [eventTimeFormat](#eventtimeformat), etc.
|
|
1358
1380
|
|
|
1381
|
+
### longPressDelay
|
|
1382
|
+
- Type `integer`
|
|
1383
|
+
- Default `1000`
|
|
1384
|
+
|
|
1385
|
+
For touch devices, the amount of time (in milliseconds) the user must hold down a tap before the event becomes draggable/resizable or the date becomes selectable.
|
|
1386
|
+
|
|
1387
|
+
For a more granular configuration, see [eventLongPressDelay](#eventlongpressdelay) and [selectLongPressDelay](#selectlongpressdelay).
|
|
1388
|
+
|
|
1359
1389
|
### monthMode
|
|
1360
1390
|
- Type `boolean`
|
|
1361
1391
|
- Default `false`
|
|
@@ -1460,6 +1490,111 @@ Enables mouse cursor pointer in `timeGrid`/`resourceTimeGrid` views.
|
|
|
1460
1490
|
|
|
1461
1491
|
Array of plain objects that will be parsed into [Resource](#resource-object) objects for displaying in the resource view.
|
|
1462
1492
|
|
|
1493
|
+
### select
|
|
1494
|
+
- Type `function`
|
|
1495
|
+
- Default `undefined`
|
|
1496
|
+
|
|
1497
|
+
Callback function that is triggered when a date/time selection is made.
|
|
1498
|
+
|
|
1499
|
+
```js
|
|
1500
|
+
function (selectInfo) { }
|
|
1501
|
+
```
|
|
1502
|
+
`selectInfo` is an object with the following properties:
|
|
1503
|
+
<table>
|
|
1504
|
+
<tr>
|
|
1505
|
+
<td>
|
|
1506
|
+
|
|
1507
|
+
`start`
|
|
1508
|
+
</td>
|
|
1509
|
+
<td>JavaScript Date object indicating the start of the selection</td>
|
|
1510
|
+
</tr>
|
|
1511
|
+
<tr>
|
|
1512
|
+
<td>
|
|
1513
|
+
|
|
1514
|
+
`end`
|
|
1515
|
+
</td>
|
|
1516
|
+
<td>JavaScript Date object indicating the end of the selection</td>
|
|
1517
|
+
</tr>
|
|
1518
|
+
<tr>
|
|
1519
|
+
<td>
|
|
1520
|
+
|
|
1521
|
+
`startStr`
|
|
1522
|
+
</td>
|
|
1523
|
+
<td>ISO8601 string representation of the start date</td>
|
|
1524
|
+
</tr>
|
|
1525
|
+
<tr>
|
|
1526
|
+
<td>
|
|
1527
|
+
|
|
1528
|
+
`endStr`
|
|
1529
|
+
</td>
|
|
1530
|
+
<td>ISO8601 string representation of the end date</td>
|
|
1531
|
+
</tr>
|
|
1532
|
+
<tr>
|
|
1533
|
+
<td>
|
|
1534
|
+
|
|
1535
|
+
`allDay`
|
|
1536
|
+
</td>
|
|
1537
|
+
<td>
|
|
1538
|
+
|
|
1539
|
+
Boolean (`true` or `false`). Determines if the selection has occurred in the `all-day` slot</td>
|
|
1540
|
+
</tr>
|
|
1541
|
+
<tr>
|
|
1542
|
+
<td>
|
|
1543
|
+
|
|
1544
|
+
`jsEvent`
|
|
1545
|
+
</td>
|
|
1546
|
+
<td>JavaScript native event object with low-level information such as click coordinates</td>
|
|
1547
|
+
</tr>
|
|
1548
|
+
<tr>
|
|
1549
|
+
<td>
|
|
1550
|
+
|
|
1551
|
+
`view`
|
|
1552
|
+
</td>
|
|
1553
|
+
<td>
|
|
1554
|
+
|
|
1555
|
+
The current [View](#view-object) object
|
|
1556
|
+
</td>
|
|
1557
|
+
</tr>
|
|
1558
|
+
<tr>
|
|
1559
|
+
<td>
|
|
1560
|
+
|
|
1561
|
+
`resource`
|
|
1562
|
+
</td>
|
|
1563
|
+
<td>
|
|
1564
|
+
|
|
1565
|
+
If the current view is a resource view, the [Resource](#resource-object) object that was selected
|
|
1566
|
+
</td>
|
|
1567
|
+
</tr>
|
|
1568
|
+
</table>
|
|
1569
|
+
|
|
1570
|
+
### selectable
|
|
1571
|
+
- Type `boolean`
|
|
1572
|
+
- Default `false`
|
|
1573
|
+
|
|
1574
|
+
Determines whether the user is allowed to highlight multiple days or time slots by clicking and moving the pointer.
|
|
1575
|
+
|
|
1576
|
+
### selectBackgroundColor
|
|
1577
|
+
- Type `string`
|
|
1578
|
+
- Default `undefined`
|
|
1579
|
+
|
|
1580
|
+
Sets the background color for the event indicating the current selection. See [selectable](#selectable).
|
|
1581
|
+
|
|
1582
|
+
You can use any of the CSS color formats such `'#f00'`, `'#ff0000'`, `'rgb(255,0,0)'`, or `'red'`.
|
|
1583
|
+
|
|
1584
|
+
### selectLongPressDelay
|
|
1585
|
+
- Type `integer`
|
|
1586
|
+
- Default `undefined`
|
|
1587
|
+
|
|
1588
|
+
For touch devices, the amount of time (in milliseconds) the user must hold down a tap before the date becomes selectable.
|
|
1589
|
+
|
|
1590
|
+
If not specified, it falls back to [longPressDelay](#longpressdelay).
|
|
1591
|
+
|
|
1592
|
+
### selectMinDistance
|
|
1593
|
+
- Type `integer`
|
|
1594
|
+
- Default `0`
|
|
1595
|
+
|
|
1596
|
+
Defines how many pixels the user’s mouse must move before the selection begins.
|
|
1597
|
+
|
|
1463
1598
|
### scrollTime
|
|
1464
1599
|
- Type `string`, `integer` or `object`
|
|
1465
1600
|
- Default `'06:00:00'`
|
|
@@ -1576,6 +1711,61 @@ function (date) {
|
|
|
1576
1711
|
</tr>
|
|
1577
1712
|
</table>
|
|
1578
1713
|
|
|
1714
|
+
### unselect
|
|
1715
|
+
- Type `function`
|
|
1716
|
+
- Default `undefined`
|
|
1717
|
+
|
|
1718
|
+
Callback function that is triggered when the current selection is cleared.
|
|
1719
|
+
|
|
1720
|
+
A selection can be cleared for a number of reasons:
|
|
1721
|
+
|
|
1722
|
+
- The user clicks away from the current selection (this does not happen when [unselectAuto](#unselectauto) is `false`).
|
|
1723
|
+
- The user makes a new selection. The unselect callback will be fired before the new selection occurs.
|
|
1724
|
+
- The user navigates forward or backward in the current view, or switches to a new view.
|
|
1725
|
+
- The [unselect](#unselect-1) method is called via the API.
|
|
1726
|
+
|
|
1727
|
+
```js
|
|
1728
|
+
function (info) { }
|
|
1729
|
+
```
|
|
1730
|
+
`info` is an object with the following properties:
|
|
1731
|
+
<table>
|
|
1732
|
+
<tr>
|
|
1733
|
+
<td>
|
|
1734
|
+
|
|
1735
|
+
`jsEvent`
|
|
1736
|
+
</td>
|
|
1737
|
+
<td>
|
|
1738
|
+
|
|
1739
|
+
JavaScript native event object with low-level information such as click coordinates.
|
|
1740
|
+
|
|
1741
|
+
If unselect has been triggered via the [unselect](#unselect-1) method, jsEvent will be `undefined`</td>
|
|
1742
|
+
</tr>
|
|
1743
|
+
<tr>
|
|
1744
|
+
<td>
|
|
1745
|
+
|
|
1746
|
+
`view`
|
|
1747
|
+
</td>
|
|
1748
|
+
<td>
|
|
1749
|
+
|
|
1750
|
+
The current [View](#view-object) object
|
|
1751
|
+
</td>
|
|
1752
|
+
</tr>
|
|
1753
|
+
</table>
|
|
1754
|
+
|
|
1755
|
+
### unselectAuto
|
|
1756
|
+
- Type `boolean`
|
|
1757
|
+
- Default `true`
|
|
1758
|
+
|
|
1759
|
+
Determines whether clicking elsewhere on the page will clear the current selection. See [selectable](#selectable).
|
|
1760
|
+
|
|
1761
|
+
### unselectCancel
|
|
1762
|
+
- Type `string`
|
|
1763
|
+
- Default `''`
|
|
1764
|
+
|
|
1765
|
+
A CSS selector that specifies elements that will ignore the [unselectAuto](#unselectauto) option.
|
|
1766
|
+
|
|
1767
|
+
Clicking on elements that match this CSS selector will prevent the current selection from being cleared (because of the [unselectAuto](#unselectauto) option).
|
|
1768
|
+
|
|
1579
1769
|
### view
|
|
1580
1770
|
- Type `string`
|
|
1581
1771
|
- Default `'resourceTimeGridWeek'`
|
|
@@ -1706,6 +1896,11 @@ Refetches events from all sources.
|
|
|
1706
1896
|
|
|
1707
1897
|
Returns the [View](#view-object) object for the current view.
|
|
1708
1898
|
|
|
1899
|
+
### unselect()
|
|
1900
|
+
- Return value `EventCalendar` The calendar instance for chaining
|
|
1901
|
+
|
|
1902
|
+
Clears the current selection. See [selectable](#selectable).
|
|
1903
|
+
|
|
1709
1904
|
## Event object
|
|
1710
1905
|
This is a JavaScript object that the Event Calendar uses to store information about a calendar event.
|
|
1711
1906
|
|
package/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
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-all-day,.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-all-day{display:flex;flex-shrink:0;border-top:none}.ec-all-day .ec-days{border-bottom:none}.ec-all-day .ec-day{padding-bottom:4px}.ec-all-day .ec-event-time{display:none}.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;display:flex;flex-direction:column;justify-content:center}.ec-sidebar-title{visibility:hidden;overflow-y:hidden;height:0;text-align:right}.ec-all-day .ec-sidebar-title{visibility:visible;height:auto;padding:8px 0}.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,.ec-all-day .ec-event{position:relative
|
|
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;-webkit-tap-highlight-color:rgba(0,0,0,0)}.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-all-day,.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-all-day{display:flex;flex-shrink:0;border-top:none}.ec-all-day .ec-days{border-bottom:none}.ec-all-day .ec-day{padding-bottom:4px}.ec-all-day .ec-event-time{display:none}.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;display:flex;flex-direction:column;justify-content:center}.ec-sidebar-title{visibility:hidden;overflow-y:hidden;height:0;text-align:right}.ec-all-day .ec-sidebar-title{visibility:visible;height:auto;padding:8px 0}.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,.ec-all-day .ec-event{position:relative}.ec-week .ec-body .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-month .ec-event-body,.ec-all-day .ec-event-body{flex-direction:row}.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,.ec-all-day .ec-event-title{min-height:1.5em;white-space:nowrap;text-overflow:ellipsis}.ec-week .ec-body .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}.ec-ghost{opacity:.5;-webkit-user-select:none;user-select: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,.ec-all-day .ec-resizer{top:0;right:0;bottom:0;width:50%;max-width:8px;cursor:ew-resize}.ec-week .ec-body .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
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { is_function, tick, noop, identity, SvelteComponent, init, safe_not_equal, empty, insert, destroy_each, detach, component_subscribe, set_store_value, element, text, attr, append, listen, set_data, transition_in, group_outros, check_outros, transition_out, space, 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, destroy_each, detach, component_subscribe, set_store_value, element, text, attr, append, listen, set_data, transition_in, group_outros, check_outros, transition_out, space, create_component, mount_component, destroy_component, construct_svelte_component, set_style } from 'svelte/internal';
|
|
2
2
|
import { getContext, setContext } from 'svelte';
|
|
3
3
|
import { derived, writable, get } from 'svelte/store';
|
|
4
4
|
import { assign, setMidnight, createDate, createDuration, createEvents, createEventSources, cloneDate, prevClosestDay, nextClosestDay, DAY_IN_SECONDS, addDuration, subtractDay, toLocalDate, toISOString, derived2, addDay, createView, writable2, intl, intlRange, subtractDuration, toEventWithLocalDates, toViewWithLocalDates } from '@event-calendar/common';
|
|
@@ -48,6 +48,7 @@ function createOptions(plugins) {
|
|
|
48
48
|
locale: undefined,
|
|
49
49
|
monthMode: false,
|
|
50
50
|
nowIndicator: false,
|
|
51
|
+
selectable: false,
|
|
51
52
|
scrollTime: '06:00:00',
|
|
52
53
|
slotDuration: '00:30:00',
|
|
53
54
|
slotHeight: 24, // ec option
|
|
@@ -447,7 +448,7 @@ function parseOpts(opts, state) {
|
|
|
447
448
|
}
|
|
448
449
|
}
|
|
449
450
|
|
|
450
|
-
/* packages/core/src/Buttons.svelte generated by Svelte v3.
|
|
451
|
+
/* packages/core/src/Buttons.svelte generated by Svelte v3.51.0 */
|
|
451
452
|
|
|
452
453
|
function get_each_context$1(ctx, list, i) {
|
|
453
454
|
const child_ctx = ctx.slice();
|
|
@@ -455,7 +456,7 @@ function get_each_context$1(ctx, list, i) {
|
|
|
455
456
|
return child_ctx;
|
|
456
457
|
}
|
|
457
458
|
|
|
458
|
-
// (38:
|
|
459
|
+
// (38:4) {:else}
|
|
459
460
|
function create_else_block$1(ctx) {
|
|
460
461
|
let button;
|
|
461
462
|
let t_value = /*$buttonText*/ ctx[5][/*button*/ ctx[23]] + "";
|
|
@@ -504,7 +505,7 @@ function create_else_block$1(ctx) {
|
|
|
504
505
|
};
|
|
505
506
|
}
|
|
506
507
|
|
|
507
|
-
// (36:
|
|
508
|
+
// (36:33)
|
|
508
509
|
function create_if_block_4(ctx) {
|
|
509
510
|
let button;
|
|
510
511
|
let t_value = /*$buttonText*/ ctx[5][/*button*/ ctx[23]] + "";
|
|
@@ -548,7 +549,7 @@ function create_if_block_4(ctx) {
|
|
|
548
549
|
};
|
|
549
550
|
}
|
|
550
551
|
|
|
551
|
-
// (34:
|
|
552
|
+
// (34:32)
|
|
552
553
|
function create_if_block_3(ctx) {
|
|
553
554
|
let button;
|
|
554
555
|
let i;
|
|
@@ -590,7 +591,7 @@ function create_if_block_3(ctx) {
|
|
|
590
591
|
};
|
|
591
592
|
}
|
|
592
593
|
|
|
593
|
-
// (32:
|
|
594
|
+
// (32:31)
|
|
594
595
|
function create_if_block_2(ctx) {
|
|
595
596
|
let button;
|
|
596
597
|
let i;
|
|
@@ -632,7 +633,7 @@ function create_if_block_2(ctx) {
|
|
|
632
633
|
};
|
|
633
634
|
}
|
|
634
635
|
|
|
635
|
-
// (30:
|
|
636
|
+
// (30:32)
|
|
636
637
|
function create_if_block_1(ctx) {
|
|
637
638
|
let h2;
|
|
638
639
|
let t;
|
|
@@ -661,7 +662,7 @@ function create_if_block_1(ctx) {
|
|
|
661
662
|
};
|
|
662
663
|
}
|
|
663
664
|
|
|
664
|
-
// (29:
|
|
665
|
+
// (29:4) {#if button == ''}
|
|
665
666
|
function create_if_block$1(ctx) {
|
|
666
667
|
return { c: noop, m: noop, p: noop, d: noop };
|
|
667
668
|
}
|
|
@@ -850,7 +851,7 @@ class Buttons extends SvelteComponent {
|
|
|
850
851
|
}
|
|
851
852
|
}
|
|
852
853
|
|
|
853
|
-
/* packages/core/src/Toolbar.svelte generated by Svelte v3.
|
|
854
|
+
/* packages/core/src/Toolbar.svelte generated by Svelte v3.51.0 */
|
|
854
855
|
|
|
855
856
|
function get_each_context(ctx, list, i) {
|
|
856
857
|
const child_ctx = ctx.slice();
|
|
@@ -864,7 +865,7 @@ function get_each_context_1(ctx, list, i) {
|
|
|
864
865
|
return child_ctx;
|
|
865
866
|
}
|
|
866
867
|
|
|
867
|
-
// (28:
|
|
868
|
+
// (28:16) {:else}
|
|
868
869
|
function create_else_block(ctx) {
|
|
869
870
|
let buttons;
|
|
870
871
|
let current;
|
|
@@ -898,7 +899,7 @@ function create_else_block(ctx) {
|
|
|
898
899
|
};
|
|
899
900
|
}
|
|
900
901
|
|
|
901
|
-
// (24:
|
|
902
|
+
// (24:16) {#if buttons.length > 1}
|
|
902
903
|
function create_if_block(ctx) {
|
|
903
904
|
let div;
|
|
904
905
|
let buttons;
|
|
@@ -942,7 +943,7 @@ function create_if_block(ctx) {
|
|
|
942
943
|
};
|
|
943
944
|
}
|
|
944
945
|
|
|
945
|
-
// (23:
|
|
946
|
+
// (23:12) {#each sections[key] as buttons}
|
|
946
947
|
function create_each_block_1(ctx) {
|
|
947
948
|
let current_block_type_index;
|
|
948
949
|
let if_block;
|
|
@@ -1012,7 +1013,7 @@ function create_each_block_1(ctx) {
|
|
|
1012
1013
|
};
|
|
1013
1014
|
}
|
|
1014
1015
|
|
|
1015
|
-
// (21:
|
|
1016
|
+
// (21:4) {#each Object.keys(sections) as key}
|
|
1016
1017
|
function create_each_block(ctx) {
|
|
1017
1018
|
let div;
|
|
1018
1019
|
let t;
|
|
@@ -1220,7 +1221,7 @@ class Toolbar extends SvelteComponent {
|
|
|
1220
1221
|
}
|
|
1221
1222
|
}
|
|
1222
1223
|
|
|
1223
|
-
/* packages/core/src/Calendar.svelte generated by Svelte v3.
|
|
1224
|
+
/* packages/core/src/Calendar.svelte generated by Svelte v3.51.0 */
|
|
1224
1225
|
|
|
1225
1226
|
function create_fragment(ctx) {
|
|
1226
1227
|
let div;
|
|
@@ -1232,24 +1233,24 @@ function create_fragment(ctx) {
|
|
|
1232
1233
|
let div_class_value;
|
|
1233
1234
|
let current;
|
|
1234
1235
|
toolbar = new Toolbar({});
|
|
1235
|
-
var switch_value = /*$_viewComponent*/ ctx[
|
|
1236
|
+
var switch_value = /*$_viewComponent*/ ctx[5];
|
|
1236
1237
|
|
|
1237
1238
|
function switch_props(ctx) {
|
|
1238
1239
|
return {};
|
|
1239
1240
|
}
|
|
1240
1241
|
|
|
1241
1242
|
if (switch_value) {
|
|
1242
|
-
switch_instance0 =
|
|
1243
|
+
switch_instance0 = construct_svelte_component(switch_value, switch_props());
|
|
1243
1244
|
}
|
|
1244
1245
|
|
|
1245
|
-
var switch_value_1 = /*$_interaction*/ ctx[
|
|
1246
|
+
var switch_value_1 = /*$_interaction*/ ctx[0].component;
|
|
1246
1247
|
|
|
1247
1248
|
function switch_props_1(ctx) {
|
|
1248
1249
|
return {};
|
|
1249
1250
|
}
|
|
1250
1251
|
|
|
1251
1252
|
if (switch_value_1) {
|
|
1252
|
-
switch_instance1 =
|
|
1253
|
+
switch_instance1 = construct_svelte_component(switch_value_1, switch_props_1());
|
|
1253
1254
|
}
|
|
1254
1255
|
|
|
1255
1256
|
return {
|
|
@@ -1261,33 +1262,25 @@ function create_fragment(ctx) {
|
|
|
1261
1262
|
t1 = space();
|
|
1262
1263
|
if (switch_instance1) create_component(switch_instance1.$$.fragment);
|
|
1263
1264
|
|
|
1264
|
-
attr(div, "class", div_class_value = "" + (/*$theme*/ ctx[
|
|
1265
|
-
? ' ' + /*$theme*/ ctx[
|
|
1266
|
-
: '') + (/*$_iClass*/ ctx[
|
|
1267
|
-
? ' ' + /*$theme*/ ctx[
|
|
1265
|
+
attr(div, "class", div_class_value = "" + (/*$theme*/ ctx[1].calendar + (/*$_viewClass*/ ctx[2]
|
|
1266
|
+
? ' ' + /*$theme*/ ctx[1][/*$_viewClass*/ ctx[2]]
|
|
1267
|
+
: '') + (/*$_iClass*/ ctx[3]
|
|
1268
|
+
? ' ' + /*$theme*/ ctx[1][/*$_iClass*/ ctx[3]]
|
|
1268
1269
|
: '')));
|
|
1269
1270
|
|
|
1270
|
-
set_style(div, "height", /*$height*/ ctx[
|
|
1271
|
+
set_style(div, "height", /*$height*/ ctx[4]);
|
|
1271
1272
|
},
|
|
1272
1273
|
m(target, anchor) {
|
|
1273
1274
|
insert(target, div, anchor);
|
|
1274
1275
|
mount_component(toolbar, div, null);
|
|
1275
1276
|
append(div, t0);
|
|
1276
|
-
|
|
1277
|
-
if (switch_instance0) {
|
|
1278
|
-
mount_component(switch_instance0, div, null);
|
|
1279
|
-
}
|
|
1280
|
-
|
|
1277
|
+
if (switch_instance0) mount_component(switch_instance0, div, null);
|
|
1281
1278
|
append(div, t1);
|
|
1282
|
-
|
|
1283
|
-
if (switch_instance1) {
|
|
1284
|
-
mount_component(switch_instance1, div, null);
|
|
1285
|
-
}
|
|
1286
|
-
|
|
1279
|
+
if (switch_instance1) mount_component(switch_instance1, div, null);
|
|
1287
1280
|
current = true;
|
|
1288
1281
|
},
|
|
1289
|
-
p(ctx,
|
|
1290
|
-
if (switch_value !== (switch_value = /*$_viewComponent*/ ctx[
|
|
1282
|
+
p(ctx, dirty) {
|
|
1283
|
+
if (switch_value !== (switch_value = /*$_viewComponent*/ ctx[5])) {
|
|
1291
1284
|
if (switch_instance0) {
|
|
1292
1285
|
group_outros();
|
|
1293
1286
|
const old_component = switch_instance0;
|
|
@@ -1300,7 +1293,7 @@ function create_fragment(ctx) {
|
|
|
1300
1293
|
}
|
|
1301
1294
|
|
|
1302
1295
|
if (switch_value) {
|
|
1303
|
-
switch_instance0 =
|
|
1296
|
+
switch_instance0 = construct_svelte_component(switch_value, switch_props());
|
|
1304
1297
|
create_component(switch_instance0.$$.fragment);
|
|
1305
1298
|
transition_in(switch_instance0.$$.fragment, 1);
|
|
1306
1299
|
mount_component(switch_instance0, div, t1);
|
|
@@ -1309,7 +1302,7 @@ function create_fragment(ctx) {
|
|
|
1309
1302
|
}
|
|
1310
1303
|
}
|
|
1311
1304
|
|
|
1312
|
-
if (switch_value_1 !== (switch_value_1 = /*$_interaction*/ ctx[
|
|
1305
|
+
if (switch_value_1 !== (switch_value_1 = /*$_interaction*/ ctx[0].component)) {
|
|
1313
1306
|
if (switch_instance1) {
|
|
1314
1307
|
group_outros();
|
|
1315
1308
|
const old_component = switch_instance1;
|
|
@@ -1322,7 +1315,7 @@ function create_fragment(ctx) {
|
|
|
1322
1315
|
}
|
|
1323
1316
|
|
|
1324
1317
|
if (switch_value_1) {
|
|
1325
|
-
switch_instance1 =
|
|
1318
|
+
switch_instance1 = construct_svelte_component(switch_value_1, switch_props_1());
|
|
1326
1319
|
create_component(switch_instance1.$$.fragment);
|
|
1327
1320
|
transition_in(switch_instance1.$$.fragment, 1);
|
|
1328
1321
|
mount_component(switch_instance1, div, null);
|
|
@@ -1331,16 +1324,16 @@ function create_fragment(ctx) {
|
|
|
1331
1324
|
}
|
|
1332
1325
|
}
|
|
1333
1326
|
|
|
1334
|
-
if (!current || dirty & /*$theme, $_viewClass, $_iClass*/
|
|
1335
|
-
? ' ' + /*$theme*/ ctx[
|
|
1336
|
-
: '') + (/*$_iClass*/ ctx[
|
|
1337
|
-
? ' ' + /*$theme*/ ctx[
|
|
1327
|
+
if (!current || dirty[0] & /*$theme, $_viewClass, $_iClass*/ 14 && div_class_value !== (div_class_value = "" + (/*$theme*/ ctx[1].calendar + (/*$_viewClass*/ ctx[2]
|
|
1328
|
+
? ' ' + /*$theme*/ ctx[1][/*$_viewClass*/ ctx[2]]
|
|
1329
|
+
: '') + (/*$_iClass*/ ctx[3]
|
|
1330
|
+
? ' ' + /*$theme*/ ctx[1][/*$_iClass*/ ctx[3]]
|
|
1338
1331
|
: '')))) {
|
|
1339
1332
|
attr(div, "class", div_class_value);
|
|
1340
1333
|
}
|
|
1341
1334
|
|
|
1342
|
-
if (!current || dirty & /*$height*/
|
|
1343
|
-
set_style(div, "height", /*$height*/ ctx[
|
|
1335
|
+
if (!current || dirty[0] & /*$height*/ 16) {
|
|
1336
|
+
set_style(div, "height", /*$height*/ ctx[4]);
|
|
1344
1337
|
}
|
|
1345
1338
|
},
|
|
1346
1339
|
i(local) {
|
|
@@ -1369,26 +1362,26 @@ function instance($$self, $$props, $$invalidate) {
|
|
|
1369
1362
|
let $events;
|
|
1370
1363
|
let $_events;
|
|
1371
1364
|
let $eventSources;
|
|
1365
|
+
let $_interaction;
|
|
1372
1366
|
let $theme;
|
|
1373
1367
|
let $_viewClass;
|
|
1374
1368
|
let $_iClass;
|
|
1375
1369
|
let $height;
|
|
1376
1370
|
let $_viewComponent;
|
|
1377
|
-
let $_interaction;
|
|
1378
1371
|
let { plugins = [] } = $$props;
|
|
1379
1372
|
let { options = {} } = $$props;
|
|
1380
1373
|
let state = new State(plugins, options);
|
|
1381
1374
|
setContext('state', state);
|
|
1382
1375
|
let { _viewComponent, _viewClass, _interaction, _iClass, _events, events, eventSources, height, theme } = state;
|
|
1383
|
-
component_subscribe($$self, _viewComponent, value => $$invalidate(
|
|
1384
|
-
component_subscribe($$self, _viewClass, value => $$invalidate(
|
|
1385
|
-
component_subscribe($$self, _interaction, value => $$invalidate(
|
|
1386
|
-
component_subscribe($$self, _iClass, value => $$invalidate(
|
|
1387
|
-
component_subscribe($$self, _events, value => $$invalidate(
|
|
1388
|
-
component_subscribe($$self, events, value => $$invalidate(
|
|
1389
|
-
component_subscribe($$self, eventSources, value => $$invalidate(
|
|
1390
|
-
component_subscribe($$self, height, value => $$invalidate(
|
|
1391
|
-
component_subscribe($$self, theme, value => $$invalidate(
|
|
1376
|
+
component_subscribe($$self, _viewComponent, value => $$invalidate(5, $_viewComponent = value));
|
|
1377
|
+
component_subscribe($$self, _viewClass, value => $$invalidate(2, $_viewClass = value));
|
|
1378
|
+
component_subscribe($$self, _interaction, value => $$invalidate(0, $_interaction = value));
|
|
1379
|
+
component_subscribe($$self, _iClass, value => $$invalidate(3, $_iClass = value));
|
|
1380
|
+
component_subscribe($$self, _events, value => $$invalidate(28, $_events = value));
|
|
1381
|
+
component_subscribe($$self, events, value => $$invalidate(27, $events = value));
|
|
1382
|
+
component_subscribe($$self, eventSources, value => $$invalidate(29, $eventSources = value));
|
|
1383
|
+
component_subscribe($$self, height, value => $$invalidate(4, $height = value));
|
|
1384
|
+
component_subscribe($$self, theme, value => $$invalidate(1, $theme = value));
|
|
1392
1385
|
|
|
1393
1386
|
function setOption(name, value) {
|
|
1394
1387
|
if (state.hasOwnProperty(name)) {
|
|
@@ -1456,6 +1449,14 @@ function instance($$self, $$props, $$invalidate) {
|
|
|
1456
1449
|
return toViewWithLocalDates(state._view.get());
|
|
1457
1450
|
}
|
|
1458
1451
|
|
|
1452
|
+
function unselect() {
|
|
1453
|
+
if ($_interaction.action) {
|
|
1454
|
+
$_interaction.action.unselect();
|
|
1455
|
+
}
|
|
1456
|
+
|
|
1457
|
+
return this;
|
|
1458
|
+
}
|
|
1459
|
+
|
|
1459
1460
|
function updateEvents(func) {
|
|
1460
1461
|
if ($eventSources.length) {
|
|
1461
1462
|
set_store_value(_events, $_events = func($_events), $_events);
|
|
@@ -1470,7 +1471,7 @@ function instance($$self, $$props, $$invalidate) {
|
|
|
1470
1471
|
};
|
|
1471
1472
|
|
|
1472
1473
|
$$self.$$.update = () => {
|
|
1473
|
-
if ($$self.$$.dirty & /*options*/ 65536) {
|
|
1474
|
+
if ($$self.$$.dirty[0] & /*options*/ 65536) {
|
|
1474
1475
|
// Reactively update options that did change
|
|
1475
1476
|
for (let [name, value] of diff(options)) {
|
|
1476
1477
|
setOption(name, value);
|
|
@@ -1479,12 +1480,12 @@ function instance($$self, $$props, $$invalidate) {
|
|
|
1479
1480
|
};
|
|
1480
1481
|
|
|
1481
1482
|
return [
|
|
1483
|
+
$_interaction,
|
|
1482
1484
|
$theme,
|
|
1483
1485
|
$_viewClass,
|
|
1484
1486
|
$_iClass,
|
|
1485
1487
|
$height,
|
|
1486
1488
|
$_viewComponent,
|
|
1487
|
-
$_interaction,
|
|
1488
1489
|
_viewComponent,
|
|
1489
1490
|
_viewClass,
|
|
1490
1491
|
_interaction,
|
|
@@ -1504,7 +1505,8 @@ function instance($$self, $$props, $$invalidate) {
|
|
|
1504
1505
|
addEvent,
|
|
1505
1506
|
updateEvent,
|
|
1506
1507
|
removeEventById,
|
|
1507
|
-
getView
|
|
1508
|
+
getView,
|
|
1509
|
+
unselect
|
|
1508
1510
|
];
|
|
1509
1511
|
}
|
|
1510
1512
|
|
|
@@ -1512,19 +1514,29 @@ class Calendar extends SvelteComponent {
|
|
|
1512
1514
|
constructor(options) {
|
|
1513
1515
|
super();
|
|
1514
1516
|
|
|
1515
|
-
init(
|
|
1516
|
-
|
|
1517
|
-
options
|
|
1518
|
-
|
|
1519
|
-
|
|
1520
|
-
|
|
1521
|
-
|
|
1522
|
-
|
|
1523
|
-
|
|
1524
|
-
|
|
1525
|
-
|
|
1526
|
-
|
|
1527
|
-
|
|
1517
|
+
init(
|
|
1518
|
+
this,
|
|
1519
|
+
options,
|
|
1520
|
+
instance,
|
|
1521
|
+
create_fragment,
|
|
1522
|
+
safe_not_equal,
|
|
1523
|
+
{
|
|
1524
|
+
plugins: 15,
|
|
1525
|
+
options: 16,
|
|
1526
|
+
setOption: 17,
|
|
1527
|
+
getOption: 18,
|
|
1528
|
+
refetchEvents: 19,
|
|
1529
|
+
getEvents: 20,
|
|
1530
|
+
getEventById: 21,
|
|
1531
|
+
addEvent: 22,
|
|
1532
|
+
updateEvent: 23,
|
|
1533
|
+
removeEventById: 24,
|
|
1534
|
+
getView: 25,
|
|
1535
|
+
unselect: 26
|
|
1536
|
+
},
|
|
1537
|
+
null,
|
|
1538
|
+
[-1, -1]
|
|
1539
|
+
);
|
|
1528
1540
|
}
|
|
1529
1541
|
|
|
1530
1542
|
get setOption() {
|
|
@@ -1562,6 +1574,10 @@ class Calendar extends SvelteComponent {
|
|
|
1562
1574
|
get getView() {
|
|
1563
1575
|
return this.$$.ctx[25];
|
|
1564
1576
|
}
|
|
1577
|
+
|
|
1578
|
+
get unselect() {
|
|
1579
|
+
return this.$$.ctx[26];
|
|
1580
|
+
}
|
|
1565
1581
|
}
|
|
1566
1582
|
|
|
1567
1583
|
export { Calendar as default };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@event-calendar/core",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.13.0",
|
|
4
4
|
"title": "Event Calendar Core package",
|
|
5
5
|
"description": "Full-sized drag & drop event calendar with resource view",
|
|
6
6
|
"keywords": [
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
"./package.json": "./package.json"
|
|
35
35
|
},
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@event-calendar/common": "~0.
|
|
38
|
-
"svelte": "^3.
|
|
37
|
+
"@event-calendar/common": "~0.13.0",
|
|
38
|
+
"svelte": "^3.51.0"
|
|
39
39
|
}
|
|
40
40
|
}
|
package/src/Buttons.svelte
CHANGED
|
@@ -1,41 +1,41 @@
|
|
|
1
1
|
<script>
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
import {getContext} from 'svelte';
|
|
3
|
+
import {createDate, cloneDate, subtractDay, addDuration, subtractDuration, setMidnight} from '@event-calendar/common';
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
export let buttons;
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
let {_currentRange, _viewTitle, buttonText, date, duration, hiddenDays, theme, view} = getContext('state');
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
let today = setMidnight(createDate()), isToday;
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
$: isToday = today >= $_currentRange.start && today < $_currentRange.end || null;
|
|
12
12
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
13
|
+
function prev() {
|
|
14
|
+
let d = subtractDuration($date, $duration);
|
|
15
|
+
if ($hiddenDays.length && $hiddenDays.length < 7) {
|
|
16
|
+
while ($hiddenDays.includes(d.getUTCDay())) {
|
|
17
|
+
subtractDay(d);
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
$date = d;
|
|
21
|
+
}
|
|
22
22
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
23
|
+
function next() {
|
|
24
|
+
$date = addDuration($date, $duration);
|
|
25
|
+
}
|
|
26
26
|
</script>
|
|
27
27
|
|
|
28
28
|
{#each buttons as button}
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
29
|
+
{#if button == ''}
|
|
30
|
+
{:else if button == 'title'}
|
|
31
|
+
<h2 class="{$theme.title}">{$_viewTitle}</h2>
|
|
32
|
+
{:else if button == 'prev'}
|
|
33
|
+
<button class="{$theme.button} ec-{button}" on:click={prev}><i class="{$theme.icon} ec-{button}"></i></button>
|
|
34
|
+
{:else if button === 'next'}
|
|
35
|
+
<button class="{$theme.button} ec-{button}" on:click={next}><i class="{$theme.icon} ec-{button}"></i></button>
|
|
36
|
+
{:else if button === 'today'}
|
|
37
|
+
<button class="{$theme.button} ec-{button}" on:click={() => $date = cloneDate(today)} disabled={isToday}>{$buttonText[button]}</button>
|
|
38
|
+
{:else}
|
|
39
|
+
<button class="{$theme.button}{$view === button ? ' ' + $theme.active : ''} ec-{button}" on:click={() => $view = button}>{$buttonText[button]}</button>
|
|
40
|
+
{/if}
|
|
41
41
|
{/each}
|
package/src/Calendar.svelte
CHANGED
|
@@ -1,98 +1,105 @@
|
|
|
1
1
|
<script>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
2
|
+
import '../index.css';
|
|
3
|
+
import {setContext} from 'svelte';
|
|
4
|
+
import {get} from 'svelte/store';
|
|
5
|
+
import {diff} from './storage/options';
|
|
6
|
+
import State from './storage/state';
|
|
7
|
+
import Toolbar from './Toolbar.svelte';
|
|
8
|
+
import {assign, toEventWithLocalDates, toViewWithLocalDates} from '@event-calendar/common';
|
|
9
|
+
|
|
10
|
+
export let plugins = [];
|
|
11
|
+
export let options = {};
|
|
12
|
+
|
|
13
|
+
let state = new State(plugins, options);
|
|
14
|
+
setContext('state', state);
|
|
15
|
+
|
|
16
|
+
let {_viewComponent, _viewClass, _interaction, _iClass, _events, events, eventSources, height, theme} = state;
|
|
17
|
+
|
|
18
|
+
// Reactively update options that did change
|
|
19
|
+
$: for (let [name, value] of diff(options)) {
|
|
20
|
+
setOption(name, value);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
export function setOption(name, value) {
|
|
24
|
+
if (state.hasOwnProperty(name)) {
|
|
25
|
+
if (state[name].parse) {
|
|
26
|
+
value = state[name].parse(value);
|
|
27
|
+
}
|
|
28
|
+
state[name].set(value);
|
|
29
|
+
}
|
|
30
|
+
return this;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
export function getOption(name) {
|
|
34
|
+
return state.hasOwnProperty(name) ? get(state[name]) : undefined;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
export function refetchEvents() {
|
|
38
|
+
state._fetchedRange.set({start: undefined, end: undefined});
|
|
39
|
+
return this;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
export function getEvents() {
|
|
43
|
+
return get(state._events).map(toEventWithLocalDates);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
export function getEventById(id) {
|
|
47
|
+
for (let event of get(state._events)) {
|
|
48
|
+
if (event.id == id) {
|
|
49
|
+
return toEventWithLocalDates(event);
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
return null;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
export function addEvent(event) {
|
|
56
|
+
updateEvents(events => events.concat(state.events.parse([event])));
|
|
57
|
+
return this;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
export function updateEvent(event) {
|
|
61
|
+
updateEvents(events => {
|
|
62
|
+
for (let e of events) {
|
|
63
|
+
if (e.id == event.id) {
|
|
64
|
+
assign(e, state.events.parse([event])[0]);
|
|
65
|
+
break;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
return events;
|
|
69
|
+
});
|
|
70
|
+
return this;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
export function removeEventById(id) {
|
|
74
|
+
updateEvents(events => events.filter(event => event.id != id));
|
|
75
|
+
return this;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
export function getView() {
|
|
79
|
+
return toViewWithLocalDates(state._view.get());
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
export function unselect() {
|
|
83
|
+
if ($_interaction.action) {
|
|
84
|
+
$_interaction.action.unselect();
|
|
85
|
+
}
|
|
86
|
+
return this;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
function updateEvents(func) {
|
|
90
|
+
if ($eventSources.length) {
|
|
91
|
+
$_events = func($_events);
|
|
92
|
+
} else {
|
|
93
|
+
$events = func($events);
|
|
94
|
+
}
|
|
95
|
+
}
|
|
89
96
|
</script>
|
|
90
97
|
|
|
91
98
|
<div
|
|
92
|
-
|
|
93
|
-
|
|
99
|
+
class="{$theme.calendar}{$_viewClass ? ' ' + $theme[$_viewClass] : ''}{$_iClass ? ' ' + $theme[$_iClass] : ''}"
|
|
100
|
+
style="height: {$height}"
|
|
94
101
|
>
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
102
|
+
<Toolbar/>
|
|
103
|
+
<svelte:component this={$_viewComponent}/>
|
|
104
|
+
<svelte:component this={$_interaction.component}/>
|
|
98
105
|
</div>
|
package/src/Toolbar.svelte
CHANGED
|
@@ -1,34 +1,34 @@
|
|
|
1
1
|
<script>
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
import {getContext} from 'svelte';
|
|
3
|
+
import Buttons from './Buttons.svelte';
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
let {headerToolbar, theme} = getContext('state');
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
7
|
+
let sections = {
|
|
8
|
+
start: [],
|
|
9
|
+
center: [],
|
|
10
|
+
end: []
|
|
11
|
+
};
|
|
12
12
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
13
|
+
$: {
|
|
14
|
+
for (let key of Object.keys(sections)) {
|
|
15
|
+
sections[key] = $headerToolbar[key].split(' ').map(group => group.split(','));
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
18
|
</script>
|
|
19
19
|
|
|
20
20
|
<div class="{$theme.toolbar}">
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
21
|
+
{#each Object.keys(sections) as key}
|
|
22
|
+
<div>
|
|
23
|
+
{#each sections[key] as buttons}
|
|
24
|
+
{#if buttons.length > 1}
|
|
25
|
+
<div class="{$theme.buttonGroup}">
|
|
26
|
+
<Buttons {buttons}/>
|
|
27
|
+
</div>
|
|
28
|
+
{:else}
|
|
29
|
+
<Buttons {buttons}/>
|
|
30
|
+
{/if}
|
|
31
|
+
{/each}
|
|
32
|
+
</div>
|
|
33
|
+
{/each}
|
|
34
34
|
</div>
|
package/src/index.scss
CHANGED
|
@@ -16,6 +16,7 @@
|
|
|
16
16
|
.ec {
|
|
17
17
|
display: flex;
|
|
18
18
|
flex-direction: column;
|
|
19
|
+
-webkit-tap-highlight-color: transparent;
|
|
19
20
|
|
|
20
21
|
/* Scrollbar */
|
|
21
22
|
::-webkit-scrollbar {
|
|
@@ -354,7 +355,6 @@
|
|
|
354
355
|
.ec-month &,
|
|
355
356
|
.ec-all-day & {
|
|
356
357
|
position: relative;
|
|
357
|
-
flex-direction: row;
|
|
358
358
|
}
|
|
359
359
|
|
|
360
360
|
.ec-week .ec-body & {
|
|
@@ -395,6 +395,11 @@
|
|
|
395
395
|
display: flex;
|
|
396
396
|
flex-direction: column;
|
|
397
397
|
width: 100%;
|
|
398
|
+
|
|
399
|
+
.ec-month &,
|
|
400
|
+
.ec-all-day & {
|
|
401
|
+
flex-direction: row;
|
|
402
|
+
}
|
|
398
403
|
}
|
|
399
404
|
|
|
400
405
|
.ec-event-tag {
|
|
@@ -421,6 +426,7 @@
|
|
|
421
426
|
|
|
422
427
|
.ec-month &,
|
|
423
428
|
.ec-all-day & {
|
|
429
|
+
min-height: 1.5em;
|
|
424
430
|
white-space: nowrap;
|
|
425
431
|
text-overflow: ellipsis;
|
|
426
432
|
}
|
|
@@ -438,13 +444,11 @@
|
|
|
438
444
|
.ec-draggable {
|
|
439
445
|
cursor: pointer;
|
|
440
446
|
user-select: none;
|
|
441
|
-
touch-action: none;
|
|
442
447
|
}
|
|
443
448
|
|
|
444
449
|
.ec-ghost {
|
|
445
450
|
opacity: .5;
|
|
446
451
|
user-select: none;
|
|
447
|
-
touch-action: none;
|
|
448
452
|
}
|
|
449
453
|
|
|
450
454
|
.ec-bg-events {
|