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

@event-calendar/core 3.2.2 → 3.3.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 (7) 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.3.0/event-calendar.min.css">
+<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@3.3.0/event-calendar.min.js"></script>
 ```
 <details>

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

@@ -539,6 +539,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;

package/package.json CHANGED Viewed

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

package/src/lib/events.js CHANGED Viewed

@@ -175,6 +175,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/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 {