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

@event-calendar/core 4.0.3 → 4.2.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 (23) hide show

package/README.md +6 -6
package/dist/index.css +18 -2
package/dist/index.js +63 -56
package/package.json +3 -3
package/src/Calendar.svelte +7 -8
package/src/lib/components/BaseEvent.svelte +2 -2
package/src/lib/components/InteractableEvent.svelte +4 -2
package/src/lib/dom.js +1 -1
package/src/lib/times.js +3 -7
package/src/plugins/interaction/Auxiliary.svelte +6 -2
package/src/plugins/interaction/Resizer.svelte +5 -1
package/src/plugins/interaction/lib/events.js +2 -6
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 +1 -1
package/src/plugins/resource-timeline/Header.svelte +8 -8
package/src/plugins/time-grid/Body.svelte +3 -5
package/src/plugins/time-grid/Section.svelte +8 -3
package/src/plugins/time-grid/View.svelte +6 -3
package/src/storage/options.js +1 -1
package/src/styles/index.scss +7 -0
package/src/styles/time-grid.scss +5 -1
package/src/styles/timeline.scss +7 -3

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.0.3/dist/event-calendar.min.css">
-<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@4.0.3/dist/event-calendar.min.js"></script>
+<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>
 ```
 <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'`.
@@ -2138,13 +2138,13 @@ function (time) {
 - Type `string`, `integer` or `object`
 - Default `undefined`
-The interval at which slot labels should be displayed in `timeGrid` views.
+The interval at which slot labels should be displayed in `timeGrid`/`resourceTimeline` views.
 This should be a value that can be parsed into a [Duration](#duration-object) object.
 If not specified, then if `slotDuration` is less than 1 hour, the interval is considered to be twice as long, i.e. the labels are displayed every other time.
-If the interval is set to zero, then labels are displayed for all slots, including the very first one, which is not normally displayed.
+If the interval is set to zero, then labels are displayed for all slots, including the very first one, which is not normally displayed in `timeGrid` views.
 ### slotMaxTime
 - Type `string`, `integer` or `object`
@@ -2176,7 +2176,7 @@ Defines the time slot width in pixels in `resourceTimeline` views. When changing
 ### theme
 - Type `object` or `function`
-- Default `{allDay: 'ec-all-day', active: 'ec-active', bgEvent: 'ec-bg-event', bgEvents: 'ec-bg-events', body: 'ec-body', button: 'ec-button', buttonGroup: 'ec-button-group', calendar: 'ec', compact: 'ec-compact', container: 'ec-container', content: 'ec-content', day: 'ec-day', dayHead: 'ec-day-head', dayFoot: 'ec-day-foot', days: 'ec-days', daySide: 'ec-day-side', draggable: 'ec-draggable', dragging: 'ec-dragging', event: 'ec-event', eventBody: 'ec-event-body', eventTag: 'ec-event-tag', eventTime: 'ec-event-time', eventTitle: 'ec-event-title', events: 'ec-events', expander: 'ec-expander', extra: 'ec-extra', ghost: 'ec-ghost', handle: 'ec-handle', header: 'ec-header', hiddenScroll: 'ec-hidden-scroll', highlight: 'ec-highlight', icon: 'ec-icon', line: 'ec-line', lines: 'ec-lines', main: 'ec-main', noEvents: 'ec-no-events', nowIndicator: 'ec-now-indicator', otherMonth: 'ec-other-month', pointer: 'ec-pointer', popup: 'ec-popup', preview: 'ec-preview', resizer: 'ec-resizer', resizingX: 'ec-resizing-x', resizingY: 'ec-resizing-y', resource: 'ec-resource', selecting: 'ec-selecting', sidebar: 'ec-sidebar', sidebarTitle: 'ec-sidebar-title', today: 'ec-today', time: 'ec-time', times: 'ec-times', title: 'ec-title', toolbar: 'ec-toolbar', view: 'ec-timeline ec-resource-week-view', weekdays: ['ec-sun', 'ec-mon', 'ec-tue', 'ec-wed', 'ec-thu', 'ec-fri', 'ec-sat'], withScroll: 'ec-with-scroll', uniform: 'ec-uniform'}`
+- Default `{allDay: 'ec-all-day', active: 'ec-active', bgEvent: 'ec-bg-event', bgEvents: 'ec-bg-events', body: 'ec-body', button: 'ec-button', buttonGroup: 'ec-button-group', calendar: 'ec', container: 'ec-container', content: 'ec-content', day: 'ec-day', dayHead: 'ec-day-head', dayFoot: 'ec-day-foot', days: 'ec-days', daySide: 'ec-day-side', draggable: 'ec-draggable', dragging: 'ec-dragging', event: 'ec-event', eventBody: 'ec-event-body', eventTag: 'ec-event-tag', eventTime: 'ec-event-time', eventTitle: 'ec-event-title', events: 'ec-events', expander: 'ec-expander', extra: 'ec-extra', ghost: 'ec-ghost', handle: 'ec-handle', header: 'ec-header', hiddenScroll: 'ec-hidden-scroll', highlight: 'ec-highlight', icon: 'ec-icon', line: 'ec-line', lines: 'ec-lines', main: 'ec-main', minor: 'ec-minor', noEvents: 'ec-no-events', nowIndicator: 'ec-now-indicator', otherMonth: 'ec-other-month', pointer: 'ec-pointer', popup: 'ec-popup', preview: 'ec-preview', resizer: 'ec-resizer', resizingX: 'ec-resizing-x', resizingY: 'ec-resizing-y', resource: 'ec-resource', selecting: 'ec-selecting', sidebar: 'ec-sidebar', sidebarTitle: 'ec-sidebar-title', today: 'ec-today', time: 'ec-time', times: 'ec-times', title: 'ec-title', toolbar: 'ec-toolbar', view: 'ec-timeline ec-resource-week-view', weekdays: ['ec-sun', 'ec-mon', 'ec-tue', 'ec-wed', 'ec-thu', 'ec-fri', 'ec-sat'], withScroll: 'ec-with-scroll', uniform: 'ec-uniform'}`
 > Views override the default value as follows:
 > - dayGridMonth `theme => ({...theme, view: 'ec-day-grid ec-month-view'})`
 > - listDay `theme => ({...theme, view: 'ec-list ec-day-view'})`

package/dist/index.css CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
- * EventCalendar v4.0.3
+ * EventCalendar v4.2.0
  * https://github.com/vkurko/calendar
  */
 .ec {
@@ -126,6 +126,9 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+.ec-timeline .ec-time.ec-minor {
+  visibility: hidden;
+}
 .ec-timeline .ec-time, .ec-timeline .ec-line {
   width: 72px;
 }
@@ -151,6 +154,9 @@
   border-left: 1px solid var(--ec-border-color);
   pointer-events: none;
 }
+.ec-timeline .ec-line.ec-minor:after {
+  border-left-style: dotted;
+}
 .ec-timeline .ec-sidebar {
   padding: 0;
   border: 1px solid var(--ec-border-color);
@@ -209,6 +215,9 @@
   top: -12px;
   text-align: right;
 }
+.ec-time-grid .ec-time.ec-minor {
+  visibility: hidden;
+}
 .ec-time-grid .ec-header .ec-time,
 .ec-time-grid .ec-all-day .ec-time {
   visibility: hidden;
@@ -229,7 +238,7 @@
   border-bottom: 1px solid var(--ec-border-color);
   pointer-events: none;
 }
-.ec-time-grid .ec-body:not(.ec-compact) .ec-line:nth-child(even):after {
+.ec-time-grid .ec-line.ec-minor:after {
   border-bottom-style: dotted;
 }
 .ec-time-grid .ec-sidebar-title {
@@ -532,6 +541,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;
 }

package/dist/index.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
- * EventCalendar v4.0.3
+ * EventCalendar v4.2.0
  * https://github.com/vkurko/calendar
  */
 import { tick, getContext, untrack, setContext, onMount, mount, unmount } from "svelte";
@@ -304,7 +304,7 @@ function getElementWithPayload(x, y, root2 = document) {
     if (hasPayload(el)) {
       return el;
     }
-    if (el.shadowRoot) {
+    if (el.shadowRoot && el.shadowRoot !== root2) {
       let shadowEl = getElementWithPayload(x, y, el.shadowRoot);
       if (shadowEl) {
         return shadowEl;
@@ -748,18 +748,14 @@ function createTimes(date, $slotDuration, $slotLabelInterval, $_slotTimeLimits,
   if ($slotLabelInterval === void 0) {
     $slotLabelInterval = $slotDuration.seconds < 3600 ? createDuration($slotDuration.seconds * 2) : $slotDuration;
   }
-  let showAll = $slotLabelInterval.seconds <= 0;
-  let label;
-  if (!showAll) {
-    label = cloneDate(date);
-  }
+  let label = cloneDate(date);
   while (date < end) {
     times2.push([
       toISOString(date),
       $_intlSlotLabel.format(date),
-      showAll || times2.length && date >= label
+      date >= label
     ]);
-    while (!showAll && date >= label) {
+    while ($slotLabelInterval.seconds && date >= label) {
       addDuration(label, $slotLabelInterval);
     }
     addDuration(date, $slotDuration);
@@ -882,7 +878,6 @@ function createOptions(plugins) {
       button: "ec-button",
       buttonGroup: "ec-button-group",
       calendar: "ec",
-      compact: "ec-compact",
       content: "ec-content",
       day: "ec-day",
       dayHead: "ec-day-head",
@@ -901,6 +896,7 @@ function createOptions(plugins) {
       icon: "ec-icon",
       line: "ec-line",
       lines: "ec-lines",
+      minor: "ec-minor",
       nowIndicator: "ec-now-indicator",
       otherMonth: "ec-other-month",
       resource: "ec-resource",
@@ -1674,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());
@@ -1913,13 +1908,10 @@ function BaseEvent($$anchor, $$props) {
     (_a = $$props.onpointerdown) == null ? void 0 : _a.apply(this, $$args);
   };
   {
-    const defaultBody = ($$anchor2, style2 = $.noop) => {
+    const defaultBody = ($$anchor2) => {
       var div = root_1$a();
       $.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);
@@ -1968,15 +1960,16 @@ function InteractableEvent($$anchor, $$props) {
   let el = $.prop($$props, "el", 15);
   let { _interaction, _iClasses } = getContext("state");
   let event = $.derived(() => $$props.chunk.event);
+  let display = $.derived(() => $$props.chunk.event.display);
   let classes = $.derived(() => (classNames) => $_iClasses()(classNames, $.get(event)));
   function createDragHandler(event2) {
-    var _a;
+    var _a, _b;
     return ((_a = $_interaction().action) == null ? void 0 : _a.draggable(event2)) ? (jsEvent) => {
-      var _a2, _b;
-      return $_interaction().action.drag(event2, jsEvent, (_a2 = $$props.forceDate) == null ? void 0 : _a2.call($$props), (_b = $$props.forceMargin) == null ? void 0 : _b.call($$props));
-    } : void 0;
+      var _a2, _b2;
+      return $_interaction().action.drag(event2, jsEvent, (_a2 = $$props.forceDate) == null ? void 0 : _a2.call($$props), (_b2 = $$props.forceMargin) == null ? void 0 : _b2.call($$props));
+    } : (_b = $_interaction().action) == null ? void 0 : _b.noAction;
   }
-  let onpointerdown = $.derived(() => createDragHandler($.get(event)));
+  let onpointerdown = $.derived(() => !bgEvent($.get(display)) && !helperEvent($.get(display)) ? createDragHandler($.get(event)) : void 0);
   let Resizer2 = $.derived(() => $_interaction().resizer);
   {
     const body = ($$anchor2, defaultBody = $.noop) => {
@@ -2787,10 +2780,10 @@ const index$4 = {
   }
 };
 function eventDraggable(event, $eventStartEditable, $editable) {
-  return (event.startEditable ?? $eventStartEditable ?? event.editable ?? $editable) && !bgEvent(event.display) && !helperEvent(event.display);
+  return event.startEditable ?? $eventStartEditable ?? event.editable ?? $editable;
 }
 function eventResizable(event, $eventDurationEditable, $editable) {
-  return (event.durationEditable ?? $eventDurationEditable ?? event.editable ?? $editable) && !bgEvent(event.display) && !helperEvent(event.display);
+  return event.durationEditable ?? $eventDurationEditable ?? event.editable ?? $editable;
 }
 let busy = false;
 function animate(fn) {
@@ -3514,7 +3507,8 @@ function Resizer($$anchor, $$props) {
     _interaction
   } = getContext("state");
   let event = $.derived(() => $$props.chunk.event);
-  let resizable = $.derived(() => eventResizable($.get(event), $eventDurationEditable(), $editable()));
+  let display = $.derived(() => $$props.chunk.event.display);
+  let resizable = $.derived(() => !bgEvent($.get(display)) && !helperEvent($.get(display)) && eventResizable($.get(event), $eventDurationEditable(), $editable()));
   function createResizeHandler(start) {
     return (jsEvent) => {
       var _a, _b;
@@ -3589,7 +3583,7 @@ function Auxiliary($$anchor, $$props) {
       let { display } = event;
       return [
         ...classNames,
-        helperEvent(display) ? [$theme()[display]] : eventDraggable(event, $eventStartEditable(), $editable()) ? [$theme().draggable] : []
+        helperEvent(display) ? [$theme()[display]] : !bgEvent(display) && eventDraggable(event, $eventStartEditable(), $editable()) ? [$theme().draggable] : []
       ];
     });
   });
@@ -3691,7 +3685,7 @@ function Event$3($$anchor, $$props) {
       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() });
@@ -4027,20 +4021,27 @@ function Section($$anchor, $$props) {
   $.push($$props, true);
   const [$$stores, $$cleanup] = $.setup_stores();
   const $allDayContent = () => $.store_get(allDayContent, "$allDayContent", $$stores);
+  const $slotLabelInterval = () => $.store_get(slotLabelInterval, "$slotLabelInterval", $$stores);
   const $theme = () => $.store_get(theme, "$theme", $$stores);
   const $_times = () => $.store_get(_times, "$_times", $$stores);
-  let { allDayContent, theme, _times } = getContext("state");
+  let {
+    allDayContent,
+    slotLabelInterval,
+    theme,
+    _times
+  } = getContext("state");
   let allDayText = $.derived(() => createAllDayContent($allDayContent()));
+  let showAllTimes = $.derived(() => $slotLabelInterval() && $slotLabelInterval().seconds <= 0);
   var fragment = root$f();
   var div = $.first_child(fragment);
   var div_1 = $.child(div);
   $.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) => {
+  $.each(node, 1, $_times, $.index, ($$anchor2, time, i) => {
     var time_1 = root_1$4();
-    $.action(time_1, ($$node, $$action_arg) => setContent == null ? void 0 : setContent($$node, $$action_arg), () => $.get(time)[2] ? $.get(time)[1] : "");
+    $.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);
+      $.set_class(time_1, 1, `${$theme().time ?? ""}${(i || $.get(showAllTimes)) && $.get(time)[2] ? "" : " " + $theme().minor}`);
       $.set_attribute(time_1, "datetime", $.get(time)[0]);
     });
     $.append($$anchor2, time_1);
@@ -4089,10 +4090,10 @@ var root$e = $.template(`<div><div><!></div></div>`);
 function Body$1($$anchor, $$props) {
   $.push($$props, true);
   const [$$stores, $$cleanup] = $.setup_stores();
-  const $slotDuration = () => $.store_get(slotDuration, "$slotDuration", $$stores);
   const $_viewDates = () => $.store_get(_viewDates, "$_viewDates", $$stores);
   const $scrollTime = () => $.store_get(scrollTime, "$scrollTime", $$stores);
   const $_slotTimeLimits = () => $.store_get(_slotTimeLimits, "$_slotTimeLimits", $$stores);
+  const $slotDuration = () => $.store_get(slotDuration, "$slotDuration", $$stores);
   const $slotHeight = () => $.store_get(slotHeight, "$slotHeight", $$stores);
   const $theme = () => $.store_get(theme, "$theme", $$stores);
   const $_times = () => $.store_get(_times, "$_times", $$stores);
@@ -4108,7 +4109,6 @@ function Body$1($$anchor, $$props) {
     theme
   } = getContext("state");
   let el = $.state(void 0);
-  let compact = $.derived(() => $slotDuration().seconds >= 3600);
   $.user_effect(() => {
     $.store_set(_bodyEl, $.get(el));
   });
@@ -4127,9 +4127,9 @@ function Body$1($$anchor, $$props) {
     const lines = ($$anchor2) => {
       var fragment = $.comment();
       var node_1 = $.first_child(fragment);
-      $.each(node_1, 1, () => new Array($_times().length), $.index, ($$anchor3, line) => {
+      $.each(node_1, 1, $_times, $.index, ($$anchor3, time) => {
         var div_2 = root_2$5();
-        $.template_effect(() => $.set_class(div_2, 1, $theme().line));
+        $.template_effect(() => $.set_class(div_2, 1, `${$theme().line ?? ""}${$.get(time)[2] ? "" : " " + $theme().minor}`));
         $.append($$anchor3, div_2);
       });
       $.append($$anchor2, fragment);
@@ -4147,7 +4147,7 @@ function Body$1($$anchor, $$props) {
   $.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));
   $.template_effect(() => {
-    $.set_class(div, 1, `${$theme().body ?? ""}${$.get(compact) ? " " + $theme().compact : ""}`);
+    $.set_class(div, 1, $theme().body);
     $.set_class(div_1, 1, $theme().content);
   });
   $.append($$anchor, div);
@@ -4697,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);
@@ -4704,6 +4705,7 @@ function View$2($$anchor, $$props) {
     _viewDates,
     _intlDayHeader,
     _intlDayHeaderAL,
+    _today,
     allDaySlot,
     theme
   } = getContext("state");
@@ -4721,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))
           ],
@@ -4894,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,
@@ -4925,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))
               ]
@@ -4988,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))
                     ]
@@ -5437,7 +5444,7 @@ function Header($$anchor, $$props) {
           $.action(time_2, ($$node, $$action_arg) => setContent == null ? void 0 : setContent($$node, $$action_arg), () => $.get(time)[1]);
           $.reset(div_5);
           $.template_effect(() => {
-            $.set_class(div_5, 1, $theme().time);
+            $.set_class(div_5, 1, `${$theme().time ?? ""}${$.get(time)[2] ? "" : " " + $theme().minor}`);
             $.set_attribute(time_2, "datetime", $.get(time)[0]);
           });
           $.append($$anchor4, div_5);
@@ -6024,7 +6031,7 @@ function Body($$anchor, $$props) {
     var node = $.first_child(fragment);
     $.each(node, 1, () => $_dayTimes()[$.get(date).getTime()], $.index, ($$anchor3, time) => {
       var div_3 = root_2();
-      $.template_effect(() => $.set_class(div_3, 1, $theme().line));
+      $.template_effect(() => $.set_class(div_3, 1, `${$theme().line ?? ""}${$.get(time)[2] ? "" : " " + $theme().minor}`));
       $.append($$anchor3, div_3);
     });
     $.append($$anchor2, fragment);

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@event-calendar/core",
-  "version": "4.0.3",
+  "version": "4.2.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/lib/components/InteractableEvent.svelte CHANGED Viewed

@@ -1,6 +1,7 @@
 <script>
     import {getContext} from 'svelte';
     import BaseEvent from './BaseEvent.svelte';
+    import {bgEvent, helperEvent} from "#lib";
     let {
         el = $bindable(),
@@ -14,6 +15,7 @@
     let {_interaction, _iClasses} = getContext('state');
     let event = $derived(chunk.event);
+    let display = $derived(chunk.event.display);
     // Class
     let classes = $derived(classNames => $_iClasses(classNames, event));
@@ -23,9 +25,9 @@
             ? jsEvent => $_interaction.action.drag(
                 event, jsEvent, forceDate?.(), forceMargin?.()
             )
-            : undefined;
+            : $_interaction.action?.noAction;
     }
-    let onpointerdown = $derived(createDragHandler(event));
+    let onpointerdown = $derived(!bgEvent(display) && !helperEvent(display) ? createDragHandler(event) : undefined);
     let Resizer = $derived($_interaction.resizer);
 </script>

package/src/lib/dom.js CHANGED Viewed

@@ -41,7 +41,7 @@ export function getElementWithPayload(x, y, root = document) {
             return el;
         }
         /** @see https://github.com/vkurko/calendar/issues/142 */
-        if (el.shadowRoot) {
+        if (el.shadowRoot && el.shadowRoot !== root) {
             let shadowEl = getElementWithPayload(x, y, el.shadowRoot);
             if (shadowEl) {
                 return shadowEl;

package/src/lib/times.js CHANGED Viewed

@@ -14,19 +14,15 @@ export function createTimes(date, $slotDuration, $slotLabelInterval, $_slotTimeL
             ? createDuration($slotDuration.seconds * 2)
             : $slotDuration;
     }
-    let showAll = $slotLabelInterval.seconds <= 0;
-    let label;
-    if (!showAll) {
-        label = cloneDate(date);
-    }
+    let label = cloneDate(date);
     // Build times
     while (date < end) {
         times.push([
             toISOString(date),
             $_intlSlotLabel.format(date),
-            showAll || (times.length && date >= label)
+            date >= label
         ]);
-        while (!showAll && date >= label) {
+        while ($slotLabelInterval.seconds && date >= label) {
             addDuration(label, $slotLabelInterval);
         }
         addDuration(date, $slotDuration);

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

@@ -1,6 +1,6 @@
 <script>
     import {getContext} from 'svelte';
-    import {helperEvent, listen} from '#lib';
+    import {bgEvent, helperEvent, listen} from '#lib';
     import {eventDraggable} from './lib';
     import Action from './Action.svelte';
     import Pointer from './Pointer.svelte';
@@ -21,7 +21,11 @@
                 ...classNames,
                 helperEvent(display)
                     ? [$theme[display]]
-                    : (eventDraggable(event, $eventStartEditable, $editable) ? [$theme.draggable] : [])
+                    : (
+                        !bgEvent(display) && eventDraggable(event, $eventStartEditable, $editable)
+                            ? [$theme.draggable]
+                            : []
+                    )
             ];
         };
     });

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

@@ -1,5 +1,6 @@
 <script>
     import {getContext} from 'svelte';
+    import {bgEvent, helperEvent} from '#lib';
     import {eventResizable} from './lib';
     let {chunk, axis, forceDate = undefined, forceMargin = undefined, children} = $props();
@@ -7,8 +8,11 @@
     let {theme, eventDurationEditable, eventResizableFromStart, editable, _interaction} = getContext('state');
     let event = $derived(chunk.event);
+    let display = $derived(chunk.event.display);
-    let resizable = $derived(eventResizable(event, $eventDurationEditable, $editable));
+    let resizable = $derived(
+        !bgEvent(display) && !helperEvent(display) && eventResizable(event, $eventDurationEditable, $editable)
+    );
     function createResizeHandler(start) {
         return jsEvent => $_interaction.action.resize(

package/src/plugins/interaction/lib/events.js CHANGED Viewed

@@ -1,13 +1,9 @@
 import {bgEvent, helperEvent} from '#lib';
 export function eventDraggable(event, $eventStartEditable, $editable) {
-    return (event.startEditable ?? $eventStartEditable ?? event.editable ?? $editable) &&
-        !bgEvent(event.display) &&
-        !helperEvent(event.display);
+    return (event.startEditable ?? $eventStartEditable ?? event.editable ?? $editable);
 }
 export function eventResizable(event, $eventDurationEditable, $editable) {
-    return (event.durationEditable ?? $eventDurationEditable ?? event.editable ?? $editable) &&
-        !bgEvent(event.display) &&
-        !helperEvent(event.display);
+    return (event.durationEditable ?? $eventDurationEditable ?? event.editable ?? $editable);
 }

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

@@ -50,7 +50,7 @@
         <div class="{$theme.lines}">
             {#each $_viewDates as date}
                 {#each $_dayTimes[date.getTime()] as time}
-                    <div class="{$theme.line}"></div>
+                    <div class="{$theme.line}{time[2] ? '' : ' ' + $theme.minor}"></div>
                 {/each}
             {/each}
         </div>

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

@@ -19,7 +19,7 @@
                     </div>
                     <div class="{$theme.times}">
                         {#each $_dayTimes[date.getTime()] as time}
-                            <div class="{$theme.time}" role="columnheader">
+                            <div class="{$theme.time}{time[2] ? '' : ' ' + $theme.minor}" role="columnheader">
                                 <time
                                     datetime="{time[0]}"
                                     use:setContent={time[1]}
@@ -28,13 +28,13 @@
                         {/each}
                     </div>
                 {:else}
-                        <div class="{$theme.time}" role="columnheader">
-                            <time
-                                datetime="{toISOString(date, 10)}"
-                                aria-label="{$_intlDayHeaderAL.format(date)}"
-                                use:setContent={$_intlDayHeader.format(date)}
-                            ></time>
-                        </div>
+                    <div class="{$theme.time}" role="columnheader">
+                        <time
+                            datetime="{toISOString(date, 10)}"
+                            aria-label="{$_intlDayHeaderAL.format(date)}"
+                            use:setContent={$_intlDayHeader.format(date)}
+                        ></time>
+                    </div>
                 {/if}
             </div>
         {/each}

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

@@ -11,8 +11,6 @@
     let el = $state();
-    let compact = $derived($slotDuration.seconds >= 3600);
     $effect(() => {
         $_bodyEl = el;
     });
@@ -30,14 +28,14 @@
 <div
     bind:this={el}
-    class="{$theme.body}{compact ? ' ' + $theme.compact : ''}"
+    class="{$theme.body}"
     use:observeResize={() => $_recheckScrollable = true}
 >
     <div class="{$theme.content}">
         <Section {children}>
             {#snippet lines()}
-                {#each new Array($_times.length) as line}
-                    <div class="{$theme.line}"></div>
+                {#each $_times as time}
+                    <div class="{$theme.line}{time[2] ? '' : ' ' + $theme.minor}"></div>
                 {/each}
             {/snippet}
         </Section>

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

@@ -5,15 +5,20 @@
     let {children, lines} = $props();
-    let {allDayContent, theme, _times} = getContext('state');
+    let {allDayContent, slotLabelInterval, theme, _times} = getContext('state');
     let allDayText = $derived(createAllDayContent($allDayContent));
+    let showAllTimes = $derived($slotLabelInterval && $slotLabelInterval.seconds <= 0);
 </script>
 <div class="{$theme.sidebar}">
     <div class="{$theme.sidebarTitle}" use:setContent={allDayText}></div>
-    {#each $_times as time}
-        <time class="{$theme.time}" datetime="{time[0]}" use:setContent={time[2] ? time[1] : ''}></time>
+    {#each $_times as time, i}
+        <time
+            class="{$theme.time}{(i || showAllTimes) && time[2] ? '' : ' ' + $theme.minor}"
+            datetime="{time[0]}"
+            use:setContent={time[1]}
+        ></time>
     {/each}
 </div>
 <div class="{$theme.days}" role="row">

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/storage/options.js CHANGED Viewed

@@ -79,7 +79,6 @@ export function createOptions(plugins) {
             button: 'ec-button',
             buttonGroup: 'ec-button-group',
             calendar: 'ec',
-            compact: 'ec-compact',
             content: 'ec-content',
             day: 'ec-day',
             dayHead: 'ec-day-head',
@@ -98,6 +97,7 @@ export function createOptions(plugins) {
             icon: 'ec-icon',
             line: 'ec-line',
             lines: 'ec-lines',
+            minor: 'ec-minor',
             nowIndicator: 'ec-now-indicator',
             otherMonth: 'ec-other-month',
             resource: 'ec-resource',

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;

package/src/styles/time-grid.scss CHANGED Viewed

@@ -34,6 +34,10 @@
     line-height: 24px;
     top: -12px;
     text-align: right;
+    &.ec-minor {
+      visibility: hidden;
+    }
   }
   .ec-header .ec-time ,
@@ -60,7 +64,7 @@
     pointer-events: none;
   }
-  .ec-body:not(.ec-compact) .ec-line:nth-child(even):after {
+  .ec-line.ec-minor:after {
     border-bottom-style: dotted;
   }

package/src/styles/timeline.scss CHANGED Viewed

@@ -74,6 +74,10 @@
     min-height: 24px;
     overflow: hidden;
     text-overflow: ellipsis;
+    &.ec-minor {
+      visibility: hidden;
+    }
   }
   .ec-time, .ec-line {
@@ -107,9 +111,9 @@
     pointer-events: none;
   }
-  //.ec-body:not(.ec-compact) .ec-line:nth-child(even):after {
-  //  border-bottom-style: dotted;
-  //}
+  .ec-line.ec-minor:after {
+    border-left-style: dotted;
+  }
   .ec-sidebar {
     padding: 0;