@event-calendar/core 5.2.3 → 5.2.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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@event-calendar/core",
3
- "version": "5.2.3",
3
+ "version": "5.2.4",
4
4
  "title": "Event Calendar Core package",
5
5
  "description": "Full-sized drag & drop event calendar with resource & timeline views",
6
6
  "keywords": [
@@ -32,6 +32,6 @@
32
32
  "#components": "./src/lib/components/index.js"
33
33
  },
34
34
  "dependencies": {
35
- "svelte": "^5.46.1"
35
+ "svelte": "^5.47.1"
36
36
  }
37
37
  }
package/src/lib/range.js CHANGED
@@ -17,13 +17,3 @@ export function createDateRange(input) {
17
17
  export function outsideRange(date, range) {
18
18
  return range.start && date < range.start || range.end && date > range.end;
19
19
  }
20
-
21
- export function limitToRange(date, range) {
22
- if (range.start && date < range.start) {
23
- date = range.start;
24
- }
25
- if (range.end && date > range.end) {
26
- date = range.end;
27
- }
28
- return date;
29
- }
@@ -22,59 +22,61 @@
22
22
  }
23
23
  function hide() {
24
24
  hiddenChunks.size;
25
- refs.forEach(ref => ref.hide());
25
+ refs.forEach(ref => ref?.hide());
26
26
  }
27
27
  $effect(reposition);
28
28
  $effect(hide);
29
29
  </script>
30
30
 
31
- <section
32
- bind:this={mainState.mainEl}
33
- class={[theme.main, dayMaxEvents === true && theme.uniform]}
34
- style:--ec-grid-cols="{grid[0].length}"
35
- style:--ec-grid-rows="{grid.length}"
36
- {@attach resizeObserver(reposition)}
37
- >
38
- <header class="{theme.header}">
39
- <div class="{theme.grid}" role="row">
40
- {#each grid[0] as {dayStart}, i}
41
- <div
42
- class={[theme.colHead, theme.weekdays?.[dayStart.getUTCDay()]]}
43
- role="columnheader"
44
- aria-colindex="{1 + i}"
45
- >
46
- <span
47
- aria-label="{intlDayHeaderAL.format(dayStart)}"
48
- {@attach contentFrom(intlDayHeader.format(dayStart))}
49
- ></span>
50
- </div>
51
- {/each}
52
- </div>
53
- </header>
31
+ {#if grid.length && grid[0].length}
32
+ <section
33
+ bind:this={mainState.mainEl}
34
+ class={[theme.main, dayMaxEvents === true && theme.uniform]}
35
+ style:--ec-grid-cols="{grid[0].length}"
36
+ style:--ec-grid-rows="{grid.length}"
37
+ {@attach resizeObserver(reposition)}
38
+ >
39
+ <header class="{theme.header}">
40
+ <div class="{theme.grid}" role="row">
41
+ {#each grid[0] as {dayStart}, i}
42
+ <div
43
+ class={[theme.colHead, theme.weekdays?.[dayStart.getUTCDay()]]}
44
+ role="columnheader"
45
+ aria-colindex="{1 + i}"
46
+ >
47
+ <span
48
+ aria-label="{intlDayHeaderAL.format(dayStart)}"
49
+ {@attach contentFrom(intlDayHeader.format(dayStart))}
50
+ ></span>
51
+ </div>
52
+ {/each}
53
+ </div>
54
+ </header>
54
55
 
55
- <div class="{theme.body}">
56
- <div bind:this={viewState.gridEl} class="{theme.grid}">
57
- {#each grid as days, i}
58
- {#each days as day, j}
59
- <Day {day} noIeb={j + 1 === days.length} noBeb={i + 1 === grid.length}/>
56
+ <div class="{theme.body}">
57
+ <div bind:this={viewState.gridEl} class="{theme.grid}">
58
+ {#each grid as days, i}
59
+ {#each days as day, j}
60
+ <Day {day} noIeb={j + 1 === days.length} noBeb={i + 1 === grid.length}/>
61
+ {/each}
60
62
  {/each}
61
- {/each}
62
- </div>
63
- <div class="{theme.events}">
64
- {#each chunks as chunk, i (chunk.id)}
65
- <!-- svelte-ignore binding_property_non_reactive -->
66
- <Event bind:this={refs[i]} {chunk}/>
67
- {/each}
68
- {#each bgChunks as chunk (chunk.id)}
69
- <Event {chunk}/>
70
- {/each}
71
- {#each iChunks as chunk}
72
- <Event {chunk}/>
73
- {/each}
63
+ </div>
64
+ <div class="{theme.events}">
65
+ {#each chunks as chunk, i (chunk.id)}
66
+ <!-- svelte-ignore binding_property_non_reactive -->
67
+ <Event bind:this={refs[i]} {chunk}/>
68
+ {/each}
69
+ {#each bgChunks as chunk (chunk.id)}
70
+ <Event {chunk}/>
71
+ {/each}
72
+ {#each iChunks as chunk}
73
+ <Event {chunk}/>
74
+ {/each}
75
+ </div>
74
76
  </div>
75
- </div>
76
77
 
77
- {#if popupDay}
78
- <Popup/>
79
- {/if}
80
- </section>
78
+ {#if popupDay}
79
+ <Popup/>
80
+ {/if}
81
+ </section>
82
+ {/if}
@@ -1,6 +1,6 @@
1
1
  import {untrack} from 'svelte';
2
2
  import {
3
- addDay, addDuration, cloneDate, createResources, datesEqual, eventIntersects, outsideRange
3
+ addDay, addDuration, bgEvent, cloneDate, createResources, datesEqual, eventIntersects, outsideRange
4
4
  } from '#lib';
5
5
 
6
6
  export function viewResources(mainState) {
@@ -16,7 +16,7 @@ export function viewResources(mainState) {
16
16
  if (filterResourcesWithEvents) {
17
17
  result = resources.filter(
18
18
  resource => filteredEvents.some(
19
- event => eventIntersects(event, activeRange.start, activeRange.end, resource)
19
+ event => !bgEvent(event.display) && eventIntersects(event, activeRange.start, activeRange.end, resource)
20
20
  )
21
21
  );
22
22
  }
@@ -22,9 +22,10 @@
22
22
 
23
23
  // Handle scrollTime
24
24
  $effect(() => {
25
- viewDates;
26
25
  scrollTime;
27
- tick().then(scrollToTime);
26
+ if (viewDates.length) {
27
+ tick().then(scrollToTime);
28
+ }
28
29
  });
29
30
  function scrollToTime() {
30
31
  let scrollLeft = 0;
@@ -64,80 +65,82 @@
64
65
  $effect(reposition);
65
66
  </script>
66
67
 
67
- <section
68
- bind:this={mainState.mainEl}
69
- class="{theme.main}"
70
- style:--ec-grid-cols="{grid[0].length}"
71
- style:--ec-grid-rows="{grid.length > 1 ? `repeat(${grid.length - 1}, auto)` : ''} 1fr"
72
- style:--ec-col-width="{columnWidth ?? 'minmax(4em, 1fr)'}"
73
- style:--ec-slot-label-periodicity="{slotLabelPeriodicity}"
74
- style:--ec-slot-height="{slotHeight}px"
75
- style:--ec-slot-width="{slotWidth}px"
76
- style:--ec-header-height="{headerHeight}px"
77
- style:--ec-sidebar-width="{sidebarWidth}px"
78
- {@attach resizeObserver(reposition)}
79
- >
80
- <header bind:offsetHeight={headerHeight} class="{theme.header}">
81
- <aside class="{theme.sidebar}" bind:offsetWidth={viewState.sidebarWidth}></aside>
82
- <div class="{theme.grid}" role="row">
83
- {#each grid[0] as {dayStart: date, disabled, highlight}, i}
84
- <ColHead {date} colIndex={1 + i} {disabled} {highlight}>
85
- <DayHeader {date}/>
86
- </ColHead>
87
- {/each}
88
- {#if !monthView}
89
- {#each grid[0] as {dayStart: date, disabled, highlight}}
90
- <ColHead {date} className={theme.slots} {disabled} {highlight} ariaHidden>
91
- {#each daySlots[date.getTime()] as slot}
92
- <div
93
- class="{theme.slot}"
94
- style:--ec-slot-label-periodicity={slot[2]}
95
- >
96
- <time
97
- datetime="{slot[0]}"
98
- {@attach contentFrom(slot[1])}
99
- ></time>
100
- </div>
101
- {/each}
68
+ {#if grid.length && grid[0].length}
69
+ <section
70
+ bind:this={mainState.mainEl}
71
+ class="{theme.main}"
72
+ style:--ec-grid-cols="{grid[0].length}"
73
+ style:--ec-grid-rows="{grid.length > 1 ? `repeat(${grid.length - 1}, auto)` : ''} 1fr"
74
+ style:--ec-col-width="{columnWidth ?? 'minmax(4em, 1fr)'}"
75
+ style:--ec-slot-label-periodicity="{slotLabelPeriodicity}"
76
+ style:--ec-slot-height="{slotHeight}px"
77
+ style:--ec-slot-width="{slotWidth}px"
78
+ style:--ec-header-height="{headerHeight}px"
79
+ style:--ec-sidebar-width="{sidebarWidth}px"
80
+ {@attach resizeObserver(reposition)}
81
+ >
82
+ <header bind:offsetHeight={headerHeight} class="{theme.header}">
83
+ <aside class="{theme.sidebar}" bind:offsetWidth={viewState.sidebarWidth}></aside>
84
+ <div class="{theme.grid}" role="row">
85
+ {#each grid[0] as {dayStart: date, disabled, highlight}, i}
86
+ <ColHead {date} colIndex={1 + i} {disabled} {highlight}>
87
+ <DayHeader {date}/>
102
88
  </ColHead>
103
89
  {/each}
104
- {/if}
105
- </div>
106
- </header>
90
+ {#if !monthView}
91
+ {#each grid[0] as {dayStart: date, disabled, highlight}}
92
+ <ColHead {date} className={theme.slots} {disabled} {highlight} ariaHidden>
93
+ {#each daySlots[date.getTime()] as slot}
94
+ <div
95
+ class="{theme.slot}"
96
+ style:--ec-slot-label-periodicity={slot[2]}
97
+ >
98
+ <time
99
+ datetime="{slot[0]}"
100
+ {@attach contentFrom(slot[1])}
101
+ ></time>
102
+ </div>
103
+ {/each}
104
+ </ColHead>
105
+ {/each}
106
+ {/if}
107
+ </div>
108
+ </header>
107
109
 
108
- <div class="{theme.body}" role="rowgroup">
109
- <aside class="{theme.sidebar}">
110
- {#each viewResources as resource}
111
- <div class="{theme.rowHead}" role="rowheader">
112
- {#if nestedResources}
113
- <Expander {resource} />
114
- {/if}
115
- <Label {resource}/>
116
- </div>
117
- {/each}
118
- </aside>
119
- <div class="{theme.grid}" role="row">
120
- {#each grid as days, i}
121
- {#each days as day, j}
122
- <Day {day} noIeb={j + 1 === days.length} noBeb={i + 1 === grid.length}/>
110
+ <div class="{theme.body}" role="rowgroup">
111
+ <aside class="{theme.sidebar}">
112
+ {#each viewResources as resource}
113
+ <div class="{theme.rowHead}" role="rowheader">
114
+ {#if nestedResources}
115
+ <Expander {resource} />
116
+ {/if}
117
+ <Label {resource}/>
118
+ </div>
123
119
  {/each}
124
- {/each}
125
- </div>
126
- <div class="{theme.events}">
127
- {#each chunks as chunk, i (chunk.id)}
128
- <!-- svelte-ignore binding_property_non_reactive -->
129
- <Event bind:this={refs[i]} {chunk}/>
130
- {/each}
131
- {#each bgChunks as chunk (chunk.id)}
132
- <Event {chunk}/>
133
- {/each}
134
- {#each iChunks as chunk}
135
- <Event {chunk}/>
136
- {/each}
120
+ </aside>
121
+ <div class="{theme.grid}" role="row">
122
+ {#each grid as days, i}
123
+ {#each days as day, j}
124
+ <Day {day} noIeb={j + 1 === days.length} noBeb={i + 1 === grid.length}/>
125
+ {/each}
126
+ {/each}
127
+ </div>
128
+ <div class="{theme.events}">
129
+ {#each chunks as chunk, i (chunk.id)}
130
+ <!-- svelte-ignore binding_property_non_reactive -->
131
+ <Event bind:this={refs[i]} {chunk}/>
132
+ {/each}
133
+ {#each bgChunks as chunk (chunk.id)}
134
+ <Event {chunk}/>
135
+ {/each}
136
+ {#each iChunks as chunk}
137
+ <Event {chunk}/>
138
+ {/each}
139
+ </div>
137
140
  </div>
138
- </div>
139
141
 
140
- {#if nowIndicator && !monthView}
141
- <NowIndicator/>
142
- {/if}
143
- </section>
142
+ {#if nowIndicator && !monthView}
143
+ <NowIndicator/>
144
+ {/if}
145
+ </section>
146
+ {/if}
@@ -29,9 +29,10 @@
29
29
 
30
30
  // Handle scrollTime
31
31
  $effect(() => {
32
- viewDates;
33
32
  scrollTime;
34
- tick().then(scrollToTime);
33
+ if (viewDates.length) {
34
+ tick().then(scrollToTime);
35
+ }
35
36
  });
36
37
  function scrollToTime() {
37
38
  mainEl.scrollTop = (
@@ -47,97 +48,99 @@
47
48
  $effect(reposition);
48
49
  </script>
49
50
 
50
- <section
51
- bind:this={mainState.mainEl}
52
- class="{theme.main}"
53
- style:--ec-grid-cols="{grid.length * grid[0].length}"
54
- style:--ec-col-group-span="{grid[0].length}"
55
- style:--ec-col-width="{columnWidth ?? 'minmax(0, 1fr)'}"
56
- style:--ec-slot-label-periodicity="{slotLabelPeriodicity}"
57
- style:--ec-slot-height="{slotHeight}px"
58
- style:--ec-header-height="{headerHeight}px"
59
- style:--ec-sidebar-width="{sidebarWidth}px"
60
- {@attach resizeObserver(reposition)}
61
- >
62
- <header bind:offsetHeight={headerHeight} class="{theme.header}">
63
- <aside class="{theme.sidebar}" bind:offsetWidth={viewState.sidebarWidth}></aside>
64
- <div class="{theme.grid}" role="row">
65
- {#if header}
66
- {@render header()}
67
- {:else}
68
- {#each grid[0] as {dayStart: date, disabled, highlight}, i}
69
- <ColHead {date} colIndex={1 + i} {disabled} {highlight}>
70
- <DayHeader {date}/>
71
- </ColHead>
72
- {/each}
73
- {/if}
74
- </div>
51
+ {#if grid.length && grid[0].length}
52
+ <section
53
+ bind:this={mainState.mainEl}
54
+ class="{theme.main}"
55
+ style:--ec-grid-cols="{grid.length * grid[0].length}"
56
+ style:--ec-col-group-span="{grid[0].length}"
57
+ style:--ec-col-width="{columnWidth ?? 'minmax(0, 1fr)'}"
58
+ style:--ec-slot-label-periodicity="{slotLabelPeriodicity}"
59
+ style:--ec-slot-height="{slotHeight}px"
60
+ style:--ec-header-height="{headerHeight}px"
61
+ style:--ec-sidebar-width="{sidebarWidth}px"
62
+ {@attach resizeObserver(reposition)}
63
+ >
64
+ <header bind:offsetHeight={headerHeight} class="{theme.header}">
65
+ <aside class="{theme.sidebar}" bind:offsetWidth={viewState.sidebarWidth}></aside>
66
+ <div class="{theme.grid}" role="row">
67
+ {#if header}
68
+ {@render header()}
69
+ {:else}
70
+ {#each grid[0] as {dayStart: date, disabled, highlight}, i}
71
+ <ColHead {date} colIndex={1 + i} {disabled} {highlight}>
72
+ <DayHeader {date}/>
73
+ </ColHead>
74
+ {/each}
75
+ {/if}
76
+ </div>
75
77
 
76
- {#if allDaySlot}
77
- <div class="{theme.allDay}">
78
- <aside class="{theme.sidebar}" {@attach contentFrom(allDayText)}></aside>
79
- <div class="{theme.grid}" role="row">
80
- {#each grid as days, i}
81
- {#each days as day, j}
82
- <Day {day} allDay noIeb={i + 1 === grid.length && j + 1 === days.length}/>
78
+ {#if allDaySlot}
79
+ <div class="{theme.allDay}">
80
+ <aside class="{theme.sidebar}" {@attach contentFrom(allDayText)}></aside>
81
+ <div class="{theme.grid}" role="row">
82
+ {#each grid as days, i}
83
+ {#each days as day, j}
84
+ <Day {day} allDay noIeb={i + 1 === grid.length && j + 1 === days.length}/>
85
+ {/each}
83
86
  {/each}
84
- {/each}
87
+ </div>
88
+ <div class="{theme.events}">
89
+ {#each allDayChunks as chunk, i (chunk.id)}
90
+ <!-- svelte-ignore binding_property_non_reactive -->
91
+ <AllDayEvent bind:this={refs[i]} {chunk}/>
92
+ {/each}
93
+ {#each allDayBgChunks as chunk (chunk.id)}
94
+ <AllDayEvent {chunk}/>
95
+ {/each}
96
+ {#each allDayIChunks as chunk}
97
+ <AllDayEvent {chunk}/>
98
+ {/each}
99
+ </div>
85
100
  </div>
86
- <div class="{theme.events}">
87
- {#each allDayChunks as chunk, i (chunk.id)}
88
- <!-- svelte-ignore binding_property_non_reactive -->
89
- <AllDayEvent bind:this={refs[i]} {chunk}/>
90
- {/each}
91
- {#each allDayBgChunks as chunk (chunk.id)}
92
- <AllDayEvent {chunk}/>
93
- {/each}
94
- {#each allDayIChunks as chunk}
95
- <AllDayEvent {chunk}/>
101
+ {/if}
102
+ </header>
103
+
104
+ <div class="{theme.body}" role="rowgroup">
105
+ <aside class="{theme.sidebar}" aria-hidden="true">
106
+ {#each slots as slot, i}
107
+ <div
108
+ class={[theme.slot, !i && theme.hidden]}
109
+ style:--ec-slot-label-periodicity={slot[2]}
110
+ >
111
+ <time
112
+ datetime="{slot[0]}"
113
+ {@attach contentFrom(slot[1])}
114
+ ></time>
115
+ </div>
116
+ {/each}
117
+ </aside>
118
+ <div class="{theme.grid}" role="row">
119
+ {#each grid as days, i}
120
+ {#each days as day, j}
121
+ <Day {day} noIeb={i + 1 === grid.length && j + 1 === days.length} noBeb/>
96
122
  {/each}
97
- </div>
123
+ {/each}
98
124
  </div>
99
- {/if}
100
- </header>
101
-
102
- <div class="{theme.body}" role="rowgroup">
103
- <aside class="{theme.sidebar}" aria-hidden="true">
104
- {#each slots as slot, i}
105
- <div
106
- class={[theme.slot, !i && theme.hidden]}
107
- style:--ec-slot-label-periodicity={slot[2]}
108
- >
109
- <time
110
- datetime="{slot[0]}"
111
- {@attach contentFrom(slot[1])}
112
- ></time>
113
- </div>
114
- {/each}
115
- </aside>
116
- <div class="{theme.grid}" role="row">
117
- {#each grid as days, i}
118
- {#each days as day, j}
119
- <Day {day} noIeb={i + 1 === grid.length && j + 1 === days.length} noBeb/>
125
+ <div class="{theme.events}">
126
+ {#each chunks as chunk (chunk.id)}
127
+ <Event {chunk}/>
120
128
  {/each}
121
- {/each}
122
- </div>
123
- <div class="{theme.events}">
124
- {#each chunks as chunk (chunk.id)}
125
- <Event {chunk}/>
126
- {/each}
127
- {#each bgChunks as chunk (chunk.id)}
128
- <Event {chunk}/>
129
- {/each}
130
- {#each iChunks as chunk}
131
- <Event {chunk}/>
132
- {/each}
129
+ {#each bgChunks as chunk (chunk.id)}
130
+ <Event {chunk}/>
131
+ {/each}
132
+ {#each iChunks as chunk}
133
+ <Event {chunk}/>
134
+ {/each}
135
+ </div>
133
136
  </div>
134
- </div>
135
137
 
136
- {#if showNowIndicator}
137
- {#if nowIndicator}
138
- {@render nowIndicator()}
139
- {:else}
140
- <NowIndicator days={grid[0]}/>
138
+ {#if showNowIndicator}
139
+ {#if nowIndicator}
140
+ {@render nowIndicator()}
141
+ {:else}
142
+ <NowIndicator days={grid[0]}/>
143
+ {/if}
141
144
  {/if}
142
- {/if}
143
- </section>
145
+ </section>
146
+ {/if}
@@ -45,7 +45,7 @@ export function activeRange(mainState) {
45
45
  export function filteredEvents(mainState) {
46
46
  return () => {
47
47
  // Dependencies
48
- let {events, options: {eventFilter, eventOrder, filterEventsWithResources, resources}} = mainState;
48
+ let {events, options: {eventFilter, eventOrder, filterEventsWithResources, resources, view}} = mainState;
49
49
 
50
50
  let result = [...events];
51
51
 
@@ -8,9 +8,12 @@ export function loadEvents(mainState) {
8
8
  let fetching = 0;
9
9
  return () => {
10
10
  // Dependencies
11
- let {activeRange, fetchedRange, options: {events, eventSources, lazyFetching, loading}} = mainState;
11
+ let {activeRange, fetchedRange, viewDates, options: {events, eventSources, lazyFetching, loading}} = mainState;
12
12
 
13
13
  untrack(() => {
14
+ if (!viewDates.length) {
15
+ return;
16
+ }
14
17
  if (!eventSources.length) {
15
18
  mainState.events = events;
16
19
  }