npm - @event-calendar/core - Versions diffs - 4.2.0 → 4.3.1 - Mend

@event-calendar/core 4.2.0 → 4.3.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 (13) hide show

package/README.md +2 -2
package/dist/index.css +13 -4
package/dist/index.js +208 -113
package/package.json +2 -2
package/src/lib/dom.js +4 -3
package/src/plugins/resource-timeline/Body.svelte +13 -10
package/src/plugins/resource-timeline/Header.svelte +4 -3
package/src/plugins/resource-timeline/NowIndicator.svelte +39 -0
package/src/plugins/resource-timeline/View.svelte +5 -1
package/src/plugins/resource-timeline/index.js +3 -0
package/src/plugins/time-grid/NowIndicator.svelte +3 -3
package/src/styles/index.scss +12 -4
package/src/styles/timeline.scss +1 -0

package/README.md CHANGED Viewed

@@ -227,8 +227,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@4.2.0/dist/event-calendar.min.css">
-<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@4.2.0/dist/event-calendar.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@4.3.1/dist/event-calendar.min.css">
+<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@4.3.1/dist/event-calendar.min.js"></script>
 ```
 <details>

package/dist/index.css CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
- * EventCalendar v4.2.0
+ * EventCalendar v4.3.1
  * https://github.com/vkurko/calendar
  */
 .ec {
@@ -74,6 +74,7 @@
   display: flex;
   flex-direction: column;
   min-width: 0;
+  position: relative;
 }
 .ec-timeline .ec-content {
   flex-direction: column;
@@ -725,19 +726,27 @@
 .ec-now-indicator {
   position: absolute;
   z-index: 1005;
+  pointer-events: none;
+}
+.ec-time-grid .ec-now-indicator {
   width: 100%;
   border-top: var(--ec-now-indicator-color) solid 2px;
-  pointer-events: none;
+}
+.ec-timeline .ec-now-indicator {
+  border-left: var(--ec-now-indicator-color) solid 2px;
+  will-change: transform;
 }
 .ec-now-indicator:before {
   background: var(--ec-now-indicator-color);
   border-radius: 50%;
   content: "";
-  position: absolute;
+  display: block;
   height: 12px;
   margin-top: -7px;
   width: 12px;
-  pointer-events: none;
+}
+.ec-timeline .ec-now-indicator:before {
+  margin-left: -7px;
 }
 .ec-resizer {

package/dist/index.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
- * EventCalendar v4.2.0
+ * EventCalendar v4.3.1
  * https://github.com/vkurko/calendar
  */
 import { tick, getContext, untrack, setContext, onMount, mount, unmount } from "svelte";
@@ -299,13 +299,14 @@ function ancestor(el, up) {
 function height(el) {
   return rect(el).height;
 }
-function getElementWithPayload(x, y, root2 = document) {
+function getElementWithPayload(x, y, root2 = document, processed = []) {
+  processed.push(root2);
   for (let el of root2.elementsFromPoint(x, y)) {
     if (hasPayload(el)) {
       return el;
     }
-    if (el.shadowRoot && el.shadowRoot !== root2) {
-      let shadowEl = getElementWithPayload(x, y, el.shadowRoot);
+    if (el.shadowRoot && !processed.includes(el.shadowRoot)) {
+      let shadowEl = getElementWithPayload(x, y, el.shadowRoot, processed);
       if (shadowEl) {
         return shadowEl;
       }
@@ -1240,12 +1241,12 @@ function filterOpts(opts, state) {
 function validKey(key, state) {
   return state.hasOwnProperty(key) && key[0] !== "_";
 }
-var root_2$7 = $.template(`<h2></h2>`);
-var root_4$3 = $.template(`<button><i></i></button>`);
-var root_6$1 = $.template(`<button><i></i></button>`);
-var root_8$1 = $.template(`<button> </button>`);
-var root_10$1 = $.template(`<button></button>`);
-var root_12$1 = $.template(`<button> </button>`);
+var root_2$7 = $.from_html(`<h2></h2>`);
+var root_4$3 = $.from_html(`<button><i></i></button>`);
+var root_6$1 = $.from_html(`<button><i></i></button>`);
+var root_8$1 = $.from_html(`<button> </button>`);
+var root_10$1 = $.from_html(`<button></button>`);
+var root_12$1 = $.from_html(`<button> </button>`);
 function Buttons($$anchor, $$props) {
   $.push($$props, false);
   const [$$stores, $$cleanup] = $.setup_stores();
@@ -1464,9 +1465,9 @@ function Buttons($$anchor, $$props) {
   $.pop();
   $$cleanup();
 }
-var root_3$5 = $.template(`<div><!></div>`);
-var root_1$c = $.template(`<div></div>`);
-var root$r = $.template(`<nav></nav>`);
+var root_3$5 = $.from_html(`<div><!></div>`);
+var root_1$d = $.from_html(`<div></div>`);
+var root$r = $.from_html(`<nav></nav>`);
 function Toolbar($$anchor, $$props) {
   $.push($$props, true);
   const [$$stores, $$cleanup] = $.setup_stores();
@@ -1483,7 +1484,7 @@ function Toolbar($$anchor, $$props) {
   });
   var nav = root$r();
   $.each(nav, 21, () => keys($.get(sections)), $.index, ($$anchor2, key) => {
-    var div = root_1$c();
+    var div = root_1$d();
     $.each(div, 21, () => $.get(sections)[$.get(key)], $.index, ($$anchor3, buttons) => {
       var fragment = $.comment();
       var node = $.first_child(fragment);
@@ -1600,7 +1601,7 @@ function Auxiliary$1($$anchor, $$props) {
   $.pop();
   $$cleanup();
 }
-var root$q = $.template(`<div><!> <!></div> <!>`, 1);
+var root$q = $.from_html(`<div><!> <!></div> <!>`, 1);
 function Calendar($$anchor, $$props) {
   $.push($$props, true);
   const [$$stores, $$cleanup] = $.setup_stores();
@@ -1772,8 +1773,8 @@ function days(state) {
     return days2;
   });
 }
-var root_1$b = $.template(`<div role="columnheader"><span></span></div>`);
-var root$p = $.template(`<div><div role="row"></div> <div></div></div>`);
+var root_1$c = $.from_html(`<div role="columnheader"><span></span></div>`);
+var root$p = $.from_html(`<div><div role="row"></div> <div></div></div>`);
 function Header$1($$anchor, $$props) {
   $.push($$props, false);
   const [$$stores, $$cleanup] = $.setup_stores();
@@ -1791,7 +1792,7 @@ function Header$1($$anchor, $$props) {
   var div = root$p();
   var div_1 = $.child(div);
   $.each(div_1, 5, $_days, $.index, ($$anchor2, day) => {
-    var div_2 = root_1$b();
+    var div_2 = root_1$c();
     var span = $.child(div_2);
     $.action(span, ($$node, $$action_arg) => setContent == null ? void 0 : setContent($$node, $$action_arg), () => $_intlDayHeader().format($.get(day)));
     $.reset(div_2);
@@ -1823,8 +1824,8 @@ function Header$1($$anchor, $$props) {
   $.pop();
   $$cleanup();
 }
-var root_1$a = $.template(`<div></div>`);
-var root$o = $.template(`<article><!></article>`);
+var root_1$b = $.from_html(`<div></div>`);
+var root$o = $.from_html(`<article><!></article>`);
 function BaseEvent($$anchor, $$props) {
   $.push($$props, true);
   const [$$stores, $$cleanup] = $.setup_stores();
@@ -1871,7 +1872,7 @@ function BaseEvent($$anchor, $$props) {
     bgEvent($.get(display)) ? $theme().bgEvent : $theme().event,
     ...createEventClasses($eventClassNames(), $.get(event), $_view())
   ]).join(" "));
-  let $$d = $.derived(() => createEventContent($$props.chunk, $displayEventEnd(), $eventContent(), $theme(), $_intlEventTime(), $_view())), timeText = $.derived(() => $.get($$d)[0]), content = $.derived(() => $.get($$d)[1]);
+  let $$d = $.derived(() => createEventContent($$props.chunk, $displayEventEnd(), $eventContent(), $theme(), $_intlEventTime(), $_view())), $$array = $.derived(() => $.to_array($.get($$d), 2)), timeText = $.derived(() => $.get($$array)[0]), content = $.derived(() => $.get($$array)[1]);
   onMount(() => {
     if (isFunction($eventDidMount())) {
       $eventDidMount()({
@@ -1909,7 +1910,7 @@ function BaseEvent($$anchor, $$props) {
   };
   {
     const defaultBody = ($$anchor2) => {
-      var div = root_1$a();
+      var div = root_1$b();
       $.action(div, ($$node, $$action_arg) => setContent == null ? void 0 : setContent($$node, $$action_arg), () => $.get(content));
       $.template_effect(() => $.set_class(div, 1, $.clsx($theme().eventBody)));
       $.append($$anchor2, div);
@@ -2141,7 +2142,7 @@ function Event$4($$anchor, $$props) {
   $$cleanup();
   return $$pop;
 }
-var root$n = $.template(`<div><div><time></time> <a role="button" tabindex="0">&times;</a></div> <div></div></div>`);
+var root$n = $.from_html(`<div><div><time></time> <a role="button" tabindex="0">&times;</a></div> <div></div></div>`);
 function Popup($$anchor, $$props) {
   $.push($$props, true);
   const [$$stores, $$cleanup] = $.setup_stores();
@@ -2268,12 +2269,12 @@ function Popup($$anchor, $$props) {
   $$cleanup();
 }
 $.delegate(["pointerdown", "click", "keydown"]);
-var root_1$9 = $.template(`<span></span>`);
-var root_5$1 = $.template(`<div><!></div>`);
-var root_6 = $.template(`<div><!></div>`);
-var root_4$2 = $.template(`<!> <!>`, 1);
-var root_10 = $.template(`<a role="button" tabindex="0" aria-haspopup="true"></a>`);
-var root$m = $.template(`<div role="cell"><div><time></time> <!></div> <div><!></div> <!> <div><!></div> <!> <div><!></div></div>`);
+var root_1$a = $.from_html(`<span></span>`);
+var root_5$1 = $.from_html(`<div><!></div>`);
+var root_6 = $.from_html(`<div><!></div>`);
+var root_4$2 = $.from_html(`<!> <!>`, 1);
+var root_10 = $.from_html(`<a role="button" tabindex="0" aria-haspopup="true"></a>`);
+var root$m = $.from_html(`<div role="cell"><div><time></time> <!></div> <div><!></div> <!> <div><!></div> <!> <div><!></div></div>`);
 function Day$4($$anchor, $$props) {
   $.push($$props, true);
   const [$$stores, $$cleanup] = $.setup_stores();
@@ -2401,7 +2402,7 @@ function Day$4($$anchor, $$props) {
   var node = $.sibling(time, 2);
   {
     var consequent = ($$anchor2) => {
-      var span = root_1$9();
+      var span = root_1$a();
       $.action(span, ($$node, $$action_arg) => setContent == null ? void 0 : setContent($$node, $$action_arg), () => $.get(weekNumber));
       $.template_effect(() => $.set_class(span, 1, $theme().weekNumber));
       $.append($$anchor2, span);
@@ -2570,7 +2571,7 @@ function Day$4($$anchor, $$props) {
   return $$pop;
 }
 $.delegate(["pointerdown", "click", "keydown"]);
-var root$l = $.template(`<div role="row"></div>`);
+var root$l = $.from_html(`<div role="row"></div>`);
 function Week$1($$anchor, $$props) {
   $.push($$props, true);
   const [$$stores, $$cleanup] = $.setup_stores();
@@ -2611,7 +2612,7 @@ function Week$1($$anchor, $$props) {
     prepareEventChunks$1(bgChunks2, $hiddenDays());
     let longChunks2 = prepareEventChunks$1(chunks2, $hiddenDays());
     return [chunks2, bgChunks2, longChunks2];
-  }), chunks = $.derived(() => $.get($$d)[0]), bgChunks = $.derived(() => $.get($$d)[1]), longChunks = $.derived(() => $.get($$d)[2]);
+  }), $$array = $.derived(() => $.to_array($.get($$d), 3)), chunks = $.derived(() => $.get($$array)[0]), bgChunks = $.derived(() => $.get($$array)[1]), longChunks = $.derived(() => $.get($$array)[2]);
   let iChunks = $.derived(() => $_iEvents().map((event) => {
     let chunk;
     if (event && eventIntersects(event, $.get(start), $.get(end))) {
@@ -2660,7 +2661,7 @@ function Week$1($$anchor, $$props) {
   $$cleanup();
   return $$pop;
 }
-var root$k = $.template(`<div><div></div></div>`);
+var root$k = $.from_html(`<div><div></div></div>`);
 function Body$3($$anchor, $$props) {
   $.push($$props, true);
   const [$$stores, $$cleanup] = $.setup_stores();
@@ -2735,7 +2736,7 @@ function Body$3($$anchor, $$props) {
   $.pop();
   $$cleanup();
 }
-var root$j = $.template(`<!> <!>`, 1);
+var root$j = $.from_html(`<!> <!>`, 1);
 function View$4($$anchor) {
   var fragment = root$j();
   var node = $.first_child(fragment);
@@ -3487,9 +3488,9 @@ function Pointer($$anchor, $$props) {
   $$cleanup();
   return $$pop;
 }
-var root_1$8 = $.template(`<div></div>`);
-var root_2$6 = $.template(`<div></div>`);
-var root$i = $.template(`<!> <!> <!>`, 1);
+var root_1$9 = $.from_html(`<div></div>`);
+var root_2$6 = $.from_html(`<div></div>`);
+var root$i = $.from_html(`<!> <!> <!>`, 1);
 function Resizer($$anchor, $$props) {
   $.push($$props, true);
   const [$$stores, $$cleanup] = $.setup_stores();
@@ -3519,7 +3520,7 @@ function Resizer($$anchor, $$props) {
   var node = $.first_child(fragment);
   {
     var consequent = ($$anchor2) => {
-      var div = root_1$8();
+      var div = root_1$9();
       var event_handler = $.derived(() => createResizeHandler(true));
       div.__pointerdown = function(...$$args) {
         var _a;
@@ -3555,7 +3556,7 @@ function Resizer($$anchor, $$props) {
   $$cleanup();
 }
 $.delegate(["pointerdown"]);
-var root$h = $.template(`<!> <!>`, 1);
+var root$h = $.from_html(`<!> <!>`, 1);
 function Auxiliary($$anchor, $$props) {
   $.push($$props, true);
   const [$$stores, $$cleanup] = $.setup_stores();
@@ -3663,7 +3664,7 @@ const index$3 = {
     state._auxiliary.update(($_auxiliary) => [...$_auxiliary, Auxiliary]);
   }
 };
-var root_1$7 = $.template(`<div></div> <!>`, 1);
+var root_1$8 = $.from_html(`<div></div> <!>`, 1);
 function Event$3($$anchor, $$props) {
   $.push($$props, true);
   const [$$stores, $$cleanup] = $.setup_stores();
@@ -3681,7 +3682,7 @@ function Event$3($$anchor, $$props) {
   });
   {
     const body = ($$anchor2, defaultBody = $.noop, bgColor = $.noop, txtColor = $.noop) => {
-      var fragment_1 = root_1$7();
+      var fragment_1 = root_1$8();
       var div = $.first_child(fragment_1);
       let styles_1;
       var node = $.sibling(div, 2);
@@ -3709,7 +3710,7 @@ function Event$3($$anchor, $$props) {
   $.pop();
   $$cleanup();
 }
-var root_1$6 = $.template(`<div role="listitem"><h4><time></time> <time></time></h4> <!></div>`);
+var root_1$7 = $.from_html(`<div role="listitem"><h4><time></time> <time></time></h4> <!></div>`);
 function Day$3($$anchor, $$props) {
   $.push($$props, true);
   const [$$stores, $$cleanup] = $.setup_stores();
@@ -3770,7 +3771,7 @@ function Day$3($$anchor, $$props) {
   var node = $.first_child(fragment);
   {
     var consequent = ($$anchor2) => {
-      var div = root_1$6();
+      var div = root_1$7();
       div.__pointerdown = function(...$$args) {
         var _a, _b;
         (_b = (_a = $_interaction().action) == null ? void 0 : _a.select) == null ? void 0 : _b.apply(this, $$args);
@@ -3825,8 +3826,8 @@ function onclick$1(jsEvent, $noEventsClick, noEventsClick, $_view, _view) {
     });
   }
 }
-var root_1$5 = $.template(`<div></div>`);
-var root$g = $.template(`<div><div><!></div></div>`);
+var root_1$6 = $.from_html(`<div></div>`);
+var root$g = $.from_html(`<div><div><!></div></div>`);
 function Body$2($$anchor, $$props) {
   $.push($$props, true);
   const [$$stores, $$cleanup] = $.setup_stores();
@@ -3866,7 +3867,7 @@ function Body$2($$anchor, $$props) {
   var node = $.child(div_1);
   {
     var consequent = ($$anchor2) => {
-      var div_2 = root_1$5();
+      var div_2 = root_1$6();
       div_2.__click = [
         onclick$1,
         $noEventsClick,
@@ -4015,8 +4016,8 @@ function createAllDayContent(allDayContent) {
   }
   return content;
 }
-var root_1$4 = $.template(`<time></time>`);
-var root$f = $.template(`<div><div></div> <!></div> <div role="row"><div><!></div> <!></div>`, 1);
+var root_1$5 = $.from_html(`<time></time>`);
+var root$f = $.from_html(`<div><div></div> <!></div> <div role="row"><div><!></div> <!></div>`, 1);
 function Section($$anchor, $$props) {
   $.push($$props, true);
   const [$$stores, $$cleanup] = $.setup_stores();
@@ -4038,7 +4039,7 @@ function Section($$anchor, $$props) {
   $.action(div_1, ($$node, $$action_arg) => setContent == null ? void 0 : setContent($$node, $$action_arg), () => $.get(allDayText));
   var node = $.sibling(div_1, 2);
   $.each(node, 1, $_times, $.index, ($$anchor2, time, i) => {
-    var time_1 = root_1$4();
+    var time_1 = root_1$5();
     $.action(time_1, ($$node, $$action_arg) => setContent == null ? void 0 : setContent($$node, $$action_arg), () => $.get(time)[1]);
     $.template_effect(() => {
       $.set_class(time_1, 1, `${$theme().time ?? ""}${(i || $.get(showAllTimes)) && $.get(time)[2] ? "" : " " + $theme().minor}`);
@@ -4085,8 +4086,8 @@ function Section($$anchor, $$props) {
   $.pop();
   $$cleanup();
 }
-var root_2$5 = $.template(`<div></div>`);
-var root$e = $.template(`<div><div><!></div></div>`);
+var root_2$5 = $.from_html(`<div></div>`);
+var root$e = $.from_html(`<div><div><!></div></div>`);
 function Body$1($$anchor, $$props) {
   $.push($$props, true);
   const [$$stores, $$cleanup] = $.setup_stores();
@@ -4199,8 +4200,8 @@ function Event$2($$anchor, $$props) {
   $.pop();
   $$cleanup();
 }
-var root$d = $.template(`<div></div>`);
-function NowIndicator($$anchor, $$props) {
+var root$d = $.from_html(`<div></div>`);
+function NowIndicator$1($$anchor, $$props) {
   $.push($$props, true);
   const [$$stores, $$cleanup] = $.setup_stores();
   const $_now = () => $.store_get(_now, "$_now", $$stores);
@@ -4217,10 +4218,10 @@ function NowIndicator($$anchor, $$props) {
     _today,
     _slotTimeLimits
   } = getContext("state");
-  let start = $.derived(() => ($_now() - $_today()) / 1e3 / 60);
+  let start = $.derived(() => ($_now() - $_today()) / 1e3);
   let top = $.derived(() => {
-    let step = $slotDuration().seconds / 60;
-    let offset = $_slotTimeLimits().min.seconds / 60;
+    let step = $slotDuration().seconds;
+    let offset = $_slotTimeLimits().min.seconds;
     return ($.get(start) - offset) / step * $slotHeight();
   });
   var div = root$d();
@@ -4232,8 +4233,8 @@ function NowIndicator($$anchor, $$props) {
   $.pop();
   $$cleanup();
 }
-var root_3$4 = $.template(`<!> <!> <!>`, 1);
-var root$c = $.template(`<div role="cell"><div><!></div> <div><!></div> <div><!></div></div>`);
+var root_3$4 = $.from_html(`<!> <!> <!>`, 1);
+var root$c = $.from_html(`<div role="cell"><div><!></div> <div><!></div> <div><!></div></div>`);
 function Day$2($$anchor, $$props) {
   $.push($$props, true);
   const [$$stores, $$cleanup] = $.setup_stores();
@@ -4293,7 +4294,7 @@ function Day$2($$anchor, $$props) {
     }
     groupEventChunks(chunks2);
     return [chunks2, bgChunks2];
-  }), chunks = $.derived(() => $.get($$d)[0]), bgChunks = $.derived(() => $.get($$d)[1]);
+  }), $$array = $.derived(() => $.to_array($.get($$d), 2)), chunks = $.derived(() => $.get($$array)[0]), bgChunks = $.derived(() => $.get($$array)[1]);
   let iChunks = $.derived(() => {
     if ($.get(disabled)) {
       return [];
@@ -4400,7 +4401,7 @@ function Day$2($$anchor, $$props) {
   var node_6 = $.child(div_3);
   {
     var consequent_4 = ($$anchor2) => {
-      NowIndicator($$anchor2, {});
+      NowIndicator$1($$anchor2, {});
     };
     $.if(node_6, ($$render) => {
       if ($nowIndicator() && $.get(isToday) && !$.get(disabled)) $$render(consequent_4);
@@ -4468,8 +4469,8 @@ function Event$1($$anchor, $$props) {
   });
   return $.pop({ reposition });
 }
-var root_3$3 = $.template(`<div><!></div>`);
-var root$b = $.template(`<div role="cell"><div><!></div> <!> <div><!></div></div>`);
+var root_3$3 = $.from_html(`<div><!></div>`);
+var root$b = $.from_html(`<div role="cell"><div><!></div> <!> <div><!></div></div>`);
 function Day$1($$anchor, $$props) {
   $.push($$props, true);
   const [$$stores, $$cleanup] = $.setup_stores();
@@ -4637,7 +4638,7 @@ function Week($$anchor, $$props) {
     prepareEventChunks$1(bgChunks2, $hiddenDays());
     let longChunks2 = prepareEventChunks$1(chunks2, $hiddenDays());
     return [chunks2, bgChunks2, longChunks2];
-  }), chunks = $.derived(() => $.get($$d)[0]), bgChunks = $.derived(() => $.get($$d)[1]), longChunks = $.derived(() => $.get($$d)[2]);
+  }), $$array = $.derived(() => $.to_array($.get($$d), 3)), chunks = $.derived(() => $.get($$array)[0]), bgChunks = $.derived(() => $.get($$array)[1]), longChunks = $.derived(() => $.get($$array)[2]);
   function reposition() {
     runReposition(refs, $$props.dates);
   }
@@ -4689,9 +4690,9 @@ function Week($$anchor, $$props) {
   $.pop();
   $$cleanup();
 }
-var root_2$4 = $.template(`<div role="columnheader"><time></time></div>`);
-var root_3$2 = $.template(`<div><div><!> <div></div></div></div>`);
-var root$a = $.template(`<div><!> <div></div></div> <!> <!>`, 1);
+var root_2$4 = $.from_html(`<div role="columnheader"><time></time></div>`);
+var root_3$2 = $.from_html(`<div><div><!> <div></div></div></div>`);
+var root$a = $.from_html(`<div><!> <div></div></div> <!> <!>`, 1);
 function View$2($$anchor, $$props) {
   $.push($$props, false);
   const [$$stores, $$cleanup] = $.setup_stores();
@@ -4826,7 +4827,7 @@ const TimeGrid = {
     state._times = times(state);
   }
 };
-var root$9 = $.template(`<span></span>`);
+var root$9 = $.from_html(`<span></span>`);
 function Label$1($$anchor, $$props) {
   $.push($$props, true);
   const [$$stores, $$cleanup] = $.setup_stores();
@@ -4879,17 +4880,17 @@ function Label$1($$anchor, $$props) {
   $.pop();
   $$cleanup();
 }
-var root_3$1 = $.template(`<div><time></time></div>`);
-var root_4$1 = $.template(`<div><!></div>`);
-var root_7 = $.template(`<div role="columnheader"><!></div>`);
-var root_8 = $.template(`<div role="columnheader"><time></time></div>`);
-var root_5 = $.template(`<div></div>`);
-var root_2$3 = $.template(`<div><!> <!></div>`);
-var root_12 = $.template(`<div></div>`);
-var root_15 = $.template(`<div><!></div>`);
-var root_9 = $.template(`<div><div><!> <div></div></div></div>`);
-var root_17 = $.template(`<div></div>`);
-var root$8 = $.template(`<div><!> <div></div></div> <!> <!>`, 1);
+var root_3$1 = $.from_html(`<div><time></time></div>`);
+var root_4$1 = $.from_html(`<div><!></div>`);
+var root_7 = $.from_html(`<div role="columnheader"><!></div>`);
+var root_8 = $.from_html(`<div role="columnheader"><time></time></div>`);
+var root_5 = $.from_html(`<div></div>`);
+var root_2$3 = $.from_html(`<div><!> <!></div>`);
+var root_12 = $.from_html(`<div></div>`);
+var root_15 = $.from_html(`<div><!></div>`);
+var root_9 = $.from_html(`<div><div><!> <div></div></div></div>`);
+var root_17 = $.from_html(`<div></div>`);
+var root$8 = $.from_html(`<div><!> <div></div></div> <!> <!>`, 1);
 function View$1($$anchor, $$props) {
   $.push($$props, true);
   const [$$stores, $$cleanup] = $.setup_stores();
@@ -5209,7 +5210,7 @@ function dayTimes(state) {
 function nestedResources(state) {
   return derived(state.resources, ($resources) => $resources.some((resource) => getPayload(resource).children.length));
 }
-var root$7 = $.template(`<span></span>`);
+var root$7 = $.from_html(`<span></span>`);
 function Label($$anchor, $$props) {
   $.push($$props, true);
   const [$$stores, $$cleanup] = $.setup_stores();
@@ -5250,9 +5251,9 @@ function onclick(_, expanded, payload, toggle, resources) {
   toggle($.get(payload).children, $.get(expanded));
   resources.update(identity);
 }
-var root_1$3 = $.template(`<span></span>`);
-var root_2$2 = $.template(`<button><!></button>`);
-var root$6 = $.template(`<!> <span><!></span>`, 1);
+var root_1$4 = $.from_html(`<span></span>`);
+var root_2$2 = $.from_html(`<button><!></button>`);
+var root$6 = $.from_html(`<!> <span><!></span>`, 1);
 function Expander($$anchor, $$props) {
   $.push($$props, true);
   const [$$stores, $$cleanup] = $.setup_stores();
@@ -5276,7 +5277,7 @@ function Expander($$anchor, $$props) {
   var fragment = root$6();
   var node = $.first_child(fragment);
   $.each(node, 17, () => Array($.get(payload).level), $.index, ($$anchor2, level) => {
-    var span = root_1$3();
+    var span = root_1$4();
     $.template_effect(() => $.set_class(span, 1, $theme().expander));
     $.append($$anchor2, span);
   });
@@ -5323,8 +5324,8 @@ function Expander($$anchor, $$props) {
   $$cleanup();
 }
 $.delegate(["click"]);
-var root_1$2 = $.template(`<div role="rowheader"><!> <!></div>`);
-var root$5 = $.template(`<div><div></div> <div></div></div>`);
+var root_1$3 = $.from_html(`<div role="rowheader"><!> <!></div>`);
+var root$5 = $.from_html(`<div><div></div> <div></div></div>`);
 function Sidebar($$anchor, $$props) {
   $.push($$props, false);
   const [$$stores, $$cleanup] = $.setup_stores();
@@ -5352,7 +5353,7 @@ function Sidebar($$anchor, $$props) {
   var div_1 = $.child(div);
   var div_2 = $.sibling(div_1, 2);
   $.each(div_2, 5, $_viewResources, $.index, ($$anchor2, resource) => {
-    var div_3 = root_1$2();
+    var div_3 = root_1$3();
     var node = $.child(div_3);
     {
       var consequent = ($$anchor3) => {
@@ -5399,17 +5400,18 @@ function Sidebar($$anchor, $$props) {
   $.pop();
   $$cleanup();
 }
-var root_3 = $.template(`<div role="columnheader"><time></time></div>`);
-var root_2$1 = $.template(`<div><time></time></div> <div></div>`, 1);
-var root_4 = $.template(`<div role="columnheader"><time></time></div>`);
-var root_1$1 = $.template(`<div><!></div>`);
-var root$4 = $.template(`<div><div role="row"></div> <div></div></div>`);
+var root_3 = $.from_html(`<div role="columnheader"><time></time></div>`);
+var root_2$1 = $.from_html(`<div><time></time></div> <div></div>`, 1);
+var root_4 = $.from_html(`<div role="columnheader"><time></time></div>`);
+var root_1$2 = $.from_html(`<div><!></div>`);
+var root$4 = $.from_html(`<div><div role="row"></div> <div></div></div>`);
 function Header($$anchor, $$props) {
   $.push($$props, false);
   const [$$stores, $$cleanup] = $.setup_stores();
   const $theme = () => $.store_get(theme, "$theme", $$stores);
   const $_headerEl = () => $.store_get(_headerEl, "$_headerEl", $$stores);
   const $_viewDates = () => $.store_get(_viewDates, "$_viewDates", $$stores);
+  const $_today = () => $.store_get(_today, "$_today", $$stores);
   const $slotDuration = () => $.store_get(slotDuration, "$slotDuration", $$stores);
   const $_intlDayHeaderAL = () => $.store_get(_intlDayHeaderAL, "$_intlDayHeaderAL", $$stores);
   const $_intlDayHeader = () => $.store_get(_intlDayHeader, "$_intlDayHeader", $$stores);
@@ -5420,6 +5422,7 @@ function Header($$anchor, $$props) {
     _intlDayHeader,
     _intlDayHeaderAL,
     _dayTimes,
+    _today,
     _viewDates,
     slotDuration,
     theme
@@ -5428,7 +5431,7 @@ function Header($$anchor, $$props) {
   var div = root$4();
   var div_1 = $.child(div);
   $.each(div_1, 5, $_viewDates, $.index, ($$anchor2, date) => {
-    var div_2 = root_1$1();
+    var div_2 = root_1$2();
     var node = $.child(div_2);
     {
       var consequent = ($$anchor3) => {
@@ -5491,12 +5494,13 @@ function Header($$anchor, $$props) {
     }
     $.reset(div_2);
     $.template_effect(
-      ($0) => $.set_class(div_2, 1, `${$theme().day ?? ""} ${$0 ?? ""}`),
+      ($0, $1) => $.set_class(div_2, 1, `${$theme().day ?? ""} ${$0 ?? ""}${$1 ?? ""}`),
       [
         () => {
           var _a;
           return (_a = $theme().weekdays) == null ? void 0 : _a[$.get(date).getUTCDay()];
-        }
+        },
+        () => datesEqual($.get(date), $_today()) ? " " + $theme().today : ""
       ],
       $.derived_safe_equal
     );
@@ -5699,8 +5703,8 @@ function Event($$anchor, $$props) {
   $$cleanup();
   return $$pop;
 }
-var root_1 = $.template(`<!> <!> <!> <!>`, 1);
-var root$3 = $.template(`<div role="cell"><div><!></div></div>`);
+var root_1$1 = $.from_html(`<!> <!> <!> <!>`, 1);
+var root$3 = $.from_html(`<div role="cell"><div><!></div></div>`);
 function Day($$anchor, $$props) {
   $.push($$props, true);
   const [$$stores, $$cleanup] = $.setup_stores();
@@ -5761,7 +5765,7 @@ function Day($$anchor, $$props) {
   var node = $.child(div_1);
   {
     var consequent_2 = ($$anchor2) => {
-      var fragment = root_1();
+      var fragment = root_1$1();
       var node_1 = $.first_child(fragment);
       $.each(node_1, 17, () => $.get(dayBgChunks), (chunk) => chunk.event, ($$anchor3, chunk) => {
         Event($$anchor3, {
@@ -5850,7 +5854,7 @@ function Day($$anchor, $$props) {
   return $$pop;
 }
 $.delegate(["pointerdown"]);
-var root$2 = $.template(`<div role="row"></div>`);
+var root$2 = $.from_html(`<div role="row"></div>`);
 function Days($$anchor, $$props) {
   $.push($$props, true);
   const [$$stores, $$cleanup] = $.setup_stores();
@@ -5886,7 +5890,7 @@ function Days($$anchor, $$props) {
       addDay(end2);
     }
     return [start2, end2];
-  }), start = $.derived(() => $.get($$d)[0]), end = $.derived(() => $.get($$d)[1]);
+  }), $$array = $.derived(() => $.to_array($.get($$d), 2)), start = $.derived(() => $.get($$array)[0]), end = $.derived(() => $.get($$array)[1]);
   let $$d_1 = $.derived(() => {
     let chunks2 = [];
     let bgChunks2 = [];
@@ -5904,7 +5908,7 @@ function Days($$anchor, $$props) {
     [bgChunks2] = prepareEventChunks(bgChunks2, $_viewDates(), $_dayTimeLimits(), $slotDuration());
     [chunks2, longChunks2] = prepareEventChunks(chunks2, $_viewDates(), $_dayTimeLimits(), $slotDuration());
     return [chunks2, bgChunks2, longChunks2];
-  }), chunks = $.derived(() => $.get($$d_1)[0]), bgChunks = $.derived(() => $.get($$d_1)[1]), longChunks = $.derived(() => $.get($$d_1)[2]);
+  }), $$array_3 = $.derived(() => $.to_array($.get($$d_1), 3)), chunks = $.derived(() => $.get($$array_3)[0]), bgChunks = $.derived(() => $.get($$array_3)[1]), longChunks = $.derived(() => $.get($$array_3)[2]);
   let iChunks = $.derived(() => $_iEvents().map((event) => {
     let chunk;
     if (event && eventIntersects(event, $.get(start), $.get(end), $$props.resource)) {
@@ -5961,14 +5965,14 @@ function Days($$anchor, $$props) {
   $$cleanup();
   return $$pop;
 }
-var root_2 = $.template(`<div></div>`);
-var root$1 = $.template(`<div><div><div></div> <!></div></div>`);
+var root_2 = $.from_html(`<div></div>`);
+var root$1 = $.from_html(`<div><div><div></div> <!></div></div>`);
 function Body($$anchor, $$props) {
   $.push($$props, true);
   const [$$stores, $$cleanup] = $.setup_stores();
-  const $_bodyEl = () => $.store_get(_bodyEl, "$_bodyEl", $$stores);
   const $_dayTimeLimits = () => $.store_get(_dayTimeLimits, "$_dayTimeLimits", $$stores);
   const $_viewDates = () => $.store_get(_viewDates, "$_viewDates", $$stores);
+  const $_bodyEl = () => $.store_get(_bodyEl, "$_bodyEl", $$stores);
   const $scrollTime = () => $.store_get(scrollTime, "$scrollTime", $$stores);
   const $slotDuration = () => $.store_get(slotDuration, "$slotDuration", $$stores);
   const $slotWidth = () => $.store_get(slotWidth, "$slotWidth", $$stores);
@@ -5981,28 +5985,28 @@ function Body($$anchor, $$props) {
   const $_dayTimes = () => $.store_get(_dayTimes, "$_dayTimes", $$stores);
   let {
     _bodyEl,
+    _bodyHeight,
+    _bodyWidth,
+    _bodyScrollLeft,
     _headerEl,
     _events,
     _sidebarEl,
     _dayTimes,
     _dayTimeLimits,
+    _recheckScrollable,
     _resHs,
     _viewResources,
     _viewDates,
-    _recheckScrollable,
     scrollTime,
     slotDuration,
     slotWidth,
     theme
   } = getContext("state");
-  let el = $.state(void 0);
   let refs = [];
-  $.user_effect(() => {
-    $.store_set(_bodyEl, $.get(el));
-  });
   function scrollToTime() {
     let slotTimeLimits2 = getSlotTimeLimits($_dayTimeLimits(), $_viewDates()[0]);
-    $.get(el).scrollLeft = (toSeconds($scrollTime()) - toSeconds(slotTimeLimits2.min)) / toSeconds($slotDuration()) * $slotWidth();
+    $.store_mutate(_bodyEl, $.untrack($_bodyEl).scrollLeft = (toSeconds($scrollTime()) - toSeconds(slotTimeLimits2.min)) / toSeconds($slotDuration()) * $slotWidth(), $.untrack($_bodyEl));
+    $.store_set(_bodyScrollLeft, $_bodyEl().scrollLeft);
   }
   $.user_effect(() => {
     $_viewDates();
@@ -6021,6 +6025,12 @@ function Body($$anchor, $$props) {
   function onscroll() {
     $.store_mutate(_headerEl, $.untrack($_headerEl).scrollLeft = $_bodyEl().scrollLeft, $.untrack($_headerEl));
     $.store_mutate(_sidebarEl, $.untrack($_sidebarEl).scrollTop = $_bodyEl().scrollTop, $.untrack($_sidebarEl));
+    $.store_set(_bodyScrollLeft, $_bodyEl().scrollLeft);
+  }
+  function onresize() {
+    $.store_set(_bodyHeight, $_bodyEl().clientHeight);
+    $.store_set(_bodyWidth, $_bodyEl().clientWidth);
+    $.store_set(_recheckScrollable, true);
   }
   var div = root$1();
   $.event("resize", $.window, reposition);
@@ -6052,8 +6062,8 @@ function Body($$anchor, $$props) {
   });
   $.reset(div_1);
   $.reset(div);
-  $.bind_this(div, ($$value) => $.set(el, $$value), () => $.get(el));
-  $.action(div, ($$node, $$action_arg) => observeResize == null ? void 0 : observeResize($$node, $$action_arg), () => () => $.store_set(_recheckScrollable, true));
+  $.bind_this(div, ($$value) => $.store_set(_bodyEl, $$value), () => $_bodyEl());
+  $.action(div, ($$node, $$action_arg) => observeResize == null ? void 0 : observeResize($$node, $$action_arg), () => onresize);
   $.template_effect(() => {
     $.set_class(div, 1, $theme().body);
     $.set_class(div_1, 1, $theme().content);
@@ -6064,12 +6074,85 @@ function Body($$anchor, $$props) {
   $.pop();
   $$cleanup();
 }
-var root = $.template(`<div><!> <div><!> <!></div></div>`);
+var root_1 = $.from_html(`<div></div>`);
+function NowIndicator($$anchor, $$props) {
+  $.push($$props, true);
+  const [$$stores, $$cleanup] = $.setup_stores();
+  const $_viewDates = () => $.store_get(_viewDates, "$_viewDates", $$stores);
+  const $_dayTimeLimits = () => $.store_get(_dayTimeLimits, "$_dayTimeLimits", $$stores);
+  const $_today = () => $.store_get(_today, "$_today", $$stores);
+  const $_now = () => $.store_get(_now, "$_now", $$stores);
+  const $slotDuration = () => $.store_get(slotDuration, "$slotDuration", $$stores);
+  const $slotWidth = () => $.store_get(slotWidth, "$slotWidth", $$stores);
+  const $_bodyScrollLeft = () => $.store_get(_bodyScrollLeft, "$_bodyScrollLeft", $$stores);
+  const $_bodyWidth = () => $.store_get(_bodyWidth, "$_bodyWidth", $$stores);
+  const $theme = () => $.store_get(theme, "$theme", $$stores);
+  const $_headerHeight = () => $.store_get(_headerHeight, "$_headerHeight", $$stores);
+  const $_bodyHeight = () => $.store_get(_bodyHeight, "$_bodyHeight", $$stores);
+  let {
+    slotDuration,
+    slotWidth,
+    theme,
+    _bodyHeight,
+    _bodyWidth,
+    _bodyScrollLeft,
+    _headerHeight,
+    _dayTimeLimits,
+    _now,
+    _today,
+    _viewDates
+  } = getContext("state");
+  let left = $.derived(() => {
+    let offset = 0;
+    for (let i = 0; i < $_viewDates().length; ++i) {
+      let slotTimeLimits2 = getSlotTimeLimits($_dayTimeLimits(), $_viewDates()[i]);
+      if (datesEqual($_viewDates()[i], $_today())) {
+        let dayStart = addDuration(cloneDate($_viewDates()[i]), slotTimeLimits2.min);
+        let dayEnd = addDuration(cloneDate($_viewDates()[i]), slotTimeLimits2.max);
+        if ($_now() >= dayStart && $_now() <= dayEnd) {
+          offset += ($_now() - dayStart) / 1e3;
+          break;
+        } else {
+          return null;
+        }
+      } else {
+        offset += slotTimeLimits2.max.seconds - slotTimeLimits2.min.seconds;
+      }
+    }
+    let step = $slotDuration().seconds;
+    return offset / step * $slotWidth() - $_bodyScrollLeft();
+  });
+  var fragment = $.comment();
+  var node = $.first_child(fragment);
+  {
+    var consequent = ($$anchor2) => {
+      var div = root_1();
+      let styles;
+      $.template_effect(() => {
+        $.set_class(div, 1, $theme().nowIndicator);
+        styles = $.set_style(div, "", styles, {
+          top: `${$_headerHeight() + 2}px`,
+          left: `${$.get(left) ?? ""}px`,
+          height: `${$_bodyHeight() - 1}px`
+        });
+      });
+      $.append($$anchor2, div);
+    };
+    $.if(node, ($$render) => {
+      if ($.get(left) !== null && $.get(left) >= 3 && $.get(left) <= $_bodyWidth() - 3) $$render(consequent);
+    });
+  }
+  $.append($$anchor, fragment);
+  $.pop();
+  $$cleanup();
+}
+var root = $.from_html(`<div><!> <div><!> <!> <!></div></div>`);
 function View($$anchor, $$props) {
   $.push($$props, false);
   const [$$stores, $$cleanup] = $.setup_stores();
   const $theme = () => $.store_get(theme, "$theme", $$stores);
-  let { theme } = getContext("state");
+  const $nowIndicator = () => $.store_get(nowIndicator, "$nowIndicator", $$stores);
+  let { nowIndicator, theme } = getContext("state");
   $.init();
   var div = root();
   var node = $.child(div);
@@ -6079,6 +6162,15 @@ function View($$anchor, $$props) {
   Header(node_1, {});
   var node_2 = $.sibling(node_1, 2);
   Body(node_2, {});
+  var node_3 = $.sibling(node_2, 2);
+  {
+    var consequent = ($$anchor2) => {
+      NowIndicator($$anchor2, {});
+    };
+    $.if(node_3, ($$render) => {
+      if ($nowIndicator()) $$render(consequent);
+    });
+  }
   $.reset(div_1);
   $.reset(div);
   $.template_effect(() => {
@@ -6135,6 +6227,9 @@ const index = {
     if (!("_viewResources" in state)) {
       state._viewResources = viewResources(state);
     }
+    state._bodyHeight = writable(0);
+    state._bodyWidth = writable(0);
+    state._bodyScrollLeft = writable(0);
     state._headerEl = writable(void 0);
     state._headerHeight = writable(0);
     state._dayTimeLimits = dayTimeLimits(state);

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@event-calendar/core",
-  "version": "4.2.0",
+  "version": "4.3.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.28.6"
+    "svelte": "^5.33.14"
   }
 }

package/src/lib/dom.js CHANGED Viewed

@@ -35,14 +35,15 @@ export function height(el) {
     return rect(el).height;
 }
-export function getElementWithPayload(x, y, root = document) {
+export function getElementWithPayload(x, y, root = document, processed = []) {
+    processed.push(root);
     for (let el of root.elementsFromPoint(x, y)) {
         if (hasPayload(el)) {
             return el;
         }
         /** @see https://github.com/vkurko/calendar/issues/142 */
-        if (el.shadowRoot && el.shadowRoot !== root) {
-            let shadowEl = getElementWithPayload(x, y, el.shadowRoot);
+        if (el.shadowRoot && !processed.includes(el.shadowRoot)) {
+            let shadowEl = getElementWithPayload(x, y, el.shadowRoot, processed);
             if (shadowEl) {
                 return shadowEl;
             }

package/src/plugins/resource-timeline/Body.svelte CHANGED Viewed

@@ -4,19 +4,15 @@
     import {getSlotTimeLimits} from './lib.js';
     import Days from './Days.svelte';
-    let {_bodyEl, _headerEl, _events, _sidebarEl, _dayTimes, _dayTimeLimits, _resHs, _viewResources, _viewDates,
-        _recheckScrollable, scrollTime, slotDuration, slotWidth, theme} = getContext('state');
+    let {_bodyEl, _bodyHeight, _bodyWidth, _bodyScrollLeft, _headerEl, _events, _sidebarEl, _dayTimes, _dayTimeLimits,
+        _recheckScrollable, _resHs, _viewResources, _viewDates, scrollTime, slotDuration, slotWidth, theme} = getContext('state');
-    let el = $state();
     let refs = [];
-    $effect(() => {
-        $_bodyEl = el;
-    });
     function scrollToTime() {
         let slotTimeLimits = getSlotTimeLimits($_dayTimeLimits, $_viewDates[0]);
-        el.scrollLeft = (toSeconds($scrollTime) - toSeconds(slotTimeLimits.min)) / toSeconds($slotDuration) * $slotWidth;
+        $_bodyEl.scrollLeft = (toSeconds($scrollTime) - toSeconds(slotTimeLimits.min)) / toSeconds($slotDuration) * $slotWidth;
+        $_bodyScrollLeft = $_bodyEl.scrollLeft;
     }
     $effect(() => {
         $_viewDates;
@@ -37,14 +33,21 @@
     function onscroll() {
         $_headerEl.scrollLeft = $_bodyEl.scrollLeft;
         $_sidebarEl.scrollTop = $_bodyEl.scrollTop;
+        $_bodyScrollLeft = $_bodyEl.scrollLeft;
+    }
+    function onresize() {
+        $_bodyHeight = $_bodyEl.clientHeight;
+        $_bodyWidth = $_bodyEl.clientWidth;
+        $_recheckScrollable = true;
     }
 </script>
 <div
-    bind:this={el}
+    bind:this={$_bodyEl}
     class="{$theme.body}"
     {onscroll}
-    use:observeResize={() => $_recheckScrollable = true}
+    use:observeResize={onresize}
 >
     <div class="{$theme.content}">
         <div class="{$theme.lines}">

package/src/plugins/resource-timeline/Header.svelte CHANGED Viewed

@@ -1,14 +1,15 @@
 <script>
     import {getContext} from 'svelte';
-    import {setContent, toISOString, toSeconds, observeResize} from '#lib';
+    import {datesEqual, setContent, toISOString, toSeconds, observeResize} from '#lib';
-    let {_headerEl, _headerHeight,_intlDayHeader, _intlDayHeaderAL, _dayTimes, _viewDates, slotDuration, theme} = getContext('state');
+    let {_headerEl, _headerHeight, _intlDayHeader, _intlDayHeaderAL, _dayTimes, _today, _viewDates,
+        slotDuration, theme} = getContext('state');
 </script>
 <div class="{$theme.header}" bind:this={$_headerEl} use:observeResize={() => $_headerHeight = $_headerEl.clientHeight}>
     <div class="{$theme.days}" role="row">
         {#each $_viewDates as date}
-            <div class="{$theme.day} {$theme.weekdays?.[date.getUTCDay()]}">
+            <div class="{$theme.day} {$theme.weekdays?.[date.getUTCDay()]}{datesEqual(date, $_today) ? ' ' + $theme.today : ''}">
                 {#if toSeconds($slotDuration)}
                     <div class="{$theme.dayHead}">
                         <time

package/src/plugins/resource-timeline/NowIndicator.svelte ADDED Viewed

@@ -0,0 +1,39 @@
+<script>
+    import {getContext} from 'svelte';
+    import {addDuration, cloneDate, datesEqual} from '#lib';
+    import {getSlotTimeLimits} from './lib.js';
+    let {slotDuration, slotWidth, theme, _bodyHeight, _bodyWidth, _bodyScrollLeft,
+        _headerHeight, _dayTimeLimits, _now, _today, _viewDates} = getContext('state');
+    // Style
+    let left = $derived.by(() => {
+        let offset = 0;
+        for (let i = 0; i < $_viewDates.length; ++i) {
+            let slotTimeLimits = getSlotTimeLimits($_dayTimeLimits, $_viewDates[i]);
+            if (datesEqual($_viewDates[i], $_today)) {
+                let dayStart = addDuration(cloneDate($_viewDates[i]), slotTimeLimits.min);
+                let dayEnd = addDuration(cloneDate($_viewDates[i]), slotTimeLimits.max);
+                if ($_now >= dayStart && $_now <= dayEnd) {
+                    offset += ($_now - dayStart) / 1000;
+                    break;
+                } else {
+                    return null;
+                }
+            } else {
+                offset += slotTimeLimits.max.seconds - slotTimeLimits.min.seconds;
+            }
+        }
+        let step = $slotDuration.seconds;
+        return offset / step * $slotWidth - $_bodyScrollLeft;
+    });
+</script>
+{#if left !== null && left >= 3 && left <= $_bodyWidth - 3}
+    <div
+        class="{$theme.nowIndicator}"
+        style:top="{$_headerHeight+2}px"
+        style:left="{left}px"
+        style:height="{$_bodyHeight-1}px"
+    ></div>
+{/if}

package/src/plugins/resource-timeline/View.svelte CHANGED Viewed

@@ -3,8 +3,9 @@
     import Sidebar from './Sidebar.svelte';
     import Header from './Header.svelte';
     import Body from './Body.svelte';
+    import NowIndicator from './NowIndicator.svelte';
-    let {theme} = getContext('state');
+    let {nowIndicator, theme} = getContext('state');
 </script>
 <div class="{$theme.container}">
@@ -12,5 +13,8 @@
     <div class="{$theme.main}">
         <Header/>
         <Body/>
+        {#if $nowIndicator}
+            <NowIndicator/>
+        {/if}
     </div>
 </div>

package/src/plugins/resource-timeline/index.js CHANGED Viewed

@@ -51,6 +51,9 @@ export default {
 		if (!('_viewResources' in state)) {
 			state._viewResources = viewResources(state);
 		}
+		state._bodyHeight = writable(0);
+		state._bodyWidth = writable(0);
+		state._bodyScrollLeft = writable(0);
 		state._headerEl = writable(undefined);
 		state._headerHeight = writable(0);
 		state._dayTimeLimits = dayTimeLimits(state);  // flexible time limits per day

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

@@ -3,11 +3,11 @@
     let {slotDuration, slotHeight, theme, _now, _today, _slotTimeLimits} = getContext('state');
-    let start = $derived(($_now - $_today) / 1000 / 60);
+    let start = $derived(($_now - $_today) / 1000);
     // Style
     let top = $derived.by(() => {
-        let step = $slotDuration.seconds / 60;
-        let offset = $_slotTimeLimits.min.seconds / 60;
+        let step = $slotDuration.seconds;
+        let offset = $_slotTimeLimits.min.seconds;
         return (start - offset) / step * $slotHeight;
     });
 </script>

package/src/styles/index.scss CHANGED Viewed

@@ -497,19 +497,27 @@
 .ec-now-indicator {
   position: absolute;
   z-index: 1005;
-  width: 100%;
-  border-top: var(--ec-now-indicator-color) solid 2px;
   pointer-events: none;
+  .ec-time-grid & {
+    width: 100%;
+    border-top: var(--ec-now-indicator-color) solid 2px;
+  }
+  .ec-timeline & {
+    border-left: var(--ec-now-indicator-color) solid 2px;
+    will-change: transform;
+  }
   &:before {
     background: var(--ec-now-indicator-color);
     border-radius: 50%;
     content: "";
-    position: absolute;
+    display: block;
     height: 12px;
     margin-top: -7px;
     width: 12px;
-    pointer-events: none;
+    .ec-timeline & {
+      margin-left: -7px;
+    }
   }
 }

package/src/styles/timeline.scss CHANGED Viewed

@@ -9,6 +9,7 @@
     display: flex;
     flex-direction: column;
     min-width: 0;
+    position: relative;
   }
   .ec-content {