@event-calendar/interaction - npm Package Compare versions

Comparing version 0.10.2 to 0.11.0

index.js

@@ -111,3 +111,3 @@ import { SvelteComponent, init, safe_not_equal, noop, listen, run_all, component_subscribe, globals, subscribe, set_store_value, is_function, create_component, mount_component, transition_in, transition_out, destroy_component, space, empty, insert, group_outros, check_outros, detach, binding_callbacks, element, attr, bubble } from 'svelte/internal';
 		$$unsubscribe__viewResources = noop,
-		$$subscribe__viewResources = () => ($$unsubscribe__viewResources(), $$unsubscribe__viewResources = subscribe(_viewResources, $$value => $$invalidate(47, $_viewResources = $$value)), _viewResources);
+		$$subscribe__viewResources = () => ($$unsubscribe__viewResources(), $$unsubscribe__viewResources = subscribe(_viewResources, $$value => $$invalidate(49, $_viewResources = $$value)), _viewResources);
 
@@ -129,19 +129,19 @@ let $eventDrop;
 	let { _iEvents, _iClass, _events, _viewDates, editable, eventStartEditable, eventDragMinDistance, eventDragStart, eventDragStop, eventDrop, eventResizeStart, eventResizeStop, eventResize, dragScroll, slotDuration, slotHeight, hiddenDays, _view, datesAboveResources } = getContext('state');
-	component_subscribe($$self, _iEvents, value => $$invalidate(44, $_iEvents = value));
-	component_subscribe($$self, _iClass, value => $$invalidate(46, $_iClass = value));
-	component_subscribe($$self, _events, value => $$invalidate(43, $_events = value));
-	component_subscribe($$self, _viewDates, value => $$invalidate(56, $_viewDates = value));
-	component_subscribe($$self, eventDragMinDistance, value => $$invalidate(55, $eventDragMinDistance = value));
-	component_subscribe($$self, eventDragStart, value => $$invalidate(53, $eventDragStart = value));
-	component_subscribe($$self, eventDragStop, value => $$invalidate(50, $eventDragStop = value));
-	component_subscribe($$self, eventDrop, value => $$invalidate(48, $eventDrop = value));
-	component_subscribe($$self, eventResizeStart, value => $$invalidate(54, $eventResizeStart = value));
-	component_subscribe($$self, eventResizeStop, value => $$invalidate(51, $eventResizeStop = value));
-	component_subscribe($$self, eventResize, value => $$invalidate(49, $eventResize = value));
-	component_subscribe($$self, dragScroll, value => $$invalidate(52, $dragScroll = value));
-	component_subscribe($$self, slotDuration, value => $$invalidate(58, $slotDuration = value));
-	component_subscribe($$self, slotHeight, value => $$invalidate(59, $slotHeight = value));
-	component_subscribe($$self, hiddenDays, value => $$invalidate(57, $hiddenDays = value));
-	component_subscribe($$self, _view, value => $$invalidate(45, $_view = value));
-	component_subscribe($$self, datesAboveResources, value => $$invalidate(60, $datesAboveResources = value));
+	component_subscribe($$self, _iEvents, value => $$invalidate(46, $_iEvents = value));
+	component_subscribe($$self, _iClass, value => $$invalidate(48, $_iClass = value));
+	component_subscribe($$self, _events, value => $$invalidate(45, $_events = value));
+	component_subscribe($$self, _viewDates, value => $$invalidate(58, $_viewDates = value));
+	component_subscribe($$self, eventDragMinDistance, value => $$invalidate(57, $eventDragMinDistance = value));
+	component_subscribe($$self, eventDragStart, value => $$invalidate(55, $eventDragStart = value));
+	component_subscribe($$self, eventDragStop, value => $$invalidate(52, $eventDragStop = value));
+	component_subscribe($$self, eventDrop, value => $$invalidate(50, $eventDrop = value));
+	component_subscribe($$self, eventResizeStart, value => $$invalidate(56, $eventResizeStart = value));
+	component_subscribe($$self, eventResizeStop, value => $$invalidate(53, $eventResizeStop = value));
+	component_subscribe($$self, eventResize, value => $$invalidate(51, $eventResize = value));
+	component_subscribe($$self, dragScroll, value => $$invalidate(54, $dragScroll = value));
+	component_subscribe($$self, slotDuration, value => $$invalidate(60, $slotDuration = value));
+	component_subscribe($$self, slotHeight, value => $$invalidate(61, $slotHeight = value));
+	component_subscribe($$self, hiddenDays, value => $$invalidate(59, $hiddenDays = value));
+	component_subscribe($$self, _view, value => $$invalidate(47, $_view = value));
+	component_subscribe($$self, datesAboveResources, value => $$invalidate(62, $datesAboveResources = value));
 	let interacting = false;
@@ -151,3 +151,3 @@ let resizing; // whether it is just resizing
 	let col, row;
-	let offset;
+	let offsetX, offsetY;
 	let fromX, fromY;
@@ -160,5 +160,6 @@ let toX, toY;
 	let resourceCol, newResourceCol;
+	let isAllDay;
 	let minEnd; // minimum end time when resizing
 
-	function startTimeGrid(event, el, jsEvent, resourcesStore, resize) {
+	function startTimeGrid(event, el, jsEvent, resourcesStore, allDay, resize) {
 		if (!interacting && jsEvent.isPrimary) {
@@ -168,9 +169,16 @@ if (resourcesStore) {
 			} else {
-				[colEl, bodyEl, col] = traverseTimeGrid(el);
+				[colEl, bodyEl, col, resourceCol = 0] = traverseTimeGrid(el);
 			}
 
 			start(event, jsEvent);
-			offset = floor((jsEvent.clientY - colRect.top) / $slotHeight);
+			offsetY = floor((jsEvent.clientY - colRect.top) / $slotHeight);
+			offsetX = 0; // applicable for all-day slot
+
+			if (allDay && (!resourcesStore || !$datesAboveResources)) {
+				offsetX = floor((jsEvent.clientX - colRect.left) / colRect.width) - col - resourceCol * $_viewDates.length;
+			}
+
 			$$subscribe__viewResources($$invalidate(1, _viewResources = resourcesStore));
 			interacting = INTERACTING_TIME_GRID;
+			isAllDay = allDay;
 			resizing = resize;
@@ -190,3 +198,3 @@
 
-			offset = inPopup
+			offsetX = inPopup
 			? 0
@@ -197,2 +205,3 @@ : floor((jsEvent.clientX - colRect.left) / colRect.width) - col;
 			interacting = INTERACTING_DAY_GRID;
+			isAllDay = false;
 			resizing = resize;
@@ -248,4 +257,6 @@
 			delta = createDuration({
-				days: ($_viewDates[newCol] - $_viewDates[col]) / 1000 / 60 / 60 / 24,
-				seconds: (floor(ry / $slotHeight) - offset) * $slotDuration.seconds
+				days: ($_viewDates[newCol] - $_viewDates[col]) / 1000 / 60 / 60 / 24 - offsetX,
+				seconds: isAllDay
+				? 0
+				: (floor(ry / $slotHeight) - offsetY) * $slotDuration.seconds
 			});
@@ -265,3 +276,3 @@ } else {
 			delta = createDuration({
-				days: ($_viewDates[newRow * cols + newCol] - $_viewDates[row * cols + col]) / 1000 / 60 / 60 / 24 - offset
+				days: ($_viewDates[newRow * cols + newCol] - $_viewDates[row * cols + col]) / 1000 / 60 / 60 / 24 - offsetX
 			});
@@ -268,0 +279,0 @@ }

package.json

 {
   "name": "@event-calendar/interaction",
-  "version": "0.10.2",
+  "version": "0.11.0",
   "title": "Event Calendar Interaction plugin",
@@ -36,5 +36,5 @@ "description": "Full-sized drag & drop event calendar with resource view",
   "dependencies": {
-    "@event-calendar/common": "~0.10.2",
+    "@event-calendar/common": "~0.11.0",
     "svelte": "^3.47.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) [![Donate](https://img.shields.io/badge/Donate_$10-PayPal-green.svg)](https://www.paypal.me/vkurko/10usd) [![Donate](https://img.shields.io/badge/Donate_$1-PayPal-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) [![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)
 
@@ -7,3 +7,3 @@ See [demo](https://vkurko.github.io/calendar/).
 
-* Lightweight (49kb [br](https://en.wikipedia.org/wiki/Brotli) compressed `modern` version)
+* Lightweight (55kb [br](https://en.wikipedia.org/wiki/Brotli) compressed `modern` version)
 * Zero-dependency (pre-built bundle)
@@ -23,2 +23,4 @@ * Used by [Bookly](https://wordpress.org/plugins/bookly-responsive-appointment-booking-tool/)
 
+  - [allDayContent](#alldaycontent)
+  - [allDaySlot](#alldayslot)
   - [buttonText](#buttontext)
@@ -43,5 +45,5 @@ - [date](#date)
   - [eventDragMinDistance](#eventdragmindistance)
-  - [eventDragStart](#eventdragstart)
   </td><td>
 
+  - [eventDragStart](#eventdragstart)
   - [eventDragStop](#eventdragstop)
@@ -218,2 +220,37 @@ - [eventDrop](#eventdrop)
 
+### allDayContent
+- Type `string`, `object`or `function`
+- Default `'all-day'`
+
+Defines the content that is displayed as a title of the `all-day` slot.
+
+This value can be either a string containing HTML `'<p>...</p>'`, an object containing the HTML string `{html: '<p>...</p>'}`, an object containing an array of DOM nodes `{domNodes: [node1, node2, ...]}` or a function that returns any of the above formats:
+
+```js
+function (arg) {
+    // return string or object
+}
+```
+`arg` is an object with the following properties:
+<table>
+<tr>
+<td>
+
+`text`
+</td>
+<td>
+
+The default text
+</td>
+</tr>
+</table>
+
+### allDaySlot
+- Type `boolean`
+- Default `false`
+
+Determines whether the `all-day` slot is displayed at the top of the calendar.
+
+When hidden with false, all-day events will not be displayed in `timeGrid`/`resourceTimeGrid` views.
+
 ### buttonText
@@ -1698,2 +1735,11 @@ - Type `object`
 
+`allDay`
+</td>
+<td>
+
+Boolean (`true` or `false`). Determines if the event is shown in the `all-day` slot</td>
+</tr>
+<tr>
+<td>
+
 `start`
@@ -1819,2 +1865,12 @@ </td>
 
+`allDay`
+</td>
+<td>
+
+`boolean` Determines if the event is shown in the all-day slot. Default `false`
+</td>
+</tr>
+<tr>
+<td>
+
 `start`
@@ -1821,0 +1877,0 @@ </td>

No alert changes

Improved metrics

Total package byte prevSize

92177

increased by2.11%

Lines of code

969

increased by0.94%

Number of lines in readme file

2113

increased by2.72%

Dependency changes

• + Added@event-calendar/common@0.11.2(transitive)

• - Removed@event-calendar/common@0.10.2(transitive)

• Updated@event-calendar/common@~0.11.0