@event-calendar/build 0.18.1 → 1.0.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 +55 -17
- package/event-calendar.min.css +1 -1
- package/event-calendar.min.js +2 -2
- package/event-calendar.min.js.map +1 -1
- package/package.json +6 -6
package/README.md
CHANGED
|
@@ -4,7 +4,7 @@ See [demo](https://vkurko.github.io/calendar/) and [changelog](CHANGELOG.md).
|
|
|
4
4
|
|
|
5
5
|
Full-sized drag & drop JavaScript event calendar with resource view:
|
|
6
6
|
|
|
7
|
-
* Lightweight (
|
|
7
|
+
* Lightweight (34kb [br](https://en.wikipedia.org/wiki/Brotli) compressed)
|
|
8
8
|
* Zero-dependency (pre-built bundle)
|
|
9
9
|
* Used on over 60,000 websites with [Bookly](https://wordpress.org/plugins/bookly-responsive-appointment-booking-tool/)
|
|
10
10
|
|
|
@@ -68,12 +68,11 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
|
|
|
68
68
|
- [loading](#loading)
|
|
69
69
|
- [locale](#locale)
|
|
70
70
|
- [longPressDelay](#longpressdelay)
|
|
71
|
-
- [monthMode](#monthmode)
|
|
72
71
|
- [moreLinkContent](#morelinkcontent)
|
|
73
72
|
- [noEventsClick](#noeventsclick)
|
|
73
|
+
- [noEventsContent](#noeventscontent)
|
|
74
74
|
</td><td>
|
|
75
75
|
|
|
76
|
-
- [noEventsContent](#noeventscontent)
|
|
77
76
|
- [nowIndicator](#nowindicator)
|
|
78
77
|
- [pointer](#pointer)
|
|
79
78
|
- [resources](#resources)
|
|
@@ -86,6 +85,7 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
|
|
|
86
85
|
- [selectMinDistance](#selectmindistance)
|
|
87
86
|
- [scrollTime](#scrolltime)
|
|
88
87
|
- [slotDuration](#slotduration)
|
|
88
|
+
- [slotEventOverlap](#sloteventoverlap)
|
|
89
89
|
- [slotHeight](#slotheight)
|
|
90
90
|
- [slotLabelFormat](#slotlabelformat)
|
|
91
91
|
- [slotMaxTime](#slotmaxtime)
|
|
@@ -192,8 +192,8 @@ import '@event-calendar/core/index.css';
|
|
|
192
192
|
### Pre-built browser ready bundle
|
|
193
193
|
Include the following lines of code in the `<head>` section of your page:
|
|
194
194
|
```html
|
|
195
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@0.
|
|
196
|
-
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@0.
|
|
195
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@1.0.0/event-calendar.min.css">
|
|
196
|
+
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@1.0.0/event-calendar.min.js"></script>
|
|
197
197
|
```
|
|
198
198
|
|
|
199
199
|
<details>
|
|
@@ -297,6 +297,7 @@ This value can be either a JavaScript Date object, or an ISO8601 date string lik
|
|
|
297
297
|
### dateClick
|
|
298
298
|
- Type `function`
|
|
299
299
|
- Default `undefined`
|
|
300
|
+
- Requires `Interaction` plugin
|
|
300
301
|
|
|
301
302
|
Callback function that is triggered when the user clicks on a date or a time.
|
|
302
303
|
|
|
@@ -326,7 +327,7 @@ function (info) {}
|
|
|
326
327
|
</td>
|
|
327
328
|
<td>
|
|
328
329
|
|
|
329
|
-
`true` or `false`. Determines if the click has occurred in the `all-day` slot.
|
|
330
|
+
`true` or `false`. Determines if the click has occurred in the `all-day` slot. Month and list views are also considered as all-day slots</td>
|
|
330
331
|
</tr>
|
|
331
332
|
<tr>
|
|
332
333
|
<td>
|
|
@@ -1424,14 +1425,6 @@ For touch devices, the amount of time (in milliseconds) the user must hold down
|
|
|
1424
1425
|
|
|
1425
1426
|
For a more granular configuration, see [eventLongPressDelay](#eventlongpressdelay) and [selectLongPressDelay](#selectlongpressdelay).
|
|
1426
1427
|
|
|
1427
|
-
### monthMode
|
|
1428
|
-
- Type `boolean`
|
|
1429
|
-
- Default `false`
|
|
1430
|
-
> Views override the default value as follows:
|
|
1431
|
-
> - dayGridMonth `true`
|
|
1432
|
-
|
|
1433
|
-
Tells the calendar that visible dates should start from the [firstDay](#firstday) of the week, even if it will display days outside the current range (this is a common case for a month calendar when you can see days from adjacent months).
|
|
1434
|
-
|
|
1435
1428
|
### moreLinkContent
|
|
1436
1429
|
- Type `string`, `object`or `function`
|
|
1437
1430
|
- Default `undefined`
|
|
@@ -1726,6 +1719,14 @@ Defines the frequency for displaying time slots.
|
|
|
1726
1719
|
|
|
1727
1720
|
This should be a value that can be parsed into a [Duration](#duration-object) object.
|
|
1728
1721
|
|
|
1722
|
+
### slotEventOverlap
|
|
1723
|
+
- Type `boolean`
|
|
1724
|
+
- Default `true`
|
|
1725
|
+
|
|
1726
|
+
Determines whether events in the `timeGrid`/`resourceTimeGrid` views should visually overlap when they intersect in time.
|
|
1727
|
+
|
|
1728
|
+
If set to `false`, then intersecting events will be placed next to each other.
|
|
1729
|
+
|
|
1729
1730
|
### slotHeight
|
|
1730
1731
|
- Type `integer`
|
|
1731
1732
|
- Default `24`
|
|
@@ -1779,7 +1780,7 @@ This should be a value that can be parsed into a [Duration](#duration-object) ob
|
|
|
1779
1780
|
|
|
1780
1781
|
### theme
|
|
1781
1782
|
- Type `object` or `function`
|
|
1782
|
-
- Default `{active: 'ec-active', allDay: 'ec-all-day', bgEvent: 'ec-bg-event', bgEvents: 'ec-bg-events', body: 'ec-body', button: 'ec-button', buttonGroup: 'ec-button-group', calendar: 'ec', compact: 'ec-compact', content: 'ec-content', day: 'ec-day', dayFoot: 'ec-day-foot', dayHead: 'ec-day-head', daySide: 'ec-day-side', days: 'ec-days', draggable: 'ec-draggable', dragging: 'ec-dragging', event: 'ec-event', eventBody: 'ec-event-body', eventTag: 'ec-event-tag', eventTime: 'ec-event-time', eventTitle: 'ec-event-title', events: 'ec-events', extra: 'ec-extra', ghost: 'ec-ghost', handle: 'ec-handle', header: 'ec-header', hiddenScroll: 'ec-hidden-scroll',
|
|
1783
|
+
- Default `{active: 'ec-active', allDay: 'ec-all-day', bgEvent: 'ec-bg-event', bgEvents: 'ec-bg-events', body: 'ec-body', button: 'ec-button', buttonGroup: 'ec-button-group', calendar: 'ec', compact: 'ec-compact', content: 'ec-content', day: 'ec-day', dayFoot: 'ec-day-foot', dayHead: 'ec-day-head', daySide: 'ec-day-side', days: 'ec-days', draggable: 'ec-draggable', dragging: 'ec-dragging', event: 'ec-event', eventBody: 'ec-event-body', eventTag: 'ec-event-tag', eventTime: 'ec-event-time', eventTitle: 'ec-event-title', events: 'ec-events', extra: 'ec-extra', ghost: 'ec-ghost', handle: 'ec-handle', header: 'ec-header', hiddenScroll: 'ec-hidden-scroll', highlight: 'ec-highlight', icon: 'ec-icon', line: 'ec-line', lines: 'ec-lines', list: 'ec-list', month: 'ec-month', noEvents: 'ec-no-events', nowIndicator: 'ec-now-indicator', otherMonth: 'ec-other-month', pointer: 'ec-pointer', popup: 'ec-popup', preview: 'ec-preview', resizer: 'ec-resizer', resizingX: 'ec-resizing-x', resizingY: 'ec-resizing-y', resource: 'ec-resource', resourceTitle: 'ec-resource-title', selecting: 'ec-selecting', sidebar: 'ec-sidebar', sidebarTitle: 'ec-sidebar-title', time: 'ec-time', title: 'ec-title', today: 'ec-today', toolbar: 'ec-toolbar', uniform: 'ec-uniform', week: 'ec-week', withScroll: 'ec-with-scroll'}`
|
|
1783
1784
|
|
|
1784
1785
|
Defines the CSS classes that the Event Calendar uses to generate HTML markup.
|
|
1785
1786
|
|
|
@@ -2010,9 +2011,46 @@ Updates a single event with the matching `event`.`id`.
|
|
|
2010
2011
|
Refetches events from all sources.
|
|
2011
2012
|
|
|
2012
2013
|
### dateFromPoint( x, y )
|
|
2013
|
-
- Return value `
|
|
2014
|
+
- Return value `object` or `null`
|
|
2015
|
+
|
|
2016
|
+
Returns an `info` object with data as if the [dateClick](#dateclick) event had fired for that point.
|
|
2017
|
+
|
|
2018
|
+
`info` object contains the following properties:
|
|
2019
|
+
<table>
|
|
2020
|
+
<tr>
|
|
2021
|
+
<td>
|
|
2022
|
+
|
|
2023
|
+
`date`
|
|
2024
|
+
</td>
|
|
2025
|
+
<td>JavaScript Date object for the date and time</td>
|
|
2026
|
+
</tr>
|
|
2027
|
+
<tr>
|
|
2028
|
+
<td>
|
|
2029
|
+
|
|
2030
|
+
`allDay`
|
|
2031
|
+
</td>
|
|
2032
|
+
<td>
|
|
2033
|
+
|
|
2034
|
+
`true` or `false`. Determines if the point is in the `all-day` slot. Month and list views are also considered as all-day slots</td>
|
|
2035
|
+
</tr>
|
|
2036
|
+
<tr>
|
|
2037
|
+
<td>
|
|
2014
2038
|
|
|
2015
|
-
|
|
2039
|
+
`dayEl`
|
|
2040
|
+
</td>
|
|
2041
|
+
<td>HTML element that represents the whole-day that contains the point</td>
|
|
2042
|
+
</tr>
|
|
2043
|
+
<tr>
|
|
2044
|
+
<td>
|
|
2045
|
+
|
|
2046
|
+
`resource`
|
|
2047
|
+
</td>
|
|
2048
|
+
<td>
|
|
2049
|
+
|
|
2050
|
+
If the current view is a resource view, the [Resource](#resource-object) object that owns this date
|
|
2051
|
+
</td>
|
|
2052
|
+
</tr>
|
|
2053
|
+
</table>
|
|
2016
2054
|
|
|
2017
2055
|
Using this method, you can, for example, find out on which day a click occurred inside a multi-day event. To do this, inside [eventClick](#eventclick), pass the `jsEvent.clientX` and `jsEvent.clientY` coordinates to `dateFromPoint` and get the desired date.
|
|
2018
2056
|
|
package/event-calendar.min.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.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{
|
|
1
|
+
.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{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:not(.ec-list) .ec-body{border-top:none}.ec-month .ec-body{flex:1 1 auto}.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: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;-moz-user-select:none;user-select:none;opacity:.8}.ec-event.ec-pointer{color:inherit;pointer-events:none;-webkit-user-select:none;-moz-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:sticky;top:0}.ec-list .ec-event-title{font-size:1rem}.ec-draggable{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ec-ghost{opacity:.5;-webkit-user-select:none;-moz-user-select:none;user-select:none}.ec-bg-events{position:relative}.ec-bg-event{position:absolute;background-color:#dadce0;opacity:.3;width:100%;z-index:1}.ec-time,.ec-line{height:24px}.ec-time{position:relative;line-height:24px;top:-12px;text-align:right;white-space:nowrap}.ec-header .ec-time,.ec-all-day .ec-time{visibility:hidden;overflow-y:hidden;height:0}.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;display:flex;flex-direction:column;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;min-height:0;overflow:auto}.ec-extra{position:relative;height:100%;overflow:hidden;margin-left:-6.5px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.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;-moz-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}
|