@event-calendar/core 3.0.0 → 3.0.2

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 +3 -3
  2. package/index.css +4 -0
  3. package/index.js +44 -1
  4. package/package.json +1 -1
  5. package/src/lib/resources.js +9 -0
  6. package/src/lib/stores.js +32 -0
  7. package/src/lib.js +1 -0
  8. package/src/storage/options.js +12 -1
  9. package/src/styles/timeline.scss +4 -0
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 (40kb [br](https://en.wikipedia.org/wiki/Brotli) compressed)
7
+ * Lightweight (34kb [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
 
@@ -202,8 +202,8 @@ import '@event-calendar/core/index.css';
202
202
  ### Pre-built browser ready bundle
203
203
  Include the following lines of code in the `<head>` section of your page:
204
204
  ```html
205
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@3.0.0/event-calendar.min.css">
206
- <script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@3.0.0/event-calendar.min.js"></script>
205
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@3.0.2/event-calendar.min.css">
206
+ <script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@3.0.2/event-calendar.min.js"></script>
207
207
  ```
208
208
 
209
209
  <details>
package/index.css CHANGED
@@ -117,6 +117,9 @@
117
117
  .ec-timeline .ec-time {
118
118
  border-left: 1px solid var(--ec-border-color);
119
119
  box-sizing: border-box;
120
+ min-height: 24px;
121
+ overflow: hidden;
122
+ text-overflow: ellipsis;
120
123
  }
121
124
  .ec-timeline .ec-time, .ec-timeline .ec-line {
122
125
  width: 52px;
@@ -150,6 +153,7 @@
150
153
  .ec-timeline .ec-sidebar .ec-sidebar-title {
151
154
  flex-shrink: 0;
152
155
  border-bottom: 1px solid var(--ec-border-color);
156
+ box-sizing: content-box;
153
157
  }
154
158
  .ec-timeline .ec-sidebar .ec-content {
155
159
  flex: 1;
package/index.js CHANGED
@@ -631,6 +631,16 @@ function themeView(view) {
631
631
  return theme => ({...theme, view});
632
632
  }
633
633
 
634
+ function createResources(input) {
635
+ return input.map(resource => ({
636
+ id: String(resource.id),
637
+ title: resource.title || '',
638
+ titleHTML: resource.titleHTML || '',
639
+ eventBackgroundColor: resource.eventBackgroundColor,
640
+ eventTextColor: resource.eventTextColor
641
+ }));
642
+ }
643
+
634
644
  function intl(locale, format) {
635
645
  return derived([locale, format], ([$locale, $format]) => {
636
646
  let intl = is_function($format)
@@ -691,6 +701,37 @@ function _getParts(source, parts) {
691
701
  return result;
692
702
  }
693
703
 
704
+ function viewResources(state) {
705
+ return derived(
706
+ [state.resources, state.filterResourcesWithEvents, state._events, state._activeRange],
707
+ ([$resources, $filterResourcesWithEvents, $_events, $_activeRange]) => {
708
+ let result = $resources;
709
+
710
+ if ($filterResourcesWithEvents) {
711
+ result = $resources.filter(resource => {
712
+ for (let event of $_events) {
713
+ if (
714
+ event.display !== 'background' &&
715
+ event.resourceIds.includes(resource.id) &&
716
+ event.start < $_activeRange.end &&
717
+ event.end > $_activeRange.start
718
+ ) {
719
+ return true;
720
+ }
721
+ }
722
+ return false;
723
+ });
724
+ }
725
+
726
+ if (!result.length) {
727
+ result = createResources([{}]);
728
+ }
729
+
730
+ return result;
731
+ }
732
+ );
733
+ }
734
+
694
735
  function createTimes(date, $slotDuration, $_slotTimeLimits, $_intlSlotLabel, $_intlDayHeaderAL) {
695
736
  date = cloneDate(date);
696
737
  let compact = $slotDuration.seconds < 3600;
@@ -790,6 +831,7 @@ function createOptions(plugins) {
790
831
  hour: 'numeric',
791
832
  minute: '2-digit'
792
833
  },
834
+ filterResourcesWithEvents: false,
793
835
  firstDay: 0,
794
836
  flexibleSlotTimeLimits: false, // ec option
795
837
  headerToolbar: {
@@ -884,6 +926,7 @@ function createParsers(plugins) {
884
926
  eventSources: createEventSources,
885
927
  hiddenDays: days => [...new Set(days)],
886
928
  highlightedDates: dates => dates.map(createDate),
929
+ resources: createResources,
887
930
  scrollTime: createDuration,
888
931
  slotDuration: createDuration,
889
932
  slotMaxTime: createDuration,
@@ -2743,4 +2786,4 @@ class Calendar extends SvelteComponent {
2743
2786
  }
2744
2787
  }
2745
2788
 
2746
- 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, 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, noTimePart, outsideEvent, pointerEvent, prepareEventChunks, prevClosestDay, previewEvent, rect, repositionEvent, runReposition, setContent, setMidnight, setPayload, sortEventChunks, subtractDay, subtractDuration, symbol, task, themeView, timelineView, toEventWithLocalDates, toISOString, toLocalDate, toSeconds, toViewWithLocalDates };
2789
+ 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, noTimePart, outsideEvent, pointerEvent, prepareEventChunks, prevClosestDay, previewEvent, rect, repositionEvent, 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.0.0",
3
+ "version": "3.0.2",
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/lib/resources.js ADDED
@@ -0,0 +1,9 @@
1
+ export function createResources(input) {
2
+ return input.map(resource => ({
3
+ id: String(resource.id),
4
+ title: resource.title || '',
5
+ titleHTML: resource.titleHTML || '',
6
+ eventBackgroundColor: resource.eventBackgroundColor,
7
+ eventTextColor: resource.eventTextColor
8
+ }));
9
+ }
package/src/lib/stores.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import {derived} from 'svelte/store';
2
2
  import {is_function} from 'svelte/internal';
3
3
  import {toLocalDate} from './date';
4
+ import {createResources} from './resources.js';
4
5
 
5
6
  export function intl(locale, format) {
6
7
  return derived([locale, format], ([$locale, $format]) => {
@@ -61,3 +62,34 @@ function _getParts(source, parts) {
61
62
  }
62
63
  return result;
63
64
  }
65
+
66
+ export function viewResources(state) {
67
+ return derived(
68
+ [state.resources, state.filterResourcesWithEvents, state._events, state._activeRange],
69
+ ([$resources, $filterResourcesWithEvents, $_events, $_activeRange]) => {
70
+ let result = $resources;
71
+
72
+ if ($filterResourcesWithEvents) {
73
+ result = $resources.filter(resource => {
74
+ for (let event of $_events) {
75
+ if (
76
+ event.display !== 'background' &&
77
+ event.resourceIds.includes(resource.id) &&
78
+ event.start < $_activeRange.end &&
79
+ event.end > $_activeRange.start
80
+ ) {
81
+ return true;
82
+ }
83
+ }
84
+ return false;
85
+ });
86
+ }
87
+
88
+ if (!result.length) {
89
+ result = createResources([{}]);
90
+ }
91
+
92
+ return result;
93
+ }
94
+ );
95
+ }
package/src/lib.js CHANGED
@@ -5,6 +5,7 @@ export * from './lib/debounce.js';
5
5
  export * from './lib/dom.js';
6
6
  export * from './lib/events.js';
7
7
  export * from './lib/options.js';
8
+ export * from './lib/resources.js';
8
9
  export * from './lib/stores.js';
9
10
  export * from './lib/times.js';
10
11
  export * from './lib/utils.js';
package/src/storage/options.js CHANGED
@@ -1,4 +1,13 @@
1
- import {assign, createDate, createDuration, keys, setMidnight, createEvents, createEventSources} from '../lib.js';
1
+ import {
2
+ assign,
3
+ createDate,
4
+ createDuration,
5
+ keys,
6
+ setMidnight,
7
+ createEvents,
8
+ createEventSources,
9
+ createResources
10
+ } from '../lib.js';
2
11
 
3
12
  export function createOptions(plugins) {
4
13
  let options = {
@@ -36,6 +45,7 @@ export function createOptions(plugins) {
36
45
  hour: 'numeric',
37
46
  minute: '2-digit'
38
47
  },
48
+ filterResourcesWithEvents: false,
39
49
  firstDay: 0,
40
50
  flexibleSlotTimeLimits: false, // ec option
41
51
  headerToolbar: {
@@ -130,6 +140,7 @@ export function createParsers(plugins) {
130
140
  eventSources: createEventSources,
131
141
  hiddenDays: days => [...new Set(days)],
132
142
  highlightedDates: dates => dates.map(createDate),
143
+ resources: createResources,
133
144
  scrollTime: createDuration,
134
145
  slotDuration: createDuration,
135
146
  slotMaxTime: createDuration,
package/src/styles/timeline.scss CHANGED
@@ -70,6 +70,9 @@
70
70
  .ec-time {
71
71
  border-left: 1px solid var(--ec-border-color);
72
72
  box-sizing: border-box;
73
+ min-height: 24px;
74
+ overflow: hidden;
75
+ text-overflow: ellipsis;
73
76
  }
74
77
 
75
78
  .ec-time, .ec-line {
@@ -114,6 +117,7 @@
114
117
  .ec-sidebar-title {
115
118
  flex-shrink: 0;
116
119
  border-bottom: 1px solid var(--ec-border-color);
120
+ box-sizing: content-box;
117
121
  }
118
122
 
119
123
  .ec-content {