@event-calendar/build 0.6.0 → 0.8.1
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,16 @@ 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)
|
|
66
70
|
- [pointer](#pointer)
|
|
67
71
|
- [resources](#resources)
|
|
68
72
|
- [scrollTime](#scrolltime)
|
|
@@ -361,6 +365,24 @@ function (date) {
|
|
|
361
365
|
</tr>
|
|
362
366
|
</table>
|
|
363
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
|
+
|
|
364
386
|
### displayEventEnd
|
|
365
387
|
- Type `boolean`
|
|
366
388
|
- Default `true`
|
|
@@ -1140,6 +1162,40 @@ Defines the `locales` parameter for the native JavaScript [Intl.DateTimeFormat](
|
|
|
1140
1162
|
|
|
1141
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).
|
|
1142
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
|
+
|
|
1143
1199
|
### noEventsClick
|
|
1144
1200
|
- Type `function`
|
|
1145
1201
|
- Default `undefined`
|
|
@@ -1184,6 +1240,12 @@ function () {
|
|
|
1184
1240
|
}
|
|
1185
1241
|
```
|
|
1186
1242
|
|
|
1243
|
+
### nowIndicator
|
|
1244
|
+
- Type `boolean`
|
|
1245
|
+
- Default `false`
|
|
1246
|
+
|
|
1247
|
+
Enables a marker indicating the current time in `timeGrid`/`resourceTimeGrid` views.
|
|
1248
|
+
|
|
1187
1249
|
### pointer
|
|
1188
1250
|
- Type `boolean`
|
|
1189
1251
|
- Default `false`
|
|
@@ -1265,7 +1327,7 @@ This should be a value that can be parsed into a [Duration](#duration-object) ob
|
|
|
1265
1327
|
|
|
1266
1328
|
### theme
|
|
1267
1329
|
- Type `object` or `function`
|
|
1268
|
-
- 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'}`
|
|
1269
1331
|
|
|
1270
1332
|
Defines the CSS classes that the Event Calendar uses to generate HTML markup.
|
|
1271
1333
|
|
|
@@ -1506,7 +1568,7 @@ Boolean (`true` or `false`) or `undefined`. The value overriding the [eventStart
|
|
|
1506
1568
|
|
|
1507
1569
|
The rendering type of the event. Can be `'auto'` or `'background'`
|
|
1508
1570
|
|
|
1509
|
-
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
|
|
1510
1572
|
</td>
|
|
1511
1573
|
</tr>
|
|
1512
1574
|
<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-body .ec-day{min-height:5em}.ec-month .ec-day:first-child{border-left:none}.ec-day.ec-other-month .ec-day-head{opacity:.3}.ec-list .ec-day{flex:1 0 auto;background-color:#fff;border-style:solid none;padding:8px 14px;font-weight:bold;position:sticky;top:0;z-index:
|
|
1
|
+
.ec-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;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}
|