@event-calendar/core 5.0.4 → 5.0.6

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 (14) hide show
  1. package/README.md +2 -2
  2. package/dist/index.css +5 -7
  3. package/dist/index.js +51 -19
  4. package/package.json +1 -1
  5. package/src/plugins/day-grid/View.svelte +11 -3
  6. package/src/plugins/interaction/Action.svelte +4 -1
  7. package/src/plugins/list/View.svelte +6 -2
  8. package/src/plugins/resource-timeline/View.svelte +21 -5
  9. package/src/plugins/time-grid/View.svelte +18 -3
  10. package/src/storage/state.js +1 -0
  11. package/src/storage/stores.js +3 -18
  12. package/src/styles/index.css +1 -1
  13. package/src/styles/sidebar.css +2 -4
  14. package/src/styles/slots.css +1 -1
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.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>
248
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.0.6/dist/event-calendar.min.css">
249
+ <script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.0.6/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.4
2
+ * EventCalendar v5.0.6
3
3
  * https://github.com/vkurko/calendar
4
4
  */
5
5
  .ec {
@@ -276,14 +276,12 @@
276
276
  inset-inline-start: 0;
277
277
  z-index: 1;
278
278
  background-color: var(--ec-bg-color);
279
- border-color: var(--ec-border-color);
280
- border-width: 1px;
281
- border-inline-end-style: solid;
279
+ border-inline-end: 1px solid var(--ec-border-color);
282
280
  text-align: end;
283
281
  overflow: clip;
284
282
 
285
283
  .ec-header & {
286
- border-block-end-style: solid;
284
+ border-block-end: 1px solid var(--ec-border-color);
287
285
  padding-block: .375rem;
288
286
  }
289
287
 
@@ -344,7 +342,7 @@
344
342
  .ec-time-grid & {
345
343
  block-size: calc(var(--ec-slot-height) * var(--ec-slot-label-periodicity));
346
344
  position: relative;
347
- inset-block-start: -.5em;
345
+ inset-block-start: -.5lh;
348
346
  }
349
347
 
350
348
  .ec-timeline & {
@@ -653,7 +651,7 @@
653
651
 
654
652
  .ec-timeline & {
655
653
  grid-template-columns: max-content repeat(var(--ec-grid-cols), min-content);
656
- grid-template-rows: max-content repeat(calc(var(--ec-grid-rows) - 1), auto) minmax(auto, 1fr);
654
+ grid-template-rows: max-content var(--ec-grid-rows);
657
655
  flex-grow: 1;
658
656
  }
659
657
 
package/dist/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * EventCalendar v5.0.4
2
+ * EventCalendar v5.0.6
3
3
  * https://github.com/vkurko/calendar
4
4
  */
5
5
  import { tick, getContext, untrack, setContext, onMount, mount, unmount } from "svelte";
@@ -888,21 +888,9 @@ function dayGrid(state) {
888
888
  }
889
889
  function activeRange(state) {
890
890
  return derived(
891
- [state._currentRange, state.firstDay, state.slotMaxTime, state._dayGrid],
892
- ([$_currentRange, $firstDay, $slotMaxTime, $_dayGrid]) => {
893
- let start = cloneDate($_currentRange.start);
894
- let end = cloneDate($_currentRange.end);
895
- if ($_dayGrid) {
896
- prevClosestDay(start, $firstDay);
897
- nextClosestDay(end, $firstDay);
898
- } else if ($slotMaxTime.days || $slotMaxTime.seconds > DAY_IN_SECONDS) {
899
- addDuration(subtractDay(end), $slotMaxTime);
900
- let start2 = subtractDay(cloneDate(end));
901
- if (start2 < start) {
902
- start = start2;
903
- }
904
- }
905
- return { start, end };
891
+ [state._currentRange, state._activeRangeExt],
892
+ ([$_currentRange, $_activeRangeExt]) => {
893
+ return $_activeRangeExt({ start: cloneDate($_currentRange.start), end: cloneDate($_currentRange.end) });
906
894
  }
907
895
  );
908
896
  }
@@ -1094,6 +1082,7 @@ class State {
1094
1082
  this._auxiliary = writable([]);
1095
1083
  this._dayGrid = dayGrid(this);
1096
1084
  this._currentRange = currentRange(this);
1085
+ this._activeRangeExt = writable(identity);
1097
1086
  this._activeRange = activeRange(this);
1098
1087
  this._fetchedRange = writable({ start: void 0, end: void 0 });
1099
1088
  this._events = events(this);
@@ -2486,6 +2475,7 @@ function View$3($$anchor, $$props) {
2486
2475
  const $highlightedDates = () => $.store_get(highlightedDates, "$highlightedDates", $$stores);
2487
2476
  const $_filteredEvents = () => $.store_get(_filteredEvents, "$_filteredEvents", $$stores);
2488
2477
  const $_iEvents = () => $.store_get(_iEvents, "$_iEvents", $$stores);
2478
+ const $firstDay = () => $.store_get(firstDay, "$firstDay", $$stores);
2489
2479
  const $_hiddenChunks = () => $.store_get(_hiddenChunks, "$_hiddenChunks", $$stores);
2490
2480
  const $_mainEl = () => $.store_get(_mainEl, "$_mainEl", $$stores);
2491
2481
  const $theme = () => $.store_get(theme, "$theme", $$stores);
@@ -2495,6 +2485,7 @@ function View$3($$anchor, $$props) {
2495
2485
  const $_popupDay = () => $.store_get(_popupDay, "$_popupDay", $$stores);
2496
2486
  const [$$stores, $$cleanup] = $.setup_stores();
2497
2487
  let {
2488
+ _activeRangeExt,
2498
2489
  _mainEl,
2499
2490
  _colsCount,
2500
2491
  _filteredEvents,
@@ -2505,6 +2496,7 @@ function View$3($$anchor, $$props) {
2505
2496
  _popupDay,
2506
2497
  _viewDates,
2507
2498
  dayMaxEvents,
2499
+ firstDay,
2508
2500
  highlightedDates,
2509
2501
  theme,
2510
2502
  validRange
@@ -2513,6 +2505,12 @@ function View$3($$anchor, $$props) {
2513
2505
  let grid = $.derived(() => createGrid$3($_viewDates(), $_colsCount(), $validRange(), $highlightedDates()));
2514
2506
  let $$d = $.derived(() => createEventChunks$2($_filteredEvents(), $.get(grid))), chunks = $.derived(() => $.get($$d).chunks), bgChunks = $.derived(() => $.get($$d).bgChunks);
2515
2507
  let iChunks = $.derived(() => createIEventChunks$2($_iEvents(), $.get(grid)));
2508
+ $.user_pre_effect(() => {
2509
+ $.store_set(_activeRangeExt, ({ start, end }) => ({
2510
+ start: prevClosestDay(start, $firstDay()),
2511
+ end: nextClosestDay(end, $firstDay())
2512
+ }));
2513
+ });
2516
2514
  let refs = [];
2517
2515
  function reposition() {
2518
2516
  $.store_set(_hiddenChunks, {});
@@ -3107,7 +3105,7 @@ function Action($$anchor, $$props) {
3107
3105
  return findPayload(dayEl.previousElementSibling);
3108
3106
  }
3109
3107
  } else {
3110
- if (selecting() && payload.resource && !$_iEvents()[0].resourceIds.includes(payload.resource.id) && !timelineView($view())) {
3108
+ if ((selecting() || resizing()) && payload.resource && !$_iEvents()[0].resourceIds.includes(payload.resource.id) && !timelineView($view())) {
3111
3109
  if (toX > fromX) {
3112
3110
  return findPayload(dayEl.previousElementSibling);
3113
3111
  } else {
@@ -3679,6 +3677,7 @@ function View$2($$anchor, $$props) {
3679
3677
  const $theme = () => $.store_get(theme, "$theme", $$stores);
3680
3678
  const [$$stores, $$cleanup] = $.setup_stores();
3681
3679
  let {
3680
+ _activeRangeExt,
3682
3681
  _mainEl,
3683
3682
  _filteredEvents,
3684
3683
  _view,
@@ -3687,6 +3686,9 @@ function View$2($$anchor, $$props) {
3687
3686
  noEventsContent,
3688
3687
  theme
3689
3688
  } = getContext("state");
3689
+ $.user_pre_effect(() => {
3690
+ $.store_set(_activeRangeExt, identity);
3691
+ });
3690
3692
  let noEvents = $.derived(() => {
3691
3693
  let noEvents2 = true;
3692
3694
  if ($_viewDates().length) {
@@ -4307,6 +4309,7 @@ function View$1($$anchor, $$props) {
4307
4309
  const $highlightedDates = () => $.store_get(highlightedDates, "$highlightedDates", $$stores);
4308
4310
  const $_filteredEvents = () => $.store_get(_filteredEvents, "$_filteredEvents", $$stores);
4309
4311
  const $_iEvents = () => $.store_get(_iEvents, "$_iEvents", $$stores);
4312
+ const $slotMaxTime = () => $.store_get(slotMaxTime, "$slotMaxTime", $$stores);
4310
4313
  const $scrollTime = () => $.store_get(scrollTime, "$scrollTime", $$stores);
4311
4314
  const $_mainEl = () => $.store_get(_mainEl, "$_mainEl", $$stores);
4312
4315
  const $slotDuration = () => $.store_get(slotDuration, "$slotDuration", $$stores);
@@ -4320,6 +4323,7 @@ function View$1($$anchor, $$props) {
4320
4323
  const $showNowIndicator = () => $.store_get(showNowIndicator, "$showNowIndicator", $$stores);
4321
4324
  const [$$stores, $$cleanup] = $.setup_stores();
4322
4325
  let {
4326
+ _activeRangeExt,
4323
4327
  _mainEl,
4324
4328
  _filteredEvents,
4325
4329
  _iEvents,
@@ -4336,6 +4340,7 @@ function View$1($$anchor, $$props) {
4336
4340
  scrollTime,
4337
4341
  slotHeight,
4338
4342
  slotDuration,
4343
+ slotMaxTime,
4339
4344
  theme,
4340
4345
  validRange
4341
4346
  } = getContext("state");
@@ -4344,6 +4349,18 @@ function View$1($$anchor, $$props) {
4344
4349
  let grid = $.derived(() => $$props.createGridFn?.() ?? createGrid$1($_viewDates(), $_slotTimeLimits(), $validRange(), $highlightedDates()));
4345
4350
  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);
4346
4351
  let $$d_1 = $.derived(() => createIEventChunks$1($_iEvents(), $.get(grid))), iChunks = $.derived(() => $.get($$d_1).iChunks), allDayIChunks = $.derived(() => $.get($$d_1).allDayIChunks);
4352
+ $.user_pre_effect(() => {
4353
+ $.store_set(_activeRangeExt, ({ start, end }) => {
4354
+ if ($slotMaxTime().days || $slotMaxTime().seconds > DAY_IN_SECONDS) {
4355
+ addDuration(subtractDay(end), $slotMaxTime());
4356
+ let start2 = subtractDay(cloneDate(end));
4357
+ if (start2 < start) {
4358
+ start = start2;
4359
+ }
4360
+ }
4361
+ return { start, end };
4362
+ });
4363
+ });
4347
4364
  $.user_effect(() => {
4348
4365
  $_viewDates();
4349
4366
  $scrollTime();
@@ -5313,6 +5330,7 @@ function View($$anchor, $$props) {
5313
5330
  const $highlightedDates = () => $.store_get(highlightedDates, "$highlightedDates", $$stores);
5314
5331
  const $_filteredEvents = () => $.store_get(_filteredEvents, "$_filteredEvents", $$stores);
5315
5332
  const $_iEvents = () => $.store_get(_iEvents, "$_iEvents", $$stores);
5333
+ const $slotMaxTime = () => $.store_get(slotMaxTime, "$slotMaxTime", $$stores);
5316
5334
  const $scrollTime = () => $.store_get(scrollTime, "$scrollTime", $$stores);
5317
5335
  const $_monthView = () => $.store_get(_monthView, "$_monthView", $$stores);
5318
5336
  const $_today = () => $.store_get(_today, "$_today", $$stores);
@@ -5329,6 +5347,7 @@ function View($$anchor, $$props) {
5329
5347
  const $nowIndicator = () => $.store_get(nowIndicator, "$nowIndicator", $$stores);
5330
5348
  const [$$stores, $$cleanup] = $.setup_stores();
5331
5349
  let {
5350
+ _activeRangeExt,
5332
5351
  _daySlots,
5333
5352
  _dayTimeLimits,
5334
5353
  _filteredEvents,
@@ -5347,6 +5366,7 @@ function View($$anchor, $$props) {
5347
5366
  scrollTime,
5348
5367
  slotDuration,
5349
5368
  slotHeight,
5369
+ slotMaxTime,
5350
5370
  slotWidth,
5351
5371
  theme,
5352
5372
  validRange
@@ -5355,6 +5375,18 @@ function View($$anchor, $$props) {
5355
5375
  let grid = $.derived(() => createGrid($_viewDates(), $_viewResources(), $_dayTimeLimits(), $validRange(), $highlightedDates()));
5356
5376
  let $$d = $.derived(() => createEventChunks($_filteredEvents(), $.get(grid))), chunks = $.derived(() => $.get($$d).chunks), bgChunks = $.derived(() => $.get($$d).bgChunks);
5357
5377
  let iChunks = $.derived(() => createIEventChunks($_iEvents(), $.get(grid)));
5378
+ $.user_pre_effect(() => {
5379
+ $.store_set(_activeRangeExt, ({ start, end }) => {
5380
+ if ($slotMaxTime().days || $slotMaxTime().seconds > DAY_IN_SECONDS) {
5381
+ addDuration(subtractDay(end), $slotMaxTime());
5382
+ let start2 = subtractDay(cloneDate(end));
5383
+ if (start2 < start) {
5384
+ start = start2;
5385
+ }
5386
+ }
5387
+ return { start, end };
5388
+ });
5389
+ });
5358
5390
  $.user_effect(() => {
5359
5391
  $_viewDates();
5360
5392
  $scrollTime();
@@ -5375,7 +5407,7 @@ function View($$anchor, $$props) {
5375
5407
  scrollLeft += toSeconds(slotTimeLimits2.max) - toSeconds(slotTimeLimits2.min);
5376
5408
  }
5377
5409
  }
5378
- $.store_mutate(_mainEl, $.untrack($_mainEl).scrollLeft = scrollLeft / toSeconds($slotDuration()) * $slotWidth() * (document.dir === "rtl" ? -1 : 1), $.untrack($_mainEl));
5410
+ $.store_mutate(_mainEl, $.untrack($_mainEl).scrollLeft = scrollLeft / toSeconds($slotDuration()) * $slotWidth() * (isRtl() ? -1 : 1), $.untrack($_mainEl));
5379
5411
  }
5380
5412
  let refs = [];
5381
5413
  function reposition() {
@@ -5569,7 +5601,7 @@ function View($$anchor, $$props) {
5569
5601
  $.set_class(section, 1, $theme().main);
5570
5602
  styles = $.set_style(section, "", styles, {
5571
5603
  "--ec-grid-cols": $.get(grid)[0].length,
5572
- "--ec-grid-rows": $.get(grid).length,
5604
+ "--ec-grid-rows": `${$.get(grid).length > 1 ? `repeat(${$.get(grid).length - 1}, auto)` : ""} minmax(auto, 1fr)`,
5573
5605
  "--ec-col-width": $columnWidth() ?? "minmax(4em, 1fr)",
5574
5606
  "--ec-slot-label-periodicity": $_slotLabelPeriodicity(),
5575
5607
  "--ec-slot-height": `${$slotHeight() ?? ""}px`,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@event-calendar/core",
3
- "version": "5.0.4",
3
+ "version": "5.0.6",
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/plugins/day-grid/View.svelte CHANGED
@@ -1,19 +1,27 @@
1
1
  <script>
2
2
  import {getContext} from 'svelte';
3
- import {contentFrom, resizeObserver, runReposition} from '#lib';
3
+ import {contentFrom, identity, nextClosestDay, prevClosestDay, resizeObserver, runReposition} from '#lib';
4
4
  import Day from './Day.svelte';
5
5
  import Event from './Event.svelte';
6
6
  import Popup from './Popup.svelte';
7
7
  import {createEventChunks, createIEventChunks, createGrid} from './lib.js';
8
8
 
9
- let {_mainEl, _colsCount, _filteredEvents, _hiddenChunks, _iEvents, _intlDayHeader, _intlDayHeaderAL, _popupDay,
10
- _viewDates, dayMaxEvents, highlightedDates, theme, validRange} = getContext('state');
9
+ let {_activeRangeExt, _mainEl, _colsCount, _filteredEvents, _hiddenChunks, _iEvents, _intlDayHeader,
10
+ _intlDayHeaderAL, _popupDay, _viewDates, dayMaxEvents, firstDay, highlightedDates, theme,
11
+ validRange} = getContext('state');
11
12
 
12
13
  let gridEl = $state();
13
14
  let grid = $derived(createGrid($_viewDates, $_colsCount, $validRange, $highlightedDates));
14
15
  let {chunks, bgChunks} = $derived(createEventChunks($_filteredEvents, grid));
15
16
  let iChunks = $derived(createIEventChunks($_iEvents, grid));
16
17
 
18
+ $effect.pre(() => {
19
+ $_activeRangeExt = ({start, end}) => ({
20
+ start: prevClosestDay(start, $firstDay),
21
+ end: nextClosestDay(end, $firstDay)
22
+ });
23
+ });
24
+
17
25
  // Events reposition
18
26
  let refs = [];
19
27
  function reposition() {
package/src/plugins/interaction/Action.svelte CHANGED
@@ -417,7 +417,10 @@
417
417
  return findPayload(dayEl.previousElementSibling);
418
418
  }
419
419
  } else {
420
- if (selecting() && payload.resource && !$_iEvents[0].resourceIds.includes(payload.resource.id) && !timelineView($view)) {
420
+ if (
421
+ (selecting() || resizing()) &&
422
+ payload.resource && !$_iEvents[0].resourceIds.includes(payload.resource.id) && !timelineView($view)
423
+ ) {
421
424
  if (toX > fromX) {
422
425
  return findPayload(dayEl.previousElementSibling);
423
426
  } else {
package/src/plugins/list/View.svelte CHANGED
@@ -1,9 +1,13 @@
1
1
  <script>
2
2
  import {getContext} from 'svelte';
3
- import {addDay, cloneDate, toViewWithLocalDates, contentFrom, bgEvent, isFunction} from '#lib';
3
+ import {addDay, cloneDate, identity, contentFrom, bgEvent, isFunction, toViewWithLocalDates} from '#lib';
4
4
  import Day from './Day.svelte';
5
5
 
6
- let {_mainEl, _filteredEvents, _view, _viewDates, noEventsClick, noEventsContent, theme} = getContext('state');
6
+ let {_activeRangeExt, _mainEl, _filteredEvents, _view, _viewDates, noEventsClick, noEventsContent, theme} = getContext('state');
7
+
8
+ $effect.pre(() => {
9
+ $_activeRangeExt = identity;
10
+ });
7
11
 
8
12
  let noEvents = $derived.by(() => {
9
13
  let noEvents = true;
package/src/plugins/resource-timeline/View.svelte CHANGED
@@ -1,6 +1,9 @@
1
1
  <script>
2
2
  import {getContext, tick} from 'svelte';
3
- import {max, resizeObserver, runReposition, contentFrom, toSeconds, datesEqual, min} from "#lib";
3
+ import {
4
+ max, resizeObserver, runReposition, contentFrom, toSeconds, datesEqual, min, isRtl, DAY_IN_SECONDS, addDuration,
5
+ subtractDay, cloneDate, identity
6
+ } from "#lib";
4
7
  import {createGrid, createEventChunks, createIEventChunks, getSlotTimeLimits} from './lib.js';
5
8
  import {ColHead, DayHeader} from '#components';
6
9
  import Day from './Day.svelte';
@@ -9,9 +12,9 @@
9
12
  import Expander from './Expander.svelte';
10
13
  import NowIndicator from './NowIndicator.svelte';
11
14
 
12
- let {_daySlots, _dayTimeLimits, _filteredEvents, _iEvents, _mainEl, _monthView, _nestedResources, _sidebarWidth,
15
+ let {_activeRangeExt, _daySlots, _dayTimeLimits, _filteredEvents, _iEvents, _mainEl, _monthView, _nestedResources, _sidebarWidth,
13
16
  _slotLabelPeriodicity, _today, _viewResources, _viewDates, columnWidth, highlightedDates, nowIndicator, scrollTime,
14
- slotDuration, slotHeight, slotWidth, theme, validRange} = getContext('state');
17
+ slotDuration, slotHeight, slotMaxTime, slotWidth, theme, validRange} = getContext('state');
15
18
 
16
19
  let headerHeight = $state(0);
17
20
 
@@ -19,6 +22,19 @@
19
22
  let {chunks, bgChunks} = $derived(createEventChunks($_filteredEvents, grid));
20
23
  let iChunks = $derived(createIEventChunks($_iEvents, grid));
21
24
 
25
+ $effect.pre(() => {
26
+ $_activeRangeExt = ({start, end}) => {
27
+ if ($slotMaxTime.days || $slotMaxTime.seconds > DAY_IN_SECONDS) {
28
+ addDuration(subtractDay(end), $slotMaxTime);
29
+ let start2 = subtractDay(cloneDate(end));
30
+ if (start2 < start) {
31
+ start = start2;
32
+ }
33
+ }
34
+ return {start, end};
35
+ };
36
+ });
37
+
22
38
  // Handle scrollTime
23
39
  $effect(() => {
24
40
  $_viewDates;
@@ -43,7 +59,7 @@
43
59
  scrollLeft += toSeconds(slotTimeLimits.max) - toSeconds(slotTimeLimits.min);
44
60
  }
45
61
  }
46
- $_mainEl.scrollLeft = scrollLeft / toSeconds($slotDuration) * $slotWidth * (document.dir === 'rtl' ? -1 : 1);
62
+ $_mainEl.scrollLeft = scrollLeft / toSeconds($slotDuration) * $slotWidth * (isRtl() ? -1 : 1);
47
63
  }
48
64
 
49
65
  // Events reposition
@@ -58,7 +74,7 @@
58
74
  bind:this={$_mainEl}
59
75
  class="{$theme.main}"
60
76
  style:--ec-grid-cols="{grid[0].length}"
61
- style:--ec-grid-rows="{grid.length}"
77
+ style:--ec-grid-rows="{grid.length > 1 ? `repeat(${grid.length - 1}, auto)` : ''} minmax(auto, 1fr)"
62
78
  style:--ec-col-width="{$columnWidth ?? 'minmax(4em, 1fr)'}"
63
79
  style:--ec-slot-label-periodicity="{$_slotLabelPeriodicity}"
64
80
  style:--ec-slot-height="{$slotHeight}px"
package/src/plugins/time-grid/View.svelte CHANGED
@@ -1,6 +1,8 @@
1
1
  <script>
2
2
  import {getContext, tick} from 'svelte';
3
- import {contentFrom, resizeObserver, runReposition, toSeconds} from '#lib';
3
+ import {
4
+ addDuration, cloneDate, contentFrom, DAY_IN_SECONDS, resizeObserver, runReposition, subtractDay, toSeconds
5
+ } from '#lib';
4
6
  import {createAllDayContent, createGrid, createEventChunks, createIEventChunks} from './lib.js';
5
7
  import {ColHead, DayHeader} from '#components';
6
8
  import Day from './Day.svelte';
@@ -10,9 +12,9 @@
10
12
 
11
13
  let {header, nowIndicator, createGridFn} = $props();
12
14
 
13
- let {_mainEl, _filteredEvents, _iEvents, _sidebarWidth, _slotLabelPeriodicity, _slotTimeLimits, _slots,
15
+ let {_activeRangeExt, _mainEl, _filteredEvents, _iEvents, _sidebarWidth, _slotLabelPeriodicity, _slotTimeLimits, _slots,
14
16
  _viewDates, allDayContent, allDaySlot, columnWidth, highlightedDates, nowIndicator: showNowIndicator,
15
- scrollTime, slotHeight, slotDuration, theme, validRange} = getContext('state');
17
+ scrollTime, slotHeight, slotDuration, slotMaxTime, theme, validRange} = getContext('state');
16
18
 
17
19
  let headerHeight = $state(0);
18
20
  let allDayText = $derived(createAllDayContent($allDayContent));
@@ -21,6 +23,19 @@
21
23
  let {chunks, bgChunks, allDayChunks, allDayBgChunks} = $derived(createEventChunks($_filteredEvents, grid));
22
24
  let {iChunks, allDayIChunks} = $derived(createIEventChunks($_iEvents, grid));
23
25
 
26
+ $effect.pre(() => {
27
+ $_activeRangeExt = ({start, end}) => {
28
+ if ($slotMaxTime.days || $slotMaxTime.seconds > DAY_IN_SECONDS) {
29
+ addDuration(subtractDay(end), $slotMaxTime);
30
+ let start2 = subtractDay(cloneDate(end));
31
+ if (start2 < start) {
32
+ start = start2;
33
+ }
34
+ }
35
+ return {start, end};
36
+ };
37
+ });
38
+
24
39
  // Handle scrollTime
25
40
  $effect(() => {
26
41
  $_viewDates;
package/src/storage/state.js CHANGED
@@ -27,6 +27,7 @@ export default class {
27
27
  this._auxiliary = writable([]); // auxiliary components
28
28
  this._dayGrid = dayGrid(this);
29
29
  this._currentRange = currentRange(this);
30
+ this._activeRangeExt = writable(identity);
30
31
  this._activeRange = activeRange(this);
31
32
  this._fetchedRange = writable({start: undefined, end: undefined});
32
33
  this._events = events(this);
package/src/storage/stores.js CHANGED
@@ -11,24 +11,9 @@ export function dayGrid(state) {
11
11
 
12
12
  export function activeRange(state) {
13
13
  return derived(
14
- [state._currentRange, state.firstDay, state.slotMaxTime, state._dayGrid],
15
- ([$_currentRange, $firstDay, $slotMaxTime, $_dayGrid]) => {
16
- let start = cloneDate($_currentRange.start);
17
- let end = cloneDate($_currentRange.end);
18
-
19
- if ($_dayGrid) {
20
- // First day of week
21
- prevClosestDay(start, $firstDay);
22
- nextClosestDay(end, $firstDay);
23
- } else if ($slotMaxTime.days || $slotMaxTime.seconds > DAY_IN_SECONDS) {
24
- addDuration(subtractDay(end), $slotMaxTime);
25
- let start2 = subtractDay(cloneDate(end));
26
- if (start2 < start) {
27
- start = start2;
28
- }
29
- }
30
-
31
- return {start, end};
14
+ [state._currentRange, state._activeRangeExt],
15
+ ([$_currentRange, $_activeRangeExt]) => {
16
+ return $_activeRangeExt({start: cloneDate($_currentRange.start), end: cloneDate($_currentRange.end)});
32
17
  }
33
18
  );
34
19
  }
package/src/styles/index.css CHANGED
@@ -37,7 +37,7 @@
37
37
 
38
38
  .ec-timeline & {
39
39
  grid-template-columns: max-content repeat(var(--ec-grid-cols), min-content);
40
- grid-template-rows: max-content repeat(calc(var(--ec-grid-rows) - 1), auto) minmax(auto, 1fr);
40
+ grid-template-rows: max-content var(--ec-grid-rows);
41
41
  flex-grow: 1;
42
42
  }
43
43
 
package/src/styles/sidebar.css CHANGED
@@ -3,14 +3,12 @@
3
3
  inset-inline-start: 0;
4
4
  z-index: 1;
5
5
  background-color: var(--ec-bg-color);
6
- border-color: var(--ec-border-color);
7
- border-width: 1px;
8
- border-inline-end-style: solid;
6
+ border-inline-end: 1px solid var(--ec-border-color);
9
7
  text-align: end;
10
8
  overflow: clip;
11
9
 
12
10
  .ec-header & {
13
- border-block-end-style: solid;
11
+ border-block-end: 1px solid var(--ec-border-color);
14
12
  padding-block: .375rem;
15
13
  }
16
14
 
package/src/styles/slots.css CHANGED
@@ -4,7 +4,7 @@
4
4
  .ec-time-grid & {
5
5
  block-size: calc(var(--ec-slot-height) * var(--ec-slot-label-periodicity));
6
6
  position: relative;
7
- inset-block-start: -.5em;
7
+ inset-block-start: -.5lh;
8
8
  }
9
9
 
10
10
  .ec-timeline & {