@event-calendar/core 5.5.0 → 5.5.1

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
@@ -103,6 +103,7 @@ Inspired by [FullCalendar](https://fullcalendar.io/), it implements similar opti
103
103
  - [loading](#loading)
104
104
  - [locale](#locale)
105
105
  - [longPressDelay](#longpressdelay)
106
+ - [monthHeaderFormat](#monthheaderformat)
106
107
  - [moreLinkContent](#morelinkcontent)
107
108
  - [noEventsClick](#noeventsclick)
108
109
  - [noEventsContent](#noeventscontent)
@@ -257,8 +258,8 @@ This bundle contains a version of the calendar that includes all plugins and is
257
258
 
258
259
  The first step is to include the following lines of code in the `<head>` section of your page:
259
260
  ```html
260
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.4.2/dist/event-calendar.min.css">
261
- <script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.4.2/dist/event-calendar.min.js"></script>
261
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.5.1/dist/event-calendar.min.css">
262
+ <script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.5.1/dist/event-calendar.min.js"></script>
262
263
  ```
263
264
 
264
265
  <details>
@@ -353,7 +354,7 @@ When hidden with `false`, all-day events will not be displayed in `timeGrid`/`re
353
354
  <details>
354
355
  <summary>Default</summary>
355
356
 
356
- `{collapse: 'Collapse', close: 'Close', dayGridDay: 'day', dayGridMonth: 'month', dayGridWeek: 'week', expand: 'Expand', listDay: 'list', listMonth: 'list', listWeek: 'list', listYear: 'list', resourceTimeGridDay: 'resources', resourceTimeGridWeek: 'resources', resourceTimelineDay: 'timeline', resourceTimelineMonth: 'timeline', resourceTimelineWeek: 'timeline', timeGridDay: 'day', timeGridWeek: 'week', today: 'today'}`
357
+ `{collapse: 'Collapse', close: 'Close', dayGridDay: 'day', dayGridMonth: 'month', dayGridWeek: 'week', expand: 'Expand', listDay: 'day', listMonth: 'month', listWeek: 'week', listYear: 'year', resourceTimeGridDay: 'day', resourceTimeGridWeek: 'week', resourceTimelineDay: 'day', resourceTimelineMonth: 'month', resourceTimelineWeek: 'week', resourceTimelineYear: 'year', timeGridDay: 'day', timeGridWeek: 'week', today: 'today'}`
357
358
  > Views override the default value as follows:
358
359
  > - dayGridDay `text => ({...text, next: 'Next day', prev: 'Previous day'})`
359
360
  > - dayGridMonth `text => ({...text, next: 'Next month', prev: 'Previous month'})`
@@ -367,6 +368,7 @@ When hidden with `false`, all-day events will not be displayed in `timeGrid`/`re
367
368
  > - resourceTimelineDay `text => ({...text, next: 'Next day', prev: 'Previous day'})`
368
369
  > - resourceTimelineMonth `text => ({...text, next: 'Next month', prev: 'Previous month'})`
369
370
  > - resourceTimelineWeek `text => ({...text, next: 'Next week', prev: 'Previous week'})`
371
+ > - resourceTimelineYear `text => ({...text, next: 'Next year', prev: 'Previous year'})`
370
372
  > - timeGridDay `text => ({...text, next: 'Next day', prev: 'Previous day'})`
371
373
  > - timeGridWeek `text => ({...text, next: 'Next week', prev: 'Previous week'})`
372
374
 
@@ -680,6 +682,7 @@ function (date) {
680
682
  > - dayGridDay `{weekday: 'long'}`
681
683
  > - dayGridMonth `{weekday: 'short'}`
682
684
  > - resourceTimelineMonth `{weekday: 'short', day: 'numeric'}`
685
+ > - resourceTimelineYear `{weekday: 'short', day: 'numeric'}`
683
686
  > - timeGridDay `{weekday: 'long'}`
684
687
 
685
688
  Defines the text that is displayed on the calendar’s column headings.
@@ -734,6 +737,7 @@ function (date) {
734
737
  > - resourceTimelineDay `false`
735
738
  > - resourceTimelineMonth `false`
736
739
  > - resourceTimelineWeek `false`
740
+ > - resourceTimelineYear `false`
737
741
 
738
742
  Determines whether to display an event’s end time.
739
743
 
@@ -765,6 +769,7 @@ Determines whether the calendar should automatically scroll during the event dra
765
769
  > - resourceTimeGridDay `{days: 1}`
766
770
  > - resourceTimelineDay `{days: 1}`
767
771
  > - resourceTimelineMonth `{months: 1}`
772
+ > - resourceTimelineYear `{years: 1}`
768
773
  > - timeGridDay `{days: 1}`
769
774
 
770
775
  Sets the duration of a view.
@@ -1954,6 +1959,29 @@ For touch devices, the amount of time (in milliseconds) the user must hold down
1954
1959
 
1955
1960
  For a more granular configuration, see [eventLongPressDelay](#eventlongpressdelay) and [selectLongPressDelay](#selectlongpressdelay).
1956
1961
 
1962
+ ### monthHeaderFormat
1963
+ - Type `object` or `function`
1964
+ - Default `{month: 'long'}`
1965
+
1966
+ Defines the text that is displayed in month headings in `resourceTimelineYear` view.
1967
+
1968
+ This value can be either an object with options for the native JavaScript [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) object, or a callback function that returns a [Content](#content) with the formatted string:
1969
+
1970
+ ```js
1971
+ function (date) {
1972
+ // return Content with the formatted date string
1973
+ }
1974
+ ```
1975
+ <table>
1976
+ <tr>
1977
+ <td>
1978
+
1979
+ `date`
1980
+ </td>
1981
+ <td>JavaScript Date object that needs to be formatted</td>
1982
+ </tr>
1983
+ </table>
1984
+
1957
1985
  ### moreLinkContent
1958
1986
  - Type `Content` or `function`
1959
1987
  - Default `undefined`
@@ -2412,6 +2440,7 @@ Defines how many pixels the user’s mouse must move before the selection begins
2412
2440
  - Default `'00:30:00'`
2413
2441
  > Views override the default value as follows:
2414
2442
  > - resourceTimelineMonth `{days: 1}`
2443
+ > - resourceTimelineYear `{days: 1}`
2415
2444
 
2416
2445
  Defines the frequency for displaying time slots.
2417
2446
 
@@ -2519,6 +2548,7 @@ If not specified, then equal to [slotDuration](#slotduration).
2519
2548
  > - resourceTimelineDay `theme => ({...theme, view: 'ec-resource ec-timeline ec-day-view'})`
2520
2549
  > - resourceTimelineMonth `theme => ({...theme, view: 'ec-resource ec-timeline ec-month-view'})`
2521
2550
  > - resourceTimelineWeek `theme => ({...theme, view: 'ec-resource ec-timeline ec-week-view'})`
2551
+ > - resourceTimelineYear `theme => ({...theme, view: 'ec-resource ec-timeline ec-year-view'})`
2522
2552
  > - timeGridDay `theme => ({...theme, view: 'ec-time-grid ec-day-view'})`
2523
2553
  > - timeGridWeek `theme => ({...theme, view: 'ec-time-grid ec-week-view'})`
2524
2554
  </details>
@@ -2549,6 +2579,9 @@ function (theme) {
2549
2579
  - Default `{year: 'numeric', month: 'short', day: 'numeric'}`
2550
2580
  > Views override the default value as follows:
2551
2581
  > - dayGridMonth `{year: 'numeric', month: 'long'}`
2582
+ > - listDay `{year: 'numeric', month: 'long', day: 'numeric'}`
2583
+ > - listMonth `{year: 'numeric', month: 'long'}`
2584
+ > - listYear `{year: 'numeric'}`
2552
2585
  > - timeGridDay `{year: 'numeric', month: 'long', day: 'numeric'}`
2553
2586
 
2554
2587
  Defines the text that is displayed in the header toolbar’s title.
@@ -2686,6 +2719,7 @@ The following values are available:
2686
2719
  - `'resourceTimelineDay'`
2687
2720
  - `'resourceTimelineWeek'`
2688
2721
  - `'resourceTimelineMonth'`
2722
+ - `'resourceTimelineYear'`
2689
2723
  - `'timeGridDay'`
2690
2724
  - `'timeGridWeek'`
2691
2725
 
@@ -2765,7 +2799,7 @@ function (arg) {
2765
2799
  - Type `boolean`
2766
2800
  - Default `false`
2767
2801
 
2768
- Determines whether week numbers should be displayed in the `dayGrid` view.
2802
+ Determines whether week numbers should be displayed in `dayGrid`/`resourceTimeline` views.
2769
2803
 
2770
2804
  The numbering of weeks depends on the value of [firstDay](#firstday). When `firstDay` is `0`, the [Western](https://en.wikipedia.org/wiki/Week#Other_week_numbering_systems) system is used. Any other value uses the [ISO](https://en.wikipedia.org/wiki/Week#The_ISO_week_date_system) system.
2771
2805
 
@@ -2775,20 +2809,20 @@ Methods allow you to manipulate EventCalendar after initialization. They are acc
2775
2809
  In Svelte, methods are available from a component instance:
2776
2810
  ```html
2777
2811
  <script>
2778
- import {Calendar, TimeGrid} from '@event-calendar/core';
2812
+ import {Calendar, TimeGrid} from '@event-calendar/core';
2779
2813
 
2780
- let ec = $state();
2781
- let options = $state({
2782
- view: 'timeGridWeek',
2783
- eventSources: [{events: function() {
2784
- console.log('fetching...');
2785
- return [];
2786
- }}]
2787
- });
2788
-
2789
- function invokeMethod() {
2790
- ec.refetchEvents();
2791
- }
2814
+ let ec = $state();
2815
+ let options = $state({
2816
+ view: 'timeGridWeek',
2817
+ eventSources: [{events: function() {
2818
+ console.log('fetching...');
2819
+ return [];
2820
+ }}]
2821
+ });
2822
+
2823
+ function invokeMethod() {
2824
+ ec.refetchEvents();
2825
+ }
2792
2826
  </script>
2793
2827
 
2794
2828
  <button onclick={invokeMethod}>Refetch events</button>
package/dist/index.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * EventCalendar v5.5.0
2
+ * EventCalendar v5.5.1
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.5.0
2
+ * EventCalendar v5.5.1
3
3
  * https://github.com/vkurko/calendar
4
4
  */
5
5
  import { getAbortSignal, getContext, mount, onMount, setContext, tick, unmount, untrack } from "svelte";
@@ -1410,7 +1410,7 @@ var State = class {
1410
1410
  this.#filteredEvents = $.derived(filteredEvents(this));
1411
1411
  this.#mainEl = $.state();
1412
1412
  this.#now = $.state($.proxy(createDate()));
1413
- this.#resources = $.state(arrayProxy(this.options.resources));
1413
+ this.#resources = $.state(arrayProxy(isArray(this.options.resources) ? this.options.resources : []));
1414
1414
  this.#today = $.state($.proxy(setMidnight(cloneDate(this.now))));
1415
1415
  this.#intlEventTime = $.derived(intlRange(this, "eventTimeFormat"));
1416
1416
  this.#intlDayHeader = $.derived(intl(this, "dayHeaderFormat"));
@@ -3592,10 +3592,10 @@ var list_default = { createOptions(options) {
3592
3592
  view: "listWeek"
3593
3593
  });
3594
3594
  assign(options.buttonText, {
3595
- listDay: "list",
3596
- listWeek: "list",
3597
- listMonth: "list",
3598
- listYear: "list"
3595
+ listDay: "day",
3596
+ listWeek: "week",
3597
+ listMonth: "month",
3598
+ listYear: "year"
3599
3599
  });
3600
3600
  assign(options.theme, {
3601
3601
  daySide: "ec-day-side",
@@ -4796,8 +4796,8 @@ var resource_time_grid_default = {
4796
4796
  view: "resourceTimeGridWeek"
4797
4797
  });
4798
4798
  assign(options.buttonText, {
4799
- resourceTimeGridDay: "resources",
4800
- resourceTimeGridWeek: "resources"
4799
+ resourceTimeGridDay: "day",
4800
+ resourceTimeGridWeek: "week"
4801
4801
  });
4802
4802
  assign(options.theme, { colGroup: "ec-col-group" });
4803
4803
  assign(options.views, {
@@ -4948,7 +4948,7 @@ function grid(mainState, viewState) {
4948
4948
  }
4949
4949
  function extraHeads(mainState, viewState) {
4950
4950
  return () => {
4951
- let { options: { firstDay, weekNumbers } } = mainState;
4951
+ let { features, options: { firstDay, weekNumbers } } = mainState;
4952
4952
  let { grid } = viewState;
4953
4953
  let months = [];
4954
4954
  let weeks = [];
@@ -4956,7 +4956,7 @@ function extraHeads(mainState, viewState) {
4956
4956
  let month;
4957
4957
  let week;
4958
4958
  if (!empty(grid)) for (let { dayStart, gridColumn } of grid[0]) {
4959
- if (month && month.date.getUTCMonth() === dayStart.getUTCMonth()) ++month.span;
4959
+ if (features.includes("month")) if (month && month.date.getUTCMonth() === dayStart.getUTCMonth()) ++month.span;
4960
4960
  else {
4961
4961
  month = {
4962
4962
  date: dayStart,
@@ -5677,10 +5677,10 @@ var resource_timeline_default = {
5677
5677
  assign(options.buttonText, {
5678
5678
  expand: "Expand",
5679
5679
  collapse: "Collapse",
5680
- resourceTimelineDay: "timeline",
5681
- resourceTimelineWeek: "timeline",
5682
- resourceTimelineMonth: "timeline",
5683
- resourceTimelineYear: "timeline"
5680
+ resourceTimelineDay: "day",
5681
+ resourceTimelineWeek: "week",
5682
+ resourceTimelineMonth: "month",
5683
+ resourceTimelineYear: "year"
5684
5684
  });
5685
5685
  assign(options.icons, {
5686
5686
  collapse: { html: "&minus;" },
@@ -5752,10 +5752,10 @@ function initViewComponent$1(mainState) {
5752
5752
  return _initViewComponent(mainState);
5753
5753
  }
5754
5754
  function initMonthViewComponent(mainState) {
5755
- return _initViewComponent(mainState);
5755
+ return _initViewComponent(mainState, ["month"]);
5756
5756
  }
5757
- function _initViewComponent(mainState) {
5758
- mainState.features = ["timeline"];
5757
+ function _initViewComponent(mainState, extraFeatures = []) {
5758
+ mainState.features = ["timeline", ...extraFeatures];
5759
5759
  mainState.extensions.viewResources = (resources) => resources.filter((resource) => !getPayload(resource).hidden);
5760
5760
  return View;
5761
5761
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@event-calendar/core",
3
- "version": "5.5.0",
3
+ "version": "5.5.1",
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.53.12"
35
+ "svelte": "^5.54.0"
36
36
  }
37
37
  }
@@ -12,10 +12,10 @@ export default {
12
12
  view: 'listWeek'
13
13
  });
14
14
  assign(options.buttonText, {
15
- listDay: 'list',
16
- listWeek: 'list',
17
- listMonth: 'list',
18
- listYear: 'list'
15
+ listDay: 'day',
16
+ listWeek: 'week',
17
+ listMonth: 'month',
18
+ listYear: 'year'
19
19
  });
20
20
  assign(options.theme, {
21
21
  daySide: 'ec-day-side',
@@ -15,8 +15,8 @@ export default {
15
15
  view: 'resourceTimeGridWeek'
16
16
  });
17
17
  assign(options.buttonText, {
18
- resourceTimeGridDay: 'resources',
19
- resourceTimeGridWeek: 'resources'
18
+ resourceTimeGridDay: 'day',
19
+ resourceTimeGridWeek: 'week'
20
20
  });
21
21
  assign(options.theme, {
22
22
  colGroup: 'ec-col-group'
@@ -45,7 +45,7 @@ export function grid(mainState, viewState) {
45
45
  export function extraHeads(mainState, viewState) {
46
46
  return () => {
47
47
  // Dependencies
48
- let {options: {firstDay, weekNumbers}} = mainState;
48
+ let {features, options: {firstDay, weekNumbers}} = mainState;
49
49
  let {grid} = viewState;
50
50
 
51
51
  let months = [];
@@ -56,11 +56,13 @@ export function extraHeads(mainState, viewState) {
56
56
  let week;
57
57
  if (!empty(grid)) {
58
58
  for (let {dayStart, gridColumn} of grid[0]) {
59
- if (month && month.date.getUTCMonth() === dayStart.getUTCMonth()) {
60
- ++month.span;
61
- } else {
62
- month = {date: dayStart, gridColumn, span: 1};
63
- months.push(month);
59
+ if (features.includes('month')) {
60
+ if (month && month.date.getUTCMonth() === dayStart.getUTCMonth()) {
61
+ ++month.span;
62
+ } else {
63
+ month = {date: dayStart, gridColumn, span: 1};
64
+ months.push(month);
65
+ }
64
66
  }
65
67
  if (weekNumbers) {
66
68
  let number = getWeekNumber(dayStart, firstDay);
@@ -20,10 +20,10 @@ export default {
20
20
  assign(options.buttonText, {
21
21
  expand: 'Expand',
22
22
  collapse: 'Collapse',
23
- resourceTimelineDay: 'timeline',
24
- resourceTimelineWeek: 'timeline',
25
- resourceTimelineMonth: 'timeline',
26
- resourceTimelineYear: 'timeline'
23
+ resourceTimelineDay: 'day',
24
+ resourceTimelineWeek: 'week',
25
+ resourceTimelineMonth: 'month',
26
+ resourceTimelineYear: 'year'
27
27
  });
28
28
  assign(options.icons, {
29
29
  collapse: {html: '&minus;'},
@@ -91,11 +91,11 @@ function initViewComponent(mainState) {
91
91
  }
92
92
 
93
93
  function initMonthViewComponent(mainState) {
94
- return _initViewComponent(mainState);
94
+ return _initViewComponent(mainState, ['month']);
95
95
  }
96
96
 
97
- function _initViewComponent(mainState) {
98
- mainState.features = ['timeline'];
97
+ function _initViewComponent(mainState, extraFeatures = []) {
98
+ mainState.features = ['timeline', ...extraFeatures];
99
99
  mainState.extensions.viewResources = resources => resources.filter(resource => !getPayload(resource).hidden);
100
100
  return View;
101
101
  }
@@ -1,5 +1,5 @@
1
1
  import {SvelteMap} from 'svelte/reactivity';
2
- import {cloneDate, createDate, identity, intl, intlRange, setMidnight} from '#lib';
2
+ import {cloneDate, createDate, identity, intl, intlRange, isArray, setMidnight} from '#lib';
3
3
  import {optionsState} from './options.js';
4
4
  import {
5
5
  createLoadingInvoker, loadEvents, loadResources, runDatesSet, runEventAllUpdated, runViewDidMount, setNowAndToday,
@@ -27,7 +27,7 @@ export default class State {
27
27
  this.filteredEvents = $derived.by(filteredEvents(this));
28
28
  this.mainEl = $state();
29
29
  this.now = $state(createDate());
30
- this.resources = $state.raw(arrayProxy(this.options.resources));
30
+ this.resources = $state.raw(arrayProxy(isArray(this.options.resources) ? this.options.resources : []));
31
31
  this.today = $state(setMidnight(cloneDate(this.now)));
32
32
  this.intlEventTime = $derived.by(intlRange(this, 'eventTimeFormat'));
33
33
  this.intlDayHeader = $derived.by(intl(this, 'dayHeaderFormat'));