npm - @event-calendar/core - Versions diffs - 5.0.2 → 5.0.4 - Mend

@event-calendar/core 5.0.2 → 5.0.4

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 (11) hide show

package/README.md +3 -3
package/dist/index.css +1 -1
package/dist/index.js +30 -11
package/package.json +1 -1
package/src/lib/components/BaseDay.svelte +1 -1
package/src/lib/view.js +4 -0
package/src/plugins/interaction/Action.svelte +10 -7
package/src/plugins/resource-timeline/Day.svelte +8 -4
package/src/plugins/time-grid/Day.svelte +7 -3
package/src/storage/stores.js +3 -2
package/src/styles/index.css +8 -8

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.2/dist/event-calendar.min.css">
-<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.0.2/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>
@@ -2284,7 +2284,7 @@ Defines the time slot width in pixels in `resourceTimeline` views.
 <details>
     <summary>Default</summary>
-`'{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', colHead: 'ec-col-head', day: 'ec-day', dayHead: 'ec-day-head', disabled: 'ec-disabled', event: 'ec-event', eventBody: 'ec-event-body', eventTime: 'ec-event-time', eventTitle: 'ec-event-title', events: 'ec-events', grid: 'ec-grid', header: 'ec-header', hidden: 'ec-hidden', highlight: 'ec-highlight', icon: 'ec-icon', main: 'ec-main', noIeb: 'ec-no-ieb', noBeb: 'ec-no-beb', today: 'ec-today', title: 'ec-title', toolbar: 'ec-toolbar', view: 'ec-list ec-week-view', weekdays":["ec-sun', ec-mon', ec-tue', ec-wed', ec-thu', ec-fri', ec-sat"],"draggable: 'ec-draggable', ghost: 'ec-ghost', preview: 'ec-preview', pointer: 'ec-pointer', resizer: 'ec-resizer', start: 'ec-start', dragging: 'ec-dragging', resizingY: 'ec-resizing-y', resizingX: 'ec-resizing-x', selecting: 'ec-selecting', uniform: 'ec-uniform', dayFoot: 'ec-day-foot', otherMonth: 'ec-other-month', popup: 'ec-popup', weekNumber: 'ec-week-number', daySide: 'ec-day-side', eventTag: 'ec-event-tag', noEvents: 'ec-no-events', nowIndicator: 'ec-now-indicator', sidebar: 'ec-sidebar', slot: 'ec-slot', colGroup: 'ec-col-group', expander: 'ec-expander', rowHead: 'ec-row-head', slots: 'ec-slots}'`
+`'{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', colHead: 'ec-col-head', day: 'ec-day', dayHead: 'ec-day-head', disabled: 'ec-disabled', event: 'ec-event', eventBody: 'ec-event-body', eventTime: 'ec-event-time', eventTitle: 'ec-event-title', events: 'ec-events', grid: 'ec-grid', header: 'ec-header', hidden: 'ec-hidden', highlight: 'ec-highlight', icon: 'ec-icon', main: 'ec-main', noIeb: 'ec-no-ieb', noBeb: 'ec-no-beb', today: 'ec-today', title: 'ec-title', toolbar: 'ec-toolbar', view: 'ec-list ec-week-view', weekdays: ['ec-sun', ec-mon', ec-tue', ec-wed', ec-thu', ec-fri', ec-sat'], draggable: 'ec-draggable', ghost: 'ec-ghost', preview: 'ec-preview', pointer: 'ec-pointer', resizer: 'ec-resizer', start: 'ec-start', dragging: 'ec-dragging', resizingY: 'ec-resizing-y', resizingX: 'ec-resizing-x', selecting: 'ec-selecting', uniform: 'ec-uniform', dayFoot: 'ec-day-foot', otherMonth: 'ec-other-month', popup: 'ec-popup', weekNumber: 'ec-week-number', daySide: 'ec-day-side', eventTag: 'ec-event-tag', noEvents: 'ec-no-events', nowIndicator: 'ec-now-indicator', sidebar: 'ec-sidebar', slot: 'ec-slot', colGroup: 'ec-col-group', expander: 'ec-expander', rowHead: 'ec-row-head', slots: 'ec-slots}'`
 > 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 v5.0.2
+ * EventCalendar v5.0.4
  * https://github.com/vkurko/calendar
  */
 .ec {

package/dist/index.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
- * EventCalendar v5.0.2
+ * EventCalendar v5.0.4
  * 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) => {
@@ -1065,9 +1068,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);
@@ -1742,7 +1746,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,
@@ -3103,7 +3107,7 @@ function Action($$anchor, $$props) {
           return findPayload(dayEl.previousElementSibling);
         }
       } else {
-        if (selecting() && payload.resource && !$_iEvents()[0].resourceIds.includes(payload.resource.id)) {
+        if (selecting() && payload.resource && !$_iEvents()[0].resourceIds.includes(payload.resource.id) && !timelineView($view())) {
           if (toX > fromX) {
             return findPayload(dayEl.previousElementSibling);
           } else {
@@ -3118,11 +3122,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 +4112,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() {
@@ -5015,7 +5028,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() {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@event-calendar/core",
-  "version": "5.0.2",
+  "version": "5.0.4",
   "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/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,7 @@
                     return findPayload(dayEl.previousElementSibling);
                 }
             } else {
-                if (selecting() && payload.resource && !$_iEvents[0].resourceIds.includes(payload.resource.id)) {
+                if (selecting() && payload.resource && !$_iEvents[0].resourceIds.includes(payload.resource.id) && !timelineView($view)) {
                     if (toX > fromX) {
                         return findPayload(dayEl.previousElementSibling);
                     } else {
@@ -433,11 +433,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/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/storage/stores.js CHANGED Viewed

@@ -235,9 +235,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

@@ -1,11 +1,11 @@
-@import "theme.css";
-@import "days.css";
-@import "toolbar.css";
-@import "sidebar.css";
-@import "slots.css";
-@import "events.css";
-@import "now-indicator.css";
-@import "popup.css";
+@import "./theme.css";
+@import "./days.css";
+@import "./toolbar.css";
+@import "./sidebar.css";
+@import "./slots.css";
+@import "./events.css";
+@import "./now-indicator.css";
+@import "./popup.css";
 .ec {
     display: flex;