@event-calendar/build 4.5.2 → 4.6.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
|
@@ -66,13 +66,14 @@ Inspired by [FullCalendar](https://fullcalendar.io/), it implements similar opti
|
|
|
66
66
|
- [eventDragStart](#eventdragstart)
|
|
67
67
|
- [eventDragStop](#eventdragstop)
|
|
68
68
|
- [eventDrop](#eventdrop)
|
|
69
|
+
- [eventDurationEditable](#eventdurationeditable)
|
|
69
70
|
</td><td>
|
|
70
71
|
|
|
71
|
-
- [eventDurationEditable](#eventdurationeditable)
|
|
72
72
|
- [eventFilter](#eventfilter)
|
|
73
73
|
- [eventLongPressDelay](#eventlongpressdelay)
|
|
74
74
|
- [eventMouseEnter](#eventmouseenter)
|
|
75
75
|
- [eventMouseLeave](#eventmouseleave)
|
|
76
|
+
- [eventOrder](#eventorder)
|
|
76
77
|
- [eventResizableFromStart](#eventresizablefromstart)
|
|
77
78
|
- [eventResize](#eventresize)
|
|
78
79
|
- [eventResizeStart](#eventresizestart)
|
|
@@ -243,8 +244,8 @@ This bundle contains a version of the calendar that includes all plugins and is
|
|
|
243
244
|
|
|
244
245
|
The first step is to include the following lines of code in the `<head>` section of your page:
|
|
245
246
|
```html
|
|
246
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@4.
|
|
247
|
-
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@4.
|
|
247
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@4.6.0/dist/event-calendar.min.css">
|
|
248
|
+
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@4.6.0/dist/event-calendar.min.js"></script>
|
|
248
249
|
```
|
|
249
250
|
|
|
250
251
|
<details>
|
|
@@ -1286,6 +1287,51 @@ The current [View](#view-object) object
|
|
|
1286
1287
|
</tr>
|
|
1287
1288
|
</table>
|
|
1288
1289
|
|
|
1290
|
+
### eventOrder
|
|
1291
|
+
- Type `function`
|
|
1292
|
+
- Default `undefined`
|
|
1293
|
+
|
|
1294
|
+
A function that determines the order in which events that visually intersect in the current view are displayed.
|
|
1295
|
+
|
|
1296
|
+
When `eventOrder` is not specified, events are ordered by start time with all-day events appearing first.
|
|
1297
|
+
|
|
1298
|
+
```js
|
|
1299
|
+
function (a, b) {
|
|
1300
|
+
// Return a negative value if 'a' should come before 'b'
|
|
1301
|
+
// Return a positive value if 'a' should come after 'b'
|
|
1302
|
+
// Return zero if 'a' and 'b' are equal
|
|
1303
|
+
}
|
|
1304
|
+
```
|
|
1305
|
+
|
|
1306
|
+
`a` and `b` are objects (so called `event chunks`) with the following properties:
|
|
1307
|
+
|
|
1308
|
+
<table>
|
|
1309
|
+
<tr>
|
|
1310
|
+
<td>
|
|
1311
|
+
|
|
1312
|
+
`start`
|
|
1313
|
+
</td>
|
|
1314
|
+
<td>JavaScript Date object holding the event chunk’s start time</td>
|
|
1315
|
+
</tr>
|
|
1316
|
+
<tr>
|
|
1317
|
+
<td>
|
|
1318
|
+
|
|
1319
|
+
`end`
|
|
1320
|
+
</td>
|
|
1321
|
+
<td>JavaScript Date object holding the event chunk’s end time</td>
|
|
1322
|
+
</tr>
|
|
1323
|
+
<tr>
|
|
1324
|
+
<td>
|
|
1325
|
+
|
|
1326
|
+
`event`
|
|
1327
|
+
</td>
|
|
1328
|
+
<td>
|
|
1329
|
+
|
|
1330
|
+
The [Event](#event-object) object associated with this chunk
|
|
1331
|
+
</td>
|
|
1332
|
+
</tr>
|
|
1333
|
+
</table>
|
|
1334
|
+
|
|
1289
1335
|
### eventResizableFromStart
|
|
1290
1336
|
- Type `boolean`
|
|
1291
1337
|
- Default `false`
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* EventCalendar v4.
|
|
2
|
+
* EventCalendar v4.6.0
|
|
3
3
|
* https://github.com/vkurko/calendar
|
|
4
4
|
*/
|
|
5
5
|
.ec{color-scheme:light;--ec-h: 0;--ec-s: 0%;--ec-l-300: 91%;--ec-l-500: 83.5%;--ec-l-600: 78.4%;--ec-l-700: 71.4%;--ec-bg-fallback-color: #fff;--ec-hs: var(--ec-h), var(--ec-s);--ec-color-300: hsl(var(--ec-hs), var(--ec-l-300));--ec-color-500: hsl(var(--ec-hs), var(--ec-l-500));--ec-color-600: hsl(var(--ec-hs), var(--ec-l-600));--ec-color-700: hsl(var(--ec-hs), var(--ec-l-700));--ec-border-color: var(--ec-color-500);--ec-accent-color: var(--ec-color-600);--ec-button-bg-color: var(--ec-bg-color);--ec-button-border-color: var(--ec-color-600);--ec-button-text-color: var(--ec-text-color);--ec-button-active-bg-color: var(--ec-color-300);--ec-button-active-border-color: var(--ec-color-700);--ec-button-active-text-color: var(--ec-button-text-color);--ec-event-bg-color: #039be5;--ec-event-text-color: #fff;--ec-bg-event-color: var(--ec-color-500);--ec-bg-event-opacity: .3;--ec-list-day-bg-color: var(--ec-bg-color, var(--ec-bg-fallback-color));--ec-today-bg-color: rgba(255, 220, 40, .15);--ec-highlight-color: rgba(188, 232, 241, .3);--ec-popup-bg-color: var(--ec-bg-color, var(--ec-bg-fallback-color));--ec-now-indicator-color: #ea4335}.ec-dark .ec{color-scheme:dark;--ec-h: 215;--ec-s: 15%;--ec-l-300: 25.5%;--ec-l-500: 42.4%;--ec-l-600: 49.8%;--ec-l-700: 57.3%;--ec-bg-fallback-color: #22272e}@media (prefers-color-scheme: dark){.ec-auto-dark .ec{color-scheme:dark;--ec-h: 215;--ec-s: 15%;--ec-l-300: 25.5%;--ec-l-500: 42.4%;--ec-l-600: 49.8%;--ec-l-700: 57.3%;--ec-bg-fallback-color: #22272e}}.ec-timeline .ec-container{display:flex;flex:1 1 0%;min-height:0}.ec-timeline .ec-main{display:flex;flex-direction:column;min-width:0;position:relative}.ec-timeline .ec-content{flex-direction:column}.ec-timeline .ec-body{flex:1 1 auto;overflow:auto}.ec-timeline .ec-body .ec-content{min-height:100%;min-width:max-content;position:relative}.ec-timeline .ec-body .ec-days{flex-shrink:0}.ec-timeline .ec-body .ec-days:not(:last-child){flex-grow:0}.ec-timeline .ec-header{overflow:hidden}.ec-timeline .ec-header .ec-days{min-width:max-content}.ec-timeline .ec-header .ec-day{flex-basis:auto;display:flex;flex-direction:column}.ec-timeline .ec-header .ec-day:first-child .ec-day-head,.ec-timeline .ec-header .ec-day:first-child .ec-time:first-child,.ec-timeline .ec-day{border:none}.ec-timeline .ec-day-head{border-style:none none none solid}.ec-timeline .ec-times{display:flex;border-top:1px solid var(--ec-border-color)}.ec-timeline .ec-time{border-left:1px solid var(--ec-border-color);box-sizing:border-box;font-size:.95em;min-height:24px;overflow:hidden;text-overflow:ellipsis}.ec-timeline .ec-time.ec-minor{visibility:hidden}.ec-timeline .ec-time,.ec-timeline .ec-line{width:72px}.ec-timeline .ec-events{position:relative;height:100%;margin:0}.ec-timeline .ec-event{position:absolute}.ec-timeline .ec-bg-event{height:100%;z-index:auto}.ec-timeline .ec-lines{display:flex}.ec-timeline .ec-line:not(:first-child):after{content:"";position:absolute;height:100%;border-left:1px solid var(--ec-border-color);pointer-events:none}.ec-timeline .ec-line.ec-minor:after{border-left-style:dotted}.ec-timeline .ec-sidebar{padding:0;border:1px solid var(--ec-border-color);border-right-style:none}.ec-timeline .ec-sidebar .ec-sidebar-title{flex-shrink:0;border-bottom:1px solid var(--ec-border-color);box-sizing:content-box}.ec-timeline .ec-sidebar .ec-content{flex:1;overflow:hidden}.ec-timeline .ec-sidebar .ec-resource{padding:0 8px;flex-shrink:0}.ec-timeline .ec-sidebar .ec-resource:not(:last-child){flex-grow:0;border-bottom:1px solid var(--ec-border-color)}.ec-timeline .ec-sidebar .ec-resource:last-child{flex-basis:100%!important}.ec-timeline .ec-sidebar .ec-resource span{padding-top:8px;height:fit-content}.ec-time-grid .ec-body .ec-event{position:absolute}.ec-time-grid .ec-body .ec-event-title{position:sticky;top:0}.ec-time-grid .ec-body .ec-resizer{left:0;right:0;bottom:0;height:50%;max-height:8px;cursor:ns-resize}.ec-time-grid .ec-body .ec-resizer.ec-start{bottom:auto;top:0}.ec-time-grid .ec-bg-event{width:100%;z-index:1}.ec-time-grid .ec-time{position:relative;line-height:24px;top:-12px;text-align:right}.ec-time-grid .ec-time.ec-minor{visibility:hidden}.ec-time-grid .ec-header .ec-time,.ec-time-grid .ec-all-day .ec-time{visibility:hidden;overflow-y:hidden;height:0}.ec-time-grid .ec-time,.ec-time-grid .ec-line{height:24px}.ec-time-grid .ec-lines{width:8px}.ec-time-grid .ec-line:not(:first-child):after{content:"";position:absolute;width:100%;border-bottom:1px solid var(--ec-border-color);pointer-events:none}.ec-time-grid .ec-line.ec-minor:after{border-bottom-style:dotted}.ec-time-grid .ec-sidebar-title{visibility:hidden;overflow-y:hidden;height:0;text-align:right}.ec-time-grid .ec-all-day .ec-sidebar-title{visibility:visible;height:auto;padding:8px 0}.ec-day-grid .ec-body{flex:1 1 auto}.ec-day-grid .ec-body .ec-day{min-height:5em;position:relative}.ec-day-grid .ec-content{flex-direction:column;height:100%}.ec-day-grid .ec-uniform .ec-content{overflow:hidden}.ec-day-grid .ec-uniform .ec-days{flex:1 1 0%;min-height:0}.ec-day-grid .ec-uniform .ec-day{min-height:0}.ec-day-grid .ec-day:first-child{border-left:none}.ec-day-grid .ec-day-head{display:flex;flex-direction:row-reverse;justify-content:space-between;border:none;padding:4px 4px 3px}.ec-day-grid .ec-day-foot{position:absolute;bottom:0;padding:2px;font-size:.85em}.ec-day-grid .ec-day-foot a{cursor:pointer}.ec-days,.ec-day,.ec-resource{flex:1 1 0;min-width:0;max-width:100%}.ec{display:flex;flex-direction:column;color:var(--ec-text-color);background-color:var(--ec-bg-color);-webkit-tap-highlight-color:transparent}.ec ::-webkit-scrollbar{background-color:transparent}.ec ::-webkit-scrollbar-thumb{border:4px solid transparent;box-shadow:none;background-color:var(--ec-border-color);background-clip:padding-box;border-radius:8px;min-height:40px}.ec :hover::-webkit-scrollbar-thumb{background-color:var(--ec-accent-color)}.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:-.5em}.ec-toolbar>*>*{margin-bottom:.5em}.ec-toolbar>*>*:not(:last-child){margin-right:.75em}.ec-title{margin:0}.ec-button{background-color:var(--ec-button-bg-color);border:1px solid var(--ec-button-border-color);padding:.375rem .75rem;font-size:1rem;line-height:1.5;border-radius:.25rem}.ec-button:not(:disabled){color:var(--ec-button-text-color);cursor:pointer}.ec-button:not(:disabled):hover,.ec-button.ec-active{background-color:var(--ec-button-active-bg-color);border-color:var(--ec-button-active-border-color);color:var(--ec-button-active-text-color);z-index:1}.ec-expander{margin-right:.25em;width:1.25em}.ec-expander .ec-button{line-height:normal;padding:0;aspect-ratio:1;height:1.25em}.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 currentcolor;border-right:2px solid currentcolor;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,.ec-day-head{border:1px solid var(--ec-border-color)}.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;position:relative}.ec-body{position:relative;overflow-x:hidden;overflow-y:auto}.ec:not(.ec-list) .ec-body{border-top:none}.ec-sidebar{flex:0 0 auto;width:auto;max-width:100%;padding:0 4px 0 8px;display:flex;flex-direction:column}.ec-content{display:flex}.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-day-grid .ec-days,.ec-resource .ec-days{flex:1 0 auto}.ec-day{border-style:none none none solid}.ec-day.ec-today{background-color:var(--ec-today-bg-color)}.ec-day.ec-highlight{background-color:var(--ec-highlight-color)}.ec-day.ec-disabled{position:relative}.ec-day.ec-disabled:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-color:var(--ec-bg-event-color);opacity:.3}.ec-day.ec-other-month .ec-day-head time{opacity:.3}.ec-list .ec-day{border:none}.ec-list .ec-day-head{background-color:var(--ec-list-day-bg-color);border-style:solid none;margin:-1px 0 0;padding:8px 14px;position:sticky;top:0;z-index:2}.ec-list .ec-day.ec-today .ec-day-head:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background-color:var(--ec-today-bg-color)}.ec-list .ec-day:first-child .ec-day-head{border-top:none}.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-time-grid .ec-events,.ec-events.ec-preview{position:relative}.ec-day-grid .ec-events,.ec-all-day .ec-events{display:flow-root}.ec-event{display:flex;padding:2px;color:var(--ec-event-text-color);box-sizing:border-box;box-shadow:0 0 1px 0 var(--ec-border-color);background-color:var(--ec-event-bg-color);border-radius:3px;font-size:.85em;line-height:1.5;z-index:1}.ec-day-grid .ec-event,.ec-all-day .ec-event{position:relative}.ec-list .ec-event{flex-direction:row;padding:8px 14px;color:inherit;background-color:transparent;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:flex}.ec-event-body{display:flex;flex-direction:column;width:100%}.ec-day-grid .ec-event-body,.ec-all-day .ec-event-body,.ec-timeline .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;flex-shrink:0;max-height:100%}.ec-day-grid .ec-event-time,.ec-timeline .ec-event-time{margin:0 3px 0 0;max-width:100%;text-overflow:ellipsis}.ec-event-title{overflow:hidden;margin:unset;font-weight:inherit}.ec-day-grid .ec-event-title,.ec-all-day .ec-event-title,.ec-timeline .ec-event-title{min-height:1.5em;white-space:nowrap;text-overflow:ellipsis}.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;pointer-events:none}.ec-bg-events{position:relative}.ec-day-grid .ec-bg-events,.ec-all-day .ec-bg-events{position:absolute;top:0;right:0;bottom:0;left:0}.ec-bg-event{position:absolute;background-color:var(--ec-bg-event-color);opacity:var(--ec-bg-event-opacity)}.ec-day-grid .ec-bg-event,.ec-all-day .ec-bg-event{height:100%;z-index:auto}.ec-time{white-space:nowrap}.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:var(--ec-popup-bg-color);border:1px solid var(--ec-border-color);border-radius:6px;outline:1px solid transparent;box-shadow:0 1px 3px hsla(var(--ec-hs),50%,.15),0 4px 8px 3px hsla(var(--ec-hs),50%,.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;user-select:none}.ec-now-indicator{position:absolute;z-index:1005;pointer-events:none}.ec-time-grid .ec-now-indicator{width:100%;border-top:var(--ec-now-indicator-color) solid 2px}.ec-timeline .ec-now-indicator{border-left:var(--ec-now-indicator-color) solid 2px;will-change:transform}.ec-now-indicator:before{background:var(--ec-now-indicator-color);border-radius:50%;content:"";display:block;height:12px;margin-top:-7px;width:12px}.ec-timeline .ec-now-indicator:before{margin-left:-7px}.ec-resizer{position:absolute;-webkit-user-select:none;user-select:none}.ec-day-grid .ec-resizer,.ec-all-day .ec-resizer,.ec-timeline .ec-resizer{top:0;right:0;bottom:0;width:50%;max-width:8px;cursor:ew-resize}.ec-day-grid .ec-resizer.ec-start,.ec-all-day .ec-resizer.ec-start,.ec-timeline .ec-resizer.ec-start{right:auto;left:0}.ec-dragging,.ec-dragging *{cursor:pointer!important}.ec-resizing-y,.ec-resizing-y *{cursor:ns-resize!important}.ec-resizing-x,.ec-resizing-x *{cursor:ew-resize!important}
|