@event-calendar/core 5.0.3 → 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 (10) hide show
  1. package/README.md +2 -2
  2. package/dist/index.css +1 -1
  3. package/dist/index.js +30 -11
  4. package/package.json +1 -1
  5. package/src/lib/components/BaseDay.svelte +1 -1
  6. package/src/lib/view.js +4 -0
  7. package/src/plugins/interaction/Action.svelte +10 -7
  8. package/src/plugins/resource-timeline/Day.svelte +8 -4
  9. package/src/plugins/time-grid/Day.svelte +7 -3
  10. package/src/storage/stores.js +3 -2
package/README.md CHANGED
@@ -245,8 +245,8 @@ This bundle contains a version of the calendar that includes all plugins and is
245
245
 
246
246
  The first step is to include the following lines of code in the `<head>` section of your page:
247
247
  ```html
248
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.0.3/dist/event-calendar.min.css">
249
- <script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.0.3/dist/event-calendar.min.js"></script>
248
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.0.4/dist/event-calendar.min.css">
249
+ <script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.0.4/dist/event-calendar.min.js"></script>
250
250
  ```
251
251
 
252
252
  <details>
package/dist/index.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * EventCalendar v5.0.3
2
+ * EventCalendar v5.0.4
3
3
  * https://github.com/vkurko/calendar
4
4
  */
5
5
  .ec {
package/dist/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * EventCalendar v5.0.3
2
+ * EventCalendar v5.0.4
3
3
  * https://github.com/vkurko/calendar
4
4
  */
5
5
  import { tick, getContext, untrack, setContext, onMount, mount, unmount } from "svelte";
@@ -340,6 +340,9 @@ function toViewWithLocalDates(view2) {
340
340
  function listView(view2) {
341
341
  return view2.startsWith("list");
342
342
  }
343
+ function timelineView(view2) {
344
+ return view2.includes("Timeline");
345
+ }
343
346
  let eventId = 1;
344
347
  function createEvents(input) {
345
348
  return input.map((event) => {
@@ -1065,9 +1068,10 @@ function now() {
1065
1068
  });
1066
1069
  }
1067
1070
  function today(state) {
1068
- let $today = createDate();
1071
+ let $today = setMidnight(createDate());
1069
1072
  let today2 = writable($today);
1070
- derived(state._now, ($_now) => setMidnight(cloneDate($_now))).subscribe((newToday) => {
1073
+ state._now.subscribe(($_now) => {
1074
+ let newToday = setMidnight(cloneDate($_now));
1071
1075
  if (!datesEqual($today, newToday)) {
1072
1076
  $today = newToday;
1073
1077
  today2.set(newToday);
@@ -1742,7 +1746,7 @@ function BaseDay($$anchor, $$props) {
1742
1746
  const $_interaction = () => $.store_get(_interaction, "$_interaction", $$stores);
1743
1747
  const [$$stores, $$cleanup] = $.setup_stores();
1744
1748
  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);
1745
- let { _interaction, _today, highlightedDates, theme } = getContext("state");
1749
+ let { _interaction, _today, theme } = getContext("state");
1746
1750
  let isToday = $.derived(() => datesEqual($$props.date, $_today()));
1747
1751
  let classNames = $.derived(() => classes()([
1748
1752
  $theme().day,
@@ -3103,7 +3107,7 @@ function Action($$anchor, $$props) {
3103
3107
  return findPayload(dayEl.previousElementSibling);
3104
3108
  }
3105
3109
  } else {
3106
- if (selecting() && payload.resource && !$_iEvents()[0].resourceIds.includes(payload.resource.id)) {
3110
+ if (selecting() && payload.resource && !$_iEvents()[0].resourceIds.includes(payload.resource.id) && !timelineView($view())) {
3107
3111
  if (toX > fromX) {
3108
3112
  return findPayload(dayEl.previousElementSibling);
3109
3113
  } else {
@@ -3118,11 +3122,14 @@ function Action($$anchor, $$props) {
3118
3122
  function calcViewport() {
3119
3123
  let mainRect = rect($_mainEl());
3120
3124
  let gridRect = rect(gridEl);
3125
+ let scaleX = mainRect.width / $_mainEl().offsetWidth;
3126
+ let scaleY = mainRect.height / $_mainEl().offsetHeight;
3127
+ let rtl = isRtl();
3121
3128
  viewport = {
3122
- left: max(0, gridRect.left + $_mainEl().scrollLeft),
3123
- right: min(document.documentElement.clientWidth, mainRect.left + $_mainEl().clientWidth) - 2,
3124
- top: max(0, gridRect.top + (!allDaySlot ? $_mainEl().scrollTop : 0)),
3125
- bottom: min(document.documentElement.clientHeight, !allDaySlot ? mainRect.top + $_mainEl().clientHeight : gridRect.bottom) - 2
3129
+ left: max(0, rtl ? mainRect.right - $_mainEl().clientWidth * scaleX : gridRect.left + $_mainEl().scrollLeft * scaleX),
3130
+ right: min(document.documentElement.clientWidth, rtl ? gridRect.right + $_mainEl().scrollLeft * scaleX : mainRect.left + $_mainEl().clientWidth * scaleX) - 2,
3131
+ top: max(0, gridRect.top + (!allDaySlot ? $_mainEl().scrollTop : 0) * scaleY),
3132
+ bottom: min(document.documentElement.clientHeight, !allDaySlot ? mainRect.top + $_mainEl().clientHeight * scaleY : gridRect.bottom) - 2
3126
3133
  };
3127
3134
  }
3128
3135
  function createIEvent(jsEvent, callback) {
@@ -4105,7 +4112,13 @@ function Day$1($$anchor, $$props) {
4105
4112
  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);
4106
4113
  let el = $.state(void 0);
4107
4114
  function dateFromPoint(x, y) {
4108
- return allDay() ? $.get(date) : addDuration(cloneDate($.get(start)), $slotDuration(), floor((y - rect($.get(el)).top) / $slotHeight()));
4115
+ if (allDay()) {
4116
+ return $.get(date);
4117
+ } else {
4118
+ let dayRect = rect($.get(el));
4119
+ let scaleY = dayRect.height / $.get(el).offsetHeight;
4120
+ return addDuration(cloneDate($.get(start)), $slotDuration(), floor((y - dayRect.top) / ($slotHeight() * scaleY)));
4121
+ }
4109
4122
  }
4110
4123
  BaseDay($$anchor, {
4111
4124
  get date() {
@@ -5015,7 +5028,13 @@ function Day($$anchor, $$props) {
5015
5028
  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);
5016
5029
  let el = $.state(void 0);
5017
5030
  function dateFromPoint(x, y) {
5018
- return $_monthView() ? $.get(date) : addDuration(cloneDate($.get(start)), $slotDuration(), floor((x - rect($.get(el)).left) / $slotWidth()));
5031
+ if ($_monthView()) {
5032
+ return $.get(date);
5033
+ } else {
5034
+ let dayRect = rect($.get(el));
5035
+ let scaleX = dayRect.width / $.get(el).offsetWidth;
5036
+ return addDuration(cloneDate($.get(start)), $slotDuration(), floor((isRtl() ? dayRect.right - x : x - dayRect.left) / ($slotWidth() * scaleX)));
5037
+ }
5019
5038
  }
5020
5039
  BaseDay($$anchor, {
5021
5040
  get allDay() {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@event-calendar/core",
3
- "version": "5.0.3",
3
+ "version": "5.0.4",
4
4
  "title": "Event Calendar Core package",
5
5
  "description": "Full-sized drag & drop event calendar with resource & timeline views",
6
6
  "keywords": [
package/src/lib/components/BaseDay.svelte CHANGED
@@ -17,7 +17,7 @@
17
17
  children
18
18
  } = $props();
19
19
 
20
- let {_interaction, _today, highlightedDates, theme} = getContext('state');
20
+ let {_interaction, _today, theme} = getContext('state');
21
21
 
22
22
  let isToday = $derived(datesEqual(date, $_today));
23
23
 
package/src/lib/view.js CHANGED
@@ -26,3 +26,7 @@ export function toViewWithLocalDates(view) {
26
26
  export function listView(view) {
27
27
  return view.startsWith('list');
28
28
  }
29
+
30
+ export function timelineView(view) {
31
+ return view.includes('Timeline');
32
+ }
package/src/plugins/interaction/Action.svelte CHANGED
@@ -2,8 +2,8 @@
2
2
  import {getContext, onMount} from 'svelte';
3
3
  import {
4
4
  addDay, addDuration, ancestor, assign, cloneDate, cloneEvent, copyTime, createDuration, getElementWithPayload,
5
- getPayload, isFunction, listen, listView, max, min, noop, rect, runAll, subtractDay, subtractDuration,
6
- toEventWithLocalDates, toISOString, toLocalDate, toViewWithLocalDates
5
+ getPayload, isFunction, isRtl, listen, listView, max, min, noop, rect, runAll, subtractDay, subtractDuration,
6
+ timelineView, toEventWithLocalDates, toISOString, toLocalDate, toViewWithLocalDates
7
7
  } from '#lib';
8
8
  import {animate, limit, eventDraggable} from './lib';
9
9
 
@@ -417,7 +417,7 @@
417
417
  return findPayload(dayEl.previousElementSibling);
418
418
  }
419
419
  } else {
420
- if (selecting() && payload.resource && !$_iEvents[0].resourceIds.includes(payload.resource.id)) {
420
+ if (selecting() && payload.resource && !$_iEvents[0].resourceIds.includes(payload.resource.id) && !timelineView($view)) {
421
421
  if (toX > fromX) {
422
422
  return findPayload(dayEl.previousElementSibling);
423
423
  } else {
@@ -433,11 +433,14 @@
433
433
  function calcViewport() {
434
434
  let mainRect = rect($_mainEl);
435
435
  let gridRect = rect(gridEl);
436
+ let scaleX = mainRect.width / $_mainEl.offsetWidth;
437
+ let scaleY = mainRect.height / $_mainEl.offsetHeight;
438
+ let rtl = isRtl();
436
439
  viewport = {
437
- left: max(0, gridRect.left + $_mainEl.scrollLeft),
438
- right: min(document.documentElement.clientWidth, mainRect.left + $_mainEl.clientWidth) - 2,
439
- top: max(0, gridRect.top + (!allDaySlot ? $_mainEl.scrollTop : 0)),
440
- bottom: min(document.documentElement.clientHeight, !allDaySlot ? mainRect.top + $_mainEl.clientHeight : gridRect.bottom) - 2
440
+ left: max(0, rtl ? mainRect.right - $_mainEl.clientWidth * scaleX : gridRect.left + $_mainEl.scrollLeft * scaleX),
441
+ right: min(document.documentElement.clientWidth, rtl ? gridRect.right + $_mainEl.scrollLeft * scaleX : mainRect.left + $_mainEl.clientWidth * scaleX) - 2,
442
+ top: max(0, gridRect.top + (!allDaySlot ? $_mainEl.scrollTop : 0) * scaleY),
443
+ bottom: min(document.documentElement.clientHeight, !allDaySlot ? mainRect.top + $_mainEl.clientHeight * scaleY : gridRect.bottom) - 2
441
444
  };
442
445
  }
443
446
 
package/src/plugins/resource-timeline/Day.svelte CHANGED
@@ -1,6 +1,6 @@
1
1
  <script>
2
2
  import {getContext} from 'svelte';
3
- import {addDuration, cloneDate, floor, rect} from '#lib';
3
+ import {addDuration, cloneDate, floor, isRtl, rect} from '#lib';
4
4
  import {BaseDay} from '#components';
5
5
 
6
6
  let {day, noIeb, noBeb} = $props();
@@ -12,9 +12,13 @@
12
12
  let el = $state();
13
13
 
14
14
  function dateFromPoint(x, y) {
15
- return $_monthView
16
- ? date
17
- : addDuration(cloneDate(start), $slotDuration, floor((x - rect(el).left)/ $slotWidth));
15
+ if ($_monthView) {
16
+ return date;
17
+ } else {
18
+ let dayRect = rect(el);
19
+ let scaleX = dayRect.width / el.offsetWidth;
20
+ return addDuration(cloneDate(start), $slotDuration, floor((isRtl() ? dayRect.right - x : x - dayRect.left) / ($slotWidth * scaleX)));
21
+ }
18
22
  }
19
23
  </script>
20
24
 
package/src/plugins/time-grid/Day.svelte CHANGED
@@ -12,9 +12,13 @@
12
12
  let el = $state();
13
13
 
14
14
  function dateFromPoint(x, y) {
15
- return allDay
16
- ? date
17
- : addDuration(cloneDate(start), $slotDuration, floor((y - rect(el).top) / $slotHeight));
15
+ if (allDay) {
16
+ return date;
17
+ } else {
18
+ let dayRect = rect(el);
19
+ let scaleY = dayRect.height / el.offsetHeight;
20
+ return addDuration(cloneDate(start), $slotDuration, floor((y - dayRect.top) / ($slotHeight * scaleY)));
21
+ }
18
22
  }
19
23
  </script>
20
24
 
package/src/storage/stores.js CHANGED
@@ -235,9 +235,10 @@ export function now() {
235
235
  }
236
236
 
237
237
  export function today(state) {
238
- let $today = createDate();
238
+ let $today = setMidnight(createDate());
239
239
  let today = writable($today);
240
- derived(state._now, $_now => setMidnight(cloneDate($_now))).subscribe(newToday => {
240
+ state._now.subscribe($_now => {
241
+ let newToday = setMidnight(cloneDate($_now));
241
242
  if (!datesEqual($today, newToday)) {
242
243
  $today = newToday;
243
244
  today.set(newToday);