npm - @event-calendar/core - Versions diffs - 3.3.0 → 3.5.0 - Mend

@event-calendar/core 3.3.0 → 3.5.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 (8) hide show

package/README.md CHANGED Viewed

@@ -61,6 +61,7 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
   - [eventStartEditable](#eventstarteditable)
   - [eventTextColor](#eventtextcolor)
   - [eventTimeFormat](#eventtimeformat)
+  - [filterEventsWithResources](#filtereventswithresources)
   - [filterResourcesWithEvents](#filterresourceswithevents)
   - [firstDay](#firstday)
   - [flexibleSlotTimeLimits](#flexibleslottimelimits)
@@ -204,8 +205,8 @@ import '@event-calendar/core/index.css';
 ### Pre-built browser ready bundle
 Include the following lines of code in the `<head>` section of your page:
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@3.3.0/event-calendar.min.css">
-<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@3.3.0/event-calendar.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@3.5.0/event-calendar.min.css">
+<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@3.5.0/event-calendar.min.js"></script>
 ```
 <details>
@@ -668,7 +669,7 @@ Determines whether the events on the calendar can be dragged and resized (both a
 If you don't need both, use the more specific [eventStartEditable](#eventstarteditable) and [eventDurationEditable](#eventdurationeditable) instead.
 ### events
-- Type `Array`
+- Type `array`
 - Default `[]`
 Array of plain objects that will be parsed into [Event](#event-object) objects and displayed on the calendar.
@@ -804,11 +805,11 @@ This is currently an alias for the `eventBackgroundColor`.
 Defines the content that is rendered inside an event’s element.
-This value can be either a [Content](#content) or a function that returns content:
+This value can be either a [Content](#content) or a function that returns content or `undefined`:
 ```js
 function (info) {
-    // return Content
+    // return Content or undefined
 }
 ```
 `info` is an object with the following properties:
@@ -842,6 +843,8 @@ The current [View](#view-object) object
 </tr>
 </table>
+In case the function returns `undefined`, the event will be rendered in the default way.
 ### eventDidMount
 - Type `function`
 - Default `undefined`
@@ -1504,6 +1507,12 @@ Sets the default text color for events on the calendar.
 You can use any of the CSS color formats such `'#f00'`, `'#ff0000'`, `'rgb(255,0,0)'`, or `'red'`.
+### filterEventsWithResources
+- Type `boolean`
+- Default `false`
+Determines whether events that do not belong to the current array of [resources](#resources) should be hidden in `dayGrid`/`timeGrid`/`list` views.
 ### filterResourcesWithEvents
 - Type `boolean`
 - Default `false`
@@ -1614,13 +1623,13 @@ Defines the height of the entire calendar.
 This should be a valid CSS value like `'100%'` or `'600px'`.
 ### hiddenDays
-- Type `Array`
+- Type `array`
 - Default `[]`
 Exclude certain days-of-the-week from being displayed, where Sunday is `0`, Monday is `1`, etc. Saturday is `6`.
 ### highlightedDates
-- Type `Array`
+- Type `array`
 - Default `[]`
 Array of dates that need to be highlighted in the calendar.
@@ -1811,7 +1820,7 @@ Enables a marker indicating the current time in `timeGrid`/`resourceTimeGrid` vi
 Enables mouse cursor pointer in `timeGrid`/`resourceTimeGrid` and other views.
 ### resources
-- Type `Array`
+- Type `array`
 - Default `[]`
 Array of plain objects that will be parsed into [Resource](#resource-object) objects for displaying in the resource view.
@@ -2076,13 +2085,13 @@ This should be a value that can be parsed into a [Duration](#duration-object) ob
 ### slotWidth
 - Type `integer`
-- Default `52`
+- Default `72`
 Defines the time slot width in pixels in `ResourceTimeline` views. When changing the setting, you must additionally override the following CSS styles:
 ```css
 .ec-timeline .ec-time, .ec-timeline .ec-line {
-  width: 52px;  /* override this value */
+  width: 72px;  /* override this value */
 }
 ```
@@ -2531,48 +2540,48 @@ The [eventTextColor](#eventtextcolor) override for this specific event
 <tr>
 <td>
-`extendedProps`
+`classNames`
 </td>
 <td>
-A plain object holding miscellaneous properties specified during parsing in the explicitly given `extendedProps` field
+An array of additional CSS classes for this specific event
 </td>
 </tr>
-</table>
-### Parsing event from a plain object
-When Event Calendar receives an array of plain event’s objects either from the `events` option or as a result of an HTTP request to a URL of an event source, it parses the input objects into proper Event objects.
-Here are all admissible fields for the event’s input object:
-<table>
 <tr>
 <td>
-`id`
+`styles`
 </td>
 <td>
-`string` or `integer` A unique identifier of the event. Default `auto-generated value`
+An array of additional inline styling declarations for this specific event
 </td>
 </tr>
 <tr>
 <td>
-`resourceId`
+`extendedProps`
 </td>
 <td>
-`string` or `integer` An ID of a resource that the event is associated with. This field is not used if `resourceIds` is provided. Default `undefined`
+A plain object holding miscellaneous properties specified during parsing in the explicitly given `extendedProps` field
 </td>
 </tr>
+</table>
+### Parsing event from a plain object
+When Event Calendar receives an array of plain event’s objects either from the `events` option or as a result of an HTTP request to a URL of an event source, it parses the input objects into proper Event objects.
+Here are all admissible fields for the event’s input object:
+<table>
 <tr>
 <td>
-`resourceIds`
+`id`
 </td>
 <td>
-`Array` An array of resource IDs that the event is associated with. This field is used instead of `resourceId`. Default `[]`
+`string` or `integer` A unique identifier of the event. Default `auto-generated value`
 </td>
 </tr>
 <tr>
@@ -2638,6 +2647,26 @@ Here are all admissible fields for the event’s input object:
 <tr>
 <td>
+`durationEditable`
+</td>
+<td>
+`boolean` Overrides the master [eventDurationEditable](#eventdurationeditable) option for this single event. Default `undefined`
+</td>
+</tr>
+<tr>
+<td>
+`resourceIds` or `resourceId`
+</td>
+<td>
+`string`, `integer` or `array`  An ID of a resource or an array of resource IDs that the event is associated with. Default `[]`
+</td>
+</tr>
+<tr>
+<td>
 `display`
 </td>
 <td>
@@ -2678,6 +2707,26 @@ Here are all admissible fields for the event’s input object:
 <tr>
 <td>
+`classNames` or `className`
+</td>
+<td>
+`string` or `array` Sets additional CSS classes for this single event. See [eventClassNames](#eventclassnames). Default `[]`
+</td>
+</tr>
+<tr>
+<td>
+`styles` or `style`
+</td>
+<td>
+`string` or `array` Sets additional inline styling declarations for this single event. This value can be either a string containing styles `'font-size: 24px; border-radius: 4px; ...'` or an array of strings `['font-size: 24px', 'border-radius: 4px', ...]`. Default `[]`
+</td>
+</tr>
+<tr>
+<td>
 `extendedProps`
 </td>
 <td>
@@ -2773,6 +2822,16 @@ The title of the resource. See [Content](#content)
 </td>
 <td>Default text color for this resource's events</td>
 </tr>
+<tr>
+<td>
+`extendedProps`
+</td>
+<td>
+A plain object holding miscellaneous properties specified during parsing in the explicitly given `extendedProps` field
+</td>
+</tr>
 </table>
 ### Parsing resource from a plain object
@@ -2820,6 +2879,16 @@ Here are all admissible fields for the resource’s input object:
 `string` Sets the default text color for this resource's events just like the calendar-wide [eventTextColor](#eventtextcolor) option. Default `undefined`
 </td>
 </tr>
+<tr>
+<td>
+`extendedProps`
+</td>
+<td>
+`object` A plain object with any miscellaneous properties. It will be directly transferred to the `extendedProps` property of the Resource object. Default `{}`
+</td>
+</tr>
 </table>
 ## View object

package/index.js CHANGED Viewed

@@ -274,6 +274,10 @@ function symbol() {
     return Symbol('ec');
 }
+function isArray(value) {
+    return Array.isArray(value);
+}
 function createElement(tag, className, content, attrs = []) {
     let el = document.createElement(tag);
     el.className = className;
@@ -373,21 +377,20 @@ function createEvents(input) {
     return input.map(event => {
         let result = {
             id: 'id' in event ? String(event.id) : `{generated-${eventId++}}`,
-            resourceIds: Array.isArray(event.resourceIds)
-                ? event.resourceIds.map(String)
-                : ('resourceId' in event ? [String(event.resourceId)] : []),
+            resourceIds: toArrayProp(event, 'resourceId').map(String),
             allDay: event.allDay ?? (noTimePart(event.start) && noTimePart(event.end)),
             start: createDate(event.start),
             end: createDate(event.end),
-            title: event.title || '',
-            titleHTML: event.titleHTML || '',
+            title: event.title ?? '',
             editable: event.editable,
             startEditable: event.startEditable,
             durationEditable: event.durationEditable,
-            display: event.display || 'auto',
-            extendedProps: event.extendedProps || {},
-            backgroundColor: event.backgroundColor || event.color,
-            textColor: event.textColor
+            display: event.display ?? 'auto',
+            extendedProps: event.extendedProps ?? {},
+            backgroundColor: event.backgroundColor ?? event.color,
+            textColor: event.textColor,
+            classNames: toArrayProp(event, 'className'),
+            styles: toArrayProp(event, 'style')
         };
         if (result.allDay) {
@@ -407,6 +410,11 @@ function createEvents(input) {
     });
 }
+function toArrayProp(input, propName) {
+    let result = input[propName + 's'] ?? input[propName] ?? [];
+    return isArray(result) ? result : [result];
+}
 function createEventSources(input) {
     return input.map(source => ({
         events: source.events,
@@ -446,7 +454,9 @@ function createEventContent(chunk, displayEventEnd, eventContent, theme, _intlEv
                 view: toViewWithLocalDates(_view)
             })
             : eventContent;
-    } else {
+    }
+    if (content === undefined) {
         let domNodes;
         switch (chunk.event.display) {
             case 'background':
@@ -477,6 +487,7 @@ function createTimeElement(timeText, chunk, theme) {
 }
 function createEventClasses(eventClassNames, event, _view) {
+    let result = event.classNames;
     if (eventClassNames) {
         if (is_function(eventClassNames)) {
             eventClassNames = eventClassNames({
@@ -484,9 +495,12 @@ function createEventClasses(eventClassNames, event, _view) {
                 view: toViewWithLocalDates(_view)
             });
         }
-        return Array.isArray(eventClassNames) ? eventClassNames : [eventClassNames];
+        result = [
+            ...isArray(eventClassNames) ? eventClassNames : [eventClassNames],
+            ...result
+        ];
     }
-    return [];
+    return result;
 }
 function toEventWithLocalDates(event) {
@@ -599,17 +613,24 @@ function runReposition(refs, data) {
 }
 /**
- * Check whether the event intersects with the given date range and resource
+ * Check whether the event intersects with the given date range and resources
  * @param event
  * @param start
  * @param end
- * @param [resource]
+ * @param resources
  * @return boolean
  */
-function eventIntersects(event, start, end, resource) {
-    return event.start < end && event.end > start && (
-        resource === undefined || event.resourceIds.includes(resource.id)
-    );
+function eventIntersects(event, start, end, resources) {
+    if (event.start < end && event.end > start) {
+        if (resources) {
+            if (!isArray(resources)) {
+                resources = [resources];
+            }
+            return resources.some(resource => event.resourceIds.includes(resource.id));
+        }
+        return true;
+    }
+    return false;
 }
 function helperEvent(display) {
@@ -664,9 +685,9 @@ function createResources(input) {
     return input.map(resource => ({
         id: String(resource.id),
         title: resource.title || '',
-        titleHTML: resource.titleHTML || '',
         eventBackgroundColor: resource.eventBackgroundColor,
-        eventTextColor: resource.eventTextColor
+        eventTextColor: resource.eventTextColor,
+        extendedProps: resource.extendedProps ?? {}
     }));
 }
@@ -871,6 +892,7 @@ function createOptions(plugins) {
             hour: 'numeric',
             minute: '2-digit'
         },
+        filterEventsWithResources: false,
         filterResourcesWithEvents: false,
         firstDay: 0,
         flexibleSlotTimeLimits: false,  // ec option
@@ -1343,7 +1365,7 @@ function validKey(key, state) {
     return state.hasOwnProperty(key) && key[0] !== '_';
 }
-/* packages/core/src/Buttons.svelte generated by Svelte v4.2.18 */
+/* packages/core/src/Buttons.svelte generated by Svelte v4.2.19 */
 function get_each_context$2(ctx, list, i) {
 	const child_ctx = ctx.slice();
@@ -1845,7 +1867,7 @@ class Buttons extends SvelteComponent {
 	}
 }
-/* packages/core/src/Toolbar.svelte generated by Svelte v4.2.18 */
+/* packages/core/src/Toolbar.svelte generated by Svelte v4.2.19 */
 function get_each_context$1(ctx, list, i) {
 	const child_ctx = ctx.slice();
@@ -2237,7 +2259,7 @@ class Toolbar extends SvelteComponent {
 	}
 }
-/* packages/core/src/Auxiliary.svelte generated by Svelte v4.2.18 */
+/* packages/core/src/Auxiliary.svelte generated by Svelte v4.2.19 */
 function get_each_context(ctx, list, i) {
 	const child_ctx = ctx.slice();
@@ -2445,7 +2467,7 @@ class Auxiliary extends SvelteComponent {
 	}
 }
-/* packages/core/src/Calendar.svelte generated by Svelte v4.2.18 */
+/* packages/core/src/Calendar.svelte generated by Svelte v4.2.19 */
 function create_fragment(ctx) {
 	let div;
@@ -2640,21 +2662,23 @@ function instance($$self, $$props, $$invalidate) {
 	}
 	function addEvent(event) {
-		$_events.push(createEvents([event])[0]);
+		event = createEvents([event])[0];
+		$_events.push(event);
 		_events.set($_events);
-		return this;
+		return event;
 	}
 	function updateEvent(event) {
 		for (let e of $_events) {
 			if (e.id == event.id) {
-				assign(e, createEvents([event])[0]);
+				event = createEvents([event])[0];
+				assign(e, event);
 				_events.set($_events);
-				break;
+				return event;
 			}
 		}
-		return this;
+		return null;
 	}
 	function removeEventById(id) {
@@ -2862,4 +2886,4 @@ class Calendar extends SvelteComponent {
 	}
 }
-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 };
+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, isArray, 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 Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@event-calendar/core",
-  "version": "3.3.0",
+  "version": "3.5.0",
   "title": "Event Calendar Core package",
   "description": "Full-sized drag & drop event calendar with resource & timeline views",
   "keywords": [
@@ -28,6 +28,6 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "svelte": "^4.2.16"
+    "svelte": "^4.2.19"
   }
 }

package/src/Calendar.svelte CHANGED Viewed

@@ -67,20 +67,22 @@
     }
     export function addEvent(event) {
-        $_events.push(createEvents([event])[0]);
+        event = createEvents([event])[0];
+        $_events.push(event);
         $_events = $_events;
-        return this;
+        return event;
     }
     export function updateEvent(event) {
         for (let e of $_events) {
             if (e.id == event.id) {
-                assign(e, createEvents([event])[0]);
+                event = createEvents([event])[0];
+                assign(e, event);
                 $_events = $_events;
-                break;
+                return event;
             }
         }
-        return this;
+        return null;
     }
     export function removeEventById(id) {

package/src/lib/events.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import {addDay, datesEqual, createDate, cloneDate, setMidnight, toLocalDate, toISOString, noTimePart, copyTime} from './date';
 import {createElement} from './dom';
-import {assign} from './utils';
+import {assign, isArray} from './utils';
 import {toViewWithLocalDates} from './view';
 import {is_function} from 'svelte/internal';
@@ -9,21 +9,20 @@ export function createEvents(input) {
     return input.map(event => {
         let result = {
             id: 'id' in event ? String(event.id) : `{generated-${eventId++}}`,
-            resourceIds: Array.isArray(event.resourceIds)
-                ? event.resourceIds.map(String)
-                : ('resourceId' in event ? [String(event.resourceId)] : []),
+            resourceIds: toArrayProp(event, 'resourceId').map(String),
             allDay: event.allDay ?? (noTimePart(event.start) && noTimePart(event.end)),
             start: createDate(event.start),
             end: createDate(event.end),
-            title: event.title || '',
-            titleHTML: event.titleHTML || '',
+            title: event.title ?? '',
             editable: event.editable,
             startEditable: event.startEditable,
             durationEditable: event.durationEditable,
-            display: event.display || 'auto',
-            extendedProps: event.extendedProps || {},
-            backgroundColor: event.backgroundColor || event.color,
-            textColor: event.textColor
+            display: event.display ?? 'auto',
+            extendedProps: event.extendedProps ?? {},
+            backgroundColor: event.backgroundColor ?? event.color,
+            textColor: event.textColor,
+            classNames: toArrayProp(event, 'className'),
+            styles: toArrayProp(event, 'style')
         };
         if (result.allDay) {
@@ -43,6 +42,11 @@ export function createEvents(input) {
     });
 }
+function toArrayProp(input, propName) {
+    let result = input[propName + 's'] ?? input[propName] ?? [];
+    return isArray(result) ? result : [result];
+}
 export function createEventSources(input) {
     return input.map(source => ({
         events: source.events,
@@ -82,7 +86,9 @@ export function createEventContent(chunk, displayEventEnd, eventContent, theme,
                 view: toViewWithLocalDates(_view)
             })
             : eventContent;
-    } else {
+    }
+    if (content === undefined) {
         let domNodes;
         switch (chunk.event.display) {
             case 'background':
@@ -113,6 +119,7 @@ function createTimeElement(timeText, chunk, theme) {
 }
 export function createEventClasses(eventClassNames, event, _view) {
+    let result = event.classNames;
     if (eventClassNames) {
         if (is_function(eventClassNames)) {
             eventClassNames = eventClassNames({
@@ -120,9 +127,12 @@ export function createEventClasses(eventClassNames, event, _view) {
                 view: toViewWithLocalDates(_view)
             });
         }
-        return Array.isArray(eventClassNames) ? eventClassNames : [eventClassNames];
+        result = [
+            ...isArray(eventClassNames) ? eventClassNames : [eventClassNames],
+            ...result
+        ];
     }
-    return [];
+    return result;
 }
 export function toEventWithLocalDates(event) {
@@ -235,17 +245,24 @@ export function runReposition(refs, data) {
 }
 /**
- * Check whether the event intersects with the given date range and resource
+ * Check whether the event intersects with the given date range and resources
  * @param event
  * @param start
  * @param end
- * @param [resource]
+ * @param resources
  * @return boolean
  */
-export function eventIntersects(event, start, end, resource) {
-    return event.start < end && event.end > start && (
-        resource === undefined || event.resourceIds.includes(resource.id)
-    );
+export function eventIntersects(event, start, end, resources) {
+    if (event.start < end && event.end > start) {
+        if (resources) {
+            if (!isArray(resources)) {
+                resources = [resources];
+            }
+            return resources.some(resource => event.resourceIds.includes(resource.id));
+        }
+        return true;
+    }
+    return false;
 }
 export function helperEvent(display) {

package/src/lib/resources.js CHANGED Viewed

@@ -2,9 +2,9 @@ export function createResources(input) {
     return input.map(resource => ({
         id: String(resource.id),
         title: resource.title || '',
-        titleHTML: resource.titleHTML || '',
         eventBackgroundColor: resource.eventBackgroundColor,
-        eventTextColor: resource.eventTextColor
+        eventTextColor: resource.eventTextColor,
+        extendedProps: resource.extendedProps ?? {}
     }));
 }

package/src/lib/utils.js CHANGED Viewed

@@ -25,3 +25,7 @@ export function max(...args) {
 export function symbol() {
     return Symbol('ec');
 }
+export function isArray(value) {
+    return Array.isArray(value);
+}

package/src/storage/options.js CHANGED Viewed

@@ -45,6 +45,7 @@ export function createOptions(plugins) {
             hour: 'numeric',
             minute: '2-digit'
         },
+        filterEventsWithResources: false,
         filterResourcesWithEvents: false,
         firstDay: 0,
         flexibleSlotTimeLimits: false,  // ec option