@event-calendar/build 0.5.0 → 0.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -4,7 +4,7 @@ See [demo](https://vkurko.github.io/calendar/).
|
|
|
4
4
|
|
|
5
5
|
Full-sized drag & drop JavaScript event calendar with resource view:
|
|
6
6
|
|
|
7
|
-
* Lightweight (
|
|
7
|
+
* Lightweight (47kb [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
|
|
|
@@ -25,6 +25,8 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
|
|
|
25
25
|
- [datesAboveResources](#datesaboveresources)
|
|
26
26
|
- [datesSet](#datesset)
|
|
27
27
|
- [dayHeaderFormat](#dayheaderformat)
|
|
28
|
+
- [dayMaxEvents](#daymaxevents)
|
|
29
|
+
- [dayPopoverFormat](#daypopoverformat)
|
|
28
30
|
- [displayEventEnd](#displayeventend)
|
|
29
31
|
- [dragScroll](#dragscroll)
|
|
30
32
|
- [duration](#duration)
|
|
@@ -55,14 +57,17 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
|
|
|
55
57
|
- [highlightedDates](#highlighteddates)
|
|
56
58
|
- [lazyFetching](#lazyfetching)
|
|
57
59
|
- [listDayFormat](#listdayformat)
|
|
58
|
-
</td><td>
|
|
59
|
-
|
|
60
60
|
- [listDaySideFormat](#listdaysideformat)
|
|
61
61
|
- [loading](#loading)
|
|
62
|
+
</td><td>
|
|
63
|
+
|
|
62
64
|
- [locale](#locale)
|
|
63
65
|
- [monthMode](#monthmode)
|
|
66
|
+
- [moreLinkContent](#morelinkcontent)
|
|
64
67
|
- [noEventsClick](#noeventsclick)
|
|
65
68
|
- [noEventsContent](#noeventscontent)
|
|
69
|
+
- [nowIndicator](#nowindicator)
|
|
70
|
+
- [pointer](#pointer)
|
|
66
71
|
- [resources](#resources)
|
|
67
72
|
- [scrollTime](#scrolltime)
|
|
68
73
|
- [slotDuration](#slotduration)
|
|
@@ -360,6 +365,24 @@ function (date) {
|
|
|
360
365
|
</tr>
|
|
361
366
|
</table>
|
|
362
367
|
|
|
368
|
+
### dayMaxEvents
|
|
369
|
+
- Type `boolean`
|
|
370
|
+
- Default `false`
|
|
371
|
+
|
|
372
|
+
Determines the maximum number of stacked event levels for a given day in the `dayGrid` view.
|
|
373
|
+
|
|
374
|
+
If there are too many events, a link like `+2 more` is displayed.
|
|
375
|
+
|
|
376
|
+
Currently, only the value `true` is supported, which limits the number of events to the height of the day cell.
|
|
377
|
+
|
|
378
|
+
### dayPopoverFormat
|
|
379
|
+
- Type `object` or `function`
|
|
380
|
+
- Default `{month: 'long', day: 'numeric', year: 'numeric'}`
|
|
381
|
+
|
|
382
|
+
Defines the date format of title of the popover created by the [dayMaxEvents](#daymaxevents) option.
|
|
383
|
+
|
|
384
|
+
This value can be either an object with options for the native JavaScript [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) object, or a callback function that returns formatted string:
|
|
385
|
+
|
|
363
386
|
### displayEventEnd
|
|
364
387
|
- Type `boolean`
|
|
365
388
|
- Default `true`
|
|
@@ -1139,6 +1162,40 @@ Defines the `locales` parameter for the native JavaScript [Intl.DateTimeFormat](
|
|
|
1139
1162
|
|
|
1140
1163
|
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).
|
|
1141
1164
|
|
|
1165
|
+
### moreLinkContent
|
|
1166
|
+
- Type `string`, `object`or `function`
|
|
1167
|
+
- Default `undefined`
|
|
1168
|
+
|
|
1169
|
+
Defines the text that is displayed instead of the default `+2 more` created by the [dayMaxEvents](#daymaxevents) option.
|
|
1170
|
+
|
|
1171
|
+
This value can be either a string containing HTML `'<p>...</p>'`, an object containing the HTML string `{html: '<p>...</p>'}`, an object containing an array of DOM nodes `{domNodes: [node1, node2, ...]}` or a function that returns any of the above formats:
|
|
1172
|
+
|
|
1173
|
+
```js
|
|
1174
|
+
function (arg) {
|
|
1175
|
+
// return string or object
|
|
1176
|
+
}
|
|
1177
|
+
```
|
|
1178
|
+
`arg` is an object with the following properties:
|
|
1179
|
+
<table>
|
|
1180
|
+
<tr>
|
|
1181
|
+
<td>
|
|
1182
|
+
|
|
1183
|
+
`num`
|
|
1184
|
+
</td>
|
|
1185
|
+
<td>The number of hidden events</td>
|
|
1186
|
+
</tr>
|
|
1187
|
+
<tr>
|
|
1188
|
+
<td>
|
|
1189
|
+
|
|
1190
|
+
`text`
|
|
1191
|
+
</td>
|
|
1192
|
+
<td>
|
|
1193
|
+
|
|
1194
|
+
The default text like `+2 more`
|
|
1195
|
+
</td>
|
|
1196
|
+
</tr>
|
|
1197
|
+
</table>
|
|
1198
|
+
|
|
1142
1199
|
### noEventsClick
|
|
1143
1200
|
- Type `function`
|
|
1144
1201
|
- Default `undefined`
|
|
@@ -1183,6 +1240,18 @@ function () {
|
|
|
1183
1240
|
}
|
|
1184
1241
|
```
|
|
1185
1242
|
|
|
1243
|
+
### nowIndicator
|
|
1244
|
+
- Type `boolean`
|
|
1245
|
+
- Default `false`
|
|
1246
|
+
|
|
1247
|
+
Enables a marker indicating the current time in `timeGrid`/`resourceTimeGrid` views.
|
|
1248
|
+
|
|
1249
|
+
### pointer
|
|
1250
|
+
- Type `boolean`
|
|
1251
|
+
- Default `false`
|
|
1252
|
+
|
|
1253
|
+
Enables mouse cursor pointer in `timeGrid`/`resourceTimeGrid` views.
|
|
1254
|
+
|
|
1186
1255
|
### resources
|
|
1187
1256
|
- Type `Array`
|
|
1188
1257
|
- Default `[]`
|
|
@@ -1258,7 +1327,7 @@ This should be a value that can be parsed into a [Duration](#duration-object) ob
|
|
|
1258
1327
|
|
|
1259
1328
|
### theme
|
|
1260
1329
|
- Type `object` or `function`
|
|
1261
|
-
- Default `{
|
|
1330
|
+
- Default `{active: 'ec-active', bgEvent: 'ec-bg-event', bgEvents: 'ec-bg-events', body: 'ec-body', button: 'ec-button', buttonGroup: 'ec-button-group', calendar: 'ec', compact: 'ec-compact', content: 'ec-content', day: 'ec-day', dayHead: 'ec-day-head', days: 'ec-days', event: 'ec-event', eventTime: 'ec-event-time', eventTitle: 'ec-event-title', events: 'ec-events', extra: 'ec-extra', handle: 'ec-handle', header: 'ec-header', hiddenScroll: 'ec-hidden-scroll', hiddenTimes: 'ec-hidden-times', highlight: 'ec-highlight', icon: 'ec-icon', line: 'ec-line', lines: 'ec-lines', nowIndicator: 'ec-now-indicator', otherMonth: 'ec-other-month', sidebar: 'ec-sidebar', today: 'ec-today', time: 'ec-time', title: 'ec-title', toolbar: 'ec-toolbar', week: 'ec-week', withScroll: 'ec-with-scroll', uniform: 'ec-uniform', dayFoot: 'ec-day-foot', month: 'ec-month', popup: 'ec-popup', daySide: 'ec-day-side', eventTag: 'ec-event-tag', list: 'ec-list', noEvents: 'ec-no-events', resource: 'ec-resource', resourceTitle: 'ec-resource-title', draggable: 'ec-draggable', ghost: 'ec-ghost', preview: 'ec-preview', pointer: 'ec-pointer'}`
|
|
1262
1331
|
|
|
1263
1332
|
Defines the CSS classes that the Event Calendar uses to generate HTML markup.
|
|
1264
1333
|
|
|
@@ -1499,7 +1568,7 @@ Boolean (`true` or `false`) or `undefined`. The value overriding the [eventStart
|
|
|
1499
1568
|
|
|
1500
1569
|
The rendering type of the event. Can be `'auto'` or `'background'`
|
|
1501
1570
|
|
|
1502
|
-
In addition, in your callback functions, you may get the `'ghost'` and `'
|
|
1571
|
+
In addition, in your callback functions, you may get the `'ghost'`, `'preview'` and `'pointer'` for this property, which are internal values and are used, for example, to display events during drag-and-drop operations
|
|
1503
1572
|
</td>
|
|
1504
1573
|
</tr>
|
|
1505
1574
|
<tr>
|
|
@@ -1606,7 +1675,7 @@ Here are all admissible fields for the event’s input object:
|
|
|
1606
1675
|
</td>
|
|
1607
1676
|
<td>
|
|
1608
1677
|
|
|
1609
|
-
`boolean` Overrides the master [
|
|
1678
|
+
`boolean` Overrides the master [eventStartEditable](#eventstarteditable) option for this single event. Default `undefined`
|
|
1610
1679
|
</td>
|
|
1611
1680
|
</tr>
|
|
1612
1681
|
<tr>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.ec-flex{display:flex}.ec-body.ec-month,.ec-days,.ec-day,.ec-day-title,.ec-resource{flex:1 1 0%;min-width:0;max-width:100%}.ec{display:flex;flex-direction:column}.ec ::-webkit-scrollbar{background:#fff}.ec ::-webkit-scrollbar-thumb{border:4px solid #fff;box-shadow:none;background:#dadce0;border-radius:8px;min-height:40px}.ec :hover::-webkit-scrollbar-thumb{background:#bdc1c6}.ec-hidden-scroll{display:none;overflow-y:scroll;visibility:hidden;flex-shrink:0}.ec-with-scroll .ec-hidden-scroll{display:block}.ec-toolbar{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;margin-bottom:1em}.ec-toolbar>*{margin-bottom:-0.5em}.ec-toolbar>*>*{margin-bottom:.5em}.ec-toolbar>*>*:not(:last-child){margin-right:.75em}.ec-title{margin:0}.ec-button{background-color:#fff;border:1px solid #ced4da;padding:.375rem .75rem;font-size:1rem;line-height:1.5;border-radius:.25rem}.ec-button:not(:disabled){color:#212529;cursor:pointer}.ec-button:not(:disabled):hover,.ec-button.ec-active{background-color:#ececec;border-color:#b1bbc4}.ec-button-group{display:inline-flex}.ec-button-group .ec-button:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}.ec-button-group .ec-button:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.ec-icon{display:inline-block;width:1em}.ec-icon.ec-prev:after,.ec-icon.ec-next:after{content:"";position:relative;width:.5em;height:.5em;border-top:2px solid #212529;border-right:2px solid #212529;display:inline-block}.ec-icon.ec-prev:after{transform:rotate(-135deg) translate(-2px, 2px)}.ec-icon.ec-next:after{transform:rotate(45deg) translate(-2px, 2px)}.ec-header,.ec-body,.ec-days,.ec-day{border:1px solid #dadce0}.ec-header{display:flex;flex-shrink:0}.ec-header .ec-resource{flex-direction:column}.ec-header .ec-resource .ec-days{border-top-style:solid}.ec-header .ec-days{border-bottom:none}.ec-header .ec-day{min-height:24px;line-height:24px;text-align:center;overflow:hidden;text-overflow:ellipsis}.ec-body{position:relative;overflow-x:hidden;overflow-y:auto}.ec-body:not(.ec-list){border-top:none}.ec-sidebar{flex:0 0 auto;width:auto;max-width:100%;padding:0 4px 0 8px}.ec-content{display:flex}.ec-month .ec-content{flex-direction:column;height:100%}.ec-list .ec-content{flex-direction:column}.ec-resource{display:flex}.ec-days{display:flex;border-style:none none solid}.ec-days:last-child{border-bottom:none}.ec-month .ec-days,.ec-resource .ec-days{flex:1 0 auto}.ec-day{border-style:none none none solid}.ec-day.ec-today{background-color:#fcf8e3}.ec-day.ec-highlight{background-color:#e5f7fe}.ec-month .ec-day{min-height:5em}.ec-month .ec-day:first-child{border-left:none}.ec-day.ec-other-month .ec-day-head{opacity:.3}.ec-list .ec-day{flex:1 0 auto;background-color:#fff;border-style:solid none;padding:8px 14px;font-weight:bold;position:sticky;top:0;z-index:
|
|
1
|
+
.ec-flex{display:flex}.ec-body.ec-month,.ec-days,.ec-day,.ec-day-title,.ec-resource{flex:1 1 0%;min-width:0;max-width:100%}.ec{display:flex;flex-direction:column}.ec ::-webkit-scrollbar{background:#fff}.ec ::-webkit-scrollbar-thumb{border:4px solid #fff;box-shadow:none;background:#dadce0;border-radius:8px;min-height:40px}.ec :hover::-webkit-scrollbar-thumb{background:#bdc1c6}.ec-hidden-scroll{display:none;overflow-y:scroll;visibility:hidden;flex-shrink:0}.ec-with-scroll .ec-hidden-scroll{display:block}.ec-toolbar{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;margin-bottom:1em}.ec-toolbar>*{margin-bottom:-0.5em}.ec-toolbar>*>*{margin-bottom:.5em}.ec-toolbar>*>*:not(:last-child){margin-right:.75em}.ec-title{margin:0}.ec-button{background-color:#fff;border:1px solid #ced4da;padding:.375rem .75rem;font-size:1rem;line-height:1.5;border-radius:.25rem}.ec-button:not(:disabled){color:#212529;cursor:pointer}.ec-button:not(:disabled):hover,.ec-button.ec-active{background-color:#ececec;border-color:#b1bbc4}.ec-button-group{display:inline-flex}.ec-button-group .ec-button:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}.ec-button-group .ec-button:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.ec-icon{display:inline-block;width:1em}.ec-icon.ec-prev:after,.ec-icon.ec-next:after{content:"";position:relative;width:.5em;height:.5em;border-top:2px solid #212529;border-right:2px solid #212529;display:inline-block}.ec-icon.ec-prev:after{transform:rotate(-135deg) translate(-2px, 2px)}.ec-icon.ec-next:after{transform:rotate(45deg) translate(-2px, 2px)}.ec-header,.ec-body,.ec-days,.ec-day{border:1px solid #dadce0}.ec-header{display:flex;flex-shrink:0}.ec-header .ec-resource{flex-direction:column}.ec-header .ec-resource .ec-days{border-top-style:solid}.ec-header .ec-days{border-bottom:none}.ec-header .ec-day{min-height:24px;line-height:24px;text-align:center;overflow:hidden;text-overflow:ellipsis}.ec-body{position:relative;overflow-x:hidden;overflow-y:auto}.ec-body:not(.ec-list){border-top:none}.ec-sidebar{flex:0 0 auto;width:auto;max-width:100%;padding:0 4px 0 8px}.ec-content{display:flex}.ec-month .ec-content{flex-direction:column;height:100%}.ec-month.ec-uniform .ec-content{overflow:hidden}.ec-list .ec-content{flex-direction:column}.ec-resource{display:flex}.ec-days{display:flex;border-style:none none solid}.ec-days:last-child{border-bottom:none}.ec-month .ec-days,.ec-resource .ec-days{flex:1 0 auto}.ec-month.ec-uniform .ec-days{flex:1 1 0%;min-height:0}.ec-day{border-style:none none none solid}.ec-day.ec-today{background-color:#fcf8e3}.ec-day.ec-highlight{background-color:#e5f7fe}.ec-month.ec-body .ec-day{min-height:5em;position:relative}.ec-month.ec-uniform .ec-day{min-height:0}.ec-month .ec-day:first-child{border-left:none}.ec-day.ec-other-month .ec-day-head{opacity:.3}.ec-list .ec-day{flex:1 0 auto;background-color:#fff;border-style:solid none;padding:8px 14px;font-weight:bold;position:-webkit-sticky;position:sticky;top:0;z-index:2}.ec-list .ec-day:first-child{border-top:none}.ec-month .ec-day-head{text-align:right;padding:4px 4px 3px}.ec-month .ec-day-foot{position:absolute;bottom:0;padding:2px;font-size:.85em}.ec-month .ec-day-foot a{cursor:pointer}.ec-list .ec-day-side{float:right}.ec-list .ec-no-events{text-align:center;padding:5em 0}.ec-events{margin:0 6px 0 0}.ec-week .ec-events,.ec-events.ec-preview{position:relative}.ec-event{display:flex;flex-direction:column;padding:2px;color:#fff;box-sizing:border-box;box-shadow:0 0 1px 0 #dadce0;background-color:#039be5;border-radius:3px;font-size:.85em;line-height:1.5;z-index:1}.ec-month .ec-event{position:relative;flex-direction:row}.ec-week .ec-event{position:absolute}.ec-list .ec-event{flex-direction:row;padding:8px 14px;color:inherit;background-color:transparent;border-radius:0}.ec-event.ec-preview{cursor:pointer;position:absolute;z-index:1000;width:100%;-webkit-user-select:none;user-select:none;opacity:.8}.ec-event.ec-pointer{color:inherit;pointer-events:none;-webkit-user-select:none;user-select:none;position:absolute;z-index:0;box-shadow:none;display:none}.ec-day:hover .ec-event.ec-pointer{display:flex}.ec-event-tag{width:4px;border-radius:2px;margin-right:8px}.ec-event-time{overflow:hidden;white-space:nowrap;margin:0 0 1px 0;flex-shrink:0}.ec-month .ec-event-time{margin:0 3px 0 0;max-width:100%;text-overflow:ellipsis}.ec-event-title{overflow:hidden}.ec-month .ec-event-title{white-space:nowrap;text-overflow:ellipsis}.ec-week .ec-event-title{position:-webkit-sticky;position:sticky;top:0}.ec-list .ec-event-title{font-size:1rem}.ec-draggable{cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none}.ec-ghost{opacity:.5;-webkit-user-select:none;user-select:none;touch-action:none}.ec-bg-events{position:relative}.ec-bg-event{position:absolute;background-color:#dadce0;opacity:.3;width:100%}.ec-hidden-times{visibility:hidden;overflow-y:hidden;height:0}.ec-time,.ec-line{height:24px}.ec-time{position:relative;line-height:24px;top:-12px;text-align:right;white-space:nowrap}.ec-lines{width:8px}.ec-line:not(:first-child):after{content:"";position:absolute;width:100%;border-bottom:1px solid #dadce0;pointer-events:none}.ec-body:not(.ec-compact) .ec-line:nth-child(even):after{border-bottom-style:dotted}.ec-popup{position:absolute;top:0;width:110%;min-width:180px;z-index:1010;padding:8px 10px 14px;background-color:#fff;border-radius:6px;outline:1px solid transparent;box-shadow:0 1px 3px 0 rgba(60,64,67,.3),0 4px 8px 3px rgba(60,64,67,.15)}.ec-popup .ec-day-head{text-align:left;display:flex;justify-content:space-between}.ec-popup .ec-day-head a{cursor:pointer;font-size:1.5em;line-height:.8}.ec-popup .ec-events{margin:0}.ec-extra{position:relative}.ec-now-indicator{position:absolute;z-index:1005;width:100%;border-top:#ea4335 solid 2px}.ec-now-indicator:before{background:#ea4335;border-radius:50%;content:"";position:absolute;height:12px;margin-left:-7px;margin-top:-7px;width:12px}
|