npm - @event-calendar/core - Versions diffs - 4.1.0 → 4.3.0 - Mend

@event-calendar/core 4.1.0 → 4.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 (17) hide show

package/README.md +3 -3
package/dist/index.css +21 -4
package/dist/index.js +168 -71
package/package.json +2 -2
package/src/Calendar.svelte +7 -8
package/src/lib/components/BaseEvent.svelte +2 -2
package/src/plugins/list/Event.svelte +1 -1
package/src/plugins/resource-time-grid/View.svelte +7 -4
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/plugins/time-grid/View.svelte +6 -3
package/src/styles/index.scss +20 -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.1.0/dist/event-calendar.min.css">
-<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@4.1.0/dist/event-calendar.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@4.3.0/dist/event-calendar.min.css">
+<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@4.3.0/dist/event-calendar.min.js"></script>
 ```
 <details>
@@ -1552,7 +1552,7 @@ function (start, end) {
 - Type `string`
 - Default `undefined`
-Sets the default text color for events on the calendar.
+Sets the default text color for calendar events (except for `list` view).
 You can use any of the CSS color formats such `'#f00'`, `'#ff0000'`, `'rgb(255,0,0)'`, or `'red'`.

package/dist/index.css CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
- * EventCalendar v4.1.0
+ * EventCalendar v4.3.0
  * 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;
@@ -541,6 +542,13 @@
   top: 0;
   z-index: 2;
 }
+.ec-list .ec-day.ec-today .ec-day-head:before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  background-color: var(--ec-today-bg-color);
+}
 .ec-list .ec-day:first-child .ec-day-head {
   border-top: none;
 }
@@ -718,19 +726,28 @@
 .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 {
+  height: 100%;
+  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.1.0
+ * EventCalendar v4.3.0
  * https://github.com/vkurko/calendar
  */
 import { tick, getContext, untrack, setContext, onMount, mount, unmount } from "svelte";
@@ -1465,7 +1465,7 @@ function Buttons($$anchor, $$props) {
   $$cleanup();
 }
 var root_3$5 = $.template(`<div><!></div>`);
-var root_1$c = $.template(`<div></div>`);
+var root_1$d = $.template(`<div></div>`);
 var root$r = $.template(`<nav></nav>`);
 function Toolbar($$anchor, $$props) {
   $.push($$props, true);
@@ -1483,7 +1483,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);
@@ -1670,18 +1670,17 @@ function Calendar($$anchor, $$props) {
     return toEventWithLocalDates(event);
   }
   function updateEvent(event) {
-    for (let e of $_events()) {
-      if (e.id == event.id) {
-        event = createEvents([event])[0];
-        assign(e, event);
-        $.store_set(_events, $_events());
-        return toEventWithLocalDates(event);
-      }
+    let id = String(event.id);
+    let idx = $_events().findIndex((event2) => event2.id === id);
+    if (idx >= 0) {
+      $.store_mutate(_events, $.untrack($_events)[idx] = createEvents([event])[0], $.untrack($_events));
+      return toEventWithLocalDates(event);
     }
     return null;
   }
   function removeEventById(id) {
-    let idx = $_events().findIndex((event) => event.id == id);
+    id = String(id);
+    let idx = $_events().findIndex((event) => event.id === id);
     if (idx >= 0) {
       $_events().splice(idx, 1);
       $.store_set(_events, $_events());
@@ -1773,7 +1772,7 @@ function days(state) {
     return days2;
   });
 }
-var root_1$b = $.template(`<div role="columnheader"><span></span></div>`);
+var root_1$c = $.template(`<div role="columnheader"><span></span></div>`);
 var root$p = $.template(`<div><div role="row"></div> <div></div></div>`);
 function Header$1($$anchor, $$props) {
   $.push($$props, false);
@@ -1792,7 +1791,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);
@@ -1824,7 +1823,7 @@ function Header$1($$anchor, $$props) {
   $.pop();
   $$cleanup();
 }
-var root_1$a = $.template(`<div></div>`);
+var root_1$b = $.template(`<div></div>`);
 var root$o = $.template(`<article><!></article>`);
 function BaseEvent($$anchor, $$props) {
   $.push($$props, true);
@@ -1909,13 +1908,10 @@ function BaseEvent($$anchor, $$props) {
     (_a = $$props.onpointerdown) == null ? void 0 : _a.apply(this, $$args);
   };
   {
-    const defaultBody = ($$anchor2, style2 = $.noop) => {
-      var div = root_1$a();
+    const defaultBody = ($$anchor2) => {
+      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));
-        $.set_style(div, style2());
-      });
+      $.template_effect(() => $.set_class(div, 1, $.clsx($theme().eventBody)));
       $.append($$anchor2, div);
     };
     var node = $.child(article);
@@ -2272,7 +2268,7 @@ function Popup($$anchor, $$props) {
   $$cleanup();
 }
 $.delegate(["pointerdown", "click", "keydown"]);
-var root_1$9 = $.template(`<span></span>`);
+var root_1$a = $.template(`<span></span>`);
 var root_5$1 = $.template(`<div><!></div>`);
 var root_6 = $.template(`<div><!></div>`);
 var root_4$2 = $.template(`<!> <!>`, 1);
@@ -2405,7 +2401,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);
@@ -3491,7 +3487,7 @@ function Pointer($$anchor, $$props) {
   $$cleanup();
   return $$pop;
 }
-var root_1$8 = $.template(`<div></div>`);
+var root_1$9 = $.template(`<div></div>`);
 var root_2$6 = $.template(`<div></div>`);
 var root$i = $.template(`<!> <!> <!>`, 1);
 function Resizer($$anchor, $$props) {
@@ -3523,7 +3519,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;
@@ -3667,7 +3663,7 @@ const index$3 = {
     state._auxiliary.update(($_auxiliary) => [...$_auxiliary, Auxiliary]);
   }
 };
-var root_1$7 = $.template(`<div></div> <!>`, 1);
+var root_1$8 = $.template(`<div></div> <!>`, 1);
 function Event$3($$anchor, $$props) {
   $.push($$props, true);
   const [$$stores, $$cleanup] = $.setup_stores();
@@ -3685,11 +3681,11 @@ 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);
-      $.snippet(node, defaultBody, () => `color:${txtColor()}`);
+      $.snippet(node, defaultBody);
       $.template_effect(() => {
         $.set_class(div, 1, $theme().eventTag);
         styles_1 = $.set_style(div, "", styles_1, { "background-color": bgColor() });
@@ -3713,7 +3709,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 = $.template(`<div role="listitem"><h4><time></time> <time></time></h4> <!></div>`);
 function Day$3($$anchor, $$props) {
   $.push($$props, true);
   const [$$stores, $$cleanup] = $.setup_stores();
@@ -3774,7 +3770,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);
@@ -3829,7 +3825,7 @@ function onclick$1(jsEvent, $noEventsClick, noEventsClick, $_view, _view) {
     });
   }
 }
-var root_1$5 = $.template(`<div></div>`);
+var root_1$6 = $.template(`<div></div>`);
 var root$g = $.template(`<div><div><!></div></div>`);
 function Body$2($$anchor, $$props) {
   $.push($$props, true);
@@ -3870,7 +3866,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,
@@ -4019,7 +4015,7 @@ function createAllDayContent(allDayContent) {
   }
   return content;
 }
-var root_1$4 = $.template(`<time></time>`);
+var root_1$5 = $.template(`<time></time>`);
 var root$f = $.template(`<div><div></div> <!></div> <div role="row"><div><!></div> <!></div>`, 1);
 function Section($$anchor, $$props) {
   $.push($$props, true);
@@ -4042,7 +4038,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}`);
@@ -4204,7 +4200,7 @@ function Event$2($$anchor, $$props) {
   $$cleanup();
 }
 var root$d = $.template(`<div></div>`);
-function NowIndicator($$anchor, $$props) {
+function NowIndicator$1($$anchor, $$props) {
   $.push($$props, true);
   const [$$stores, $$cleanup] = $.setup_stores();
   const $_now = () => $.store_get(_now, "$_now", $$stores);
@@ -4221,10 +4217,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();
@@ -4404,7 +4400,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);
@@ -4701,6 +4697,7 @@ function View$2($$anchor, $$props) {
   const [$$stores, $$cleanup] = $.setup_stores();
   const $theme = () => $.store_get(theme, "$theme", $$stores);
   const $_viewDates = () => $.store_get(_viewDates, "$_viewDates", $$stores);
+  const $_today = () => $.store_get(_today, "$_today", $$stores);
   const $_intlDayHeaderAL = () => $.store_get(_intlDayHeaderAL, "$_intlDayHeaderAL", $$stores);
   const $_intlDayHeader = () => $.store_get(_intlDayHeader, "$_intlDayHeader", $$stores);
   const $allDaySlot = () => $.store_get(allDaySlot, "$allDaySlot", $$stores);
@@ -4708,6 +4705,7 @@ function View$2($$anchor, $$props) {
     _viewDates,
     _intlDayHeader,
     _intlDayHeaderAL,
+    _today,
     allDaySlot,
     theme
   } = getContext("state");
@@ -4725,16 +4723,17 @@ function View$2($$anchor, $$props) {
         $.action(time, ($$node, $$action_arg) => setContent == null ? void 0 : setContent($$node, $$action_arg), () => $_intlDayHeader().format($.get(date)));
         $.reset(div_1);
         $.template_effect(
-          ($0, $1, $2) => {
-            $.set_class(div_1, 1, `${$theme().day ?? ""} ${$0 ?? ""}`);
-            $.set_attribute(time, "datetime", $1);
-            $.set_attribute(time, "aria-label", $2);
+          ($0, $1, $2, $3) => {
+            $.set_class(div_1, 1, `${$theme().day ?? ""} ${$0 ?? ""}${$1 ?? ""}`);
+            $.set_attribute(time, "datetime", $2);
+            $.set_attribute(time, "aria-label", $3);
           },
           [
             () => {
               var _a;
               return (_a = $theme().weekdays) == null ? void 0 : _a[$.get(date).getUTCDay()];
             },
+            () => datesEqual($.get(date), $_today()) ? " " + $theme().today : "",
             () => toISOString($.get(date), 10),
             () => $_intlDayHeaderAL().format($.get(date))
           ],
@@ -4898,11 +4897,13 @@ function View$1($$anchor, $$props) {
   const $_viewDates = () => $.store_get(_viewDates, "$_viewDates", $$stores);
   const $_viewResources = () => $.store_get(_viewResources, "$_viewResources", $$stores);
   const $theme = () => $.store_get(theme, "$theme", $$stores);
+  const $_today = () => $.store_get(_today, "$_today", $$stores);
   const $_intlDayHeaderAL = () => $.store_get(_intlDayHeaderAL, "$_intlDayHeaderAL", $$stores);
   const $_intlDayHeader = () => $.store_get(_intlDayHeader, "$_intlDayHeader", $$stores);
   const $allDaySlot = () => $.store_get(allDaySlot, "$allDaySlot", $$stores);
   let {
     datesAboveResources,
+    _today,
     _viewDates,
     _viewResources,
     _intlDayHeader,
@@ -4929,16 +4930,17 @@ function View$1($$anchor, $$props) {
             $.action(time, ($$node, $$action_arg) => setContent == null ? void 0 : setContent($$node, $$action_arg), () => $_intlDayHeader().format($.get(item0)));
             $.reset(div_2);
             $.template_effect(
-              ($0, $1, $2) => {
-                $.set_class(div_2, 1, `${$theme().day ?? ""} ${$0 ?? ""}`);
-                $.set_attribute(time, "datetime", $1);
-                $.set_attribute(time, "aria-label", $2);
+              ($0, $1, $2, $3) => {
+                $.set_class(div_2, 1, `${$theme().day ?? ""} ${$0 ?? ""}${$1 ?? ""}`);
+                $.set_attribute(time, "datetime", $2);
+                $.set_attribute(time, "aria-label", $3);
               },
               [
                 () => {
                   var _a;
                   return (_a = $theme().weekdays) == null ? void 0 : _a[$.get(item0).getUTCDay()];
                 },
+                () => datesEqual($.get(item0), $_today()) ? " " + $theme().today : "",
                 () => toISOString($.get(item0), 10),
                 () => $_intlDayHeaderAL().format($.get(item0))
               ]
@@ -4992,16 +4994,17 @@ function View$1($$anchor, $$props) {
                   $.action(time_1, ($$node, $$action_arg) => setContent == null ? void 0 : setContent($$node, $$action_arg), () => $_intlDayHeader().format($.get(item1)));
                   $.reset(div_6);
                   $.template_effect(
-                    ($0, $1, $2) => {
-                      $.set_class(div_6, 1, `${$theme().day ?? ""} ${$0 ?? ""}`);
-                      $.set_attribute(time_1, "datetime", $1);
-                      $.set_attribute(time_1, "aria-label", `${resourceLabels[i] ?? ""}${$2 ?? ""}`);
+                    ($0, $1, $2, $3) => {
+                      $.set_class(div_6, 1, `${$theme().day ?? ""} ${$0 ?? ""}${$1 ?? ""}`);
+                      $.set_attribute(time_1, "datetime", $2);
+                      $.set_attribute(time_1, "aria-label", `${resourceLabels[i] ?? ""}${$3 ?? ""}`);
                     },
                     [
                       () => {
                         var _a;
                         return (_a = $theme().weekdays) == null ? void 0 : _a[$.get(item1).getUTCDay()];
                       },
+                      () => datesEqual($.get(item1), $_today()) ? " " + $theme().today : "",
                       () => toISOString($.get(item1), 10),
                       () => $_intlDayHeaderAL().format($.get(item1))
                     ]
@@ -5247,7 +5250,7 @@ function onclick(_, expanded, payload, toggle, resources) {
   toggle($.get(payload).children, $.get(expanded));
   resources.update(identity);
 }
-var root_1$3 = $.template(`<span></span>`);
+var root_1$4 = $.template(`<span></span>`);
 var root_2$2 = $.template(`<button><!></button>`);
 var root$6 = $.template(`<!> <span><!></span>`, 1);
 function Expander($$anchor, $$props) {
@@ -5273,7 +5276,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);
   });
@@ -5320,7 +5323,7 @@ function Expander($$anchor, $$props) {
   $$cleanup();
 }
 $.delegate(["click"]);
-var root_1$2 = $.template(`<div role="rowheader"><!> <!></div>`);
+var root_1$3 = $.template(`<div role="rowheader"><!> <!></div>`);
 var root$5 = $.template(`<div><div></div> <div></div></div>`);
 function Sidebar($$anchor, $$props) {
   $.push($$props, false);
@@ -5349,7 +5352,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,7 +5402,7 @@ function Sidebar($$anchor, $$props) {
 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_1$2 = $.template(`<div><!></div>`);
 var root$4 = $.template(`<div><div role="row"></div> <div></div></div>`);
 function Header($$anchor, $$props) {
   $.push($$props, false);
@@ -5407,6 +5410,7 @@ function Header($$anchor, $$props) {
   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);
@@ -5417,6 +5421,7 @@ function Header($$anchor, $$props) {
     _intlDayHeader,
     _intlDayHeaderAL,
     _dayTimes,
+    _today,
     _viewDates,
     slotDuration,
     theme
@@ -5425,7 +5430,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) => {
@@ -5488,12 +5493,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
     );
@@ -5696,7 +5702,7 @@ function Event($$anchor, $$props) {
   $$cleanup();
   return $$pop;
 }
-var root_1 = $.template(`<!> <!> <!> <!>`, 1);
+var root_1$1 = $.template(`<!> <!> <!> <!>`, 1);
 var root$3 = $.template(`<div role="cell"><div><!></div></div>`);
 function Day($$anchor, $$props) {
   $.push($$props, true);
@@ -5758,7 +5764,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, {
@@ -5963,9 +5969,9 @@ var root$1 = $.template(`<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);
@@ -5978,28 +5984,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();
@@ -6018,6 +6024,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);
@@ -6049,8 +6061,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);
@@ -6061,12 +6073,85 @@ function Body($$anchor, $$props) {
   $.pop();
   $$cleanup();
 }
-var root = $.template(`<div><!> <div><!> <!></div></div>`);
+var root_1 = $.template(`<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 = $.template(`<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);
@@ -6076,6 +6161,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(() => {
@@ -6132,6 +6226,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.1.0",
+  "version": "4.3.0",
   "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.2"
+    "svelte": "^5.28.6"
   }
 }

package/src/Calendar.svelte CHANGED Viewed

@@ -68,19 +68,18 @@
     }
     export function updateEvent(event) {
-        for (let e of $_events) {
-            if (e.id == event.id) {
-                event = createEvents([event])[0];
-                assign(e, event);
-                $_events = $_events;
-                return toEventWithLocalDates(event);
-            }
+        let id = String(event.id);
+        let idx = $_events.findIndex(event => event.id === id);
+        if (idx >= 0) {
+            $_events[idx] = createEvents([event])[0];
+            return toEventWithLocalDates(event);
         }
         return null;
     }
     export function removeEventById(id) {
-        let idx = $_events.findIndex(event => event.id == id);
+        id = String(id);
+        let idx = $_events.findIndex(event => event.id === id);
         if (idx >= 0) {
             $_events.splice(idx, 1);
             $_events = $_events;

package/src/lib/components/BaseEvent.svelte CHANGED Viewed

@@ -77,8 +77,8 @@
     {onmouseleave}
     {onpointerdown}
 >
-    {#snippet defaultBody(style)}
-        <div class={$theme.eventBody} {style} use:setContent={content}></div>
+    {#snippet defaultBody()}
+        <div class={$theme.eventBody} use:setContent={content}></div>
     {/snippet}
     {#if body}
         {@render body(defaultBody, bgColor, txtColor)}

package/src/plugins/list/Event.svelte CHANGED Viewed

@@ -17,6 +17,6 @@
 <BaseEvent {chunk} {styles} onpointerdown={$_interaction.action?.noAction}>
     {#snippet body(defaultBody, bgColor, txtColor)}
         <div class="{$theme.eventTag}" style:background-color={bgColor}></div>
-        {@render defaultBody(`color:${txtColor}`)}
+        {@render defaultBody()}
     {/snippet}
 </BaseEvent>

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

@@ -1,11 +1,11 @@
 <script>
     import {getContext} from 'svelte';
-    import {setContent, toISOString} from '#lib';
+    import {datesEqual, setContent, toISOString} from '#lib';
     import {Section, Body, Day, Week} from '../time-grid/index.js';
     import Label from './Label.svelte';
     let {
-        datesAboveResources, _viewDates, _viewResources, _intlDayHeader, _intlDayHeaderAL, allDaySlot, theme
+        datesAboveResources, _today, _viewDates, _viewResources, _intlDayHeader, _intlDayHeaderAL, allDaySlot, theme
     } = getContext('state');
     let loops = $derived($datesAboveResources ? [$_viewDates, $_viewResources] : [$_viewResources, $_viewDates]);
@@ -18,7 +18,7 @@
         {#each loops[0] as item0, i}
             <div class="{$theme.resource}">
                 {#if $datesAboveResources}
-                    <div class="{$theme.day} {$theme.weekdays?.[item0.getUTCDay()]}">
+                    <div class="{$theme.day} {$theme.weekdays?.[item0.getUTCDay()]}{datesEqual(item0, $_today) ? ' ' + $theme.today : ''}">
                         <time
                             datetime="{toISOString(item0, 10)}"
                             aria-label="{$_intlDayHeaderAL.format(item0)}"
@@ -38,7 +38,10 @@
                                     <Label resource={item1} date={item0} />
                                 </div>
                             {:else}
-                                <div class="{$theme.day} {$theme.weekdays?.[item1.getUTCDay()]}" role="columnheader">
+                                <div
+                                    class="{$theme.day} {$theme.weekdays?.[item1.getUTCDay()]}{datesEqual(item1, $_today) ? ' ' + $theme.today : ''}"
+                                    role="columnheader"
+                                >
                                     <time
                                         datetime="{toISOString(item1, 10)}"
                                         aria-label="{resourceLabels[i]}{$_intlDayHeaderAL.format(item1)}"

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/plugins/time-grid/View.svelte CHANGED Viewed

@@ -1,18 +1,21 @@
 <script>
     import {getContext} from 'svelte';
-    import {setContent, toISOString} from '#lib';
+    import {datesEqual, setContent, toISOString} from '#lib';
     import Section from './Section.svelte';
     import Body from './Body.svelte';
     import Day from './Day.svelte';
     import Week from './all-day/Week.svelte';
-    let {_viewDates, _intlDayHeader, _intlDayHeaderAL, allDaySlot, theme} = getContext('state');
+    let {_viewDates, _intlDayHeader, _intlDayHeaderAL, _today, allDaySlot, theme} = getContext('state');
 </script>
 <div class="{$theme.header}">
     <Section>
         {#each $_viewDates as date}
-            <div class="{$theme.day} {$theme.weekdays?.[date.getUTCDay()]}" role="columnheader">
+            <div
+                class="{$theme.day} {$theme.weekdays?.[date.getUTCDay()]}{datesEqual(date, $_today) ? ' ' + $theme.today : ''}"
+                role="columnheader"
+            >
                 <time
                     datetime="{toISOString(date, 10)}"
                     aria-label="{$_intlDayHeaderAL.format(date)}"

package/src/styles/index.scss CHANGED Viewed

@@ -284,6 +284,13 @@
     top: 0;
     z-index: 2;
   }
+  .ec-day.ec-today .ec-day-head:before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    background-color: var(--ec-today-bg-color);
+  }
   .ec-day:first-child .ec-day-head {
     border-top: none;
@@ -490,19 +497,28 @@
 .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 & {
+    height: 100%;
+    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 {