@event-calendar/core 5.0.4 → 5.0.5

package/dist/index.css

@@ -1,5 +1,5 @@
 /*!
- * EventCalendar v5.0.4
+ * 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

@@ -1,5 +1,5 @@
 /*!
- * EventCalendar v5.0.4
+ * EventCalendar v5.0.5
  * https://github.com/vkurko/calendar
  */
 import { tick, getContext, untrack, setContext, onMount, mount, unmount } from "svelte";
@@ -888,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) });
     }
   );
 }
@@ -1094,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);
@@ -2486,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);
@@ -2495,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,
@@ -2505,6 +2496,7 @@ function View$3($$anchor, $$props) {
     _popupDay,
     _viewDates,
     dayMaxEvents,
+    firstDay,
     highlightedDates,
     theme,
     validRange
@@ -2513,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, {});
@@ -3107,7 +3108,7 @@ function Action($$anchor, $$props) {
           return findPayload(dayEl.previousElementSibling);
         }
       } else {
-        if (selecting() && payload.resource && !$_iEvents()[0].resourceIds.includes(payload.resource.id) && !timelineView($view())) {
+        if ((selecting() || resizing()) && payload.resource && !$_iEvents()[0].resourceIds.includes(payload.resource.id) && !timelineView($view())) {
           if (toX > fromX) {
             return findPayload(dayEl.previousElementSibling);
           } else {
@@ -4307,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);
@@ -4320,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,
@@ -4336,6 +4339,7 @@ function View$1($$anchor, $$props) {
     scrollTime,
     slotHeight,
     slotDuration,
+    slotMaxTime,
     theme,
     validRange
   } = getContext("state");
@@ -4344,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();
@@ -5313,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);
@@ -5329,6 +5349,7 @@ function View($$anchor, $$props) {
   const $nowIndicator = () => $.store_get(nowIndicator, "$nowIndicator", $$stores);
   const [$$stores, $$cleanup] = $.setup_stores();
   let {
+    _activeRangeExt,
     _daySlots,
     _dayTimeLimits,
     _filteredEvents,
@@ -5347,6 +5368,7 @@ function View($$anchor, $$props) {
     scrollTime,
     slotDuration,
     slotHeight,
+    slotMaxTime,
     slotWidth,
     theme,
     validRange
@@ -5355,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();
@@ -5375,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() {
@@ -5569,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

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

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

@@ -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

@@ -417,7 +417,10 @@
                     return findPayload(dayEl.previousElementSibling);
                 }
             } else {
-                if (selecting() && payload.resource && !$_iEvents[0].resourceIds.includes(payload.resource.id) && !timelineView($view)) {
+                if (
+                    (selecting() || resizing()) &&
+                    payload.resource && !$_iEvents[0].resourceIds.includes(payload.resource.id) && !timelineView($view)
+                ) {
                     if (toX > fromX) {
                         return findPayload(dayEl.previousElementSibling);
                     } else {

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

@@ -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/View.svelte

@@ -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

@@ -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

@@ -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)});
         }
     );
 }

package/src/styles/index.css

@@ -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

@@ -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

@@ -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 & {