npm - @event-calendar/core - Versions diffs - 5.0.3 → 5.0.5 - Mend

@event-calendar/core 5.0.3 → 5.0.5

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 +2 -2
package/dist/index.css +5 -7
package/dist/index.js +84 -28
package/package.json +1 -1
package/src/lib/components/BaseDay.svelte +1 -1
package/src/lib/view.js +4 -0
package/src/plugins/day-grid/View.svelte +14 -3
package/src/plugins/interaction/Action.svelte +13 -7
package/src/plugins/resource-timeline/Day.svelte +8 -4
package/src/plugins/resource-timeline/View.svelte +24 -5
package/src/plugins/time-grid/Day.svelte +7 -3
package/src/plugins/time-grid/View.svelte +22 -3
package/src/storage/state.js +1 -0
package/src/storage/stores.js +6 -20
package/src/styles/index.css +1 -1
package/src/styles/sidebar.css +2 -4
package/src/styles/slots.css +1 -1

package/README.md CHANGED Viewed

@@ -245,8 +245,8 @@ This bundle contains a version of the calendar that includes all plugins and is
 The first step is to include the following lines of code in the `<head>` section of your page:
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.0.3/dist/event-calendar.min.css">
-<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.0.3/dist/event-calendar.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.0.4/dist/event-calendar.min.css">
+<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.0.4/dist/event-calendar.min.js"></script>
 ```
 <details>

package/dist/index.css CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
- * EventCalendar v5.0.3
+ * EventCalendar v5.0.5
  * https://github.com/vkurko/calendar
  */
 .ec {
@@ -276,14 +276,12 @@
     inset-inline-start: 0;
     z-index: 1;
     background-color: var(--ec-bg-color);
-    border-color: var(--ec-border-color);
-    border-width: 1px;
-    border-inline-end-style: solid;
+    border-inline-end: 1px solid var(--ec-border-color);
     text-align: end;
     overflow: clip;
     .ec-header & {
-        border-block-end-style: solid;
+        border-block-end: 1px solid var(--ec-border-color);
         padding-block: .375rem;
     }
@@ -344,7 +342,7 @@
     .ec-time-grid & {
         block-size: calc(var(--ec-slot-height) * var(--ec-slot-label-periodicity));
         position: relative;
-        inset-block-start: -.5em;
+        inset-block-start: -.5lh;
     }
     .ec-timeline & {
@@ -653,7 +651,7 @@
     .ec-timeline & {
         grid-template-columns: max-content repeat(var(--ec-grid-cols), min-content);
-        grid-template-rows: max-content repeat(calc(var(--ec-grid-rows) - 1), auto) minmax(auto, 1fr);
+        grid-template-rows: max-content var(--ec-grid-rows);
         flex-grow: 1;
     }

package/dist/index.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
- * EventCalendar v5.0.3
+ * EventCalendar v5.0.5
  * https://github.com/vkurko/calendar
  */
 import { tick, getContext, untrack, setContext, onMount, mount, unmount } from "svelte";
@@ -340,6 +340,9 @@ function toViewWithLocalDates(view2) {
 function listView(view2) {
   return view2.startsWith("list");
 }
+function timelineView(view2) {
+  return view2.includes("Timeline");
+}
 let eventId = 1;
 function createEvents(input) {
   return input.map((event) => {
@@ -885,21 +888,9 @@ function dayGrid(state) {
 }
 function activeRange(state) {
   return derived(
-    [state._currentRange, state.firstDay, state.slotMaxTime, state._dayGrid],
-    ([$_currentRange, $firstDay, $slotMaxTime, $_dayGrid]) => {
-      let start = cloneDate($_currentRange.start);
-      let end = cloneDate($_currentRange.end);
-      if ($_dayGrid) {
-        prevClosestDay(start, $firstDay);
-        nextClosestDay(end, $firstDay);
-      } else if ($slotMaxTime.days || $slotMaxTime.seconds > DAY_IN_SECONDS) {
-        addDuration(subtractDay(end), $slotMaxTime);
-        let start2 = subtractDay(cloneDate(end));
-        if (start2 < start) {
-          start = start2;
-        }
-      }
-      return { start, end };
+    [state._currentRange, state._activeRangeExt],
+    ([$_currentRange, $_activeRangeExt]) => {
+      return $_activeRangeExt({ start: cloneDate($_currentRange.start), end: cloneDate($_currentRange.end) });
     }
   );
 }
@@ -1065,9 +1056,10 @@ function now() {
   });
 }
 function today(state) {
-  let $today = createDate();
+  let $today = setMidnight(createDate());
   let today2 = writable($today);
-  derived(state._now, ($_now) => setMidnight(cloneDate($_now))).subscribe((newToday) => {
+  state._now.subscribe(($_now) => {
+    let newToday = setMidnight(cloneDate($_now));
     if (!datesEqual($today, newToday)) {
       $today = newToday;
       today2.set(newToday);
@@ -1090,6 +1082,7 @@ class State {
     this._auxiliary = writable([]);
     this._dayGrid = dayGrid(this);
     this._currentRange = currentRange(this);
+    this._activeRangeExt = writable(identity);
     this._activeRange = activeRange(this);
     this._fetchedRange = writable({ start: void 0, end: void 0 });
     this._events = events(this);
@@ -1742,7 +1735,7 @@ function BaseDay($$anchor, $$props) {
   const $_interaction = () => $.store_get(_interaction, "$_interaction", $$stores);
   const [$$stores, $$cleanup] = $.setup_stores();
   let el = $.prop($$props, "el", 15), allDay = $.prop($$props, "allDay", 3, false), resource = $.prop($$props, "resource", 3, void 0), dateFromPoint = $.prop($$props, "dateFromPoint", 3, () => $$props.date), classes = $.prop($$props, "classes", 3, identity), disabled = $.prop($$props, "disabled", 3, false), highlight = $.prop($$props, "highlight", 3, false), role = $.prop($$props, "role", 3, "cell"), noIeb = $.prop($$props, "noIeb", 3, false), noBeb = $.prop($$props, "noBeb", 3, false);
-  let { _interaction, _today, highlightedDates, theme } = getContext("state");
+  let { _interaction, _today, theme } = getContext("state");
   let isToday = $.derived(() => datesEqual($$props.date, $_today()));
   let classNames = $.derived(() => classes()([
     $theme().day,
@@ -2482,6 +2475,7 @@ function View$3($$anchor, $$props) {
   const $highlightedDates = () => $.store_get(highlightedDates, "$highlightedDates", $$stores);
   const $_filteredEvents = () => $.store_get(_filteredEvents, "$_filteredEvents", $$stores);
   const $_iEvents = () => $.store_get(_iEvents, "$_iEvents", $$stores);
+  const $firstDay = () => $.store_get(firstDay, "$firstDay", $$stores);
   const $_hiddenChunks = () => $.store_get(_hiddenChunks, "$_hiddenChunks", $$stores);
   const $_mainEl = () => $.store_get(_mainEl, "$_mainEl", $$stores);
   const $theme = () => $.store_get(theme, "$theme", $$stores);
@@ -2491,6 +2485,7 @@ function View$3($$anchor, $$props) {
   const $_popupDay = () => $.store_get(_popupDay, "$_popupDay", $$stores);
   const [$$stores, $$cleanup] = $.setup_stores();
   let {
+    _activeRangeExt,
     _mainEl,
     _colsCount,
     _filteredEvents,
@@ -2501,6 +2496,7 @@ function View$3($$anchor, $$props) {
     _popupDay,
     _viewDates,
     dayMaxEvents,
+    firstDay,
     highlightedDates,
     theme,
     validRange
@@ -2509,6 +2505,15 @@ function View$3($$anchor, $$props) {
   let grid = $.derived(() => createGrid$3($_viewDates(), $_colsCount(), $validRange(), $highlightedDates()));
   let $$d = $.derived(() => createEventChunks$2($_filteredEvents(), $.get(grid))), chunks = $.derived(() => $.get($$d).chunks), bgChunks = $.derived(() => $.get($$d).bgChunks);
   let iChunks = $.derived(() => createIEventChunks$2($_iEvents(), $.get(grid)));
+  $.user_pre_effect(() => {
+    $.store_set(_activeRangeExt, ({ start, end }) => ({
+      start: prevClosestDay(start, $firstDay()),
+      end: nextClosestDay(end, $firstDay())
+    }));
+    return () => {
+      $.store_set(_activeRangeExt, identity);
+    };
+  });
   let refs = [];
   function reposition() {
     $.store_set(_hiddenChunks, {});
@@ -3103,7 +3108,7 @@ function Action($$anchor, $$props) {
           return findPayload(dayEl.previousElementSibling);
         }
       } else {
-        if (selecting() && payload.resource && !$_iEvents()[0].resourceIds.includes(payload.resource.id)) {
+        if ((selecting() || resizing()) && payload.resource && !$_iEvents()[0].resourceIds.includes(payload.resource.id) && !timelineView($view())) {
           if (toX > fromX) {
             return findPayload(dayEl.previousElementSibling);
           } else {
@@ -3118,11 +3123,14 @@ function Action($$anchor, $$props) {
   function calcViewport() {
     let mainRect = rect($_mainEl());
     let gridRect = rect(gridEl);
+    let scaleX = mainRect.width / $_mainEl().offsetWidth;
+    let scaleY = mainRect.height / $_mainEl().offsetHeight;
+    let rtl = isRtl();
     viewport = {
-      left: max(0, gridRect.left + $_mainEl().scrollLeft),
-      right: min(document.documentElement.clientWidth, mainRect.left + $_mainEl().clientWidth) - 2,
-      top: max(0, gridRect.top + (!allDaySlot ? $_mainEl().scrollTop : 0)),
-      bottom: min(document.documentElement.clientHeight, !allDaySlot ? mainRect.top + $_mainEl().clientHeight : gridRect.bottom) - 2
+      left: max(0, rtl ? mainRect.right - $_mainEl().clientWidth * scaleX : gridRect.left + $_mainEl().scrollLeft * scaleX),
+      right: min(document.documentElement.clientWidth, rtl ? gridRect.right + $_mainEl().scrollLeft * scaleX : mainRect.left + $_mainEl().clientWidth * scaleX) - 2,
+      top: max(0, gridRect.top + (!allDaySlot ? $_mainEl().scrollTop : 0) * scaleY),
+      bottom: min(document.documentElement.clientHeight, !allDaySlot ? mainRect.top + $_mainEl().clientHeight * scaleY : gridRect.bottom) - 2
     };
   }
   function createIEvent(jsEvent, callback) {
@@ -4105,7 +4113,13 @@ function Day$1($$anchor, $$props) {
   let date = $.derived(() => $$props.day.dayStart), start = $.derived(() => $$props.day.start), resource = $.derived(() => $$props.day.resource), disabled = $.derived(() => $$props.day.disabled), highlight = $.derived(() => $$props.day.highlight);
   let el = $.state(void 0);
   function dateFromPoint(x, y) {
-    return allDay() ? $.get(date) : addDuration(cloneDate($.get(start)), $slotDuration(), floor((y - rect($.get(el)).top) / $slotHeight()));
+    if (allDay()) {
+      return $.get(date);
+    } else {
+      let dayRect = rect($.get(el));
+      let scaleY = dayRect.height / $.get(el).offsetHeight;
+      return addDuration(cloneDate($.get(start)), $slotDuration(), floor((y - dayRect.top) / ($slotHeight() * scaleY)));
+    }
   }
   BaseDay($$anchor, {
     get date() {
@@ -4294,6 +4308,7 @@ function View$1($$anchor, $$props) {
   const $highlightedDates = () => $.store_get(highlightedDates, "$highlightedDates", $$stores);
   const $_filteredEvents = () => $.store_get(_filteredEvents, "$_filteredEvents", $$stores);
   const $_iEvents = () => $.store_get(_iEvents, "$_iEvents", $$stores);
+  const $slotMaxTime = () => $.store_get(slotMaxTime, "$slotMaxTime", $$stores);
   const $scrollTime = () => $.store_get(scrollTime, "$scrollTime", $$stores);
   const $_mainEl = () => $.store_get(_mainEl, "$_mainEl", $$stores);
   const $slotDuration = () => $.store_get(slotDuration, "$slotDuration", $$stores);
@@ -4307,6 +4322,7 @@ function View$1($$anchor, $$props) {
   const $showNowIndicator = () => $.store_get(showNowIndicator, "$showNowIndicator", $$stores);
   const [$$stores, $$cleanup] = $.setup_stores();
   let {
+    _activeRangeExt,
     _mainEl,
     _filteredEvents,
     _iEvents,
@@ -4323,6 +4339,7 @@ function View$1($$anchor, $$props) {
     scrollTime,
     slotHeight,
     slotDuration,
+    slotMaxTime,
     theme,
     validRange
   } = getContext("state");
@@ -4331,6 +4348,21 @@ function View$1($$anchor, $$props) {
   let grid = $.derived(() => $$props.createGridFn?.() ?? createGrid$1($_viewDates(), $_slotTimeLimits(), $validRange(), $highlightedDates()));
   let $$d = $.derived(() => createEventChunks$1($_filteredEvents(), $.get(grid))), chunks = $.derived(() => $.get($$d).chunks), bgChunks = $.derived(() => $.get($$d).bgChunks), allDayChunks = $.derived(() => $.get($$d).allDayChunks), allDayBgChunks = $.derived(() => $.get($$d).allDayBgChunks);
   let $$d_1 = $.derived(() => createIEventChunks$1($_iEvents(), $.get(grid))), iChunks = $.derived(() => $.get($$d_1).iChunks), allDayIChunks = $.derived(() => $.get($$d_1).allDayIChunks);
+  $.user_pre_effect(() => {
+    $.store_set(_activeRangeExt, ({ start, end }) => {
+      if ($slotMaxTime().days || $slotMaxTime().seconds > DAY_IN_SECONDS) {
+        addDuration(subtractDay(end), $slotMaxTime());
+        let start2 = subtractDay(cloneDate(end));
+        if (start2 < start) {
+          start = start2;
+        }
+      }
+      return { start, end };
+    });
+    return () => {
+      $.store_set(_activeRangeExt, identity);
+    };
+  });
   $.user_effect(() => {
     $_viewDates();
     $scrollTime();
@@ -5015,7 +5047,13 @@ function Day($$anchor, $$props) {
   let date = $.derived(() => $$props.day.dayStart), start = $.derived(() => $$props.day.start), resource = $.derived(() => $$props.day.resource), disabled = $.derived(() => $$props.day.disabled), highlight = $.derived(() => $$props.day.highlight);
   let el = $.state(void 0);
   function dateFromPoint(x, y) {
-    return $_monthView() ? $.get(date) : addDuration(cloneDate($.get(start)), $slotDuration(), floor((x - rect($.get(el)).left) / $slotWidth()));
+    if ($_monthView()) {
+      return $.get(date);
+    } else {
+      let dayRect = rect($.get(el));
+      let scaleX = dayRect.width / $.get(el).offsetWidth;
+      return addDuration(cloneDate($.get(start)), $slotDuration(), floor((isRtl() ? dayRect.right - x : x - dayRect.left) / ($slotWidth() * scaleX)));
+    }
   }
   BaseDay($$anchor, {
     get allDay() {
@@ -5294,6 +5332,7 @@ function View($$anchor, $$props) {
   const $highlightedDates = () => $.store_get(highlightedDates, "$highlightedDates", $$stores);
   const $_filteredEvents = () => $.store_get(_filteredEvents, "$_filteredEvents", $$stores);
   const $_iEvents = () => $.store_get(_iEvents, "$_iEvents", $$stores);
+  const $slotMaxTime = () => $.store_get(slotMaxTime, "$slotMaxTime", $$stores);
   const $scrollTime = () => $.store_get(scrollTime, "$scrollTime", $$stores);
   const $_monthView = () => $.store_get(_monthView, "$_monthView", $$stores);
   const $_today = () => $.store_get(_today, "$_today", $$stores);
@@ -5310,6 +5349,7 @@ function View($$anchor, $$props) {
   const $nowIndicator = () => $.store_get(nowIndicator, "$nowIndicator", $$stores);
   const [$$stores, $$cleanup] = $.setup_stores();
   let {
+    _activeRangeExt,
     _daySlots,
     _dayTimeLimits,
     _filteredEvents,
@@ -5328,6 +5368,7 @@ function View($$anchor, $$props) {
     scrollTime,
     slotDuration,
     slotHeight,
+    slotMaxTime,
     slotWidth,
     theme,
     validRange
@@ -5336,6 +5377,21 @@ function View($$anchor, $$props) {
   let grid = $.derived(() => createGrid($_viewDates(), $_viewResources(), $_dayTimeLimits(), $validRange(), $highlightedDates()));
   let $$d = $.derived(() => createEventChunks($_filteredEvents(), $.get(grid))), chunks = $.derived(() => $.get($$d).chunks), bgChunks = $.derived(() => $.get($$d).bgChunks);
   let iChunks = $.derived(() => createIEventChunks($_iEvents(), $.get(grid)));
+  $.user_pre_effect(() => {
+    $.store_set(_activeRangeExt, ({ start, end }) => {
+      if ($slotMaxTime().days || $slotMaxTime().seconds > DAY_IN_SECONDS) {
+        addDuration(subtractDay(end), $slotMaxTime());
+        let start2 = subtractDay(cloneDate(end));
+        if (start2 < start) {
+          start = start2;
+        }
+      }
+      return { start, end };
+    });
+    return () => {
+      $.store_set(_activeRangeExt, identity);
+    };
+  });
   $.user_effect(() => {
     $_viewDates();
     $scrollTime();
@@ -5356,7 +5412,7 @@ function View($$anchor, $$props) {
         scrollLeft += toSeconds(slotTimeLimits2.max) - toSeconds(slotTimeLimits2.min);
       }
     }
-    $.store_mutate(_mainEl, $.untrack($_mainEl).scrollLeft = scrollLeft / toSeconds($slotDuration()) * $slotWidth() * (document.dir === "rtl" ? -1 : 1), $.untrack($_mainEl));
+    $.store_mutate(_mainEl, $.untrack($_mainEl).scrollLeft = scrollLeft / toSeconds($slotDuration()) * $slotWidth() * (isRtl() ? -1 : 1), $.untrack($_mainEl));
   }
   let refs = [];
   function reposition() {
@@ -5550,7 +5606,7 @@ function View($$anchor, $$props) {
     $.set_class(section, 1, $theme().main);
     styles = $.set_style(section, "", styles, {
       "--ec-grid-cols": $.get(grid)[0].length,
-      "--ec-grid-rows": $.get(grid).length,
+      "--ec-grid-rows": `${$.get(grid).length > 1 ? `repeat(${$.get(grid).length - 1}, auto)` : ""} minmax(auto, 1fr)`,
       "--ec-col-width": $columnWidth() ?? "minmax(4em, 1fr)",
       "--ec-slot-label-periodicity": $_slotLabelPeriodicity(),
       "--ec-slot-height": `${$slotHeight() ?? ""}px`,

package/package.json CHANGED Viewed

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

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

@@ -17,7 +17,7 @@
         children
     } = $props();
-    let {_interaction, _today, highlightedDates, theme} = getContext('state');
+    let {_interaction, _today, theme} = getContext('state');
     let isToday = $derived(datesEqual(date, $_today));

package/src/lib/view.js CHANGED Viewed

@@ -26,3 +26,7 @@ export function toViewWithLocalDates(view) {
 export function listView(view) {
     return view.startsWith('list');
 }
+export function timelineView(view) {
+    return view.includes('Timeline');
+}

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

@@ -1,19 +1,30 @@
 <script>
     import {getContext} from 'svelte';
-    import {contentFrom, resizeObserver, runReposition} from '#lib';
+    import {contentFrom, identity, nextClosestDay, prevClosestDay, resizeObserver, runReposition} from '#lib';
     import Day from './Day.svelte';
     import Event from './Event.svelte';
     import Popup from './Popup.svelte';
     import {createEventChunks, createIEventChunks, createGrid} from './lib.js';
-    let {_mainEl, _colsCount, _filteredEvents, _hiddenChunks, _iEvents, _intlDayHeader, _intlDayHeaderAL, _popupDay,
-        _viewDates, dayMaxEvents, highlightedDates, theme, validRange} = getContext('state');
+    let {_activeRangeExt, _mainEl, _colsCount, _filteredEvents, _hiddenChunks, _iEvents, _intlDayHeader,
+        _intlDayHeaderAL, _popupDay, _viewDates, dayMaxEvents, firstDay, highlightedDates, theme,
+        validRange} = getContext('state');
     let gridEl = $state();
     let grid = $derived(createGrid($_viewDates, $_colsCount, $validRange, $highlightedDates));
     let {chunks, bgChunks} = $derived(createEventChunks($_filteredEvents, grid));
     let iChunks = $derived(createIEventChunks($_iEvents, grid));
+    $effect.pre(() => {
+        $_activeRangeExt = ({start, end}) => ({
+            start: prevClosestDay(start, $firstDay),
+            end: nextClosestDay(end, $firstDay)
+        });
+        return () => {
+            $_activeRangeExt = identity;
+        };
+    });
     // Events reposition
     let refs = [];
     function reposition() {

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

@@ -2,8 +2,8 @@
     import {getContext, onMount} from 'svelte';
     import {
         addDay, addDuration, ancestor, assign, cloneDate, cloneEvent, copyTime, createDuration, getElementWithPayload,
-        getPayload, isFunction, listen, listView, max, min, noop, rect, runAll, subtractDay, subtractDuration,
-        toEventWithLocalDates, toISOString, toLocalDate, toViewWithLocalDates
+        getPayload, isFunction, isRtl, listen, listView, max, min, noop, rect, runAll, subtractDay, subtractDuration,
+        timelineView, toEventWithLocalDates, toISOString, toLocalDate, toViewWithLocalDates
     } from '#lib';
     import {animate, limit, eventDraggable} from './lib';
@@ -417,7 +417,10 @@
                     return findPayload(dayEl.previousElementSibling);
                 }
             } else {
-                if (selecting() && payload.resource && !$_iEvents[0].resourceIds.includes(payload.resource.id)) {
+                if (
+                    (selecting() || resizing()) &&
+                    payload.resource && !$_iEvents[0].resourceIds.includes(payload.resource.id) && !timelineView($view)
+                ) {
                     if (toX > fromX) {
                         return findPayload(dayEl.previousElementSibling);
                     } else {
@@ -433,11 +436,14 @@
     function calcViewport() {
         let mainRect = rect($_mainEl);
         let gridRect = rect(gridEl);
+        let scaleX = mainRect.width / $_mainEl.offsetWidth;
+        let scaleY = mainRect.height / $_mainEl.offsetHeight;
+        let rtl = isRtl();
         viewport = {
-            left: max(0, gridRect.left + $_mainEl.scrollLeft),
-            right: min(document.documentElement.clientWidth, mainRect.left + $_mainEl.clientWidth) - 2,
-            top: max(0, gridRect.top + (!allDaySlot ? $_mainEl.scrollTop : 0)),
-            bottom: min(document.documentElement.clientHeight, !allDaySlot ? mainRect.top + $_mainEl.clientHeight : gridRect.bottom) - 2
+            left: max(0, rtl ? mainRect.right - $_mainEl.clientWidth * scaleX : gridRect.left + $_mainEl.scrollLeft * scaleX),
+            right: min(document.documentElement.clientWidth, rtl ? gridRect.right + $_mainEl.scrollLeft * scaleX : mainRect.left + $_mainEl.clientWidth * scaleX) - 2,
+            top: max(0, gridRect.top + (!allDaySlot ? $_mainEl.scrollTop : 0) * scaleY),
+            bottom: min(document.documentElement.clientHeight, !allDaySlot ? mainRect.top + $_mainEl.clientHeight * scaleY : gridRect.bottom) - 2
         };
     }

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

@@ -1,6 +1,6 @@
 <script>
     import {getContext} from 'svelte';
-    import {addDuration, cloneDate, floor, rect} from '#lib';
+    import {addDuration, cloneDate, floor, isRtl, rect} from '#lib';
     import {BaseDay} from '#components';
     let {day, noIeb, noBeb} = $props();
@@ -12,9 +12,13 @@
     let el = $state();
     function dateFromPoint(x, y) {
-        return $_monthView
-            ? date
-            : addDuration(cloneDate(start), $slotDuration, floor((x - rect(el).left)/ $slotWidth));
+        if ($_monthView) {
+            return date;
+        } else {
+            let dayRect = rect(el);
+            let scaleX = dayRect.width / el.offsetWidth;
+            return addDuration(cloneDate(start), $slotDuration, floor((isRtl() ? dayRect.right - x : x - dayRect.left) / ($slotWidth * scaleX)));
+        }
     }
 </script>

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

@@ -1,6 +1,9 @@
 <script>
     import {getContext, tick} from 'svelte';
-    import {max, resizeObserver, runReposition, contentFrom, toSeconds, datesEqual, min} from "#lib";
+    import {
+        max, resizeObserver, runReposition, contentFrom, toSeconds, datesEqual, min, isRtl, DAY_IN_SECONDS, addDuration,
+        subtractDay, cloneDate, identity
+    } from "#lib";
     import {createGrid, createEventChunks, createIEventChunks, getSlotTimeLimits} from './lib.js';
     import {ColHead, DayHeader} from '#components';
     import Day from './Day.svelte';
@@ -9,9 +12,9 @@
     import Expander from './Expander.svelte';
     import NowIndicator from './NowIndicator.svelte';
-    let {_daySlots, _dayTimeLimits, _filteredEvents, _iEvents, _mainEl, _monthView, _nestedResources, _sidebarWidth,
+    let {_activeRangeExt, _daySlots, _dayTimeLimits, _filteredEvents, _iEvents, _mainEl, _monthView, _nestedResources, _sidebarWidth,
         _slotLabelPeriodicity, _today, _viewResources, _viewDates, columnWidth, highlightedDates, nowIndicator, scrollTime,
-        slotDuration, slotHeight, slotWidth, theme, validRange} = getContext('state');
+        slotDuration, slotHeight, slotMaxTime, slotWidth, theme, validRange} = getContext('state');
     let headerHeight = $state(0);
@@ -19,6 +22,22 @@
     let {chunks, bgChunks} = $derived(createEventChunks($_filteredEvents, grid));
     let iChunks = $derived(createIEventChunks($_iEvents, grid));
+    $effect.pre(() => {
+        $_activeRangeExt = ({start, end}) => {
+            if ($slotMaxTime.days || $slotMaxTime.seconds > DAY_IN_SECONDS) {
+                addDuration(subtractDay(end), $slotMaxTime);
+                let start2 = subtractDay(cloneDate(end));
+                if (start2 < start) {
+                    start = start2;
+                }
+            }
+            return {start, end};
+        };
+        return () => {
+            $_activeRangeExt = identity;
+        };
+    });
     // Handle scrollTime
     $effect(() => {
         $_viewDates;
@@ -43,7 +62,7 @@
                 scrollLeft += toSeconds(slotTimeLimits.max) - toSeconds(slotTimeLimits.min);
             }
         }
-        $_mainEl.scrollLeft = scrollLeft / toSeconds($slotDuration) * $slotWidth * (document.dir === 'rtl' ? -1 : 1);
+        $_mainEl.scrollLeft = scrollLeft / toSeconds($slotDuration) * $slotWidth * (isRtl() ? -1 : 1);
     }
     // Events reposition
@@ -58,7 +77,7 @@
     bind:this={$_mainEl}
     class="{$theme.main}"
     style:--ec-grid-cols="{grid[0].length}"
-    style:--ec-grid-rows="{grid.length}"
+    style:--ec-grid-rows="{grid.length > 1 ? `repeat(${grid.length - 1}, auto)` : ''} minmax(auto, 1fr)"
     style:--ec-col-width="{$columnWidth ?? 'minmax(4em, 1fr)'}"
     style:--ec-slot-label-periodicity="{$_slotLabelPeriodicity}"
     style:--ec-slot-height="{$slotHeight}px"

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

@@ -12,9 +12,13 @@
     let el = $state();
     function dateFromPoint(x, y) {
-        return allDay
-            ? date
-            : addDuration(cloneDate(start), $slotDuration, floor((y - rect(el).top) / $slotHeight));
+        if (allDay) {
+            return date;
+        } else {
+            let dayRect = rect(el);
+            let scaleY = dayRect.height / el.offsetHeight;
+            return addDuration(cloneDate(start), $slotDuration, floor((y - dayRect.top) / ($slotHeight * scaleY)));
+        }
     }
 </script>

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

@@ -1,6 +1,9 @@
 <script>
     import {getContext, tick} from 'svelte';
-    import {contentFrom, resizeObserver, runReposition, toSeconds} from '#lib';
+    import {
+        addDuration, cloneDate, contentFrom, DAY_IN_SECONDS, identity, resizeObserver, runReposition, subtractDay,
+        toSeconds
+    } from '#lib';
     import {createAllDayContent, createGrid, createEventChunks, createIEventChunks} from './lib.js';
     import {ColHead, DayHeader} from '#components';
     import Day from './Day.svelte';
@@ -10,9 +13,9 @@
     let {header, nowIndicator, createGridFn} = $props();
-    let {_mainEl, _filteredEvents, _iEvents, _sidebarWidth, _slotLabelPeriodicity, _slotTimeLimits, _slots,
+    let {_activeRangeExt, _mainEl, _filteredEvents, _iEvents, _sidebarWidth, _slotLabelPeriodicity, _slotTimeLimits, _slots,
         _viewDates, allDayContent, allDaySlot, columnWidth, highlightedDates, nowIndicator: showNowIndicator,
-        scrollTime, slotHeight, slotDuration, theme, validRange} = getContext('state');
+        scrollTime, slotHeight, slotDuration, slotMaxTime, theme, validRange} = getContext('state');
     let headerHeight = $state(0);
     let allDayText = $derived(createAllDayContent($allDayContent));
@@ -21,6 +24,22 @@
     let {chunks, bgChunks, allDayChunks, allDayBgChunks} = $derived(createEventChunks($_filteredEvents, grid));
     let {iChunks, allDayIChunks} = $derived(createIEventChunks($_iEvents, grid));
+    $effect.pre(() => {
+        $_activeRangeExt = ({start, end}) => {
+            if ($slotMaxTime.days || $slotMaxTime.seconds > DAY_IN_SECONDS) {
+                addDuration(subtractDay(end), $slotMaxTime);
+                let start2 = subtractDay(cloneDate(end));
+                if (start2 < start) {
+                    start = start2;
+                }
+            }
+            return {start, end};
+        };
+        return () => {
+            $_activeRangeExt = identity;
+        };
+    });
     // Handle scrollTime
     $effect(() => {
         $_viewDates;

package/src/storage/state.js CHANGED Viewed

@@ -27,6 +27,7 @@ export default class {
         this._auxiliary = writable([]);  // auxiliary components
         this._dayGrid = dayGrid(this);
         this._currentRange = currentRange(this);
+        this._activeRangeExt = writable(identity);
         this._activeRange = activeRange(this);
         this._fetchedRange = writable({start: undefined, end: undefined});
         this._events = events(this);

package/src/storage/stores.js CHANGED Viewed

@@ -11,24 +11,9 @@ export function dayGrid(state) {
 export function activeRange(state) {
     return derived(
-        [state._currentRange, state.firstDay, state.slotMaxTime, state._dayGrid],
-        ([$_currentRange, $firstDay, $slotMaxTime, $_dayGrid]) => {
-            let start = cloneDate($_currentRange.start);
-            let end = cloneDate($_currentRange.end);
-            if ($_dayGrid) {
-                // First day of week
-                prevClosestDay(start, $firstDay);
-                nextClosestDay(end, $firstDay);
-            } else if ($slotMaxTime.days || $slotMaxTime.seconds > DAY_IN_SECONDS) {
-                addDuration(subtractDay(end), $slotMaxTime);
-                let start2 = subtractDay(cloneDate(end));
-                if (start2 < start) {
-                    start = start2;
-                }
-            }
-            return {start, end};
+        [state._currentRange, state._activeRangeExt],
+        ([$_currentRange, $_activeRangeExt]) => {
+            return $_activeRangeExt({start: cloneDate($_currentRange.start), end: cloneDate($_currentRange.end)});
         }
     );
 }
@@ -235,9 +220,10 @@ export function now() {
 }
 export function today(state) {
-    let $today = createDate();
+    let $today = setMidnight(createDate());
     let today = writable($today);
-    derived(state._now, $_now => setMidnight(cloneDate($_now))).subscribe(newToday => {
+    state._now.subscribe($_now => {
+        let newToday = setMidnight(cloneDate($_now));
         if (!datesEqual($today, newToday)) {
             $today = newToday;
             today.set(newToday);

package/src/styles/index.css CHANGED Viewed

@@ -37,7 +37,7 @@
     .ec-timeline & {
         grid-template-columns: max-content repeat(var(--ec-grid-cols), min-content);
-        grid-template-rows: max-content repeat(calc(var(--ec-grid-rows) - 1), auto) minmax(auto, 1fr);
+        grid-template-rows: max-content var(--ec-grid-rows);
         flex-grow: 1;
     }

package/src/styles/sidebar.css CHANGED Viewed

@@ -3,14 +3,12 @@
     inset-inline-start: 0;
     z-index: 1;
     background-color: var(--ec-bg-color);
-    border-color: var(--ec-border-color);
-    border-width: 1px;
-    border-inline-end-style: solid;
+    border-inline-end: 1px solid var(--ec-border-color);
     text-align: end;
     overflow: clip;
     .ec-header & {
-        border-block-end-style: solid;
+        border-block-end: 1px solid var(--ec-border-color);
         padding-block: .375rem;
     }

package/src/styles/slots.css CHANGED Viewed

@@ -4,7 +4,7 @@
     .ec-time-grid & {
         block-size: calc(var(--ec-slot-height) * var(--ec-slot-label-periodicity));
         position: relative;
-        inset-block-start: -.5em;
+        inset-block-start: -.5lh;
     }
     .ec-timeline & {