@event-calendar/core 4.3.1 → 4.4.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.
package/README.md CHANGED
@@ -54,6 +54,7 @@ Inspired by [FullCalendar](https://fullcalendar.io/), it implements similar opti
54
54
  </td><td>
55
55
 
56
56
  - [eventDurationEditable](#eventdurationeditable)
57
+ - [eventFilter](#eventfilter)
57
58
  - [eventLongPressDelay](#eventlongpressdelay)
58
59
  - [eventMouseEnter](#eventmouseenter)
59
60
  - [eventMouseLeave](#eventmouseleave)
@@ -227,8 +228,8 @@ This bundle contains a version of the calendar that includes all plugins and is
227
228
 
228
229
  The first step is to include the following lines of code in the `<head>` section of your page:
229
230
  ```html
230
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@4.3.1/dist/event-calendar.min.css">
231
- <script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@4.3.1/dist/event-calendar.min.js"></script>
231
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@4.4.0/dist/event-calendar.min.css">
232
+ <script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@4.4.0/dist/event-calendar.min.js"></script>
232
233
  ```
233
234
 
234
235
  <details>
@@ -1115,6 +1116,58 @@ The current [View](#view-object) object
1115
1116
 
1116
1117
  Determines whether calendar events can be resized.
1117
1118
 
1119
+ ### eventFilter
1120
+ - Type `function`
1121
+ - Default `undefined`
1122
+
1123
+ A function for filtering the array of events before displaying them in the calendar. It allows, for example, to display only specific events for each view.
1124
+
1125
+ ```js
1126
+ function (info) {
1127
+ // return true to keep the event, false to exclude it
1128
+ }
1129
+ ```
1130
+ `info` is an object with the following properties:
1131
+ <table>
1132
+ <tr>
1133
+ <td>
1134
+
1135
+ `event`
1136
+ </td>
1137
+ <td>
1138
+
1139
+ The current [Event](#event-object) object being processed in the array
1140
+ </td>
1141
+ </tr>
1142
+ <tr>
1143
+ <td>
1144
+
1145
+ `index`
1146
+ </td>
1147
+ <td>The index of the current event being processed in the array</td>
1148
+ </tr>
1149
+ <tr>
1150
+ <td>
1151
+
1152
+ `events`
1153
+ </td>
1154
+ <td>
1155
+
1156
+ The array of all events `eventFilter` was called upon
1157
+ </td>
1158
+ </tr>
1159
+ <tr>
1160
+ <td>
1161
+
1162
+ `view`
1163
+ </td>
1164
+ <td>
1165
+
1166
+ The current [View](#view-object) object
1167
+ </td>
1168
+ </tr>
1169
+ </table>
1170
+
1118
1171
  ### eventLongPressDelay
1119
1172
  - Type `integer`
1120
1173
  - Default `undefined`
package/dist/index.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * EventCalendar v4.3.1
2
+ * EventCalendar v4.4.0
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 v4.3.1
2
+ * EventCalendar v4.4.0
3
3
  * https://github.com/vkurko/calendar
4
4
  */
5
5
  import { tick, getContext, untrack, setContext, onMount, mount, unmount } from "svelte";
@@ -822,15 +822,17 @@ function createOptions(plugins) {
822
822
  events: [],
823
823
  eventAllUpdated: void 0,
824
824
  eventBackgroundColor: void 0,
825
- eventTextColor: void 0,
826
825
  eventClassNames: void 0,
827
826
  eventClick: void 0,
828
827
  eventColor: void 0,
829
828
  eventContent: void 0,
830
829
  eventDidMount: void 0,
830
+ eventFilter: void 0,
831
+ // ec option
831
832
  eventMouseEnter: void 0,
832
833
  eventMouseLeave: void 0,
833
834
  eventSources: [],
835
+ eventTextColor: void 0,
834
836
  eventTimeFormat: {
835
837
  hour: "numeric",
836
838
  minute: "2-digit"
@@ -1099,6 +1101,26 @@ function events(state) {
1099
1101
  ).subscribe(_events.set);
1100
1102
  return _events;
1101
1103
  }
1104
+ function filteredEvents(state) {
1105
+ let view2;
1106
+ state._view.subscribe(($_view) => view2 = $_view);
1107
+ let debounceHandle = {};
1108
+ return derived(
1109
+ [state._events, state.eventFilter],
1110
+ (values, set) => debounce(() => {
1111
+ let [$_events, $eventFilter] = values;
1112
+ set(
1113
+ isFunction($eventFilter) ? $_events.filter((event, index2, events2) => $eventFilter({
1114
+ event,
1115
+ index: index2,
1116
+ events: events2,
1117
+ view: view2
1118
+ })) : $_events
1119
+ );
1120
+ }, debounceHandle, state._queue),
1121
+ []
1122
+ );
1123
+ }
1102
1124
  function now() {
1103
1125
  return readable(createDate(), (set) => {
1104
1126
  let interval = setInterval(() => {
@@ -1143,6 +1165,7 @@ class State {
1143
1165
  this._viewDates = viewDates(this);
1144
1166
  this._view = view(this);
1145
1167
  this._viewComponent = writable(void 0);
1168
+ this._filteredEvents = filteredEvents(this);
1146
1169
  this._interaction = writable({});
1147
1170
  this._iEvents = writable([null, null]);
1148
1171
  this._iClasses = writable(identity);
@@ -2576,14 +2599,14 @@ function Week$1($$anchor, $$props) {
2576
2599
  $.push($$props, true);
2577
2600
  const [$$stores, $$cleanup] = $.setup_stores();
2578
2601
  const $validRange = () => $.store_get(validRange, "$validRange", $$stores);
2579
- const $_events = () => $.store_get(_events, "$_events", $$stores);
2602
+ const $_filteredEvents = () => $.store_get(_filteredEvents, "$_filteredEvents", $$stores);
2580
2603
  const $filterEventsWithResources = () => $.store_get(filterEventsWithResources, "$filterEventsWithResources", $$stores);
2581
2604
  const $resources = () => $.store_get(resources, "$resources", $$stores);
2582
2605
  const $hiddenDays = () => $.store_get(hiddenDays, "$hiddenDays", $$stores);
2583
2606
  const $_iEvents = () => $.store_get(_iEvents, "$_iEvents", $$stores);
2584
2607
  const $theme = () => $.store_get(theme, "$theme", $$stores);
2585
2608
  let {
2586
- _events,
2609
+ _filteredEvents,
2587
2610
  _iEvents,
2588
2611
  resources,
2589
2612
  filterEventsWithResources,
@@ -2597,7 +2620,7 @@ function Week$1($$anchor, $$props) {
2597
2620
  let $$d = $.derived(() => {
2598
2621
  let chunks2 = [];
2599
2622
  let bgChunks2 = [];
2600
- for (let event of $_events()) {
2623
+ for (let event of $_filteredEvents()) {
2601
2624
  if (eventIntersects(event, $.get(start), $.get(end), $filterEventsWithResources() ? $resources() : void 0)) {
2602
2625
  let chunk = createEventChunk(event, $.get(start), $.get(end));
2603
2626
  if (bgEvent(event.display)) {
@@ -3717,7 +3740,7 @@ function Day$3($$anchor, $$props) {
3717
3740
  const $_today = () => $.store_get(_today, "$_today", $$stores);
3718
3741
  const $highlightedDates = () => $.store_get(highlightedDates, "$highlightedDates", $$stores);
3719
3742
  const $validRange = () => $.store_get(validRange, "$validRange", $$stores);
3720
- const $_events = () => $.store_get(_events, "$_events", $$stores);
3743
+ const $_filteredEvents = () => $.store_get(_filteredEvents, "$_filteredEvents", $$stores);
3721
3744
  const $filterEventsWithResources = () => $.store_get(filterEventsWithResources, "$filterEventsWithResources", $$stores);
3722
3745
  const $resources = () => $.store_get(resources, "$resources", $$stores);
3723
3746
  const $theme = () => $.store_get(theme, "$theme", $$stores);
@@ -3725,7 +3748,7 @@ function Day$3($$anchor, $$props) {
3725
3748
  const $_intlListDay = () => $.store_get(_intlListDay, "$_intlListDay", $$stores);
3726
3749
  const $_intlListDaySide = () => $.store_get(_intlListDaySide, "$_intlListDaySide", $$stores);
3727
3750
  let {
3728
- _events,
3751
+ _filteredEvents,
3729
3752
  _interaction,
3730
3753
  _intlListDay,
3731
3754
  _intlListDaySide,
@@ -3746,7 +3769,7 @@ function Day$3($$anchor, $$props) {
3746
3769
  if (!$.get(disabled)) {
3747
3770
  let start = $$props.date;
3748
3771
  let end = addDay(cloneDate($$props.date));
3749
- for (let event of $_events()) {
3772
+ for (let event of $_filteredEvents()) {
3750
3773
  if (!bgEvent(event.display) && eventIntersects(event, start, end, $filterEventsWithResources() ? $resources() : void 0)) {
3751
3774
  let chunk = createEventChunk(event, start, end);
3752
3775
  chunks2.push(chunk);
@@ -4244,7 +4267,7 @@ function Day$2($$anchor, $$props) {
4244
4267
  const $_slotTimeLimits = () => $.store_get(_slotTimeLimits, "$_slotTimeLimits", $$stores);
4245
4268
  const $filterEventsWithResources = () => $.store_get(filterEventsWithResources, "$filterEventsWithResources", $$stores);
4246
4269
  const $resources = () => $.store_get(resources, "$resources", $$stores);
4247
- const $_events = () => $.store_get(_events, "$_events", $$stores);
4270
+ const $_filteredEvents = () => $.store_get(_filteredEvents, "$_filteredEvents", $$stores);
4248
4271
  const $_iEvents = () => $.store_get(_iEvents, "$_iEvents", $$stores);
4249
4272
  const $slotDuration = () => $.store_get(slotDuration, "$slotDuration", $$stores);
4250
4273
  const $slotHeight = () => $.store_get(slotHeight, "$slotHeight", $$stores);
@@ -4253,7 +4276,7 @@ function Day$2($$anchor, $$props) {
4253
4276
  const $nowIndicator = () => $.store_get(nowIndicator, "$nowIndicator", $$stores);
4254
4277
  let resource = $.prop($$props, "resource", 3, void 0);
4255
4278
  let {
4256
- _events,
4279
+ _filteredEvents,
4257
4280
  _iEvents,
4258
4281
  highlightedDates,
4259
4282
  nowIndicator,
@@ -4280,7 +4303,7 @@ function Day$2($$anchor, $$props) {
4280
4303
  }
4281
4304
  let chunks2 = [];
4282
4305
  let bgChunks2 = [];
4283
- for (let event of $_events()) {
4306
+ for (let event of $_filteredEvents()) {
4284
4307
  if ((!event.allDay || bgEvent(event.display)) && eventIntersects(event, $.get(start), $.get(end), $.get(resourceFilter))) {
4285
4308
  let chunk = createEventChunk(event, $.get(start), $.get(end));
4286
4309
  switch (event.display) {
@@ -4606,12 +4629,12 @@ function Week($$anchor, $$props) {
4606
4629
  const $validRange = () => $.store_get(validRange, "$validRange", $$stores);
4607
4630
  const $filterEventsWithResources = () => $.store_get(filterEventsWithResources, "$filterEventsWithResources", $$stores);
4608
4631
  const $resources = () => $.store_get(resources, "$resources", $$stores);
4609
- const $_events = () => $.store_get(_events, "$_events", $$stores);
4632
+ const $_filteredEvents = () => $.store_get(_filteredEvents, "$_filteredEvents", $$stores);
4610
4633
  const $hiddenDays = () => $.store_get(hiddenDays, "$hiddenDays", $$stores);
4611
4634
  const $_iEvents = () => $.store_get(_iEvents, "$_iEvents", $$stores);
4612
4635
  let resource = $.prop($$props, "resource", 3, void 0);
4613
4636
  let {
4614
- _events,
4637
+ _filteredEvents,
4615
4638
  _iEvents,
4616
4639
  hiddenDays,
4617
4640
  resources,
@@ -4625,7 +4648,7 @@ function Week($$anchor, $$props) {
4625
4648
  let $$d = $.derived(() => {
4626
4649
  let chunks2 = [];
4627
4650
  let bgChunks2 = [];
4628
- for (let event of $_events()) {
4651
+ for (let event of $_filteredEvents()) {
4629
4652
  if (event.allDay && eventIntersects(event, $.get(start), $.get(end), $.get(resourceFilter))) {
4630
4653
  let chunk = createEventChunk(event, $.get(start), $.get(end));
4631
4654
  if (bgEvent(event.display)) {
@@ -5861,14 +5884,14 @@ function Days($$anchor, $$props) {
5861
5884
  const $_viewDates = () => $.store_get(_viewDates, "$_viewDates", $$stores);
5862
5885
  const $validRange = () => $.store_get(validRange, "$validRange", $$stores);
5863
5886
  const $_dayTimeLimits = () => $.store_get(_dayTimeLimits, "$_dayTimeLimits", $$stores);
5864
- const $_events = () => $.store_get(_events, "$_events", $$stores);
5887
+ const $_filteredEvents = () => $.store_get(_filteredEvents, "$_filteredEvents", $$stores);
5865
5888
  const $slotDuration = () => $.store_get(slotDuration, "$slotDuration", $$stores);
5866
5889
  const $_iEvents = () => $.store_get(_iEvents, "$_iEvents", $$stores);
5867
5890
  const $_resHs = () => $.store_get(_resHs, "$_resHs", $$stores);
5868
5891
  const $theme = () => $.store_get(theme, "$theme", $$stores);
5869
5892
  let {
5870
5893
  _viewDates,
5871
- _events,
5894
+ _filteredEvents,
5872
5895
  _iEvents,
5873
5896
  _resHs,
5874
5897
  _dayTimeLimits,
@@ -5895,7 +5918,7 @@ function Days($$anchor, $$props) {
5895
5918
  let chunks2 = [];
5896
5919
  let bgChunks2 = [];
5897
5920
  let longChunks2;
5898
- for (let event of $_events()) {
5921
+ for (let event of $_filteredEvents()) {
5899
5922
  if (eventIntersects(event, $.get(start), $.get(end), $$props.resource)) {
5900
5923
  let chunk = createEventChunk(event, $.get(start), $.get(end));
5901
5924
  if (bgEvent(event.display)) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@event-calendar/core",
3
- "version": "4.3.1",
3
+ "version": "4.4.0",
4
4
  "title": "Event Calendar Core package",
5
5
  "description": "Full-sized drag & drop event calendar with resource & timeline views",
6
6
  "keywords": [
@@ -8,8 +8,8 @@
8
8
 
9
9
  let {dates} = $props();
10
10
 
11
- let {_events, _iEvents,
12
- resources, filterEventsWithResources, hiddenDays, theme, validRange} = getContext('state');
11
+ let {_filteredEvents, _iEvents,
12
+ resources, filterEventsWithResources, hiddenDays, theme, validRange } = getContext('state');
13
13
 
14
14
  let refs = [];
15
15
 
@@ -19,7 +19,7 @@
19
19
  let [chunks, bgChunks, longChunks] = $derived.by(() => {
20
20
  let chunks = [];
21
21
  let bgChunks = [];
22
- for (let event of $_events) {
22
+ for (let event of $_filteredEvents) {
23
23
  if (eventIntersects(event, start, end, $filterEventsWithResources ? $resources : undefined)) {
24
24
  let chunk = createEventChunk(event, start, end);
25
25
  if (bgEvent(event.display)) {
@@ -8,7 +8,7 @@
8
8
 
9
9
  let {date} = $props();
10
10
 
11
- let {_events, _interaction, _intlListDay, _intlListDaySide, _today,
11
+ let {_filteredEvents, _interaction, _intlListDay, _intlListDaySide, _today,
12
12
  resources, filterEventsWithResources, highlightedDates, theme, validRange} = getContext('state');
13
13
 
14
14
  let el = $state();
@@ -22,7 +22,7 @@
22
22
  if (!disabled) {
23
23
  let start = date;
24
24
  let end = addDay(cloneDate(date));
25
- for (let event of $_events) {
25
+ for (let event of $_filteredEvents) {
26
26
  if (!bgEvent(event.display) && eventIntersects(event, start, end, $filterEventsWithResources ? $resources : undefined)) {
27
27
  let chunk = createEventChunk(event, start, end);
28
28
  chunks.push(chunk);
@@ -10,7 +10,7 @@
10
10
  let {resource} = $props();
11
11
 
12
12
  let {
13
- _viewDates, _events, _iEvents, _resHs, _dayTimeLimits, slotDuration, theme, validRange
13
+ _viewDates, _filteredEvents, _iEvents, _resHs, _dayTimeLimits, slotDuration, theme, validRange
14
14
  } = getContext('state');
15
15
 
16
16
  let refs = [];
@@ -34,7 +34,7 @@
34
34
  let chunks = [];
35
35
  let bgChunks = [];
36
36
  let longChunks;
37
- for (let event of $_events) {
37
+ for (let event of $_filteredEvents) {
38
38
  if (eventIntersects(event, start, end, resource)) {
39
39
  let chunk = createEventChunk(event, start, end);
40
40
  if (bgEvent(event.display)) {
@@ -10,8 +10,8 @@
10
10
 
11
11
  let {date, resource = undefined} = $props();
12
12
 
13
- let {_events, _iEvents, highlightedDates, nowIndicator, slotDuration, slotHeight, filterEventsWithResources, theme,
14
- resources, validRange, _interaction, _today, _slotTimeLimits} = getContext('state');
13
+ let {_filteredEvents, _iEvents, highlightedDates, nowIndicator, slotDuration, slotHeight, filterEventsWithResources,
14
+ theme, resources, validRange, _interaction, _today, _slotTimeLimits} = getContext('state');
15
15
 
16
16
  let el = $state();
17
17
 
@@ -30,7 +30,7 @@
30
30
  }
31
31
  let chunks = [];
32
32
  let bgChunks = [];
33
- for (let event of $_events) {
33
+ for (let event of $_filteredEvents) {
34
34
  if ((!event.allDay || bgEvent(event.display)) && eventIntersects(event, start, end, resourceFilter)) {
35
35
  let chunk = createEventChunk(event, start, end);
36
36
  switch (event.display) {
@@ -7,7 +7,7 @@
7
7
 
8
8
  let {dates, resource = undefined} = $props();
9
9
 
10
- let {_events, _iEvents, hiddenDays, resources, filterEventsWithResources, validRange} = getContext('state');
10
+ let {_filteredEvents, _iEvents, hiddenDays, resources, filterEventsWithResources, validRange } = getContext('state');
11
11
 
12
12
  let refs = [];
13
13
 
@@ -21,7 +21,7 @@
21
21
  let [chunks, bgChunks, longChunks] = $derived.by(() => {
22
22
  let chunks = [];
23
23
  let bgChunks = [];
24
- for (let event of $_events) {
24
+ for (let event of $_filteredEvents) {
25
25
  if (event.allDay && eventIntersects(event, start, end, resourceFilter)) {
26
26
  let chunk = createEventChunk(event, start, end);
27
27
  if (bgEvent(event.display)) {
@@ -25,15 +25,16 @@ export function createOptions(plugins) {
25
25
  events: [],
26
26
  eventAllUpdated: undefined,
27
27
  eventBackgroundColor: undefined,
28
- eventTextColor: undefined,
29
28
  eventClassNames: undefined,
30
29
  eventClick: undefined,
31
30
  eventColor: undefined,
32
31
  eventContent: undefined,
33
32
  eventDidMount: undefined,
33
+ eventFilter: undefined, // ec option
34
34
  eventMouseEnter: undefined,
35
35
  eventMouseLeave: undefined,
36
36
  eventSources: [],
37
+ eventTextColor: undefined,
37
38
  eventTimeFormat: {
38
39
  hour: 'numeric',
39
40
  minute: '2-digit'
@@ -1,7 +1,7 @@
1
1
  import {get, writable} from 'svelte/store';
2
2
  import {tick} from 'svelte';
3
3
  import {createOptions, createParsers} from './options.js';
4
- import {activeRange, currentRange, dayGrid, events, now, today, view as view2, viewDates, viewTitle} from './stores.js';
4
+ import {activeRange, currentRange, dayGrid, events, now, today, view as view2, viewDates, viewTitle, filteredEvents} from './stores.js';
5
5
  import {identity, intl, intlRange, isFunction, keys} from '#lib';
6
6
 
7
7
  export default class {
@@ -44,6 +44,7 @@ export default class {
44
44
  this._viewDates = viewDates(this);
45
45
  this._view = view2(this);
46
46
  this._viewComponent = writable(undefined);
47
+ this._filteredEvents = filteredEvents(this);
47
48
  // Interaction
48
49
  this._interaction = writable({});
49
50
  this._iEvents = writable([null, null]); // interaction events: [drag/resize, pointer]
@@ -179,6 +179,29 @@ export function events(state) {
179
179
  return _events;
180
180
  }
181
181
 
182
+ export function filteredEvents(state){
183
+ let view;
184
+ state._view.subscribe($_view => view = $_view);
185
+ let debounceHandle = {};
186
+ return derived(
187
+ [state._events, state.eventFilter],
188
+ (values, set) => debounce(() => {
189
+ let [$_events, $eventFilter] = values;
190
+ set(
191
+ isFunction($eventFilter)
192
+ ? $_events.filter((event, index, events) => $eventFilter({
193
+ event,
194
+ index,
195
+ events,
196
+ view
197
+ }))
198
+ : $_events
199
+ );
200
+ }, debounceHandle, state._queue),
201
+ []
202
+ );
203
+ }
204
+
182
205
  export function now() {
183
206
  return readable(createDate(), set => {
184
207
  let interval = setInterval(() => {