npm - @event-calendar/core - Versions diffs - 3.2.2 → 3.4.0 - Mend

@event-calendar/core 3.2.2 → 3.4.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.

Files changed (10) hide show

package/README.md CHANGED Viewed

@@ -204,8 +204,8 @@ import '@event-calendar/core/index.css';
 ### Pre-built browser ready bundle
 Include the following lines of code in the `<head>` section of your page:
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@3.2.2/event-calendar.min.css">
-<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@3.2.2/event-calendar.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@3.4.0/event-calendar.min.css">
+<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@3.4.0/event-calendar.min.js"></script>
 ```
 <details>
@@ -668,7 +668,7 @@ Determines whether the events on the calendar can be dragged and resized (both a
 If you don't need both, use the more specific [eventStartEditable](#eventstarteditable) and [eventDurationEditable](#eventdurationeditable) instead.
 ### events
-- Type `Array`
+- Type `array`
 - Default `[]`
 Array of plain objects that will be parsed into [Event](#event-object) objects and displayed on the calendar.
@@ -804,11 +804,11 @@ This is currently an alias for the `eventBackgroundColor`.
 Defines the content that is rendered inside an event’s element.
-This value can be either a [Content](#content) or a function that returns content:
+This value can be either a [Content](#content) or a function that returns content or `undefined`:
 ```js
 function (info) {
-    // return Content
+    // return Content or undefined
 }
 ```
 `info` is an object with the following properties:
@@ -842,6 +842,8 @@ The current [View](#view-object) object
 </tr>
 </table>
+In case the function returns `undefined`, the event will be rendered in the default way.
 ### eventDidMount
 - Type `function`
 - Default `undefined`
@@ -1614,13 +1616,13 @@ Defines the height of the entire calendar.
 This should be a valid CSS value like `'100%'` or `'600px'`.
 ### hiddenDays
-- Type `Array`
+- Type `array`
 - Default `[]`
 Exclude certain days-of-the-week from being displayed, where Sunday is `0`, Monday is `1`, etc. Saturday is `6`.
 ### highlightedDates
-- Type `Array`
+- Type `array`
 - Default `[]`
 Array of dates that need to be highlighted in the calendar.
@@ -1811,7 +1813,7 @@ Enables a marker indicating the current time in `timeGrid`/`resourceTimeGrid` vi
 Enables mouse cursor pointer in `timeGrid`/`resourceTimeGrid` and other views.
 ### resources
-- Type `Array`
+- Type `array`
 - Default `[]`
 Array of plain objects that will be parsed into [Resource](#resource-object) objects for displaying in the resource view.
@@ -2076,13 +2078,13 @@ This should be a value that can be parsed into a [Duration](#duration-object) ob
 ### slotWidth
 - Type `integer`
-- Default `52`
+- Default `72`
 Defines the time slot width in pixels in `ResourceTimeline` views. When changing the setting, you must additionally override the following CSS styles:
 ```css
 .ec-timeline .ec-time, .ec-timeline .ec-line {
-  width: 52px;  /* override this value */
+  width: 72px;  /* override this value */
 }
 ```
@@ -2531,48 +2533,48 @@ The [eventTextColor](#eventtextcolor) override for this specific event
 <tr>
 <td>
-`extendedProps`
+`classNames`
 </td>
 <td>
-A plain object holding miscellaneous properties specified during parsing in the explicitly given `extendedProps` field
+An array of additional CSS classes for this specific event
 </td>
 </tr>
-</table>
-### Parsing event from a plain object
-When Event Calendar receives an array of plain event’s objects either from the `events` option or as a result of an HTTP request to a URL of an event source, it parses the input objects into proper Event objects.
-Here are all admissible fields for the event’s input object:
-<table>
 <tr>
 <td>
-`id`
+`styles`
 </td>
 <td>
-`string` or `integer` A unique identifier of the event. Default `auto-generated value`
+An array of additional inline styling declarations for this specific event
 </td>
 </tr>
 <tr>
 <td>
-`resourceId`
+`extendedProps`
 </td>
 <td>
-`string` or `integer` An ID of a resource that the event is associated with. This field is not used if `resourceIds` is provided. Default `undefined`
+A plain object holding miscellaneous properties specified during parsing in the explicitly given `extendedProps` field
 </td>
 </tr>
+</table>
+### Parsing event from a plain object
+When Event Calendar receives an array of plain event’s objects either from the `events` option or as a result of an HTTP request to a URL of an event source, it parses the input objects into proper Event objects.
+Here are all admissible fields for the event’s input object:
+<table>
 <tr>
 <td>
-`resourceIds`
+`id`
 </td>
 <td>
-`Array` An array of resource IDs that the event is associated with. This field is used instead of `resourceId`. Default `[]`
+`string` or `integer` A unique identifier of the event. Default `auto-generated value`
 </td>
 </tr>
 <tr>
@@ -2638,6 +2640,26 @@ Here are all admissible fields for the event’s input object:
 <tr>
 <td>
+`durationEditable`
+</td>
+<td>
+`boolean` Overrides the master [eventDurationEditable](#eventdurationeditable) option for this single event. Default `undefined`
+</td>
+</tr>
+<tr>
+<td>
+`resourceIds` or `resourceId`
+</td>
+<td>
+`string`, `integer` or `array`  An ID of a resource or an array of resource IDs that the event is associated with. Default `[]`
+</td>
+</tr>
+<tr>
+<td>
 `display`
 </td>
 <td>
@@ -2678,6 +2700,26 @@ Here are all admissible fields for the event’s input object:
 <tr>
 <td>
+`classNames` or `className`
+</td>
+<td>
+`string` or `array` Sets additional CSS classes for this single event. See [eventClassNames](#eventclassnames). Default `[]`
+</td>
+</tr>
+<tr>
+<td>
+`styles` or `style`
+</td>
+<td>
+`string` or `array` Sets additional inline styling declarations for this single event. This value can be either a string containing styles `'font-size: 24px; border-radius: 4px; ...'` or an array of strings `['font-size: 24px', 'border-radius: 4px', ...]`. Default `[]`
+</td>
+</tr>
+<tr>
+<td>
 `extendedProps`
 </td>
 <td>

package/index.css CHANGED Viewed

@@ -236,6 +236,46 @@
   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: block;
+  border: none;
+  text-align: right;
+  padding: 4px 4px 3px;
+}
+.ec-day-grid .ec-day-foot {
+  position: absolute;
+  bottom: 0;
+  padding: 2px;
+  font-size: 0.85em;
+}
+.ec-day-grid .ec-day-foot a {
+  cursor: pointer;
+}
 /* Grid */
 .ec-days,
 .ec-day,
@@ -393,6 +433,7 @@
 }
 .ec-all-day .ec-day {
   padding-bottom: 4px;
+  position: relative;
 }
 /* Body */
@@ -404,9 +445,6 @@
 .ec:not(.ec-list) .ec-body {
   border-top: none;
 }
-.ec-day-grid .ec-body {
-  flex: 1 1 auto;
-}
 .ec-sidebar {
   flex: 0 0 auto;
@@ -420,13 +458,6 @@
 .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;
 }
@@ -445,10 +476,6 @@
 .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;
@@ -459,16 +486,6 @@
 .ec-day.ec-highlight {
   background-color: var(--ec-highlight-color);
 }
-.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: 0.3;
 }
@@ -476,22 +493,6 @@
   border: none;
 }
-.ec-day-grid .ec-day-head {
-  display: block;
-  border: none;
-  text-align: right;
-  padding: 4px 4px 3px;
-}
-.ec-day-grid .ec-day-foot {
-  position: absolute;
-  bottom: 0;
-  padding: 2px;
-  font-size: 0.85em;
-}
-.ec-day-grid .ec-day-foot a {
-  cursor: pointer;
-}
 .ec-list .ec-day-head {
   background-color: var(--ec-list-day-bg-color);
   border-style: solid none;
@@ -616,12 +617,20 @@
 .ec-bg-events {
   position: relative;
 }
+.ec-day-grid .ec-bg-events, .ec-all-day .ec-bg-events {
+  position: absolute;
+  inset: 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;

package/index.js CHANGED Viewed

@@ -274,6 +274,10 @@ function symbol() {
     return Symbol('ec');
 }
+function isArray(value) {
+    return Array.isArray(value);
+}
 function createElement(tag, className, content, attrs = []) {
     let el = document.createElement(tag);
     el.className = className;
@@ -373,21 +377,20 @@ function createEvents(input) {
     return input.map(event => {
         let result = {
             id: 'id' in event ? String(event.id) : `{generated-${eventId++}}`,
-            resourceIds: Array.isArray(event.resourceIds)
-                ? event.resourceIds.map(String)
-                : ('resourceId' in event ? [String(event.resourceId)] : []),
+            resourceIds: toArrayProp(event, 'resourceId').map(String),
             allDay: event.allDay ?? (noTimePart(event.start) && noTimePart(event.end)),
             start: createDate(event.start),
             end: createDate(event.end),
-            title: event.title || '',
-            titleHTML: event.titleHTML || '',
+            title: event.title ?? '',
             editable: event.editable,
             startEditable: event.startEditable,
             durationEditable: event.durationEditable,
-            display: event.display || 'auto',
-            extendedProps: event.extendedProps || {},
-            backgroundColor: event.backgroundColor || event.color,
-            textColor: event.textColor
+            display: event.display ?? 'auto',
+            extendedProps: event.extendedProps ?? {},
+            backgroundColor: event.backgroundColor ?? event.color,
+            textColor: event.textColor,
+            classNames: toArrayProp(event, 'className'),
+            styles: toArrayProp(event, 'style')
         };
         if (result.allDay) {
@@ -407,6 +410,11 @@ function createEvents(input) {
     });
 }
+function toArrayProp(input, propName) {
+    let result = input[propName + 's'] ?? input[propName] ?? [];
+    return isArray(result) ? result : [result];
+}
 function createEventSources(input) {
     return input.map(source => ({
         events: source.events,
@@ -446,7 +454,9 @@ function createEventContent(chunk, displayEventEnd, eventContent, theme, _intlEv
                 view: toViewWithLocalDates(_view)
             })
             : eventContent;
-    } else {
+    }
+    if (content === undefined) {
         let domNodes;
         switch (chunk.event.display) {
             case 'background':
@@ -477,6 +487,7 @@ function createTimeElement(timeText, chunk, theme) {
 }
 function createEventClasses(eventClassNames, event, _view) {
+    let result = event.classNames;
     if (eventClassNames) {
         if (is_function(eventClassNames)) {
             eventClassNames = eventClassNames({
@@ -484,9 +495,12 @@ function createEventClasses(eventClassNames, event, _view) {
                 view: toViewWithLocalDates(_view)
             });
         }
-        return Array.isArray(eventClassNames) ? eventClassNames : [eventClassNames];
+        result = [
+            ...isArray(eventClassNames) ? eventClassNames : [eventClassNames],
+            ...result
+        ];
     }
-    return [];
+    return result;
 }
 function toEventWithLocalDates(event) {
@@ -539,6 +553,14 @@ function prepareEventChunks(chunks, hiddenDays) {
                 chunk.date = dates[0];
                 chunk.days = dates.length;
                 chunk.dates = dates;
+                // Adjust the start and end dates of the chunk if hidden days affected them
+                if (chunk.start < dates[0]) {
+                    chunk.start = dates[0];
+                }
+                let maxEnd = addDay(cloneDate(dates.at(-1)));
+                if (chunk.end > maxEnd) {
+                    chunk.end = maxEnd;
+                }
             } else {
                 chunk.date = setMidnight(cloneDate(chunk.start));
                 chunk.days = 1;
@@ -656,7 +678,6 @@ function createResources(input) {
     return input.map(resource => ({
         id: String(resource.id),
         title: resource.title || '',
-        titleHTML: resource.titleHTML || '',
         eventBackgroundColor: resource.eventBackgroundColor,
         eventTextColor: resource.eventTextColor
     }));
@@ -2632,21 +2653,23 @@ function instance($$self, $$props, $$invalidate) {
 	}
 	function addEvent(event) {
-		$_events.push(createEvents([event])[0]);
+		event = createEvents([event])[0];
+		$_events.push(event);
 		_events.set($_events);
-		return this;
+		return event;
 	}
 	function updateEvent(event) {
 		for (let e of $_events) {
 			if (e.id == event.id) {
-				assign(e, createEvents([event])[0]);
+				event = createEvents([event])[0];
+				assign(e, event);
 				_events.set($_events);
-				break;
+				return event;
 			}
 		}
-		return this;
+		return null;
 	}
 	function removeEventById(id) {
@@ -2854,4 +2877,4 @@ class Calendar extends SvelteComponent {
 	}
 }
-export { DAY_IN_SECONDS, addDay, addDuration, ancestor, assign, bgEvent, btnTextDay, btnTextMonth, btnTextWeek, btnTextYear, ceil, cloneDate, cloneEvent, copyTime, createDate, createDuration, createElement, createEventChunk, createEventClasses, createEventContent, createEventSources, createEvents, createResources, createSlotTimeLimits, createTimes, createView, datesEqual, debounce, Calendar as default, eventIntersects, floor, flushDebounce, getElementWithPayload, getPayload, ghostEvent, hasPayload, hasYScroll, height, helperEvent, intl, intlRange, keyEnter, keys, listView, max, min, nextClosestDay, nextDate, noTimePart, outsideEvent, pointerEvent, prepareEventChunks, prevClosestDay, prevDate, previewEvent, rect, repositionEvent, resourceBackgroundColor, resourceTextColor, runReposition, setContent, setMidnight, setPayload, sortEventChunks, subtractDay, subtractDuration, symbol, task, themeView, timelineView, toEventWithLocalDates, toISOString, toLocalDate, toSeconds, toViewWithLocalDates, viewResources };
+export { DAY_IN_SECONDS, addDay, addDuration, ancestor, assign, bgEvent, btnTextDay, btnTextMonth, btnTextWeek, btnTextYear, ceil, cloneDate, cloneEvent, copyTime, createDate, createDuration, createElement, createEventChunk, createEventClasses, createEventContent, createEventSources, createEvents, createResources, createSlotTimeLimits, createTimes, createView, datesEqual, debounce, Calendar as default, eventIntersects, floor, flushDebounce, getElementWithPayload, getPayload, ghostEvent, hasPayload, hasYScroll, height, helperEvent, intl, intlRange, isArray, keyEnter, keys, listView, max, min, nextClosestDay, nextDate, noTimePart, outsideEvent, pointerEvent, prepareEventChunks, prevClosestDay, prevDate, previewEvent, rect, repositionEvent, resourceBackgroundColor, resourceTextColor, runReposition, setContent, setMidnight, setPayload, sortEventChunks, subtractDay, subtractDuration, symbol, task, themeView, timelineView, toEventWithLocalDates, toISOString, toLocalDate, toSeconds, toViewWithLocalDates, viewResources };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@event-calendar/core",
-  "version": "3.2.2",
+  "version": "3.4.0",
   "title": "Event Calendar Core package",
   "description": "Full-sized drag & drop event calendar with resource & timeline views",
   "keywords": [

package/src/Calendar.svelte CHANGED Viewed

@@ -67,20 +67,22 @@
     }
     export function addEvent(event) {
-        $_events.push(createEvents([event])[0]);
+        event = createEvents([event])[0];
+        $_events.push(event);
         $_events = $_events;
-        return this;
+        return event;
     }
     export function updateEvent(event) {
         for (let e of $_events) {
             if (e.id == event.id) {
-                assign(e, createEvents([event])[0]);
+                event = createEvents([event])[0];
+                assign(e, event);
                 $_events = $_events;
-                break;
+                return event;
             }
         }
-        return this;
+        return null;
     }
     export function removeEventById(id) {

package/src/lib/events.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import {addDay, datesEqual, createDate, cloneDate, setMidnight, toLocalDate, toISOString, noTimePart, copyTime} from './date';
 import {createElement} from './dom';
-import {assign} from './utils';
+import {assign, isArray} from './utils';
 import {toViewWithLocalDates} from './view';
 import {is_function} from 'svelte/internal';
@@ -9,21 +9,20 @@ export function createEvents(input) {
     return input.map(event => {
         let result = {
             id: 'id' in event ? String(event.id) : `{generated-${eventId++}}`,
-            resourceIds: Array.isArray(event.resourceIds)
-                ? event.resourceIds.map(String)
-                : ('resourceId' in event ? [String(event.resourceId)] : []),
+            resourceIds: toArrayProp(event, 'resourceId').map(String),
             allDay: event.allDay ?? (noTimePart(event.start) && noTimePart(event.end)),
             start: createDate(event.start),
             end: createDate(event.end),
-            title: event.title || '',
-            titleHTML: event.titleHTML || '',
+            title: event.title ?? '',
             editable: event.editable,
             startEditable: event.startEditable,
             durationEditable: event.durationEditable,
-            display: event.display || 'auto',
-            extendedProps: event.extendedProps || {},
-            backgroundColor: event.backgroundColor || event.color,
-            textColor: event.textColor
+            display: event.display ?? 'auto',
+            extendedProps: event.extendedProps ?? {},
+            backgroundColor: event.backgroundColor ?? event.color,
+            textColor: event.textColor,
+            classNames: toArrayProp(event, 'className'),
+            styles: toArrayProp(event, 'style')
         };
         if (result.allDay) {
@@ -43,6 +42,11 @@ export function createEvents(input) {
     });
 }
+function toArrayProp(input, propName) {
+    let result = input[propName + 's'] ?? input[propName] ?? [];
+    return isArray(result) ? result : [result];
+}
 export function createEventSources(input) {
     return input.map(source => ({
         events: source.events,
@@ -82,7 +86,9 @@ export function createEventContent(chunk, displayEventEnd, eventContent, theme,
                 view: toViewWithLocalDates(_view)
             })
             : eventContent;
-    } else {
+    }
+    if (content === undefined) {
         let domNodes;
         switch (chunk.event.display) {
             case 'background':
@@ -113,6 +119,7 @@ function createTimeElement(timeText, chunk, theme) {
 }
 export function createEventClasses(eventClassNames, event, _view) {
+    let result = event.classNames;
     if (eventClassNames) {
         if (is_function(eventClassNames)) {
             eventClassNames = eventClassNames({
@@ -120,9 +127,12 @@ export function createEventClasses(eventClassNames, event, _view) {
                 view: toViewWithLocalDates(_view)
             });
         }
-        return Array.isArray(eventClassNames) ? eventClassNames : [eventClassNames];
+        result = [
+            ...isArray(eventClassNames) ? eventClassNames : [eventClassNames],
+            ...result
+        ];
     }
-    return [];
+    return result;
 }
 export function toEventWithLocalDates(event) {
@@ -175,6 +185,14 @@ export function prepareEventChunks(chunks, hiddenDays) {
                 chunk.date = dates[0];
                 chunk.days = dates.length;
                 chunk.dates = dates;
+                // Adjust the start and end dates of the chunk if hidden days affected them
+                if (chunk.start < dates[0]) {
+                    chunk.start = dates[0];
+                }
+                let maxEnd = addDay(cloneDate(dates.at(-1)));
+                if (chunk.end > maxEnd) {
+                    chunk.end = maxEnd;
+                }
             } else {
                 chunk.date = setMidnight(cloneDate(chunk.start));
                 chunk.days = 1;

package/src/lib/resources.js CHANGED Viewed

@@ -2,7 +2,6 @@ export function createResources(input) {
     return input.map(resource => ({
         id: String(resource.id),
         title: resource.title || '',
-        titleHTML: resource.titleHTML || '',
         eventBackgroundColor: resource.eventBackgroundColor,
         eventTextColor: resource.eventTextColor
     }));

package/src/lib/utils.js CHANGED Viewed

@@ -25,3 +25,7 @@ export function max(...args) {
 export function symbol() {
     return Symbol('ec');
 }
+export function isArray(value) {
+    return Array.isArray(value);
+}

package/src/styles/day-grid.scss ADDED Viewed

@@ -0,0 +1,50 @@
+.ec-day-grid {
+  .ec-body {
+    flex: 1 1 auto;
+    .ec-day {
+      min-height: 5em;
+      position: relative;
+    }
+  }
+  .ec-content {
+    flex-direction: column;
+    height: 100%;
+  }
+  .ec-uniform {
+    .ec-content {
+      overflow: hidden;  // remove scrolling due to hidden events
+    }
+    .ec-days {
+      flex: 1 1 0%;  // % is required to work properly for both auto and fixed calendar height
+      min-height: 0;
+    }
+    .ec-day {
+      min-height: 0;
+    }
+  }
+  .ec-day:first-child {
+    border-left: none;
+  }
+  .ec-day-head {
+    display: block;
+    border: none;
+    text-align: right;
+    padding: 4px 4px 3px;
+  }
+  .ec-day-foot {
+    position: absolute;
+    bottom: 0;
+    padding: 2px;
+    font-size: .85em;
+    a {
+      cursor: pointer;
+    }
+  }
+}

package/src/styles/index.scss CHANGED Viewed

@@ -1,6 +1,7 @@
 @use "theme";
 @use "timeline";
 @use "time-grid";
+@use "day-grid";
 /* Grid */
 .ec-days,
@@ -180,6 +181,7 @@
   .ec-day {
     padding-bottom: 4px;
+    position: relative;
   }
 }
@@ -192,10 +194,6 @@
   .ec:not(.ec-list) & {
     border-top: none;
   }
-  .ec-day-grid & {
-    flex: 1 1 auto;
-  }
 }
 .ec-sidebar {
@@ -210,15 +208,6 @@
 .ec-content {
   display: flex;
-  .ec-day-grid & {
-    flex-direction: column;
-    height: 100%;
-  }
-  .ec-day-grid .ec-uniform & {
-    overflow: hidden;  // remove scrolling due to hidden events
-  }
   .ec-list & {
     flex-direction: column;
   }
@@ -240,11 +229,6 @@
   .ec-resource & {
     flex: 1 0 auto;
   }
-  .ec-day-grid .ec-uniform & {
-    flex: 1 1 0%;  // % is required to work properly for both auto and fixed calendar height
-    min-height: 0;
-  }
 }
 .ec-day {
@@ -258,18 +242,7 @@
     background-color: var(--ec-highlight-color);
   }
-  .ec-day-grid .ec-body & {
-    min-height: 5em;
-    position: relative;
-  }
-  .ec-day-grid .ec-uniform & {
-    min-height: 0;
-  }
-  .ec-day-grid &:first-child {
-    border-left: none;
-  }
   &.ec-other-month .ec-day-head {
     opacity: .3;
@@ -280,26 +253,6 @@
   }
 }
-.ec-day-grid {
-  .ec-day-head {
-    display: block;
-    border: none;
-    text-align: right;
-    padding: 4px 4px 3px;
-  }
-  .ec-day-foot {
-    position: absolute;
-    bottom: 0;
-    padding: 2px;
-    font-size: .85em;
-    a {
-      cursor: pointer;
-    }
-  }
-}
 .ec-list {
   .ec-day-head {
     background-color: var(--ec-list-day-bg-color);
@@ -446,12 +399,24 @@
 .ec-bg-events {
   position: relative;
+  .ec-day-grid &,
+  .ec-all-day & {
+    position: absolute;
+    inset: 0;
+  }
 }
 .ec-bg-event {
   position: absolute;
   background-color: var(--ec-bg-event-color);
   opacity: var(--ec-bg-event-opacity);
+  .ec-day-grid &,
+  .ec-all-day & {
+    height: 100%;
+    z-index: auto;
+  }
 }
 .ec-time {