@event-calendar/common - npm Package Compare versions

Comparing version 0.11.2 to 0.12.0

index.js

@@ -24,2 +24,22 @@ import { is_function } from 'svelte/internal';
 
+/** Dispatch event on click outside of node */
+function clickOutside(node) {
+
+    const handleClick = jsEvent => {
+        if (node && !node.contains(jsEvent.target)) {
+            node.dispatchEvent(
+                new CustomEvent('clickoutside', {detail: {jsEvent}})
+            );
+        }
+    };
+
+    document.addEventListener('click', handleClick, true);
+
+    return {
+        destroy() {
+            document.removeEventListener('click', handleClick, true);
+        }
+    };
+}
+
 const DAY_IN_SECONDS = 86400;
@@ -443,2 +463,2 @@
 
-export { DAY_IN_SECONDS, addDay, addDuration, ancestor, assign, cloneDate, cloneEvent, createDate, createDuration, createEventChunk, createEventContent, createEventSources, createEvents, createView, datesEqual, derived2, formatRange, hasYScroll, height, intl, intlRange, nextClosestDay, prevClosestDay, rect, setContent, setMidnight, sortEventChunks, subtractDay, subtractDuration, toEventWithLocalDates, toISOString, toLocalDate, toViewWithLocalDates, writable2 };
+export { DAY_IN_SECONDS, addDay, addDuration, ancestor, assign, clickOutside, cloneDate, cloneEvent, createDate, createDuration, createEventChunk, createEventContent, createEventSources, createEvents, createView, datesEqual, derived2, formatRange, hasYScroll, height, intl, intlRange, nextClosestDay, prevClosestDay, rect, setContent, setMidnight, sortEventChunks, subtractDay, subtractDuration, toEventWithLocalDates, toISOString, toLocalDate, toViewWithLocalDates, writable2 };

package.json

 {
   "name": "@event-calendar/common",
-  "version": "0.11.2",
+  "version": "0.12.0",
   "title": "Event Calendar Common package",
@@ -36,4 +36,4 @@ "description": "Full-sized drag & drop event calendar with resource view",
   "dependencies": {
-    "svelte": "^3.47.0"
+    "svelte": "^3.51.0"
   }
 }

README.md

@@ -1,2 +0,2 @@
-# Event Calendar [![](https://data.jsdelivr.com/v1/package/npm/@event-calendar/build/badge)](https://www.jsdelivr.com/package/npm/@event-calendar/build) [![Sponsor](https://img.shields.io/badge/Sponsor-$10-green.svg)](https://www.paypal.me/vkurko/10usd) [![Sponsor](https://img.shields.io/badge/Sponsor-$1-green.svg)](https://www.paypal.me/vkurko/1usd)
+# Event Calendar [![](https://data.jsdelivr.com/v1/package/npm/@event-calendar/build/badge)](https://www.jsdelivr.com/package/npm/@event-calendar/build) [![npm](https://img.shields.io/npm/dm/@event-calendar/core?color=red&label=npm&style=flat-square)](https://www.npmjs.com/package/@event-calendar/core) [![Sponsor](https://img.shields.io/badge/Sponsor-$10-blue.svg?style=flat-square&logo=paypal)](https://www.paypal.me/vkurko/10usd)
 
@@ -7,3 +7,3 @@ See [demo](https://vkurko.github.io/calendar/).
 
-* Lightweight (51kb [br](https://en.wikipedia.org/wiki/Brotli) compressed `modern` version)
+* Lightweight (52kb [br](https://en.wikipedia.org/wiki/Brotli) compressed `modern` version)
 * Zero-dependency (pre-built bundle)
@@ -44,6 +44,6 @@ * Used by [Bookly](https://wordpress.org/plugins/bookly-responsive-appointment-booking-tool/)
   - [eventDragMinDistance](#eventdragmindistance)
+  - [eventDragStart](#eventdragstart)
+  - [eventDragStop](#eventdragstop)
   </td><td>
 
-  - [eventDragStart](#eventdragstart)
-  - [eventDragStop](#eventdragstop)
   - [eventDrop](#eventdrop)
@@ -68,4 +68,2 @@ - [eventDurationEditable](#eventdurationeditable)
   - [listDayFormat](#listdayformat)
-  </td><td>
-  
   - [listDaySideFormat](#listdaysideformat)
@@ -75,2 +73,4 @@ - [loading](#loading)
   - [monthMode](#monthmode)
+  </td><td>
+  
   - [moreLinkContent](#morelinkcontent)
@@ -82,2 +82,6 @@ - [noEventsClick](#noeventsclick)
   - [resources](#resources)
+  - [select](#select)
+  - [selectable](#selectable)
+  - [selectBackgroundColor](#selectbackgroundcolor)
+  - [selectMinDistance](#selectmindistance)
   - [scrollTime](#scrolltime)
@@ -90,2 +94,6 @@ - [slotDuration](#slotduration)
   - [theme](#theme)
+  - [titleFormat](#titleformat)
+  - [unselect](#unselect)
+  - [unselectAuto](#unselectauto)
+  - [unselectCancel](#unselectcancel)
   - [view](#view)
@@ -113,2 +121,5 @@ - [viewDidMount](#viewdidmount)
   - [getView](#getview)
+  </td><td>
+
+  - [unselect](#unselect-1)
   </td></tr>
@@ -1470,2 +1481,99 @@ </table>
 
+### select
+- Type `function`
+- Default `undefined`
+
+Callback function that is triggered when a date/time selection is made.
+
+```js
+function (selectInfo) { }
+```
+`selectInfo` is an object with the following properties:
+<table>
+<tr>
+<td>
+
+`start`
+</td>
+<td>JavaScript Date object indicating the start of the selection</td>
+</tr>
+<tr>
+<td>
+
+`end`
+</td>
+<td>JavaScript Date object indicating the end of the selection</td>
+</tr>
+<tr>
+<td>
+
+`startStr`
+</td>
+<td>ISO8601 string representation of the start date</td>
+</tr>
+<tr>
+<td>
+
+`endStr`
+</td>
+<td>ISO8601 string representation of the end date</td>
+</tr>
+<tr>
+<td>
+
+`allDay`
+</td>
+<td>
+
+Boolean (`true` or `false`). Determines if the selection has occurred in the `all-day` slot</td>
+</tr>
+<tr>
+<td>
+
+`jsEvent`
+</td>
+<td>JavaScript native event object with low-level information such as click coordinates</td>
+</tr>
+<tr>
+<td>
+
+`view`
+</td>
+<td>
+
+The current [View](#view-object) object
+</td>
+</tr>
+<tr>
+<td>
+
+`resource`
+</td>
+<td>
+
+If the current view is a resource view, the [Resource](#resource-object) object that was selected
+</td>
+</tr>
+</table>
+
+### selectable
+- Type `boolean`
+- Default `false`
+
+Determines whether the user is allowed to highlight multiple days or time slots by clicking and moving the pointer.
+
+### selectBackgroundColor
+- Type `string`
+- Default `undefined`
+
+Sets the background color for the event indicating the current selection. See [selectable](#selectable).
+
+You can use any of the CSS color formats such `'#f00'`, `'#ff0000'`, `'rgb(255,0,0)'`, or `'red'`.
+
+### selectMinDistance
+- Type `integer`
+- Default `0`
+
+Defines how many pixels the user’s mouse must move before the selection begins.
+
 ### scrollTime
@@ -1587,2 +1695,57 @@ - Type `string`, `integer` or `object`
 
+### unselect
+- Type `function`
+- Default `undefined`
+
+Callback function that is triggered when the current selection is cleared.
+
+A selection can be cleared for a number of reasons:
+
+- The user clicks away from the current selection (this does not happen when [unselectAuto](#unselectauto) is `false`).
+- The user makes a new selection. The unselect callback will be fired before the new selection occurs.
+- The user navigates forward or backward in the current view, or switches to a new view.
+- The [unselect](#unselect-1) method is called via the API.
+
+```js
+function (info) { }
+```
+`info` is an object with the following properties:
+<table>
+<tr>
+<td>
+
+`jsEvent`
+</td>
+<td>
+
+JavaScript native event object with low-level information such as click coordinates.
+
+If unselect has been triggered via the [unselect](#unselect-1) method, jsEvent will be `undefined`</td>
+</tr>
+<tr>
+<td>
+
+`view`
+</td>
+<td>
+
+The current [View](#view-object) object
+</td>
+</tr>
+</table>
+
+### unselectAuto
+- Type `boolean`
+- Default `true`
+
+Determines whether clicking elsewhere on the page will clear the current selection. See [selectable](#selectable).
+
+### unselectCancel
+- Type `string`
+- Default `''`
+
+A CSS selector that specifies elements that will ignore the [unselectAuto](#unselectauto) option.
+
+Clicking on elements that match this CSS selector will prevent the current selection from being cleared (because of the [unselectAuto](#unselectauto) option).
+
 ### view
@@ -1718,2 +1881,7 @@ - Type `string`
 
+### unselect()
+- Return value `EventCalendar` The calendar instance for chaining
+
+Clears the current selection. See [selectable](#selectable).
+
 ## Event object
@@ -1720,0 +1888,0 @@ This is a JavaScript object that the Event Calendar uses to store information about a calendar event.

src/actions.js

@@ -20,2 +20,22 @@
     return actions;
-}
+}
+
+/** Dispatch event on click outside of node */
+export function clickOutside(node) {
+
+    const handleClick = jsEvent => {
+        if (node && !node.contains(jsEvent.target)) {
+            node.dispatchEvent(
+                new CustomEvent('clickoutside', {detail: {jsEvent}})
+            );
+        }
+    };
+
+    document.addEventListener('click', handleClick, true);
+
+    return {
+        destroy() {
+            document.removeEventListener('click', handleClick, true);
+        }
+    };
+}

No alert changes

Improved metrics

Total package byte prevSize

77631

increased by6.38%

Lines of code

799

increased by4.31%

Number of lines in readme file

2281

increased by7.95%

Dependency changes

• Updatedsvelte@^3.51.0