@event-calendar/core 0.10.1 → 0.11.1

package/README.md

@@ -1,10 +1,10 @@
-# Event Calendar [![](https://data.jsdelivr.com/v1/package/npm/@event-calendar/build/badge)](https://www.jsdelivr.com/package/npm/@event-calendar/build) [![Donate](https://img.shields.io/badge/Donate_$10-PayPal-green.svg)](https://www.paypal.me/vkurko/10usd) [![Donate](https://img.shields.io/badge/Donate_$1-PayPal-green.svg)](https://www.paypal.me/vkurko/1usd)
+# Event Calendar [![](https://data.jsdelivr.com/v1/package/npm/@event-calendar/build/badge)](https://www.jsdelivr.com/package/npm/@event-calendar/build) [![Sponsor](https://img.shields.io/badge/Sponsor-$10-green.svg)](https://www.paypal.me/vkurko/10usd) [![Sponsor](https://img.shields.io/badge/Sponsor-$1-green.svg)](https://www.paypal.me/vkurko/1usd)
 
 See [demo](https://vkurko.github.io/calendar/).
 
 Full-sized drag & drop JavaScript event calendar with resource view:
 
-* Lightweight (48kb [br](https://en.wikipedia.org/wiki/Brotli) compressed `modern` version)
+* Lightweight (51kb [br](https://en.wikipedia.org/wiki/Brotli) compressed `modern` version)
 * Zero-dependency (pre-built bundle)
 * Used by [Bookly](https://wordpress.org/plugins/bookly-responsive-appointment-booking-tool/)
 
@@ -19,6 +19,8 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
   <table>
   <tr><td>
 
+  - [allDayContent](#alldaycontent)
+  - [allDaySlot](#alldayslot)
   - [buttonText](#buttontext)
   - [date](#date)
   - [dateClick](#dateclick)
@@ -38,9 +40,9 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
   - [eventContent](#eventcontent)
   - [eventDidMount](#eventdidmount)
   - [eventDragMinDistance](#eventdragmindistance)
-  - [eventDragStart](#eventdragstart)
   </td><td>
 
+  - [eventDragStart](#eventdragstart)
   - [eventDragStop](#eventdragstop)
   - [eventDrop](#eventdrop)
   - [eventDurationEditable](#eventdurationeditable)
@@ -212,6 +214,41 @@ In Svelte, you can simply update the original `options` object.
 
 ## Options
 
+### allDayContent
+- Type `string`, `object`or `function`
+- Default `'all-day'`
+
+Defines the content that is displayed as a title of the `all-day` slot.
+
+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:
+
+```js
+function (arg) {
+    // return string or object
+}
+```
+`arg` is an object with the following properties:
+<table>
+<tr>
+<td>
+
+`text`
+</td>
+<td>
+
+The default text
+</td>
+</tr>
+</table>
+
+### allDaySlot
+- Type `boolean`
+- Default `true`
+
+Determines whether the `all-day` slot is displayed at the top of the calendar.
+
+When hidden with `false`, all-day events will not be displayed in `timeGrid`/`resourceTimeGrid` views.
+
 ### buttonText
 - Type `object`
 - Default `{today: 'today', dayGridMonth: 'month', listDay: 'list', listWeek: 'list', listMonth: 'list', listYear: 'list', resourceTimeGridDay: 'day', resourceTimeGridWeek: 'week', timeGridDay: 'day', timeGridWeek: 'week'}`
@@ -1492,7 +1529,7 @@ This should be a value that can be parsed into a [Duration](#duration-object) ob
 
 ### theme
 - Type `object` or `function`
-- 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', eventBody: 'ec-event-body', 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', resizer: 'ec-resizer', dragging: 'ec-dragging', resizingY: 'ec-resizing-y', resizingX: 'ec-resizing-x'}`
+- 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', hiddenTimes: 'ec-hidden-times', 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', 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'}`
 
 Defines the CSS classes that the Event Calendar uses to generate HTML markup.
 
@@ -1691,6 +1728,15 @@ Here are all properties that exist in Event object:
 <tr>
 <td>
 
+`allDay`
+</td>
+<td>
+
+Boolean (`true` or `false`). Determines if the event is shown in the `all-day` slot</td>
+</tr>
+<tr>
+<td>
+
 `start`
 </td>
 <td>JavaScript Date object holding the event’s start time</td>
@@ -1811,6 +1857,16 @@ Here are all admissible fields for the event’s input object:
 <tr>
 <td>
 
+`allDay`
+</td>
+<td>
+
+`boolean` Determines if the event is shown in the all-day slot. Default `false`
+</td>
+</tr>
+<tr>
+<td>
+
 `start`
 </td>
 <td>

package/index.css

@@ -1 +1 @@
-.ec-flex{display:flex}.ec-month .ec-body,.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;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:rgba(0,0,0,0);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:none}.ec-day:hover .ec-event.ec-pointer{display:flex}.ec-event-body{display:flex;flex-direction:column;width:100%}.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 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}.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}.ec-resizer{position:absolute;-webkit-user-select:none;user-select:none}.ec-month .ec-resizer{top:0;right:0;bottom:0;width:50%;max-width:8px;cursor:ew-resize}.ec-week .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}
+.ec-flex{display:flex}.ec-month .ec-body,.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-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{display:flex;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-body:not(.ec-list){border-top:none}.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}.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:-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;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;flex-direction:row}.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;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-body{display:flex;flex-direction:column;width:100%}.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{white-space:nowrap;text-overflow:ellipsis}.ec-week .ec-body .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 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}.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}.ec-resizer{position:absolute;-webkit-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}

package/index.js

@@ -5,6 +5,8 @@ import { setMidnight, createDate, createDuration, createEvents, createEventSourc
 
 function createOptions(plugins) {
     let options = {
+        allDayContent: undefined,
+        allDaySlot: true,
         buttonText: {
             today: 'today',
         },
@@ -56,6 +58,7 @@ function createOptions(plugins) {
         slotMaxTime: '24:00:00',
         slotMinTime: '00:00:00',
         theme: {
+            allDay: 'ec-all-day',
             active: 'ec-active',
             bgEvent: 'ec-bg-event',
             bgEvents: 'ec-bg-events',
@@ -85,6 +88,7 @@ function createOptions(plugins) {
             nowIndicator: 'ec-now-indicator',
             otherMonth: 'ec-other-month',
             sidebar: 'ec-sidebar',
+            sidebarTitle: 'ec-sidebar-title',
             today: 'ec-today',
             time: 'ec-time',
             title: 'ec-title',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@event-calendar/core",
-  "version": "0.10.1",
+  "version": "0.11.1",
   "title": "Event Calendar Core package",
   "description": "Full-sized drag & drop event calendar with resource view",
   "keywords": [
@@ -34,7 +34,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@event-calendar/common": "~0.10.1",
+    "@event-calendar/common": "~0.11.1",
     "svelte": "^3.47.0"
   }
 }

package/src/index.scss

@@ -132,6 +132,7 @@
 
 /* Header */
 .ec-header,
+.ec-all-day,
 .ec-body,
 .ec-days,
 .ec-day {
@@ -163,6 +164,25 @@
   }
 }
 
+/* All Day */
+.ec-all-day {
+  display: flex;
+  flex-shrink: 0;
+  border-top: none;
+
+  .ec-days {
+    border-bottom: none;
+  }
+
+  .ec-day {
+    padding-bottom: 4px;
+  }
+
+  .ec-event-time {
+    display: none;
+  }
+}
+
 /* Body */
 .ec-body {
   position: relative;
@@ -179,6 +199,21 @@
   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;
+
+  .ec-all-day & {
+    visibility: visible;
+    height: auto;
+    padding: 8px 0;
+  }
 }
 
 .ec-content {
@@ -315,12 +350,13 @@
   line-height: 1.5;
   z-index: 1;  // put it above the pointer event (for multi-day events in month view)
 
-  .ec-month & {
+  .ec-month &,
+  .ec-all-day & {
     position: relative;
     flex-direction: row;
   }
 
-  .ec-week & {
+  .ec-week .ec-body & {
     position: absolute;
   }
 
@@ -382,12 +418,13 @@
 .ec-event-title {
   overflow: hidden;
 
-  .ec-month & {
+  .ec-month &,
+  .ec-all-day & {
     white-space: nowrap;
     text-overflow: ellipsis;
   }
 
-  .ec-week & {
+  .ec-week .ec-body & {
     position: sticky;
     top: 0;
   }
@@ -514,7 +551,8 @@
   position: absolute;
   user-select: none;
 
-  .ec-month & {
+  .ec-month &,
+  .ec-all-day & {
     top: 0;
     right: 0;
     bottom: 0;
@@ -523,7 +561,7 @@
     cursor: ew-resize;
   }
 
-  .ec-week & {
+  .ec-week .ec-body & {
     left: 0;
     right: 0;
     bottom: 0;

package/src/storage/options.js

@@ -4,6 +4,8 @@ import {is_function} from 'svelte/internal';
 
 export function createOptions(plugins) {
     let options = {
+        allDayContent: undefined,
+        allDaySlot: true,
         buttonText: {
             today: 'today',
         },
@@ -55,6 +57,7 @@ export function createOptions(plugins) {
         slotMaxTime: '24:00:00',
         slotMinTime: '00:00:00',
         theme: {
+            allDay: 'ec-all-day',
             active: 'ec-active',
             bgEvent: 'ec-bg-event',
             bgEvents: 'ec-bg-events',
@@ -84,6 +87,7 @@ export function createOptions(plugins) {
             nowIndicator: 'ec-now-indicator',
             otherMonth: 'ec-other-month',
             sidebar: 'ec-sidebar',
+            sidebarTitle: 'ec-sidebar-title',
             today: 'ec-today',
             time: 'ec-time',
             title: 'ec-title',