@event-calendar/core 3.1.0 → 3.2.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.
Files changed (9) hide show
  1. package/README.md +19 -6
  2. package/index.js +39 -29
  3. package/package.json +1 -1
  4. package/src/Buttons.svelte +3 -2
  5. package/src/lib/date.js +3 -3
  6. package/src/lib/resources.js +12 -0
  7. package/src/storage/options.js +1 -1
  8. package/src/storage/state.js +0 -5
  9. package/src/storage/stores.js +3 -7
package/README.md CHANGED
@@ -4,7 +4,7 @@ See [demo](https://vkurko.github.io/calendar/) and [changelog](CHANGELOG.md).
4
4
 
5
5
  Full-sized drag & drop JavaScript event calendar with resource & timeline views:
6
6
 
7
- * Lightweight (39kb [br](https://en.wikipedia.org/wiki/Brotli) compressed)
7
+ * Lightweight (35kb [br](https://en.wikipedia.org/wiki/Brotli) compressed)
8
8
  * Zero-dependency (pre-built bundle)
9
9
  * Used on over 70,000 websites with [Bookly](https://wordpress.org/plugins/bookly-responsive-appointment-booking-tool/)
10
10
 
@@ -204,8 +204,8 @@ import '@event-calendar/core/index.css';
204
204
  ### Pre-built browser ready bundle
205
205
  Include the following lines of code in the `<head>` section of your page:
206
206
  ```html
207
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@3.1.0/event-calendar.min.css">
208
- <script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@3.1.0/event-calendar.min.js"></script>
207
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@3.2.0/event-calendar.min.css">
208
+ <script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@3.2.0/event-calendar.min.js"></script>
209
209
  ```
210
210
 
211
211
  <details>
@@ -363,9 +363,12 @@ Each `customButton` entry accepts the following properties:
363
363
  <tr>
364
364
  <td>
365
365
 
366
- `text `
366
+ `text`
367
+ </td>
368
+ <td>
369
+
370
+ The text to be display on the button itself. See [Content](#content)
367
371
  </td>
368
- <td>The text to be display on the button itself</td>
369
372
  </tr>
370
373
  <tr>
371
374
  <td>
@@ -374,6 +377,16 @@ Each `customButton` entry accepts the following properties:
374
377
  </td>
375
378
  <td>A callback function that is called when the button is clicked. Accepts one argument <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent">mouseEvent</a></td>
376
379
  </tr>
380
+ <tr>
381
+ <td>
382
+
383
+ `active`
384
+ </td>
385
+ <td>
386
+
387
+ If `true`, the button will appear pressed/active
388
+ </td>
389
+ </tr>
377
390
  </table>
378
391
 
379
392
  ### date
@@ -2743,7 +2756,7 @@ Here are all properties that exist in Resource object:
2743
2756
  </td>
2744
2757
  <td>
2745
2758
 
2746
- The title of the resource. See [Content](#content).
2759
+ The title of the resource. See [Content](#content)
2747
2760
  </td>
2748
2761
  </tr>
2749
2762
  <tr>
package/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { run_all, is_function, noop, identity, tick, SvelteComponent, init, safe_not_equal, ensure_array_like, empty, insert, detach, destroy_each, component_subscribe, set_store_value, element, text, attr, append, listen, set_data, action_destroyer, transition_in, group_outros, check_outros, transition_out, space, create_component, mount_component, destroy_component, construct_svelte_component, set_style, get_current_component } from 'svelte/internal';
1
+ import { run_all, is_function, identity, tick, SvelteComponent, init, safe_not_equal, ensure_array_like, empty, insert, noop, detach, destroy_each, component_subscribe, set_store_value, element, text, attr, append, listen, set_data, action_destroyer, transition_in, group_outros, check_outros, transition_out, space, create_component, mount_component, destroy_component, construct_svelte_component, set_style, get_current_component } from 'svelte/internal';
2
2
  import { getContext, setContext, beforeUpdate, afterUpdate } from 'svelte';
3
3
  import { derived, get, writable, readable } from 'svelte/store';
4
4
 
@@ -173,10 +173,10 @@ function copyTime(toDate, fromDate) {
173
173
  }
174
174
 
175
175
  /**
176
- * Get duration value in seconds or default value if duration is undefined
176
+ * Get duration value in seconds
177
177
  */
178
- function toSeconds(duration, defaultValue = 0) {
179
- return duration?.seconds ?? defaultValue;
178
+ function toSeconds(duration) {
179
+ return duration.seconds;
180
180
  }
181
181
 
182
182
  /**
@@ -662,6 +662,18 @@ function createResources(input) {
662
662
  }));
663
663
  }
664
664
 
665
+ function resourceBackgroundColor(event, resources) {
666
+ return findResource(event, resources)?.eventBackgroundColor;
667
+ }
668
+
669
+ function resourceTextColor(event, resources) {
670
+ return findResource(event, resources)?.eventTextColor;
671
+ }
672
+
673
+ function findResource(event, resources) {
674
+ return resources.find(resource => event.resourceIds.includes(resource.id));
675
+ }
676
+
665
677
  function intl(locale, format) {
666
678
  return derived([locale, format], ([$locale, $format]) => {
667
679
  let intl = is_function($format)
@@ -945,7 +957,7 @@ function createParsers(plugins) {
945
957
  events: createEvents,
946
958
  eventSources: createEventSources,
947
959
  hiddenDays: days => [...new Set(days)],
948
- highlightedDates: dates => dates.map(createDate),
960
+ highlightedDates: dates => dates.map(date => setMidnight(createDate(date))),
949
961
  resources: createResources,
950
962
  scrollTime: createDuration,
951
963
  slotDuration: createDuration,
@@ -976,10 +988,6 @@ function dayGrid(state) {
976
988
  return derived(state.view, $view => $view?.startsWith('dayGrid'));
977
989
  }
978
990
 
979
- function monthView(state) {
980
- return derived(state.view, $view => $view?.includes('Month'));
981
- }
982
-
983
991
  function activeRange(state) {
984
992
  return derived(
985
993
  [state._currentRange, state.firstDay, state.slotMaxTime, state._dayGrid],
@@ -1006,10 +1014,10 @@ function activeRange(state) {
1006
1014
 
1007
1015
  function currentRange(state) {
1008
1016
  return derived(
1009
- [state.date, state.duration, state.firstDay, state._monthView],
1010
- ([$date, $duration, $firstDay, $_monthView]) => {
1017
+ [state.date, state.duration, state.firstDay],
1018
+ ([$date, $duration, $firstDay]) => {
1011
1019
  let start = cloneDate($date), end;
1012
- if ($_monthView) {
1020
+ if ($duration.months) {
1013
1021
  start.setUTCDate(1);
1014
1022
  } else if ($duration.inWeeks) {
1015
1023
  // First day of week
@@ -1188,7 +1196,6 @@ class State {
1188
1196
  this._tasks = new Map(); // timeout IDs for tasks
1189
1197
  this._auxiliary = writable([]); // auxiliary components
1190
1198
  this._dayGrid = dayGrid(this);
1191
- this._monthView = monthView(this);
1192
1199
  this._currentRange = currentRange(this);
1193
1200
  this._activeRange = activeRange(this);
1194
1201
  this._fetchedRange = writable({start: undefined, end: undefined});
@@ -1206,9 +1213,6 @@ class State {
1206
1213
  this._viewDates = viewDates(this);
1207
1214
  this._view = view(this);
1208
1215
  this._viewComponent = writable(undefined);
1209
- // Resources
1210
- this._resBgColor = writable(noop);
1211
- this._resTxtColor = writable(noop);
1212
1216
  // Interaction
1213
1217
  this._interaction = writable({});
1214
1218
  this._iEvents = writable([null, null]); // interaction events: [drag/resize, pointer]
@@ -1339,7 +1343,7 @@ function get_each_context$2(ctx, list, i) {
1339
1343
  return child_ctx;
1340
1344
  }
1341
1345
 
1342
- // (51:27)
1346
+ // (52:27)
1343
1347
  function create_if_block_5(ctx) {
1344
1348
  let button_1;
1345
1349
  let t_value = /*$buttonText*/ ctx[5][/*button*/ ctx[25]] + "";
@@ -1394,37 +1398,43 @@ function create_if_block_5(ctx) {
1394
1398
  // (46:37)
1395
1399
  function create_if_block_4(ctx) {
1396
1400
  let button_1;
1397
- let t_value = /*$customButtons*/ ctx[6][/*button*/ ctx[25]].text + "";
1398
- let t;
1399
1401
  let button_1_class_value;
1402
+ let setContent_action;
1400
1403
  let mounted;
1401
1404
  let dispose;
1402
1405
 
1403
1406
  return {
1404
1407
  c() {
1405
1408
  button_1 = element("button");
1406
- t = text(t_value);
1407
- attr(button_1, "class", button_1_class_value = "" + (/*$theme*/ ctx[3].button + " ec-" + /*button*/ ctx[25]));
1409
+
1410
+ attr(button_1, "class", button_1_class_value = "" + (/*$theme*/ ctx[3].button + " ec-" + /*button*/ ctx[25] + (/*$customButtons*/ ctx[6][/*button*/ ctx[25]].active
1411
+ ? ' ' + /*$theme*/ ctx[3].active
1412
+ : '')));
1408
1413
  },
1409
1414
  m(target, anchor) {
1410
1415
  insert(target, button_1, anchor);
1411
- append(button_1, t);
1412
1416
 
1413
1417
  if (!mounted) {
1414
- dispose = listen(button_1, "click", function () {
1415
- if (is_function(/*$customButtons*/ ctx[6][/*button*/ ctx[25]].click)) /*$customButtons*/ ctx[6][/*button*/ ctx[25]].click.apply(this, arguments);
1416
- });
1418
+ dispose = [
1419
+ listen(button_1, "click", function () {
1420
+ if (is_function(/*$customButtons*/ ctx[6][/*button*/ ctx[25]].click)) /*$customButtons*/ ctx[6][/*button*/ ctx[25]].click.apply(this, arguments);
1421
+ }),
1422
+ action_destroyer(setContent_action = setContent.call(null, button_1, /*$customButtons*/ ctx[6][/*button*/ ctx[25]].text))
1423
+ ];
1417
1424
 
1418
1425
  mounted = true;
1419
1426
  }
1420
1427
  },
1421
1428
  p(new_ctx, dirty) {
1422
1429
  ctx = new_ctx;
1423
- if (dirty & /*$customButtons, buttons*/ 65 && t_value !== (t_value = /*$customButtons*/ ctx[6][/*button*/ ctx[25]].text + "")) set_data(t, t_value);
1424
1430
 
1425
- if (dirty & /*$theme, buttons*/ 9 && button_1_class_value !== (button_1_class_value = "" + (/*$theme*/ ctx[3].button + " ec-" + /*button*/ ctx[25]))) {
1431
+ if (dirty & /*$theme, buttons, $customButtons*/ 73 && button_1_class_value !== (button_1_class_value = "" + (/*$theme*/ ctx[3].button + " ec-" + /*button*/ ctx[25] + (/*$customButtons*/ ctx[6][/*button*/ ctx[25]].active
1432
+ ? ' ' + /*$theme*/ ctx[3].active
1433
+ : '')))) {
1426
1434
  attr(button_1, "class", button_1_class_value);
1427
1435
  }
1436
+
1437
+ if (setContent_action && is_function(setContent_action.update) && dirty & /*$customButtons, buttons*/ 65) setContent_action.update.call(null, /*$customButtons*/ ctx[6][/*button*/ ctx[25]].text);
1428
1438
  },
1429
1439
  d(detaching) {
1430
1440
  if (detaching) {
@@ -1432,7 +1442,7 @@ function create_if_block_4(ctx) {
1432
1442
  }
1433
1443
 
1434
1444
  mounted = false;
1435
- dispose();
1445
+ run_all(dispose);
1436
1446
  }
1437
1447
  };
1438
1448
  }
@@ -2837,4 +2847,4 @@ class Calendar extends SvelteComponent {
2837
2847
  }
2838
2848
  }
2839
2849
 
2840
- export { DAY_IN_SECONDS, addDay, addDuration, ancestor, assign, bgEvent, btnTextDay, btnTextMonth, btnTextWeek, btnTextYear, ceil, cloneDate, cloneEvent, copyTime, createDate, createDuration, createElement, createEventChunk, createEventClasses, createEventContent, createEventSources, createEvents, createResources, createSlotTimeLimits, createTimes, createView, datesEqual, debounce, Calendar as default, eventIntersects, floor, flushDebounce, getElementWithPayload, getPayload, ghostEvent, hasPayload, hasYScroll, height, helperEvent, intl, intlRange, keyEnter, keys, listView, max, min, nextClosestDay, nextDate, noTimePart, outsideEvent, pointerEvent, prepareEventChunks, prevClosestDay, prevDate, previewEvent, rect, repositionEvent, runReposition, setContent, setMidnight, setPayload, sortEventChunks, subtractDay, subtractDuration, symbol, task, themeView, timelineView, toEventWithLocalDates, toISOString, toLocalDate, toSeconds, toViewWithLocalDates, viewResources };
2850
+ export { DAY_IN_SECONDS, addDay, addDuration, ancestor, assign, bgEvent, btnTextDay, btnTextMonth, btnTextWeek, btnTextYear, ceil, cloneDate, cloneEvent, copyTime, createDate, createDuration, createElement, createEventChunk, createEventClasses, createEventContent, createEventSources, createEvents, createResources, createSlotTimeLimits, createTimes, createView, datesEqual, debounce, Calendar as default, eventIntersects, floor, flushDebounce, getElementWithPayload, getPayload, ghostEvent, hasPayload, hasYScroll, height, helperEvent, intl, intlRange, keyEnter, keys, listView, max, min, nextClosestDay, nextDate, noTimePart, outsideEvent, pointerEvent, prepareEventChunks, prevClosestDay, prevDate, previewEvent, rect, repositionEvent, resourceBackgroundColor, resourceTextColor, runReposition, setContent, setMidnight, setPayload, sortEventChunks, subtractDay, subtractDuration, symbol, task, themeView, timelineView, toEventWithLocalDates, toISOString, toLocalDate, toSeconds, toViewWithLocalDates, viewResources };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@event-calendar/core",
3
- "version": "3.1.0",
3
+ "version": "3.2.0",
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/Buttons.svelte CHANGED
@@ -45,9 +45,10 @@
45
45
  >{$buttonText[button]}</button>
46
46
  {:else if $customButtons[button]}
47
47
  <button
48
- class="{$theme.button} ec-{button}"
48
+ class="{$theme.button} ec-{button}{$customButtons[button].active ? ' ' + $theme.active : ''}"
49
49
  on:click={$customButtons[button].click}
50
- >{$customButtons[button].text}</button>
50
+ use:setContent={$customButtons[button].text}
51
+ ></button>
51
52
  {:else if button != ''}
52
53
  <button
53
54
  class="{$theme.button}{$view === button ? ' ' + $theme.active : ''} ec-{button}"
package/src/lib/date.js CHANGED
@@ -124,10 +124,10 @@ export function copyTime(toDate, fromDate) {
124
124
  }
125
125
 
126
126
  /**
127
- * Get duration value in seconds or default value if duration is undefined
127
+ * Get duration value in seconds
128
128
  */
129
- export function toSeconds(duration, defaultValue = 0) {
130
- return duration?.seconds ?? defaultValue;
129
+ export function toSeconds(duration) {
130
+ return duration.seconds;
131
131
  }
132
132
 
133
133
  /**
package/src/lib/resources.js CHANGED
@@ -7,3 +7,15 @@ export function createResources(input) {
7
7
  eventTextColor: resource.eventTextColor
8
8
  }));
9
9
  }
10
+
11
+ export function resourceBackgroundColor(event, resources) {
12
+ return findResource(event, resources)?.eventBackgroundColor;
13
+ }
14
+
15
+ export function resourceTextColor(event, resources) {
16
+ return findResource(event, resources)?.eventTextColor;
17
+ }
18
+
19
+ function findResource(event, resources) {
20
+ return resources.find(resource => event.resourceIds.includes(resource.id));
21
+ }
package/src/storage/options.js CHANGED
@@ -139,7 +139,7 @@ export function createParsers(plugins) {
139
139
  events: createEvents,
140
140
  eventSources: createEventSources,
141
141
  hiddenDays: days => [...new Set(days)],
142
- highlightedDates: dates => dates.map(createDate),
142
+ highlightedDates: dates => dates.map(date => setMidnight(createDate(date))),
143
143
  resources: createResources,
144
144
  scrollTime: createDuration,
145
145
  slotDuration: createDuration,
package/src/storage/state.js CHANGED
@@ -5,7 +5,6 @@ import {
5
5
  activeRange,
6
6
  currentRange,
7
7
  dayGrid,
8
- monthView,
9
8
  events,
10
9
  now,
11
10
  today,
@@ -38,7 +37,6 @@ export default class {
38
37
  this._tasks = new Map(); // timeout IDs for tasks
39
38
  this._auxiliary = writable([]); // auxiliary components
40
39
  this._dayGrid = dayGrid(this);
41
- this._monthView = monthView(this);
42
40
  this._currentRange = currentRange(this);
43
41
  this._activeRange = activeRange(this);
44
42
  this._fetchedRange = writable({start: undefined, end: undefined});
@@ -56,9 +54,6 @@ export default class {
56
54
  this._viewDates = viewDates(this);
57
55
  this._view = view2(this);
58
56
  this._viewComponent = writable(undefined);
59
- // Resources
60
- this._resBgColor = writable(noop);
61
- this._resTxtColor = writable(noop);
62
57
  // Interaction
63
58
  this._interaction = writable({});
64
59
  this._iEvents = writable([null, null]); // interaction events: [drag/resize, pointer]
package/src/storage/stores.js CHANGED
@@ -22,10 +22,6 @@ export function dayGrid(state) {
22
22
  return derived(state.view, $view => $view?.startsWith('dayGrid'));
23
23
  }
24
24
 
25
- export function monthView(state) {
26
- return derived(state.view, $view => $view?.includes('Month'));
27
- }
28
-
29
25
  export function activeRange(state) {
30
26
  return derived(
31
27
  [state._currentRange, state.firstDay, state.slotMaxTime, state._dayGrid],
@@ -52,10 +48,10 @@ export function activeRange(state) {
52
48
 
53
49
  export function currentRange(state) {
54
50
  return derived(
55
- [state.date, state.duration, state.firstDay, state._monthView],
56
- ([$date, $duration, $firstDay, $_monthView]) => {
51
+ [state.date, state.duration, state.firstDay],
52
+ ([$date, $duration, $firstDay]) => {
57
53
  let start = cloneDate($date), end;
58
- if ($_monthView) {
54
+ if ($duration.months) {
59
55
  start.setUTCDate(1);
60
56
  } else if ($duration.inWeeks) {
61
57
  // First day of week