npm - @event-calendar/core - Versions diffs - 5.0.0 → 5.0.1 - Mend

@event-calendar/core 5.0.0 → 5.0.1

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 (12) hide show

package/README.md +2 -2
package/dist/index.css +16 -7
package/dist/index.js +187 -97
package/package.json +2 -2
package/src/plugins/interaction/Action.svelte +18 -11
package/src/plugins/resource-time-grid/View.svelte +29 -13
package/src/plugins/resource-time-grid/index.js +1 -0
package/src/plugins/time-grid/NowIndicator.svelte +7 -4
package/src/plugins/time-grid/View.svelte +9 -7
package/src/storage/stores.js +3 -3
package/src/styles/sidebar.css +4 -3
package/src/styles/toolbar.css +11 -3

package/README.md CHANGED Viewed

@@ -245,8 +245,8 @@ This bundle contains a version of the calendar that includes all plugins and is
 The first step is to 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@5.0.0/dist/event-calendar.min.css">
-<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.0.0/dist/event-calendar.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.0.1/dist/event-calendar.min.css">
+<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.0.1/dist/event-calendar.min.js"></script>
 ```
 <details>

package/dist/index.css CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
- * EventCalendar v5.0.0
+ * EventCalendar v5.0.1
  * https://github.com/vkurko/calendar
  */
 .ec {
@@ -213,7 +213,7 @@
 }
 .ec-icon {
     display: inline-block;
-    width: 1em;
+    inline-size: 1em;
     &.ec-prev:after,
     &.ec-next:after {
@@ -227,11 +227,19 @@
     }
     &.ec-prev:after {
-        transform: rotate(-135deg) translate(-2px, 2px);
+        inset-inline-start: 3px;
+        rotate: -135deg;
+    }
+    [dir="rtl"] &.ec-prev:after {
+        rotate: 135deg;
     }
     &.ec-next:after {
-        transform: rotate(45deg) translate(-2px, 2px);
+        inset-inline-start: -3px;
+        rotate: 45deg;
+    }
+    [dir="rtl"] &.ec-next:after {
+        rotate: -45deg;
     }
 }
 .ec-sidebar {
@@ -281,14 +289,15 @@
     min-block-size: 1.5em;
 }
 .ec-expander {
-    margin-right: .25em;
-    width: 1.25em;
+    inline-size: 1.25em;
+    margin-inline-end: .25em;
+    margin-block-start: -1px;
     .ec-button {
         line-height: normal;
         padding: 0;
         aspect-ratio: 1;
-        height: 1.25em;
+        block-size: 1.25em;
     }
 }
 .ec-slot {

package/dist/index.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
- * EventCalendar v5.0.0
+ * EventCalendar v5.0.1
  * https://github.com/vkurko/calendar
  */
 import { tick, getContext, untrack, setContext, onMount, mount, unmount } from "svelte";
@@ -1025,8 +1025,9 @@ function filteredEvents(state) {
       let [$_events, $eventFilter, $eventOrder, $filterEventsWithResources, $resources] = values;
       let result = [...$_events];
       if (isFunction($eventFilter)) {
-        result = result.map(toEventWithLocalDates).filter((event, index2, events2) => $eventFilter({
-          event,
+        let events2 = $_events.map(toEventWithLocalDates);
+        result = result.filter((event, index2) => $eventFilter({
+          event: toEventWithLocalDates(event),
           index: index2,
           events: events2,
           view: view2
@@ -2761,7 +2762,7 @@ function Action($$anchor, $$props) {
   let toX;
   let toY;
   let gridEl;
-  let scrollable;
+  let allDaySlot;
   let delta;
   let allDay;
   let iClass;
@@ -2873,7 +2874,7 @@ function Action($$anchor, $$props) {
     fromY = toY = jsEvent.clientY;
     let dayEl = getElementWithPayload(toX, toY);
     ({ allDay, date, resource } = getPayload(dayEl)(toX, toY));
-    scrollable = $_mainEl() === ancestor(dayEl, 3);
+    allDaySlot = $_mainEl() !== ancestor(dayEl, 3);
     gridEl = ancestor(dayEl, 1);
     calcViewport();
     if (jsEvent.pointerType !== "mouse") {
@@ -2960,19 +2961,19 @@ function Action($$anchor, $$props) {
       let thresholdX = 24;
       animate(() => {
         if (viewport) {
-          if (scrollable) {
+          if (!allDaySlot) {
             if (toY < viewport.top + thresholdY) {
               $.store_mutate(_mainEl, $.untrack($_mainEl).scrollTop += max(-8, (toY - viewport.top - thresholdY) / 3), $.untrack($_mainEl));
             }
             if (toY > viewport.bottom - thresholdY) {
               $.store_mutate(_mainEl, $.untrack($_mainEl).scrollTop += min(8, (toY - viewport.bottom + thresholdY) / 3), $.untrack($_mainEl));
             }
-            if (toX < viewport.left + thresholdX) {
-              $.store_mutate(_mainEl, $.untrack($_mainEl).scrollLeft += max(-8, (toX - viewport.left - thresholdX) / 3), $.untrack($_mainEl));
-            }
-            if (toX > viewport.right - thresholdX) {
-              $.store_mutate(_mainEl, $.untrack($_mainEl).scrollLeft += min(8, (toX - viewport.right + thresholdX) / 3), $.untrack($_mainEl));
-            }
+          }
+          if (toX < viewport.left + thresholdX) {
+            $.store_mutate(_mainEl, $.untrack($_mainEl).scrollLeft += max(-8, (toX - viewport.left - thresholdX) / 3), $.untrack($_mainEl));
+          }
+          if (toX > viewport.right - thresholdX) {
+            $.store_mutate(_mainEl, $.untrack($_mainEl).scrollLeft += min(8, (toX - viewport.right + thresholdX) / 3), $.untrack($_mainEl));
           }
           if (toY < thresholdY) {
             window.scrollBy(0, max(-8, (toY - thresholdY) / 3));
@@ -3077,6 +3078,13 @@ function Action($$anchor, $$props) {
           return findPayload(dayEl.previousElementSibling);
         }
       } else {
+        if (selecting() && payload.resource && !$_iEvents()[0].resourceIds.includes(payload.resource.id)) {
+          if (toX > fromX) {
+            return findPayload(dayEl.previousElementSibling);
+          } else {
+            return findPayload(dayEl.nextElementSibling);
+          }
+        }
         return payload;
       }
     }
@@ -3088,8 +3096,8 @@ function Action($$anchor, $$props) {
     viewport = {
       left: max(0, gridRect.left + $_mainEl().scrollLeft),
       right: min(document.documentElement.clientWidth, mainRect.left + $_mainEl().clientWidth) - 2,
-      top: max(0, gridRect.top + (scrollable ? $_mainEl().scrollTop : 0)),
-      bottom: min(document.documentElement.clientHeight, scrollable ? mainRect.top + $_mainEl().clientHeight : gridRect.bottom) - 2
+      top: max(0, gridRect.top + (!allDaySlot ? $_mainEl().scrollTop : 0)),
+      bottom: min(document.documentElement.clientHeight, !allDaySlot ? mainRect.top + $_mainEl().clientHeight : gridRect.bottom) - 2
     };
   }
   function createIEvent(jsEvent, callback) {
@@ -4179,14 +4187,14 @@ var root_1$3 = $.from_html(`<div></div>`);
 function NowIndicator$1($$anchor, $$props) {
   $.push($$props, true);
   const $_today = () => $.store_get(_today, "$_today", $$stores);
-  const $slotDuration = () => $.store_get(slotDuration, "$slotDuration", $$stores);
   const $_now = () => $.store_get(_now, "$_now", $$stores);
+  const $slotDuration = () => $.store_get(slotDuration, "$slotDuration", $$stores);
   const $slotHeight = () => $.store_get(slotHeight, "$slotHeight", $$stores);
   const $_mainEl = () => $.store_get(_mainEl, "$_mainEl", $$stores);
   const $_sidebarWidth = () => $.store_get(_sidebarWidth, "$_sidebarWidth", $$stores);
   const $theme = () => $.store_get(theme, "$theme", $$stores);
   const [$$stores, $$cleanup] = $.setup_stores();
-  let fullwidth = $.prop($$props, "fullwidth", 3, false);
+  let span = $.prop($$props, "span", 3, 1);
   let {
     _mainEl,
     _now,
@@ -4203,8 +4211,11 @@ function NowIndicator$1($$anchor, $$props) {
       }
     }
     return {};
-  }), gridColumn = $.derived(() => $.get($$d).gridColumn), start = $.derived(() => $.get($$d).start);
+  }), gridColumn = $.derived(() => $.get($$d).gridColumn), start = $.derived(() => $.get($$d).start), end = $.derived(() => $.get($$d).end);
   let top = $.derived(() => {
+    if ($_now() < $.get(start) || $_now() > $.get(end)) {
+      return null;
+    }
     let step = toSeconds($slotDuration());
     return ($_now() - $.get(start)) / 1e3 / step * $slotHeight();
   });
@@ -4226,14 +4237,14 @@ function NowIndicator$1($$anchor, $$props) {
       $.template_effect(() => {
         $.set_class(div, 1, $theme().nowIndicator);
         styles = $.set_style(div, "", styles, {
-          "grid-column": `${$.get(gridColumn) + 1}${fullwidth() ? ` / span ${$$props.days.length}` : ""}`,
+          "grid-column": `${$.get(gridColumn) + 1} / span ${span() ?? ""}`,
           "inset-block-start": `${$.get(top) ?? ""}px`
         });
       });
       $.append($$anchor2, div);
     };
     $.if(node, ($$render) => {
-      if ($.get(gridColumn)) $$render(consequent);
+      if ($.get(gridColumn) && $.get(top) !== null) $$render(consequent);
     });
   }
   $.append($$anchor, fragment);
@@ -4262,7 +4273,7 @@ function View$1($$anchor, $$props) {
   const $_sidebarWidth = () => $.store_get(_sidebarWidth, "$_sidebarWidth", $$stores);
   const $allDaySlot = () => $.store_get(allDaySlot, "$allDaySlot", $$stores);
   const $_slots = () => $.store_get(_slots, "$_slots", $$stores);
-  const $nowIndicator = () => $.store_get(nowIndicator, "$nowIndicator", $$stores);
+  const $showNowIndicator = () => $.store_get(showNowIndicator, "$showNowIndicator", $$stores);
   const [$$stores, $$cleanup] = $.setup_stores();
   let {
     _mainEl,
@@ -4277,7 +4288,7 @@ function View$1($$anchor, $$props) {
     allDaySlot,
     columnWidth,
     highlightedDates,
-    nowIndicator,
+    nowIndicator: showNowIndicator,
     scrollTime,
     slotHeight,
     slotDuration,
@@ -4476,23 +4487,32 @@ function View$1($$anchor, $$props) {
   $.reset(div_4);
   var node_12 = $.sibling(div_4, 2);
   {
-    var consequent_2 = ($$anchor2) => {
+    var consequent_3 = ($$anchor2) => {
       var fragment_14 = $.comment();
       var node_13 = $.first_child(fragment_14);
-      $.each(node_13, 17, () => $.get(grid), $.index, ($$anchor3, days) => {
-        NowIndicator$1($$anchor3, {
-          get days() {
-            return $.get(days);
-          },
-          get fullwidth() {
-            return $$props.fullwidthNowIndicator;
-          }
+      {
+        var consequent_2 = ($$anchor3) => {
+          var fragment_15 = $.comment();
+          var node_14 = $.first_child(fragment_15);
+          $.snippet(node_14, () => $$props.nowIndicator, () => $.get(grid));
+          $.append($$anchor3, fragment_15);
+        };
+        var alternate_1 = ($$anchor3) => {
+          NowIndicator$1($$anchor3, {
+            get days() {
+              return $.get(grid)[0];
+            }
+          });
+        };
+        $.if(node_13, ($$render) => {
+          if ($$props.nowIndicator) $$render(consequent_2);
+          else $$render(alternate_1, false);
         });
-      });
+      }
       $.append($$anchor2, fragment_14);
     };
     $.if(node_12, ($$render) => {
-      if ($nowIndicator()) $$render(consequent_2);
+      if ($showNowIndicator()) $$render(consequent_3);
     });
   }
   $.reset(section);
@@ -4554,15 +4574,16 @@ function View_1($$anchor, $$props) {
           return { date, resource, disabled, highlight };
         });
         {
-          let $0 = $.derived(() => 1 + i * $.get(days).length);
-          let $1 = $.derived(() => $datesAboveResources() && $.get(computed_const).disabled);
-          let $2 = $.derived(() => $datesAboveResources() && $.get(computed_const).highlight);
+          let $0 = $.derived(() => grid()[0].length > 1 ? $theme().colGroup : void 0);
+          let $1 = $.derived(() => 1 + i * $.get(days).length);
+          let $2 = $.derived(() => $datesAboveResources() && $.get(computed_const).disabled);
+          let $3 = $.derived(() => $datesAboveResources() && $.get(computed_const).highlight);
           ColHead($$anchor3, {
             get date() {
               return $.get(computed_const).date;
             },
             get className() {
-              return $theme().colGroup;
+              return $.get($0);
             },
             get weekday() {
               return $datesAboveResources();
@@ -4571,13 +4592,13 @@ function View_1($$anchor, $$props) {
               return $.get(days).length;
             },
             get colIndex() {
-              return $.get($0);
+              return $.get($1);
             },
             get disabled() {
-              return $.get($1);
+              return $.get($2);
             },
             get highlight() {
-              return $.get($2);
+              return $.get($3);
             },
             children: ($$anchor4, $$slotProps) => {
               var fragment_3 = $.comment();
@@ -4610,75 +4631,143 @@ function View_1($$anchor, $$props) {
         }
       });
       var node_2 = $.sibling(node, 2);
-      $.each(node_2, 17, grid, $.index, ($$anchor3, days, i) => {
-        var fragment_6 = $.comment();
-        var node_3 = $.first_child(fragment_6);
-        $.each(node_3, 17, () => $.get(days), $.index, ($$anchor4, day, j) => {
-          const computed_const_1 = $.derived(() => {
-            const { dayStart: date, resource, disabled, highlight } = $.get(day);
-            return { date, resource, disabled, highlight };
+      {
+        var consequent_2 = ($$anchor3) => {
+          var fragment_6 = $.comment();
+          var node_3 = $.first_child(fragment_6);
+          $.each(node_3, 17, grid, $.index, ($$anchor4, days, i) => {
+            var fragment_7 = $.comment();
+            var node_4 = $.first_child(fragment_7);
+            $.each(node_4, 17, () => $.get(days), $.index, ($$anchor5, day, j) => {
+              const computed_const_1 = $.derived(() => {
+                const { dayStart: date, resource, disabled, highlight } = $.get(day);
+                return { date, resource, disabled, highlight };
+              });
+              {
+                let $0 = $.derived(() => 1 + j + i * $.get(days).length);
+                ColHead($$anchor5, {
+                  get date() {
+                    return $.get(computed_const_1).date;
+                  },
+                  get colIndex() {
+                    return $.get($0);
+                  },
+                  get disabled() {
+                    return $.get(computed_const_1).disabled;
+                  },
+                  get highlight() {
+                    return $.get(computed_const_1).highlight;
+                  },
+                  children: ($$anchor6, $$slotProps) => {
+                    var fragment_9 = $.comment();
+                    var node_5 = $.first_child(fragment_9);
+                    {
+                      var consequent_1 = ($$anchor7) => {
+                        Label$1($$anchor7, {
+                          get resource() {
+                            return $.get(computed_const_1).resource;
+                          },
+                          get date() {
+                            return $.get(computed_const_1).date;
+                          }
+                        });
+                      };
+                      var alternate_1 = ($$anchor7) => {
+                        DayHeader($$anchor7, {
+                          get date() {
+                            return $.get(computed_const_1).date;
+                          },
+                          get alPrefix() {
+                            return resourceLabels[i];
+                          }
+                        });
+                      };
+                      $.if(node_5, ($$render) => {
+                        if ($datesAboveResources()) $$render(consequent_1);
+                        else $$render(alternate_1, false);
+                      });
+                    }
+                    $.append($$anchor6, fragment_9);
+                  },
+                  $$slots: { default: true }
+                });
+              }
+            });
+            $.append($$anchor4, fragment_7);
           });
+          $.append($$anchor3, fragment_6);
+        };
+        $.if(node_2, ($$render) => {
+          if (grid()[0].length > 1) $$render(consequent_2);
+        });
+      }
+      $.append($$anchor2, fragment_1);
+    };
+    const nowIndicator = ($$anchor2, grid = $.noop) => {
+      var fragment_12 = $.comment();
+      var node_6 = $.first_child(fragment_12);
+      {
+        var consequent_3 = ($$anchor3) => {
           {
-            let $0 = $.derived(() => 1 + j + i * $.get(days).length);
-            ColHead($$anchor4, {
-              get date() {
-                return $.get(computed_const_1).date;
-              },
-              get colIndex() {
+            let $0 = $.derived(() => grid().flat());
+            NowIndicator$1($$anchor3, {
+              get days() {
                 return $.get($0);
               },
-              get disabled() {
-                return $.get(computed_const_1).disabled;
-              },
-              get highlight() {
-                return $.get(computed_const_1).highlight;
-              },
-              children: ($$anchor5, $$slotProps) => {
-                var fragment_8 = $.comment();
-                var node_4 = $.first_child(fragment_8);
-                {
-                  var consequent_1 = ($$anchor6) => {
-                    Label$1($$anchor6, {
-                      get resource() {
-                        return $.get(computed_const_1).resource;
-                      },
-                      get date() {
-                        return $.get(computed_const_1).date;
-                      }
-                    });
-                  };
-                  var alternate_1 = ($$anchor6) => {
-                    DayHeader($$anchor6, {
-                      get date() {
-                        return $.get(computed_const_1).date;
-                      },
-                      get alPrefix() {
-                        return resourceLabels[i];
-                      }
-                    });
-                  };
-                  $.if(node_4, ($$render) => {
-                    if ($datesAboveResources()) $$render(consequent_1);
-                    else $$render(alternate_1, false);
-                  });
-                }
-                $.append($$anchor5, fragment_8);
-              },
-              $$slots: { default: true }
+              get span() {
+                return grid()[0].length;
+              }
             });
           }
+        };
+        var alternate_3 = ($$anchor3) => {
+          var fragment_14 = $.comment();
+          var node_7 = $.first_child(fragment_14);
+          {
+            var consequent_4 = ($$anchor4) => {
+              var fragment_15 = $.comment();
+              var node_8 = $.first_child(fragment_15);
+              $.each(node_8, 17, grid, $.index, ($$anchor5, days) => {
+                NowIndicator$1($$anchor5, {
+                  get days() {
+                    return $.get(days);
+                  }
+                });
+              });
+              $.append($$anchor4, fragment_15);
+            };
+            var alternate_2 = ($$anchor4) => {
+              {
+                let $0 = $.derived(() => grid().flat());
+                NowIndicator$1($$anchor4, {
+                  get days() {
+                    return $.get($0);
+                  },
+                  get span() {
+                    return grid().length;
+                  }
+                });
+              }
+            };
+            $.if(node_7, ($$render) => {
+              if (grid()[0].length > 1) $$render(consequent_4);
+              else $$render(alternate_2, false);
+            });
+          }
+          $.append($$anchor3, fragment_14);
+        };
+        $.if(node_6, ($$render) => {
+          if ($datesAboveResources()) $$render(consequent_3);
+          else $$render(alternate_3, false);
         });
-        $.append($$anchor3, fragment_6);
-      });
-      $.append($$anchor2, fragment_1);
+      }
+      $.append($$anchor2, fragment_12);
     };
     View$1($$anchor, {
       createGridFn: () => createGrid$2($_viewDates(), $_viewResources(), $_slotTimeLimits(), $datesAboveResources(), $validRange(), $highlightedDates()),
-      get fullwidthNowIndicator() {
-        return $datesAboveResources();
-      },
       header,
-      $$slots: { header: true }
+      nowIndicator,
+      $$slots: { header: true, nowIndicator: true }
     });
   }
   $.pop();
@@ -4697,6 +4786,7 @@ const index$2 = {
     options.views.resourceTimeGridDay = {
       buttonText: btnTextDay,
       component: View_1,
+      dayHeaderFormat: { weekday: "long" },
       duration: { days: 1 },
       theme: themeView("ec-resource ec-time-grid ec-day-view")
     };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@event-calendar/core",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "title": "Event Calendar Core package",
   "description": "Full-sized drag & drop event calendar with resource & timeline views",
   "keywords": [
@@ -32,6 +32,6 @@
     "#components": "./src/lib/components/index.js"
   },
   "dependencies": {
-    "svelte": "^5.45.8"
+    "svelte": "^5.45.10"
   }
 }

package/src/plugins/interaction/Action.svelte CHANGED Viewed

@@ -27,7 +27,7 @@
     let resource, newResource;
     let fromX, fromY;
     let toX, toY;
-    let gridEl, scrollable;
+    let gridEl, allDaySlot;
     let delta;
     let allDay;
     let iClass;
@@ -180,7 +180,7 @@
         let dayEl = getElementWithPayload(toX, toY);
         ({allDay, date, resource} = getPayload(dayEl)(toX, toY));
-        scrollable = $_mainEl === ancestor(dayEl, 3);  // test for "all-day" slot
+        allDaySlot = $_mainEl !== ancestor(dayEl, 3);
         gridEl = ancestor(dayEl, 1);
         calcViewport();
@@ -285,19 +285,19 @@
             let thresholdX = 24;
             animate(() => {
                 if (viewport) {
-                    if (scrollable) {
+                    if (!allDaySlot) {
                         if (toY < viewport.top + thresholdY) {
                             $_mainEl.scrollTop += max(-8, (toY - viewport.top - thresholdY) / 3);
                         }
                         if (toY > viewport.bottom - thresholdY) {
                             $_mainEl.scrollTop += min(8, (toY - viewport.bottom + thresholdY) / 3);
                         }
-                        if (toX < viewport.left + thresholdX) {
-                            $_mainEl.scrollLeft += max(-8, (toX - viewport.left - thresholdX) / 3);
-                        }
-                        if (toX > viewport.right - thresholdX) {
-                            $_mainEl.scrollLeft += min(8, (toX - viewport.right + thresholdX) / 3);
-                        }
+                    }
+                    if (toX < viewport.left + thresholdX) {
+                        $_mainEl.scrollLeft += max(-8, (toX - viewport.left - thresholdX) / 3);
+                    }
+                    if (toX > viewport.right - thresholdX) {
+                        $_mainEl.scrollLeft += min(8, (toX - viewport.right + thresholdX) / 3);
                     }
                     if (toY < thresholdY) {
                         window.scrollBy(0, max(-8, (toY - thresholdY) / 3));
@@ -417,6 +417,13 @@
                     return findPayload(dayEl.previousElementSibling);
                 }
             } else {
+                if (selecting() && payload.resource && !$_iEvents[0].resourceIds.includes(payload.resource.id)) {
+                    if (toX > fromX) {
+                        return findPayload(dayEl.previousElementSibling);
+                    } else {
+                        return findPayload(dayEl.nextElementSibling);
+                    }
+                }
                 return payload;
             }
         }
@@ -429,8 +436,8 @@
         viewport = {
             left: max(0, gridRect.left + $_mainEl.scrollLeft),
             right: min(document.documentElement.clientWidth, mainRect.left + $_mainEl.clientWidth) - 2,
-            top: max(0, gridRect.top + (scrollable ? $_mainEl.scrollTop : 0)),
-            bottom: min(document.documentElement.clientHeight, scrollable ? mainRect.top + $_mainEl.clientHeight : gridRect.bottom) - 2
+            top: max(0, gridRect.top + (!allDaySlot ? $_mainEl.scrollTop : 0)),
+            bottom: min(document.documentElement.clientHeight, !allDaySlot ? mainRect.top + $_mainEl.clientHeight : gridRect.bottom) - 2
         };
     }

package/src/plugins/resource-time-grid/View.svelte CHANGED Viewed

@@ -4,6 +4,7 @@
     import {ColHead, DayHeader} from '#components';
     import Label from './Label.svelte';
     import View from '../time-grid/View.svelte';
+    import NowIndicator from '../time-grid/NowIndicator.svelte';
     let {_viewDates, _viewResources, _slotTimeLimits, datesAboveResources, highlightedDates, validRange, theme} = getContext('state');
@@ -14,14 +15,13 @@
     createGridFn={() => createGrid(
         $_viewDates, $_viewResources, $_slotTimeLimits, $datesAboveResources, $validRange, $highlightedDates
     )}
-    fullwidthNowIndicator={$datesAboveResources}
 >
     {#snippet header(grid)}
         {#each grid as days, i}
             {@const {dayStart: date, resource, disabled, highlight} = days[0]}
             <ColHead
                 {date}
-                className={$theme.colGroup}
+                className={grid[0].length > 1 ? $theme.colGroup : undefined}
                 weekday={$datesAboveResources}
                 colSpan={days.length}
                 colIndex={1 + i * days.length}
@@ -35,17 +35,33 @@
                 {/if}
             </ColHead>
         {/each}
-        {#each grid as days, i}
-            {#each days as day, j}
-                {@const {dayStart: date, resource, disabled, highlight} = day}
-                <ColHead {date} colIndex={1 + j + i * days.length} {disabled} {highlight}>
-                    {#if $datesAboveResources}
-                        <Label {resource} {date}/>
-                    {:else}
-                        <DayHeader {date} alPrefix={resourceLabels[i]}/>
-                    {/if}
-                </ColHead>
+        {#if grid[0].length > 1}
+            {#each grid as days, i}
+                {#each days as day, j}
+                    {@const {dayStart: date, resource, disabled, highlight} = day}
+                    <ColHead {date} colIndex={1 + j + i * days.length} {disabled} {highlight}>
+                        {#if $datesAboveResources}
+                            <Label {resource} {date}/>
+                        {:else}
+                            <DayHeader {date} alPrefix={resourceLabels[i]}/>
+                        {/if}
+                    </ColHead>
+                {/each}
             {/each}
-        {/each}
+        {/if}
+    {/snippet}
+    {#snippet nowIndicator(grid)}
+        {#if $datesAboveResources}
+            <NowIndicator days={grid.flat()} span={grid[0].length}/>
+        {:else}
+            {#if grid[0].length > 1}
+                {#each grid as days}
+                    <NowIndicator {days} />
+                {/each}
+            {:else}
+                <NowIndicator days={grid.flat()} span={grid.length}/>
+            {/if}
+        {/if}
     {/snippet}
 </View>

package/src/plugins/resource-time-grid/index.js CHANGED Viewed

@@ -19,6 +19,7 @@ export default {
         options.views.resourceTimeGridDay = {
             buttonText: btnTextDay,
             component: View,
+            dayHeaderFormat: {weekday: 'long'},
             duration: {days: 1},
             theme: themeView('ec-resource ec-time-grid ec-day-view')
         };

package/src/plugins/time-grid/NowIndicator.svelte CHANGED Viewed

@@ -2,12 +2,12 @@
     import {getContext} from 'svelte';
     import {datesEqual, toSeconds, intersectionObserver} from '#lib';
-    let {days, fullwidth = false} = $props();
+    let {days, span = 1} = $props();
     let {_mainEl, _now, _today, _sidebarWidth, slotDuration, slotHeight, theme} = getContext('state');
     // Layout
-    let {gridColumn, start} = $derived.by(() => {
+    let {gridColumn, start, end} = $derived.by(() => {
         for (let day of days) {
             if (datesEqual(day.dayStart, $_today)) {
                 return day;
@@ -16,6 +16,9 @@
         return {};
     });
     let top = $derived.by(() => {
+        if ($_now < start || $_now > end) {
+            return null;
+        }
         let step = toSeconds($slotDuration);
         return ($_now - start) / 1000 / step * $slotHeight;
     });
@@ -31,10 +34,10 @@
     }
 </script>
-{#if gridColumn}
+{#if gridColumn && top !== null}
     <div {@attach intersectionObserver(onIntersect, observerOptions)}
         class="{$theme.nowIndicator}"
-        style:grid-column="{gridColumn + 1}{fullwidth ? ` / span ${days.length}` : ''}"
+        style:grid-column="{gridColumn + 1} / span {span}"
         style:inset-block-start="{top}px"
     ></div>
 {/if}

package/src/plugins/time-grid/View.svelte CHANGED Viewed

@@ -8,11 +8,11 @@
     import AllDayEvent from './AllDayEvent.svelte';
     import NowIndicator from './NowIndicator.svelte';
-    let {header, createGridFn, fullwidthNowIndicator} = $props();
+    let {header, nowIndicator, createGridFn} = $props();
     let {_mainEl, _filteredEvents, _iEvents, _sidebarWidth, _slotLabelPeriodicity, _slotTimeLimits, _slots,
-        _viewDates, allDayContent, allDaySlot, columnWidth, highlightedDates, nowIndicator, scrollTime, slotHeight,
-        slotDuration, theme, validRange} = getContext('state');
+        _viewDates, allDayContent, allDaySlot, columnWidth, highlightedDates, nowIndicator: showNowIndicator,
+        scrollTime, slotHeight, slotDuration, theme, validRange} = getContext('state');
     let headerHeight = $state(0);
     let allDayText = $derived(createAllDayContent($allDayContent));
@@ -127,9 +127,11 @@
         </div>
     </div>
-    {#if $nowIndicator}
-        {#each grid as days}
-            <NowIndicator {days} fullwidth={fullwidthNowIndicator}/>
-        {/each}
+    {#if $showNowIndicator}
+        {#if nowIndicator}
+            {@render nowIndicator(grid)}
+        {:else}
+            <NowIndicator days={grid[0]}/>
+        {/if}
     {/if}
 </section>

package/src/storage/stores.js CHANGED Viewed

@@ -193,10 +193,10 @@ export function filteredEvents(state){
             // Filter events
             if (isFunction($eventFilter)) {
+                let events = $_events.map(toEventWithLocalDates);
                 result = result
-                    .map(toEventWithLocalDates)
-                    .filter((event, index, events) => $eventFilter({
-                        event,
+                    .filter((event, index) => $eventFilter({
+                        event: toEventWithLocalDates(event),
                         index,
                         events,
                         view

package/src/styles/sidebar.css CHANGED Viewed

@@ -47,13 +47,14 @@
 }
 .ec-expander {
-    margin-right: .25em;
-    width: 1.25em;
+    inline-size: 1.25em;
+    margin-inline-end: .25em;
+    margin-block-start: -1px;
     .ec-button {
         line-height: normal;
         padding: 0;
         aspect-ratio: 1;
-        height: 1.25em;
+        block-size: 1.25em;
     }
 }

package/src/styles/toolbar.css CHANGED Viewed

@@ -57,7 +57,7 @@
 .ec-icon {
     display: inline-block;
-    width: 1em;
+    inline-size: 1em;
     &.ec-prev:after,
     &.ec-next:after {
@@ -71,10 +71,18 @@
     }
     &.ec-prev:after {
-        transform: rotate(-135deg) translate(-2px, 2px);
+        inset-inline-start: 3px;
+        rotate: -135deg;
+    }
+    [dir="rtl"] &.ec-prev:after {
+        rotate: 135deg;
     }
     &.ec-next:after {
-        transform: rotate(45deg) translate(-2px, 2px);
+        inset-inline-start: -3px;
+        rotate: 45deg;
+    }
+    [dir="rtl"] &.ec-next:after {
+        rotate: -45deg;
     }
 }