npm - @event-calendar/core - Versions diffs - 4.5.1 → 4.6.0 - Mend

@event-calendar/core 4.5.1 → 4.6.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 (19) hide show

package/README.md +49 -3
package/dist/index.css +2 -1
package/dist/index.js +82 -36
package/package.json +1 -1
package/src/lib/events.js +21 -5
package/src/plugins/day-grid/Week.svelte +5 -5
package/src/plugins/list/Day.svelte +2 -2
package/src/plugins/resource-timeline/Body.svelte +2 -2
package/src/plugins/resource-timeline/Days.svelte +8 -11
package/src/plugins/resource-timeline/Label.svelte +11 -3
package/src/plugins/resource-timeline/Sidebar.svelte +10 -3
package/src/plugins/resource-timeline/index.js +1 -0
package/src/plugins/resource-timeline/lib.js +2 -2
package/src/plugins/time-grid/Day.svelte +2 -2
package/src/plugins/time-grid/all-day/Day.svelte +1 -1
package/src/plugins/time-grid/all-day/Week.svelte +6 -5
package/src/plugins/time-grid/utils.js +2 -2
package/src/storage/options.js +1 -0
package/src/styles/timeline.scss +1 -0

package/README.md CHANGED Viewed

@@ -66,13 +66,14 @@ Inspired by [FullCalendar](https://fullcalendar.io/), it implements similar opti
   - [eventDragStart](#eventdragstart)
   - [eventDragStop](#eventdragstop)
   - [eventDrop](#eventdrop)
+  - [eventDurationEditable](#eventdurationeditable)
   </td><td>
-  - [eventDurationEditable](#eventdurationeditable)
   - [eventFilter](#eventfilter)
   - [eventLongPressDelay](#eventlongpressdelay)
   - [eventMouseEnter](#eventmouseenter)
   - [eventMouseLeave](#eventmouseleave)
+  - [eventOrder](#eventorder)
   - [eventResizableFromStart](#eventresizablefromstart)
   - [eventResize](#eventresize)
   - [eventResizeStart](#eventresizestart)
@@ -243,8 +244,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.5.1/dist/event-calendar.min.css">
-<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@4.5.1/dist/event-calendar.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@4.6.0/dist/event-calendar.min.css">
+<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@4.6.0/dist/event-calendar.min.js"></script>
 ```
 <details>
@@ -1286,6 +1287,51 @@ The current [View](#view-object) object
 </tr>
 </table>
+### eventOrder
+- Type `function`
+- Default `undefined`
+A function that determines the order in which events that visually intersect in the current view are displayed.
+When `eventOrder` is not specified, events are ordered by start time with all-day events appearing first.
+```js
+function (a, b) {
+    // Return a negative value if 'a' should come before 'b'
+    // Return a positive value if 'a' should come after 'b'
+    // Return zero if 'a' and 'b' are equal
+}
+```
+`a` and `b` are objects (so called `event chunks`) with the following properties:
+<table>
+<tr>
+<td>
+`start`
+</td>
+<td>JavaScript Date object holding the event chunk’s start time</td>
+</tr>
+<tr>
+<td>
+`end`
+</td>
+<td>JavaScript Date object holding the event chunk’s end time</td>
+</tr>
+<tr>
+<td>
+`event`
+</td>
+<td>
+The [Event](#event-object) object associated with this chunk
+</td>
+</tr>
+</table>
 ### eventResizableFromStart
 - Type `boolean`
 - Default `false`

package/dist/index.css CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
- * EventCalendar v4.5.1
+ * EventCalendar v4.6.0
  * https://github.com/vkurko/calendar
  */
 .ec {
@@ -185,6 +185,7 @@
 }
 .ec-timeline .ec-sidebar .ec-resource span {
   padding-top: 8px;
+  height: fit-content;
 }
 .ec-time-grid .ec-body .ec-event {

package/dist/index.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
- * EventCalendar v4.5.1
+ * EventCalendar v4.6.0
  * https://github.com/vkurko/calendar
  */
 import { tick, getContext, untrack, setContext, onMount, mount, unmount } from "svelte";
@@ -395,8 +395,23 @@ function createEventChunk(event, start, end) {
   chunk.zeroDuration = datesEqual(chunk.start, chunk.end);
   return chunk;
 }
-function sortEventChunks(chunks) {
-  chunks.sort((a, b) => a.start - b.start || b.event.allDay - a.event.allDay);
+function sortEventChunks(chunks, eventOrder) {
+  if (isFunction(eventOrder)) {
+    chunks.sort((a, b) => eventOrder(
+      _toChunkWithLocalDates(a),
+      _toChunkWithLocalDates(b)
+    ));
+  } else {
+    chunks.sort((a, b) => a.start - b.start || b.event.allDay - a.event.allDay);
+  }
+}
+function _toChunkWithLocalDates(chunk) {
+  return {
+    ...chunk,
+    start: toLocalDate(chunk.start),
+    end: toLocalDate(chunk.end),
+    event: toEventWithLocalDates(chunk.event)
+  };
 }
 function createEventContent(chunk, displayEventEnd, eventContent, theme, _intlEventTime, _view) {
   let timeText = _intlEventTime.formatRange(
@@ -466,10 +481,10 @@ function _cloneEvent(event, dateFn) {
   event.end = dateFn(event.end);
   return event;
 }
-function prepareEventChunks$1(chunks, hiddenDays) {
+function prepareEventChunks$1(chunks, hiddenDays, eventOrder) {
   let longChunks = {};
   if (chunks.length) {
-    sortEventChunks(chunks);
+    sortEventChunks(chunks, eventOrder);
     let prevChunk;
     for (let chunk of chunks) {
       let dates = [];
@@ -831,6 +846,7 @@ function createOptions(plugins) {
     // ec option
     eventMouseEnter: void 0,
     eventMouseLeave: void 0,
+    eventOrder: void 0,
     eventSources: [],
     eventTextColor: void 0,
     eventTimeFormat: {
@@ -2613,12 +2629,14 @@ function Week$1($$anchor, $$props) {
   const $filterEventsWithResources = () => $.store_get(filterEventsWithResources, "$filterEventsWithResources", $$stores);
   const $resources = () => $.store_get(resources, "$resources", $$stores);
   const $hiddenDays = () => $.store_get(hiddenDays, "$hiddenDays", $$stores);
+  const $eventOrder = () => $.store_get(eventOrder, "$eventOrder", $$stores);
   const $_iEvents = () => $.store_get(_iEvents, "$_iEvents", $$stores);
   const $theme = () => $.store_get(theme, "$theme", $$stores);
   let {
     _filteredEvents,
     _iEvents,
     resources,
+    eventOrder,
     filterEventsWithResources,
     hiddenDays,
     theme,
@@ -2642,15 +2660,15 @@ function Week$1($$anchor, $$props) {
         }
       }
     }
-    prepareEventChunks$1(bgChunks2, $hiddenDays());
-    let longChunks2 = prepareEventChunks$1(chunks2, $hiddenDays());
+    prepareEventChunks$1(bgChunks2, $hiddenDays(), $eventOrder());
+    let longChunks2 = prepareEventChunks$1(chunks2, $hiddenDays(), $eventOrder());
     return [chunks2, bgChunks2, longChunks2];
   }), $$array = $.derived(() => $.to_array($.get($$d), 3)), chunks = $.derived(() => $.get($$array)[0]), bgChunks = $.derived(() => $.get($$array)[1]), longChunks = $.derived(() => $.get($$array)[2]);
   let iChunks = $.derived(() => $_iEvents().map((event) => {
     let chunk;
     if (event && eventIntersects(event, $.get(start), $.get(end))) {
       chunk = createEventChunk(event, $.get(start), $.get(end));
-      prepareEventChunks$1([chunk], $hiddenDays());
+      prepareEventChunks$1([chunk], $hiddenDays(), $eventOrder());
     } else {
       chunk = null;
     }
@@ -3743,6 +3761,7 @@ function Day$3($$anchor, $$props) {
   const $_filteredEvents = () => $.store_get(_filteredEvents, "$_filteredEvents", $$stores);
   const $filterEventsWithResources = () => $.store_get(filterEventsWithResources, "$filterEventsWithResources", $$stores);
   const $resources = () => $.store_get(resources, "$resources", $$stores);
+  const $eventOrder = () => $.store_get(eventOrder, "$eventOrder", $$stores);
   const $theme = () => $.store_get(theme, "$theme", $$stores);
   const $_interaction = () => $.store_get(_interaction, "$_interaction", $$stores);
   const $_intlListDay = () => $.store_get(_intlListDay, "$_intlListDay", $$stores);
@@ -3754,6 +3773,7 @@ function Day$3($$anchor, $$props) {
     _intlListDaySide,
     _today,
     resources,
+    eventOrder,
     filterEventsWithResources,
     highlightedDates,
     theme,
@@ -3775,7 +3795,7 @@ function Day$3($$anchor, $$props) {
           chunks2.push(chunk);
         }
       }
-      sortEventChunks(chunks2);
+      sortEventChunks(chunks2, $eventOrder());
     }
     return chunks2;
   });
@@ -3979,11 +3999,11 @@ function slotTimeLimits(state) {
     (args) => createSlotTimeLimits(...args)
   );
 }
-function groupEventChunks(chunks) {
+function groupEventChunks(chunks, $eventOrder) {
   if (!chunks.length) {
     return;
   }
-  sortEventChunks(chunks);
+  sortEventChunks(chunks, $eventOrder);
   let group = {
     columns: [],
     end: chunks[0].end
@@ -4247,6 +4267,7 @@ function Day$2($$anchor, $$props) {
   const $filterEventsWithResources = () => $.store_get(filterEventsWithResources, "$filterEventsWithResources", $$stores);
   const $resources = () => $.store_get(resources, "$resources", $$stores);
   const $_filteredEvents = () => $.store_get(_filteredEvents, "$_filteredEvents", $$stores);
+  const $eventOrder = () => $.store_get(eventOrder, "$eventOrder", $$stores);
   const $_iEvents = () => $.store_get(_iEvents, "$_iEvents", $$stores);
   const $slotDuration = () => $.store_get(slotDuration, "$slotDuration", $$stores);
   const $slotHeight = () => $.store_get(slotHeight, "$slotHeight", $$stores);
@@ -4262,6 +4283,7 @@ function Day$2($$anchor, $$props) {
     slotDuration,
     slotHeight,
     filterEventsWithResources,
+    eventOrder,
     theme,
     resources,
     validRange,
@@ -4294,7 +4316,7 @@ function Day$2($$anchor, $$props) {
         }
       }
     }
-    groupEventChunks(chunks2);
+    groupEventChunks(chunks2, $eventOrder());
     return [chunks2, bgChunks2];
   }), $$array = $.derived(() => $.to_array($.get($$d), 2)), chunks = $.derived(() => $.get($$array)[0]), bgChunks = $.derived(() => $.get($$array)[1]);
   let iChunks = $.derived(() => {
@@ -4600,11 +4622,13 @@ function Week($$anchor, $$props) {
   const $resources = () => $.store_get(resources, "$resources", $$stores);
   const $_filteredEvents = () => $.store_get(_filteredEvents, "$_filteredEvents", $$stores);
   const $hiddenDays = () => $.store_get(hiddenDays, "$hiddenDays", $$stores);
+  const $eventOrder = () => $.store_get(eventOrder, "$eventOrder", $$stores);
   const $_iEvents = () => $.store_get(_iEvents, "$_iEvents", $$stores);
   let resource = $.prop($$props, "resource", 3, void 0);
   let {
     _filteredEvents,
     _iEvents,
+    eventOrder,
     hiddenDays,
     resources,
     filterEventsWithResources,
@@ -4627,8 +4651,8 @@ function Week($$anchor, $$props) {
         }
       }
     }
-    prepareEventChunks$1(bgChunks2, $hiddenDays());
-    let longChunks2 = prepareEventChunks$1(chunks2, $hiddenDays());
+    prepareEventChunks$1(bgChunks2, $hiddenDays(), $eventOrder());
+    let longChunks2 = prepareEventChunks$1(chunks2, $hiddenDays(), $eventOrder());
     return [chunks2, bgChunks2, longChunks2];
   }), $$array = $.derived(() => $.to_array($.get($$d), 3)), chunks = $.derived(() => $.get($$array)[0]), bgChunks = $.derived(() => $.get($$array)[1]), longChunks = $.derived(() => $.get($$array)[2]);
   function reposition() {
@@ -4642,7 +4666,7 @@ function Week($$anchor, $$props) {
     let chunk;
     if (event && event.allDay && eventIntersects(event, $.get(start), $.get(end), resource())) {
       chunk = createEventChunk(event, $.get(start), $.get(end));
-      prepareEventChunks$1([chunk], $hiddenDays());
+      prepareEventChunks$1([chunk], $hiddenDays(), $eventOrder());
     } else {
       chunk = null;
     }
@@ -5210,9 +5234,10 @@ function Label($$anchor, $$props) {
   $.push($$props, true);
   const [$$stores, $$cleanup] = $.setup_stores();
   const $resourceLabelContent = () => $.store_get(resourceLabelContent, "$resourceLabelContent", $$stores);
+  const $_resHs = () => $.store_get(_resHs, "$_resHs", $$stores);
   const $resourceLabelDidMount = () => $.store_get(resourceLabelDidMount, "$resourceLabelDidMount", $$stores);
   let date = $.prop($$props, "date", 3, void 0);
-  let { resourceLabelContent, resourceLabelDidMount } = getContext("state");
+  let { resourceLabelContent, resourceLabelDidMount, _resHs } = getContext("state");
   let el = $.state(void 0);
   let content = $.derived(() => {
     if ($resourceLabelContent()) {
@@ -5224,6 +5249,13 @@ function Label($$anchor, $$props) {
       return $$props.resource.title;
     }
   });
+  $.user_effect(() => {
+    $.get(content);
+    untrack(() => {
+      $_resHs().set($$props.resource, ceil(height($.get(el)) + 10));
+      $.store_set(_resHs, $_resHs());
+    });
+  });
   onMount(() => {
     if (isFunction($resourceLabelDidMount())) {
       $resourceLabelDidMount()({
@@ -5316,28 +5348,35 @@ $.delegate(["click"]);
 var root_1$3 = $.from_html(`<div role="rowheader"><!> <!></div>`);
 var root$5 = $.from_html(`<div><div></div> <div></div></div>`);
 function Sidebar($$anchor, $$props) {
-  $.push($$props, false);
+  $.push($$props, true);
   const [$$stores, $$cleanup] = $.setup_stores();
+  const $_viewResources = () => $.store_get(_viewResources, "$_viewResources", $$stores);
+  const $_resHs = () => $.store_get(_resHs, "$_resHs", $$stores);
   const $_bodyEl = () => $.store_get(_bodyEl, "$_bodyEl", $$stores);
   const $theme = () => $.store_get(theme, "$theme", $$stores);
   const $_headerHeight = () => $.store_get(_headerHeight, "$_headerHeight", $$stores);
   const $_sidebarEl = () => $.store_get(_sidebarEl, "$_sidebarEl", $$stores);
-  const $_viewResources = () => $.store_get(_viewResources, "$_viewResources", $$stores);
-  const $_resHs = () => $.store_get(_resHs, "$_resHs", $$stores);
+  const $_daysHs = () => $.store_get(_daysHs, "$_daysHs", $$stores);
   const $_nestedResources = () => $.store_get(_nestedResources, "$_nestedResources", $$stores);
   let {
     _viewResources,
     _headerHeight,
     _bodyEl,
+    _daysHs,
     _resHs,
     _sidebarEl,
     _nestedResources,
     theme
   } = getContext("state");
+  $.user_pre_effect(() => {
+    $_viewResources();
+    untrack(() => {
+      $_resHs().clear();
+    });
+  });
   function onwheel(jsEvent) {
     $_bodyEl().scrollBy({ top: jsEvent.deltaY < 0 ? -30 : 30 });
   }
-  $.init();
   var div = root$5();
   var div_1 = $.child(div);
   var div_2 = $.sibling(div_1, 2);
@@ -5368,7 +5407,9 @@ function Sidebar($$anchor, $$props) {
         $.set_class(div_3, 1, $theme().resource);
         $.set_style(div_3, `flex-basis: ${$0 ?? ""}px`);
       },
-      [() => max($_resHs().get($.get(resource)) ?? 0, 34)]
+      [
+        () => max($_daysHs().get($.get(resource)) ?? 0, $_resHs().get($.get(resource)) ?? 0, 34)
+      ]
     );
     $.append($$anchor2, div_3);
   });
@@ -5500,11 +5541,11 @@ function Header($$anchor, $$props) {
   $.pop();
   $$cleanup();
 }
-function prepareEventChunks(chunks, $_viewDates, $_dayTimeLimits, $slotDuration) {
+function prepareEventChunks(chunks, $_viewDates, $_dayTimeLimits, $slotDuration, $eventOrder) {
   let longChunks = {};
   let filteredChunks = [];
   if (chunks.length) {
-    sortEventChunks(chunks);
+    sortEventChunks(chunks, $eventOrder);
     let step = toSeconds($slotDuration);
     let prevChunk;
     for (let chunk of chunks) {
@@ -5843,21 +5884,24 @@ function Days($$anchor, $$props) {
   const $_dayTimeLimits = () => $.store_get(_dayTimeLimits, "$_dayTimeLimits", $$stores);
   const $_filteredEvents = () => $.store_get(_filteredEvents, "$_filteredEvents", $$stores);
   const $slotDuration = () => $.store_get(slotDuration, "$slotDuration", $$stores);
+  const $eventOrder = () => $.store_get(eventOrder, "$eventOrder", $$stores);
   const $_iEvents = () => $.store_get(_iEvents, "$_iEvents", $$stores);
-  const $_resHs = () => $.store_get(_resHs, "$_resHs", $$stores);
+  const $_daysHs = () => $.store_get(_daysHs, "$_daysHs", $$stores);
   const $theme = () => $.store_get(theme, "$theme", $$stores);
+  const $_resHs = () => $.store_get(_resHs, "$_resHs", $$stores);
   let {
     _viewDates,
     _filteredEvents,
     _iEvents,
-    _resHs,
     _dayTimeLimits,
+    _daysHs,
+    _resHs,
+    eventOrder,
     slotDuration,
     theme,
     validRange
   } = getContext("state");
   let refs = [];
-  let height2 = $.state(0);
   let $$d = $.derived(() => {
     let start2 = cloneDate(limitToRange($_viewDates()[0], $validRange()));
     let end2 = cloneDate(limitToRange($_viewDates().at(-1), $validRange()));
@@ -5885,24 +5929,23 @@ function Days($$anchor, $$props) {
         }
       }
     }
-    [bgChunks2] = prepareEventChunks(bgChunks2, $_viewDates(), $_dayTimeLimits(), $slotDuration());
-    [chunks2, longChunks2] = prepareEventChunks(chunks2, $_viewDates(), $_dayTimeLimits(), $slotDuration());
+    [bgChunks2] = prepareEventChunks(bgChunks2, $_viewDates(), $_dayTimeLimits(), $slotDuration(), $eventOrder());
+    [chunks2, longChunks2] = prepareEventChunks(chunks2, $_viewDates(), $_dayTimeLimits(), $slotDuration(), $eventOrder());
     return [chunks2, bgChunks2, longChunks2];
   }), $$array_3 = $.derived(() => $.to_array($.get($$d_1), 3)), chunks = $.derived(() => $.get($$array_3)[0]), bgChunks = $.derived(() => $.get($$array_3)[1]), longChunks = $.derived(() => $.get($$array_3)[2]);
   let iChunks = $.derived(() => $_iEvents().map((event) => {
     let chunk;
     if (event && eventIntersects(event, $.get(start), $.get(end), $$props.resource)) {
       chunk = createEventChunk(event, $.get(start), $.get(end));
-      [[chunk]] = prepareEventChunks([chunk], $_viewDates(), $_dayTimeLimits(), $slotDuration());
+      [[chunk]] = prepareEventChunks([chunk], $_viewDates(), $_dayTimeLimits(), $slotDuration(), $eventOrder());
     } else {
       chunk = null;
     }
     return chunk;
   }));
   function reposition() {
-    $.set(height2, ceil(max(...runReposition(refs, $_viewDates()))) + 10);
-    $_resHs().set($$props.resource, $.get(height2));
-    $.store_set(_resHs, $_resHs());
+    $_daysHs().set($$props.resource, ceil(max(...runReposition(refs, $_viewDates()))) + 10);
+    $.store_set(_daysHs, $_daysHs());
   }
   var div = root$2();
   $.each(div, 5, $_viewDates, $.index, ($$anchor2, date, i) => {
@@ -5938,7 +5981,9 @@ function Days($$anchor, $$props) {
       $.set_class(div, 1, $theme().days);
       $.set_style(div, `flex-basis: ${$0 ?? ""}px`);
     },
-    [() => max($.get(height2), 34)]
+    [
+      () => max($_daysHs().get($$props.resource) ?? 0, $_resHs().get($$props.resource) ?? 0, 34)
+    ]
   );
   $.append($$anchor, div);
   var $$pop = $.pop({ reposition });
@@ -5956,7 +6001,7 @@ function Body($$anchor, $$props) {
   const $scrollTime = () => $.store_get(scrollTime, "$scrollTime", $$stores);
   const $slotDuration = () => $.store_get(slotDuration, "$slotDuration", $$stores);
   const $slotWidth = () => $.store_get(slotWidth, "$slotWidth", $$stores);
-  const $_resHs = () => $.store_get(_resHs, "$_resHs", $$stores);
+  const $_daysHs = () => $.store_get(_daysHs, "$_daysHs", $$stores);
   const $_viewResources = () => $.store_get(_viewResources, "$_viewResources", $$stores);
   const $_filteredEvents = () => $.store_get(_filteredEvents, "$_filteredEvents", $$stores);
   const $_headerEl = () => $.store_get(_headerEl, "$_headerEl", $$stores);
@@ -5974,7 +6019,7 @@ function Body($$anchor, $$props) {
     _dayTimes,
     _dayTimeLimits,
     _recheckScrollable,
-    _resHs,
+    _daysHs,
     _viewResources,
     _viewDates,
     scrollTime,
@@ -5994,7 +6039,7 @@ function Body($$anchor, $$props) {
     untrack(scrollToTime);
   });
   function reposition() {
-    $_resHs().clear();
+    $_daysHs().clear();
     runReposition(refs, $_viewResources());
   }
   $.user_effect(() => {
@@ -6219,6 +6264,7 @@ const index = {
     state._headerHeight = writable(0);
     state._dayTimeLimits = dayTimeLimits(state);
     state._dayTimes = dayTimes(state);
+    state._daysHs = writable(/* @__PURE__ */ new Map());
     state._nestedResources = nestedResources(state);
     state._resHs = writable(/* @__PURE__ */ new Map());
     state._sidebarEl = writable(void 0);

package/package.json CHANGED Viewed

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

package/src/lib/events.js CHANGED Viewed

@@ -66,9 +66,25 @@ export function createEventChunk(event, start, end) {
     return chunk;
 }
-export function sortEventChunks(chunks) {
-    // Sort by start date (all-day events always on top)
-    chunks.sort((a, b) => a.start - b.start || b.event.allDay - a.event.allDay);
+export function sortEventChunks(chunks, eventOrder) {
+    if (isFunction(eventOrder)) {
+        chunks.sort((a, b) => eventOrder(
+            _toChunkWithLocalDates(a),
+            _toChunkWithLocalDates(b)
+        ));
+    } else {
+        // Sort by start date (all-day events always on top)
+        chunks.sort((a, b) => a.start - b.start || b.event.allDay - a.event.allDay);
+    }
+}
+function _toChunkWithLocalDates(chunk) {
+    return {
+        ...chunk,
+        start: toLocalDate(chunk.start),
+        end: toLocalDate(chunk.end),
+        event: toEventWithLocalDates(chunk.event)
+    };
 }
 export function createEventContent(chunk, displayEventEnd, eventContent, theme, _intlEventTime, _view) {
@@ -156,11 +172,11 @@ function _cloneEvent(event, dateFn) {
 /**
  * Prepare event chunks for month view and all-day slot in week view
  */
-export function prepareEventChunks(chunks, hiddenDays) {
+export function prepareEventChunks(chunks, hiddenDays, eventOrder) {
     let longChunks = {};
     if (chunks.length) {
-        sortEventChunks(chunks);
+        sortEventChunks(chunks, eventOrder);
         let prevChunk;
         for (let chunk of chunks) {

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

@@ -8,8 +8,8 @@
     let {dates} = $props();
-    let {_filteredEvents, _iEvents,
-        resources, filterEventsWithResources, hiddenDays, theme, validRange } = getContext('state');
+    let {_filteredEvents, _iEvents, resources, eventOrder, filterEventsWithResources, hiddenDays, theme,
+        validRange} = getContext('state');
     let refs = [];
@@ -31,8 +31,8 @@
                 }
             }
         }
-        prepareEventChunks(bgChunks, $hiddenDays);
-        let longChunks = prepareEventChunks(chunks, $hiddenDays);
+        prepareEventChunks(bgChunks, $hiddenDays, $eventOrder);
+        let longChunks = prepareEventChunks(chunks, $hiddenDays, $eventOrder);
         return [chunks, bgChunks, longChunks];
     });
@@ -40,7 +40,7 @@
         let chunk;
         if (event && eventIntersects(event, start, end)) {
             chunk = createEventChunk(event, start, end);
-            prepareEventChunks([chunk], $hiddenDays);
+            prepareEventChunks([chunk], $hiddenDays, $eventOrder);
         } else {
             chunk = null;
         }

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

@@ -9,7 +9,7 @@
     let {date} = $props();
     let {_filteredEvents, _interaction, _intlListDay, _intlListDaySide, _today,
-        resources, filterEventsWithResources, highlightedDates, theme, validRange} = getContext('state');
+        resources, eventOrder, filterEventsWithResources, highlightedDates, theme, validRange} = getContext('state');
     let el = $state();
     let isToday = $derived(datesEqual(date, $_today));
@@ -28,7 +28,7 @@
                     chunks.push(chunk);
                 }
             }
-            sortEventChunks(chunks);
+            sortEventChunks(chunks, $eventOrder);
         }
         return chunks;
     });

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

@@ -5,7 +5,7 @@
     import Days from './Days.svelte';
     let {_bodyEl, _bodyHeight, _bodyWidth, _bodyScrollLeft, _headerEl, _filteredEvents, _sidebarEl, _dayTimes, _dayTimeLimits,
-        _recheckScrollable, _resHs, _viewResources, _viewDates, scrollTime, slotDuration, slotWidth, theme} = getContext('state');
+        _recheckScrollable, _daysHs, _viewResources, _viewDates, scrollTime, slotDuration, slotWidth, theme} = getContext('state');
     let refs = [];
@@ -21,7 +21,7 @@
     });
     function reposition() {
-        $_resHs.clear();
+        $_daysHs.clear();
         runReposition(refs, $_viewResources);
     }
     $effect(() => {

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

@@ -9,12 +9,10 @@
     let {resource} = $props();
-    let {
-        _viewDates, _filteredEvents, _iEvents, _resHs, _dayTimeLimits, slotDuration, theme, validRange
-    } = getContext('state');
+    let {_viewDates, _filteredEvents, _iEvents, _dayTimeLimits, _daysHs, _resHs,
+        eventOrder, slotDuration, theme, validRange} = getContext('state');
     let refs = [];
-    let height = $state(0);
     let [start, end] = $derived.by(() => {
         let start = cloneDate(limitToRange($_viewDates[0], $validRange));
@@ -44,8 +42,8 @@
                 }
             }
         }
-        [bgChunks] = prepareEventChunks(bgChunks, $_viewDates, $_dayTimeLimits, $slotDuration);
-        [chunks, longChunks] = prepareEventChunks(chunks, $_viewDates, $_dayTimeLimits, $slotDuration);
+        [bgChunks] = prepareEventChunks(bgChunks, $_viewDates, $_dayTimeLimits, $slotDuration, $eventOrder);
+        [chunks, longChunks] = prepareEventChunks(chunks, $_viewDates, $_dayTimeLimits, $slotDuration, $eventOrder);
         return [chunks, bgChunks, longChunks];
     });
@@ -53,7 +51,7 @@
         let chunk;
         if (event && eventIntersects(event, start, end, resource)) {
             chunk = createEventChunk(event, start, end);
-            [[chunk]] = prepareEventChunks([chunk], $_viewDates, $_dayTimeLimits, $slotDuration);
+            [[chunk]] = prepareEventChunks([chunk], $_viewDates, $_dayTimeLimits, $slotDuration, $eventOrder);
         } else {
             chunk = null;
         }
@@ -61,13 +59,12 @@
     }));
     export function reposition() {
-        height = ceil(max(...runReposition(refs, $_viewDates))) + 10;
-        $_resHs.set(resource, height);
-        $_resHs = $_resHs;
+        $_daysHs.set(resource, ceil(max(...runReposition(refs, $_viewDates))) + 10);
+        $_daysHs = $_daysHs;
     }
 </script>
-<div class="{$theme.days}" style="flex-basis: {max(height, 34)}px" role="row">
+<div class="{$theme.days}" style="flex-basis: {max($_daysHs.get(resource) ?? 0, $_resHs.get(resource) ?? 0, 34)}px" role="row">
     {#each $_viewDates as date, i}
         <!-- svelte-ignore binding_property_non_reactive -->
         <Day {date} {resource} {chunks} {bgChunks} {longChunks} {iChunks} bind:this={refs[i]}/>

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

@@ -1,10 +1,10 @@
 <script>
-    import {getContext, onMount} from 'svelte';
-    import {setContent, toLocalDate, isFunction} from '#lib';
+    import {getContext, onMount, untrack} from 'svelte';
+    import {ceil, height, setContent, toLocalDate, isFunction} from '#lib';
     let {resource, date = undefined} = $props();
-    let {resourceLabelContent, resourceLabelDidMount} = getContext('state');
+    let {resourceLabelContent, resourceLabelDidMount, _resHs} = getContext('state');
     let el = $state();
     // Content
@@ -21,6 +21,14 @@
         }
     });
+    $effect(() => {
+        content;
+        untrack(() => {
+            $_resHs.set(resource, ceil(height(el) + 10));
+            $_resHs = $_resHs;
+        });
+    });
     onMount(() => {
         if (isFunction($resourceLabelDidMount)) {
             $resourceLabelDidMount({

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

@@ -1,10 +1,17 @@
 <script>
-    import {getContext} from 'svelte';
+    import {getContext, untrack} from 'svelte';
     import {max} from '#lib';
     import Label from './Label.svelte';
     import Expander from './Expander.svelte';
-    let {_viewResources, _headerHeight, _bodyEl, _resHs, _sidebarEl, _nestedResources, theme} = getContext('state');
+    let {_viewResources, _headerHeight, _bodyEl, _daysHs, _resHs, _sidebarEl, _nestedResources, theme} = getContext('state');
+    $effect.pre(() => {
+        $_viewResources;
+        untrack(() => {
+            $_resHs.clear();
+        });
+    });
     function onwheel(jsEvent) {
         $_bodyEl.scrollBy({
@@ -17,7 +24,7 @@
     <div class="{$theme.sidebarTitle}" style="flex-basis: {$_headerHeight}px"></div>
     <div class="{$theme.content}" bind:this={$_sidebarEl} {onwheel}>
         {#each $_viewResources as resource}
-            <div class="{$theme.resource}" style="flex-basis: {max($_resHs.get(resource) ?? 0, 34)}px" role="rowheader">
+            <div class="{$theme.resource}" style="flex-basis: {max($_daysHs.get(resource) ?? 0, $_resHs.get(resource) ?? 0, 34)}px" role="rowheader">
                 {#if $_nestedResources}
                     <Expander {resource} />
                 {/if}

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

@@ -58,6 +58,7 @@ export default {
 		state._headerHeight = writable(0);
 		state._dayTimeLimits = dayTimeLimits(state);  // flexible time limits per day
 		state._dayTimes = dayTimes(state);
+		state._daysHs = writable(new Map());  // days row heights
 		state._nestedResources = nestedResources(state);
 		state._resHs = writable(new Map());  // resource row heights
 		state._sidebarEl = writable(undefined);

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

@@ -1,11 +1,11 @@
 import {addDay, addDuration, cloneDate, createDuration, datesEqual, sortEventChunks, toSeconds} from '#lib';
-export function prepareEventChunks(chunks, $_viewDates, $_dayTimeLimits, $slotDuration) {
+export function prepareEventChunks(chunks, $_viewDates, $_dayTimeLimits, $slotDuration, $eventOrder) {
     let longChunks = {};
     let filteredChunks = [];
     if (chunks.length) {
-        sortEventChunks(chunks);
+        sortEventChunks(chunks, $eventOrder);
         let step = toSeconds($slotDuration);
         let prevChunk;

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

@@ -11,7 +11,7 @@
     let {date, resource = undefined} = $props();
     let {_filteredEvents, _iEvents, highlightedDates, nowIndicator, slotDuration, slotHeight, filterEventsWithResources,
-        theme, resources, validRange, _interaction, _today, _slotTimeLimits} = getContext('state');
+        eventOrder, theme, resources, validRange, _interaction, _today, _slotTimeLimits} = getContext('state');
     let el = $state();
@@ -39,7 +39,7 @@
                 }
             }
         }
-        groupEventChunks(chunks);
+        groupEventChunks(chunks, $eventOrder);
         return [chunks, bgChunks];
     });

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

@@ -1,6 +1,6 @@
 <script>
     import {getContext, onMount} from 'svelte';
-    import {datesEqual, outsideRange, runReposition, setPayload} from '../../../lib';
+    import {datesEqual, outsideRange, runReposition, setPayload} from '#lib';
     import Event from './Event.svelte';
     let {date, chunks, bgChunks, longChunks, iChunks = [], resource = undefined} = $props();

package/src/plugins/time-grid/all-day/Week.svelte CHANGED Viewed

@@ -2,12 +2,13 @@
     import {getContext, untrack} from 'svelte';
     import {
         addDay, bgEvent, cloneDate, createEventChunk, eventIntersects, limitToRange, prepareEventChunks, runReposition
-    } from '../../../lib';
+    } from '#lib';
     import Day from './Day.svelte';
     let {dates, resource = undefined} = $props();
-    let {_filteredEvents, _iEvents, hiddenDays, resources, filterEventsWithResources, validRange } = getContext('state');
+    let {_filteredEvents, _iEvents, eventOrder, hiddenDays, resources, filterEventsWithResources,
+        validRange} = getContext('state');
     let refs = [];
@@ -31,8 +32,8 @@
                 }
             }
         }
-        prepareEventChunks(bgChunks, $hiddenDays);
-        let longChunks = prepareEventChunks(chunks, $hiddenDays);
+        prepareEventChunks(bgChunks, $hiddenDays, $eventOrder);
+        let longChunks = prepareEventChunks(chunks, $hiddenDays, $eventOrder);
         return [chunks, bgChunks, longChunks];
     });
@@ -48,7 +49,7 @@
         let chunk;
         if (event && event.allDay && eventIntersects(event, start, end, resource)) {
             chunk = createEventChunk(event, start, end);
-            prepareEventChunks([chunk], $hiddenDays);
+            prepareEventChunks([chunk], $hiddenDays, $eventOrder);
         } else {
             chunk = null;
         }

package/src/plugins/time-grid/utils.js CHANGED Viewed

@@ -1,11 +1,11 @@
 import {isFunction, sortEventChunks} from '#lib';
-export function groupEventChunks(chunks) {
+export function groupEventChunks(chunks, $eventOrder) {
     if (!chunks.length) {
         return;
     }
-    sortEventChunks(chunks);
+    sortEventChunks(chunks, $eventOrder);
     // Group
     let group = {

package/src/storage/options.js CHANGED Viewed

@@ -33,6 +33,7 @@ export function createOptions(plugins) {
         eventFilter: undefined,    // ec option
         eventMouseEnter: undefined,
         eventMouseLeave: undefined,
+        eventOrder: undefined,
         eventSources: [],
         eventTextColor: undefined,
         eventTimeFormat: {

package/src/styles/timeline.scss CHANGED Viewed

@@ -145,6 +145,7 @@
       span {
         padding-top: 8px;
+        height: fit-content;
       }
     }
   }