@event-calendar/build 2.0.0 → 2.1.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 +24 -23
- 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
|
@@ -124,6 +124,7 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
|
|
|
124
124
|
- [unselect](#unselect-1)
|
|
125
125
|
</td></tr>
|
|
126
126
|
</table>
|
|
127
|
+
- [Content](#content)
|
|
127
128
|
- [Event object](#event-object)
|
|
128
129
|
- [Parsing event from a plain object](#parsing-event-from-a-plain-object)
|
|
129
130
|
- [Duration object](#duration-object)
|
|
@@ -194,8 +195,8 @@ import '@event-calendar/core/index.css';
|
|
|
194
195
|
### Pre-built browser ready bundle
|
|
195
196
|
Include the following lines of code in the `<head>` section of your page:
|
|
196
197
|
```html
|
|
197
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.
|
|
198
|
-
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.
|
|
198
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.1.0/event-calendar.min.css">
|
|
199
|
+
<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.1.0/event-calendar.min.js"></script>
|
|
199
200
|
```
|
|
200
201
|
|
|
201
202
|
<details>
|
|
@@ -286,15 +287,15 @@ When hidden with `false`, all-day events will not be displayed in `timeGrid`/`re
|
|
|
286
287
|
- Type `object` or `function`
|
|
287
288
|
- Default `{close: 'Close', dayGridMonth: 'month', listDay: 'list', listMonth: 'list', listWeek: 'list', listYear: 'list', resourceTimeGridDay: 'day', resourceTimeGridWeek: 'week', timeGridDay: 'day', timeGridWeek: 'week', today: 'today'}`
|
|
288
289
|
> Views override the default value as follows:
|
|
289
|
-
> - dayGridMonth `
|
|
290
|
-
> - listDay `
|
|
291
|
-
> - listMonth `
|
|
292
|
-
> - listWeek `
|
|
293
|
-
> - listYear `
|
|
294
|
-
> - resourceTimeGridDay `
|
|
295
|
-
> - resourceTimeGridWeek `
|
|
296
|
-
> - timeGridDay `
|
|
297
|
-
> - timeGridWeek `
|
|
290
|
+
> - dayGridMonth `text => ({...text, next: 'Next month', prev: 'Previous month'})`
|
|
291
|
+
> - listDay `text => ({...text, next: 'Next day', prev: 'Previous day'})`
|
|
292
|
+
> - listMonth `text => ({...text, next: 'Next month', prev: 'Previous month'})`
|
|
293
|
+
> - listWeek `text => ({...text, next: 'Next week', prev: 'Previous week'})`
|
|
294
|
+
> - listYear `text => ({...text, next: 'Next year', prev: 'Previous year'})`
|
|
295
|
+
> - resourceTimeGridDay `text => ({...text, next: 'Next day', prev: 'Previous day'})`
|
|
296
|
+
> - resourceTimeGridWeek `text => ({...text, next: 'Next week', prev: 'Previous week'})`
|
|
297
|
+
> - timeGridDay `text => ({...text, next: 'Next day', prev: 'Previous day'})`
|
|
298
|
+
> - timeGridWeek `text => ({...text, next: 'Next week', prev: 'Previous week'})`
|
|
298
299
|
|
|
299
300
|
|
|
300
301
|
Text that is displayed in buttons of the header toolbar.
|
|
@@ -1303,7 +1304,7 @@ Determines whether the events on the calendar can be dragged.
|
|
|
1303
1304
|
|
|
1304
1305
|
Defines the time-text that is displayed on each event.
|
|
1305
1306
|
|
|
1306
|
-
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 a [Content](#content) with formatted string:
|
|
1307
|
+
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 a [Content](#content) with the formatted string:
|
|
1307
1308
|
|
|
1308
1309
|
```js
|
|
1309
1310
|
function (start, end) {
|
|
@@ -1905,7 +1906,17 @@ This should be a value that can be parsed into a [Duration](#duration-object) ob
|
|
|
1905
1906
|
|
|
1906
1907
|
### theme
|
|
1907
1908
|
- Type `object` or `function`
|
|
1908
|
-
- 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',
|
|
1909
|
+
- 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', 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', view: '', withScroll: 'ec-with-scroll'}`
|
|
1910
|
+
> Views override the default value as follows:
|
|
1911
|
+
> - dayGridMonth `theme => ({...theme, view: 'ec-day-grid ec-month-view'})`
|
|
1912
|
+
> - listDay `theme => ({...theme, view: 'ec-list ec-day-view'})`
|
|
1913
|
+
> - listMonth `theme => ({...theme, view: 'ec-list ec-month-view'})`
|
|
1914
|
+
> - listWeek `theme => ({...theme, view: 'ec-list ec-week-view'})`
|
|
1915
|
+
> - listYear `theme => ({...theme, view: 'ec-list ec-year-view'})`
|
|
1916
|
+
> - resourceTimeGridDay `theme => ({...theme, view: 'ec-time-grid ec-resource-day-view'})`
|
|
1917
|
+
> - resourceTimeGridWeek `theme => ({...theme, view: 'ec-time-grid ec-resource-week-view'})`
|
|
1918
|
+
> - timeGridDay `theme => ({...theme, view: 'ec-time-grid ec-day-view'})`
|
|
1919
|
+
> - timeGridWeek `theme => ({...theme, view: 'ec-time-grid ec-week-view'})`
|
|
1909
1920
|
|
|
1910
1921
|
Defines the CSS classes that the Event Calendar uses to generate HTML markup.
|
|
1911
1922
|
|
|
@@ -1959,16 +1970,6 @@ function (start, end) {
|
|
|
1959
1970
|
</tr>
|
|
1960
1971
|
</table>
|
|
1961
1972
|
|
|
1962
|
-
The callback function can return HTML markup. If you want to use HTML entities in the title, you must use the callback function:
|
|
1963
|
-
|
|
1964
|
-
```js
|
|
1965
|
-
function (date) {
|
|
1966
|
-
let month = date.toLocaleDateString('en-US', { month: 'long' })
|
|
1967
|
-
let year = date.toLocaleDateString('en-US', { year: 'numeric' })
|
|
1968
|
-
return `<span class="month">${month}</span> <span class="year">${year}</span>`
|
|
1969
|
-
}
|
|
1970
|
-
```
|
|
1971
|
-
|
|
1972
1973
|
### unselect
|
|
1973
1974
|
- Type `function`
|
|
1974
1975
|
- Default `undefined`
|
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{flex-shrink:0;border-top:none}.ec-all-day .ec-days{border-bottom:none}.ec-all-day .ec-day{padding-bottom:4px}.ec-body{position:relative;overflow-x:hidden;overflow-y:auto}.ec:not(.ec-list) .ec-body{border-top:none}.ec-
|
|
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-body{position:relative;overflow-x:hidden;overflow-y:auto}.ec:not(.ec-list) .ec-body{border-top:none}.ec-day-grid .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-day-grid .ec-content{flex-direction:column;height:100%}.ec-day-grid .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-day-grid .ec-days,.ec-resource .ec-days{flex:1 0 auto}.ec-day-grid .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-day-grid .ec-body .ec-day{min-height:5em;position:relative}.ec-day-grid .ec-uniform .ec-day{min-height:0}.ec-day-grid .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-day-grid .ec-day-head{text-align:right;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-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-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-day-grid .ec-event,.ec-all-day .ec-event{position:relative}.ec-time-grid .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-day-grid .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-day-grid .ec-event-time{margin:0 3px 0 0;max-width:100%;text-overflow:ellipsis}.ec-event-title{overflow:hidden}.ec-day-grid .ec-event-title,.ec-all-day .ec-event-title{min-height:1.5em;white-space:nowrap;text-overflow:ellipsis}.ec-time-grid .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-day-grid .ec-resizer,.ec-all-day .ec-resizer{top:0;right:0;bottom:0;width:50%;max-width:8px;cursor:ew-resize}.ec-time-grid .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}
|