@event-calendar/core 0.11.1 → 0.12.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 +174 -6
- package/index.css +1 -1
- package/index.js +77 -61
- package/package.json +3 -3
- package/src/Calendar.svelte +7 -0
- package/src/index.scss +7 -1
- 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 (52kb [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,10 +40,10 @@ 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)
|
|
45
|
+
</td><td>
|
|
46
|
+
|
|
47
47
|
- [eventDrop](#eventdrop)
|
|
48
48
|
- [eventDurationEditable](#eventdurationeditable)
|
|
49
49
|
- [eventMouseEnter](#eventmouseenter)
|
|
@@ -63,18 +63,22 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
|
|
|
63
63
|
- [highlightedDates](#highlighteddates)
|
|
64
64
|
- [lazyFetching](#lazyfetching)
|
|
65
65
|
- [listDayFormat](#listdayformat)
|
|
66
|
-
</td><td>
|
|
67
|
-
|
|
68
66
|
- [listDaySideFormat](#listdaysideformat)
|
|
69
67
|
- [loading](#loading)
|
|
70
68
|
- [locale](#locale)
|
|
71
69
|
- [monthMode](#monthmode)
|
|
70
|
+
</td><td>
|
|
71
|
+
|
|
72
72
|
- [moreLinkContent](#morelinkcontent)
|
|
73
73
|
- [noEventsClick](#noeventsclick)
|
|
74
74
|
- [noEventsContent](#noeventscontent)
|
|
75
75
|
- [nowIndicator](#nowindicator)
|
|
76
76
|
- [pointer](#pointer)
|
|
77
77
|
- [resources](#resources)
|
|
78
|
+
- [select](#select)
|
|
79
|
+
- [selectable](#selectable)
|
|
80
|
+
- [selectBackgroundColor](#selectbackgroundcolor)
|
|
81
|
+
- [selectMinDistance](#selectmindistance)
|
|
78
82
|
- [scrollTime](#scrolltime)
|
|
79
83
|
- [slotDuration](#slotduration)
|
|
80
84
|
- [slotHeight](#slotheight)
|
|
@@ -82,6 +86,10 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
|
|
|
82
86
|
- [slotMaxTime](#slotmaxtime)
|
|
83
87
|
- [slotMinTime](#slotmintime)
|
|
84
88
|
- [theme](#theme)
|
|
89
|
+
- [titleFormat](#titleformat)
|
|
90
|
+
- [unselect](#unselect)
|
|
91
|
+
- [unselectAuto](#unselectauto)
|
|
92
|
+
- [unselectCancel](#unselectcancel)
|
|
85
93
|
- [view](#view)
|
|
86
94
|
- [viewDidMount](#viewdidmount)
|
|
87
95
|
- [views](#views)
|
|
@@ -104,6 +112,9 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
|
|
|
104
112
|
</td><td>
|
|
105
113
|
|
|
106
114
|
- [getView](#getview)
|
|
115
|
+
</td><td>
|
|
116
|
+
|
|
117
|
+
- [unselect](#unselect-1)
|
|
107
118
|
</td></tr>
|
|
108
119
|
</table>
|
|
109
120
|
- [Event object](#event-object)
|
|
@@ -1460,6 +1471,103 @@ Enables mouse cursor pointer in `timeGrid`/`resourceTimeGrid` views.
|
|
|
1460
1471
|
|
|
1461
1472
|
Array of plain objects that will be parsed into [Resource](#resource-object) objects for displaying in the resource view.
|
|
1462
1473
|
|
|
1474
|
+
### select
|
|
1475
|
+
- Type `function`
|
|
1476
|
+
- Default `undefined`
|
|
1477
|
+
|
|
1478
|
+
Callback function that is triggered when a date/time selection is made.
|
|
1479
|
+
|
|
1480
|
+
```js
|
|
1481
|
+
function (selectInfo) { }
|
|
1482
|
+
```
|
|
1483
|
+
`selectInfo` is an object with the following properties:
|
|
1484
|
+
<table>
|
|
1485
|
+
<tr>
|
|
1486
|
+
<td>
|
|
1487
|
+
|
|
1488
|
+
`start`
|
|
1489
|
+
</td>
|
|
1490
|
+
<td>JavaScript Date object indicating the start of the selection</td>
|
|
1491
|
+
</tr>
|
|
1492
|
+
<tr>
|
|
1493
|
+
<td>
|
|
1494
|
+
|
|
1495
|
+
`end`
|
|
1496
|
+
</td>
|
|
1497
|
+
<td>JavaScript Date object indicating the end of the selection</td>
|
|
1498
|
+
</tr>
|
|
1499
|
+
<tr>
|
|
1500
|
+
<td>
|
|
1501
|
+
|
|
1502
|
+
`startStr`
|
|
1503
|
+
</td>
|
|
1504
|
+
<td>ISO8601 string representation of the start date</td>
|
|
1505
|
+
</tr>
|
|
1506
|
+
<tr>
|
|
1507
|
+
<td>
|
|
1508
|
+
|
|
1509
|
+
`endStr`
|
|
1510
|
+
</td>
|
|
1511
|
+
<td>ISO8601 string representation of the end date</td>
|
|
1512
|
+
</tr>
|
|
1513
|
+
<tr>
|
|
1514
|
+
<td>
|
|
1515
|
+
|
|
1516
|
+
`allDay`
|
|
1517
|
+
</td>
|
|
1518
|
+
<td>
|
|
1519
|
+
|
|
1520
|
+
Boolean (`true` or `false`). Determines if the selection has occurred in the `all-day` slot</td>
|
|
1521
|
+
</tr>
|
|
1522
|
+
<tr>
|
|
1523
|
+
<td>
|
|
1524
|
+
|
|
1525
|
+
`jsEvent`
|
|
1526
|
+
</td>
|
|
1527
|
+
<td>JavaScript native event object with low-level information such as click coordinates</td>
|
|
1528
|
+
</tr>
|
|
1529
|
+
<tr>
|
|
1530
|
+
<td>
|
|
1531
|
+
|
|
1532
|
+
`view`
|
|
1533
|
+
</td>
|
|
1534
|
+
<td>
|
|
1535
|
+
|
|
1536
|
+
The current [View](#view-object) object
|
|
1537
|
+
</td>
|
|
1538
|
+
</tr>
|
|
1539
|
+
<tr>
|
|
1540
|
+
<td>
|
|
1541
|
+
|
|
1542
|
+
`resource`
|
|
1543
|
+
</td>
|
|
1544
|
+
<td>
|
|
1545
|
+
|
|
1546
|
+
If the current view is a resource view, the [Resource](#resource-object) object that was selected
|
|
1547
|
+
</td>
|
|
1548
|
+
</tr>
|
|
1549
|
+
</table>
|
|
1550
|
+
|
|
1551
|
+
### selectable
|
|
1552
|
+
- Type `boolean`
|
|
1553
|
+
- Default `false`
|
|
1554
|
+
|
|
1555
|
+
Determines whether the user is allowed to highlight multiple days or time slots by clicking and moving the pointer.
|
|
1556
|
+
|
|
1557
|
+
### selectBackgroundColor
|
|
1558
|
+
- Type `string`
|
|
1559
|
+
- Default `undefined`
|
|
1560
|
+
|
|
1561
|
+
Sets the background color for the event indicating the current selection. See [selectable](#selectable).
|
|
1562
|
+
|
|
1563
|
+
You can use any of the CSS color formats such `'#f00'`, `'#ff0000'`, `'rgb(255,0,0)'`, or `'red'`.
|
|
1564
|
+
|
|
1565
|
+
### selectMinDistance
|
|
1566
|
+
- Type `integer`
|
|
1567
|
+
- Default `0`
|
|
1568
|
+
|
|
1569
|
+
Defines how many pixels the user’s mouse must move before the selection begins.
|
|
1570
|
+
|
|
1463
1571
|
### scrollTime
|
|
1464
1572
|
- Type `string`, `integer` or `object`
|
|
1465
1573
|
- Default `'06:00:00'`
|
|
@@ -1576,6 +1684,61 @@ function (date) {
|
|
|
1576
1684
|
</tr>
|
|
1577
1685
|
</table>
|
|
1578
1686
|
|
|
1687
|
+
### unselect
|
|
1688
|
+
- Type `function`
|
|
1689
|
+
- Default `undefined`
|
|
1690
|
+
|
|
1691
|
+
Callback function that is triggered when the current selection is cleared.
|
|
1692
|
+
|
|
1693
|
+
A selection can be cleared for a number of reasons:
|
|
1694
|
+
|
|
1695
|
+
- The user clicks away from the current selection (this does not happen when [unselectAuto](#unselectauto) is `false`).
|
|
1696
|
+
- The user makes a new selection. The unselect callback will be fired before the new selection occurs.
|
|
1697
|
+
- The user navigates forward or backward in the current view, or switches to a new view.
|
|
1698
|
+
- The [unselect](#unselect-1) method is called via the API.
|
|
1699
|
+
|
|
1700
|
+
```js
|
|
1701
|
+
function (info) { }
|
|
1702
|
+
```
|
|
1703
|
+
`info` is an object with the following properties:
|
|
1704
|
+
<table>
|
|
1705
|
+
<tr>
|
|
1706
|
+
<td>
|
|
1707
|
+
|
|
1708
|
+
`jsEvent`
|
|
1709
|
+
</td>
|
|
1710
|
+
<td>
|
|
1711
|
+
|
|
1712
|
+
JavaScript native event object with low-level information such as click coordinates.
|
|
1713
|
+
|
|
1714
|
+
If unselect has been triggered via the [unselect](#unselect-1) method, jsEvent will be `undefined`</td>
|
|
1715
|
+
</tr>
|
|
1716
|
+
<tr>
|
|
1717
|
+
<td>
|
|
1718
|
+
|
|
1719
|
+
`view`
|
|
1720
|
+
</td>
|
|
1721
|
+
<td>
|
|
1722
|
+
|
|
1723
|
+
The current [View](#view-object) object
|
|
1724
|
+
</td>
|
|
1725
|
+
</tr>
|
|
1726
|
+
</table>
|
|
1727
|
+
|
|
1728
|
+
### unselectAuto
|
|
1729
|
+
- Type `boolean`
|
|
1730
|
+
- Default `true`
|
|
1731
|
+
|
|
1732
|
+
Determines whether clicking elsewhere on the page will clear the current selection. See [selectable](#selectable).
|
|
1733
|
+
|
|
1734
|
+
### unselectCancel
|
|
1735
|
+
- Type `string`
|
|
1736
|
+
- Default `''`
|
|
1737
|
+
|
|
1738
|
+
A CSS selector that specifies elements that will ignore the [unselectAuto](#unselectauto) option.
|
|
1739
|
+
|
|
1740
|
+
Clicking on elements that match this CSS selector will prevent the current selection from being cleared (because of the [unselectAuto](#unselectauto) option).
|
|
1741
|
+
|
|
1579
1742
|
### view
|
|
1580
1743
|
- Type `string`
|
|
1581
1744
|
- Default `'resourceTimeGridWeek'`
|
|
@@ -1706,6 +1869,11 @@ Refetches events from all sources.
|
|
|
1706
1869
|
|
|
1707
1870
|
Returns the [View](#view-object) object for the current view.
|
|
1708
1871
|
|
|
1872
|
+
### unselect()
|
|
1873
|
+
- Return value `EventCalendar` The calendar instance for chaining
|
|
1874
|
+
|
|
1875
|
+
Clears the current selection. See [selectable](#selectable).
|
|
1876
|
+
|
|
1709
1877
|
## Event object
|
|
1710
1878
|
This is a JavaScript object that the Event Calendar uses to store information about a calendar event.
|
|
1711
1879
|
|
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}.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}.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;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,.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,7 +1,7 @@
|
|
|
1
|
-
import { is_function, tick, noop, identity, SvelteComponent, init, safe_not_equal, empty, insert,
|
|
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
|
-
import { setMidnight, createDate, createDuration, createEvents, createEventSources,
|
|
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';
|
|
5
5
|
|
|
6
6
|
function createOptions(plugins) {
|
|
7
7
|
let options = {
|
|
@@ -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();
|
|
@@ -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();
|
|
@@ -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.clearSelection();
|
|
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.12.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.12.0",
|
|
38
|
+
"svelte": "^3.51.0"
|
|
39
39
|
}
|
|
40
40
|
}
|
package/src/Calendar.svelte
CHANGED
|
@@ -79,6 +79,13 @@
|
|
|
79
79
|
return toViewWithLocalDates(state._view.get());
|
|
80
80
|
}
|
|
81
81
|
|
|
82
|
+
export function unselect() {
|
|
83
|
+
if ($_interaction.action) {
|
|
84
|
+
$_interaction.action.clearSelection();
|
|
85
|
+
}
|
|
86
|
+
return this;
|
|
87
|
+
}
|
|
88
|
+
|
|
82
89
|
function updateEvents(func) {
|
|
83
90
|
if ($eventSources.length) {
|
|
84
91
|
$_events = func($_events);
|
package/src/index.scss
CHANGED
|
@@ -208,6 +208,7 @@
|
|
|
208
208
|
visibility: hidden;
|
|
209
209
|
overflow-y: hidden;
|
|
210
210
|
height: 0;
|
|
211
|
+
text-align: right;
|
|
211
212
|
|
|
212
213
|
.ec-all-day & {
|
|
213
214
|
visibility: visible;
|
|
@@ -353,7 +354,6 @@
|
|
|
353
354
|
.ec-month &,
|
|
354
355
|
.ec-all-day & {
|
|
355
356
|
position: relative;
|
|
356
|
-
flex-direction: row;
|
|
357
357
|
}
|
|
358
358
|
|
|
359
359
|
.ec-week .ec-body & {
|
|
@@ -394,6 +394,11 @@
|
|
|
394
394
|
display: flex;
|
|
395
395
|
flex-direction: column;
|
|
396
396
|
width: 100%;
|
|
397
|
+
|
|
398
|
+
.ec-month &,
|
|
399
|
+
.ec-all-day & {
|
|
400
|
+
flex-direction: row;
|
|
401
|
+
}
|
|
397
402
|
}
|
|
398
403
|
|
|
399
404
|
.ec-event-tag {
|
|
@@ -420,6 +425,7 @@
|
|
|
420
425
|
|
|
421
426
|
.ec-month &,
|
|
422
427
|
.ec-all-day & {
|
|
428
|
+
min-height: 1.5em;
|
|
423
429
|
white-space: nowrap;
|
|
424
430
|
text-overflow: ellipsis;
|
|
425
431
|
}
|