@event-calendar/day-grid - npm Package Compare versions

Comparing version 0.3.3 to 0.4.0

index.js

 import { SvelteComponent, init, safe_not_equal, element, text, attr, insert, append, set_data, detach, space, noop, destroy_each, component_subscribe, create_slot, listen, update_slot_base, get_all_dirty_from_scope, get_slot_changes, transition_in, transition_out, run_all, set_store_value, binding_callbacks, action_destroyer, is_function, create_component, mount_component, destroy_component, group_outros, check_outros, empty } from 'svelte/internal';
 import { getContext, tick, onMount, afterUpdate, setContext } from 'svelte';
 import { derived, writable } from 'svelte/store';
-import { cloneDate, subtractDay, addDay, hasYScroll, sortEventChunks, setMidnight, datesEqual, setContent, toEventWithLocalDates, toViewWithLocalDates, createEventContent, createDate, toLocalDate, createEventChunk } from '@event-calendar/common';
+import { cloneDate, subtractDay, addDay, hasYScroll, sortEventChunks, setMidnight, datesEqual, setContent, toEventWithLocalDates, toViewWithLocalDates, createEventContent, createDate, toLocalDate, toISOString, createEventChunk } from '@event-calendar/common';
 
@@ -33,3 +33,3 @@ function days(state) {
 
-/* packages/day-grid/src/Header.svelte generated by Svelte v3.42.3 */
+/* packages/day-grid/src/Header.svelte generated by Svelte v3.42.4 */
 
@@ -194,3 +194,3 @@ function get_each_context$3(ctx, list, i) {
 
-/* packages/day-grid/src/Body.svelte generated by Svelte v3.42.3 */
+/* packages/day-grid/src/Body.svelte generated by Svelte v3.42.4 */
 
@@ -384,3 +384,3 @@ function create_fragment$4(ctx) {
 
-/* packages/day-grid/src/Event.svelte generated by Svelte v3.42.3 */
+/* packages/day-grid/src/Event.svelte generated by Svelte v3.42.4 */
 
@@ -645,11 +645,11 @@ function create_fragment$3(ctx) {
 
-/* packages/day-grid/src/Day.svelte generated by Svelte v3.42.3 */
+/* packages/day-grid/src/Day.svelte generated by Svelte v3.42.4 */
 
 function get_each_context$2(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[20] = list[i];
+	child_ctx[22] = list[i];
 	return child_ctx;
 }
 
-// (50:1) {#if dragChunk && datesEqual(dragChunk.date, date)}
+// (61:1) {#if dragChunk && datesEqual(dragChunk.date, date)}
 function create_if_block(ctx) {
@@ -666,3 +666,3 @@ let div;
 			create_component(event.$$.fragment);
-			attr(div, "class", div_class_value = "" + (/*$theme*/ ctx[7].events + " " + /*$theme*/ ctx[7].preview));
+			attr(div, "class", div_class_value = "" + (/*$theme*/ ctx[8].events + " " + /*$theme*/ ctx[8].preview));
 		},
@@ -679,3 +679,3 @@ m(target, anchor) {
 
-			if (!current || dirty & /*$theme*/ 128 && div_class_value !== (div_class_value = "" + (/*$theme*/ ctx[7].events + " " + /*$theme*/ ctx[7].preview))) {
+			if (!current || dirty & /*$theme*/ 256 && div_class_value !== (div_class_value = "" + (/*$theme*/ ctx[8].events + " " + /*$theme*/ ctx[8].preview))) {
 				attr(div, "class", div_class_value);
@@ -700,3 +700,3 @@ }
 
-// (56:2) {#each dayChunks as chunk}
+// (67:2) {#each dayChunks as chunk}
 function create_each_block$2(ctx) {
@@ -708,3 +708,3 @@ let event;
 			props: {
-				chunk: /*chunk*/ ctx[20],
+				chunk: /*chunk*/ ctx[22],
 				longChunks: /*longChunks*/ ctx[1]
@@ -724,3 +724,3 @@ }
 			const event_changes = {};
-			if (dirty & /*dayChunks*/ 8) event_changes.chunk = /*chunk*/ ctx[20];
+			if (dirty & /*dayChunks*/ 8) event_changes.chunk = /*chunk*/ ctx[22];
 			if (dirty & /*longChunks*/ 2) event_changes.longChunks = /*longChunks*/ ctx[1];
@@ -785,9 +785,9 @@ event.$set(event_changes);
 
-			attr(div0, "class", div0_class_value = /*$theme*/ ctx[7].dayHead);
-			attr(div1, "class", div1_class_value = /*$theme*/ ctx[7].events);
+			attr(div0, "class", div0_class_value = /*$theme*/ ctx[8].dayHead);
+			attr(div1, "class", div1_class_value = /*$theme*/ ctx[8].events);
 
-			attr(div2, "class", div2_class_value = "" + (/*$theme*/ ctx[7].day + (/*isToday*/ ctx[4] ? ' ' + /*$theme*/ ctx[7].today : '') + (/*otherMonth*/ ctx[5]
-			? ' ' + /*$theme*/ ctx[7].otherMonth
-			: '') + (/*highlight*/ ctx[6]
-			? ' ' + /*$theme*/ ctx[7].highlight
+			attr(div2, "class", div2_class_value = "" + (/*$theme*/ ctx[8].day + (/*isToday*/ ctx[5] ? ' ' + /*$theme*/ ctx[8].today : '') + (/*otherMonth*/ ctx[6]
+			? ' ' + /*$theme*/ ctx[8].otherMonth
+			: '') + (/*highlight*/ ctx[7]
+			? ' ' + /*$theme*/ ctx[8].highlight
 			: '')));
@@ -808,2 +808,3 @@ },
 
+			/*div2_binding*/ ctx[19](div2);
 			current = true;
@@ -813,3 +814,3 @@
 				dispose = listen(div2, "click", function () {
-					if (is_function(/*createClickHandler*/ ctx[14](/*$dateClick*/ ctx[8]))) /*createClickHandler*/ ctx[14](/*$dateClick*/ ctx[8]).apply(this, arguments);
+					if (is_function(/*createClickHandler*/ ctx[15](/*$dateClick*/ ctx[9]))) /*createClickHandler*/ ctx[15](/*$dateClick*/ ctx[9]).apply(this, arguments);
 				});
@@ -824,3 +825,3 @@
 
-			if (!current || dirty & /*$theme*/ 128 && div0_class_value !== (div0_class_value = /*$theme*/ ctx[7].dayHead)) {
+			if (!current || dirty & /*$theme*/ 256 && div0_class_value !== (div0_class_value = /*$theme*/ ctx[8].dayHead)) {
 				attr(div0, "class", div0_class_value);
@@ -881,10 +882,10 @@ }
 
-			if (!current || dirty & /*$theme*/ 128 && div1_class_value !== (div1_class_value = /*$theme*/ ctx[7].events)) {
+			if (!current || dirty & /*$theme*/ 256 && div1_class_value !== (div1_class_value = /*$theme*/ ctx[8].events)) {
 				attr(div1, "class", div1_class_value);
 			}
 
-			if (!current || dirty & /*$theme, isToday, otherMonth, highlight*/ 240 && div2_class_value !== (div2_class_value = "" + (/*$theme*/ ctx[7].day + (/*isToday*/ ctx[4] ? ' ' + /*$theme*/ ctx[7].today : '') + (/*otherMonth*/ ctx[5]
-			? ' ' + /*$theme*/ ctx[7].otherMonth
-			: '') + (/*highlight*/ ctx[6]
-			? ' ' + /*$theme*/ ctx[7].highlight
+			if (!current || dirty & /*$theme, isToday, otherMonth, highlight*/ 480 && div2_class_value !== (div2_class_value = "" + (/*$theme*/ ctx[8].day + (/*isToday*/ ctx[5] ? ' ' + /*$theme*/ ctx[8].today : '') + (/*otherMonth*/ ctx[6]
+			? ' ' + /*$theme*/ ctx[8].otherMonth
+			: '') + (/*highlight*/ ctx[7]
+			? ' ' + /*$theme*/ ctx[8].highlight
 			: '')))) {
@@ -918,2 +919,3 @@ attr(div2, "class", div2_class_value);
 			destroy_each(each_blocks, detaching);
+			/*div2_binding*/ ctx[19](null);
 			mounted = false;
@@ -936,7 +938,8 @@ dispose();
 	let { date: currentDate, dateClick, highlightedDates, _view, theme } = getContext('state');
-	component_subscribe($$self, currentDate, value => $$invalidate(17, $currentDate = value));
-	component_subscribe($$self, dateClick, value => $$invalidate(8, $dateClick = value));
-	component_subscribe($$self, highlightedDates, value => $$invalidate(16, $highlightedDates = value));
-	component_subscribe($$self, _view, value => $$invalidate(18, $_view = value));
-	component_subscribe($$self, theme, value => $$invalidate(7, $theme = value));
+	component_subscribe($$self, currentDate, value => $$invalidate(18, $currentDate = value));
+	component_subscribe($$self, dateClick, value => $$invalidate(9, $dateClick = value));
+	component_subscribe($$self, highlightedDates, value => $$invalidate(17, $highlightedDates = value));
+	component_subscribe($$self, _view, value => $$invalidate(20, $_view = value));
+	component_subscribe($$self, theme, value => $$invalidate(8, $theme = value));
+	let el;
 	let dayChunks;
@@ -947,13 +950,24 @@ let today = setMidnight(createDate()), isToday, otherMonth, highlight;
 		return is_function(fn)
-		? jsEvent => fn({
-				date: toLocalDate(date),
-				jsEvent,
-				view: toViewWithLocalDates($_view)
-			})
+		? jsEvent => {
+				fn({
+					date: toLocalDate(date),
+					dateStr: toISOString(date),
+					dayEl: el,
+					jsEvent,
+					view: toViewWithLocalDates($_view)
+				});
+			}
 		: undefined;
 	}
 
+	function div2_binding($$value) {
+		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+			el = $$value;
+			$$invalidate(4, el);
+		});
+	}
+
 	$$self.$$set = $$props => {
 		if ('date' in $$props) $$invalidate(0, date = $$props.date);
-		if ('chunks' in $$props) $$invalidate(15, chunks = $$props.chunks);
+		if ('chunks' in $$props) $$invalidate(16, chunks = $$props.chunks);
 		if ('longChunks' in $$props) $$invalidate(1, longChunks = $$props.longChunks);
@@ -964,3 +978,3 @@ if ('dragChunk' in $$props) $$invalidate(2, dragChunk = $$props.dragChunk);
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & /*chunks, date, dayChunks*/ 32777) {
+		if ($$self.$$.dirty & /*chunks, date, dayChunks*/ 65545) {
 			{
@@ -977,7 +991,7 @@ $$invalidate(3, dayChunks = []);
 
-		if ($$self.$$.dirty & /*date, $currentDate, $highlightedDates*/ 196609) {
+		if ($$self.$$.dirty & /*date, $currentDate, $highlightedDates*/ 393217) {
 			{
-				$$invalidate(4, isToday = datesEqual(date, today));
-				$$invalidate(5, otherMonth = date.getUTCMonth() !== $currentDate.getUTCMonth());
-				$$invalidate(6, highlight = $highlightedDates.some(d => datesEqual(d, date)));
+				$$invalidate(5, isToday = datesEqual(date, today));
+				$$invalidate(6, otherMonth = date.getUTCMonth() !== $currentDate.getUTCMonth());
+				$$invalidate(7, highlight = $highlightedDates.some(d => datesEqual(d, date)));
 			}
@@ -992,2 +1006,3 @@ }
 		dayChunks,
+		el,
 		isToday,
@@ -1006,3 +1021,4 @@ otherMonth,
 		$highlightedDates,
-		$currentDate
+		$currentDate,
+		div2_binding
 	];
@@ -1017,3 +1033,3 @@ }
 			date: 0,
-			chunks: 15,
+			chunks: 16,
 			longChunks: 1,
@@ -1025,3 +1041,3 @@ dragChunk: 2
 
-/* packages/day-grid/src/Week.svelte generated by Svelte v3.42.3 */
+/* packages/day-grid/src/Week.svelte generated by Svelte v3.42.4 */
 
@@ -1254,3 +1270,3 @@ function get_each_context$1(ctx, list, i) {
 
-/* packages/day-grid/src/View.svelte generated by Svelte v3.42.3 */
+/* packages/day-grid/src/View.svelte generated by Svelte v3.42.4 */
 
@@ -1257,0 +1273,0 @@ function get_each_context(ctx, list, i) {

package.json

 {
   "name": "@event-calendar/day-grid",
-  "version": "0.3.3",
+  "version": "0.4.0",
   "title": "Event Calendar DayGrid plugin",
@@ -20,5 +20,5 @@ "description": "Full-sized drag & drop event calendar with resource view",
   "dependencies": {
-    "@event-calendar/common": "~0.3.3",
-    "svelte": "^3.42.3"
+    "@event-calendar/common": "~0.4.0",
+    "svelte": "^3.42.4"
   }
 }

README.md

@@ -26,2 +26,3 @@ # Event Calendar [![](https://data.jsdelivr.com/v1/package/npm/@event-calendar/build/badge)](https://www.jsdelivr.com/package/npm/@event-calendar/build)
   - [datesAboveResources](#datesaboveresources)
+  - [datesSet](#datesset)
   - [dayHeaderFormat](#dayheaderformat)
@@ -39,5 +40,5 @@ - [displayEventEnd](#displayeventend)
   - [eventDragMinDistance](#eventdragmindistance)
-  - [eventDragStart](#eventdragstart)
   </td><td>
 
+  - [eventDragStart](#eventdragstart)
   - [eventDragStop](#eventdragstop)
@@ -59,5 +60,5 @@ - [eventDrop](#eventdrop)
   - [listDayFormat](#listdayformat)
-  - [listDaySideFormat](#listdaysideformat)
   </td><td>
 
+  - [listDaySideFormat](#listdaysideformat)
   - [loading](#loading)
@@ -129,12 +130,12 @@ - [locale](#locale)
 <script>
-  import Calendar from '@event-calendar/core';
-  import TimeGrid from '@event-calendar/time-grid';
+    import Calendar from '@event-calendar/core';
+    import TimeGrid from '@event-calendar/time-grid';
 
-  let plugins = [TimeGrid];
-  let options = {
-    view: 'timeGridWeek',
-    events: [
-      // your list of events
-    ]
-  };
+    let plugins = [TimeGrid];
+    let options = {
+        view: 'timeGridWeek',
+        events: [
+            // your list of events
+        ]
+    };
 </script>
@@ -150,12 +151,12 @@
 let ec = new Calendar({
-  target: document.getElementById('ec'),
-  props: {
-    plugins: [TimeGrid],
-    options: {
-      view: 'timeGridWeek',
-      events: [
-        // your list of events
-      ]
+    target: document.getElementById('ec'),
+    props: {
+        plugins: [TimeGrid],
+        options: {
+            view: 'timeGridWeek',
+            events: [
+                // your list of events
+            ]
+        }
     }
-  }
 });
@@ -175,6 +176,6 @@ ```
 let ec = new EventCalendar(document.getElementById('ec'), {
-  view: 'timeGridWeek',
-  events: [
-    // your list of events
-  ]
+    view: 'timeGridWeek',
+    events: [
+        // your list of events
+    ]
 });
@@ -191,13 +192,13 @@ ```
 <script>
-  import Calendar from '@event-calendar/core';
-  import TimeGrid from '@event-calendar/time-grid';
+    import Calendar from '@event-calendar/core';
+    import TimeGrid from '@event-calendar/time-grid';
 
-  let plugins = [TimeGrid];
-  let options = {
-    view: 'timeGridWeek'
-  };
+    let plugins = [TimeGrid];
+    let options = {
+        view: 'timeGridWeek'
+    };
 
-  function updateOptions() {
-    options.slotDuration = '01:00';
-  }
+    function updateOptions() {
+        options.slotDuration = '01:00';
+    }
 </script>
@@ -246,2 +247,16 @@
 
+`dateStr`
+</td>
+<td>ISO8601 string representation of the date</td>
+</tr>
+<tr>
+<td>
+
+`dayEl`
+</td>
+<td>HTML element that represents the whole-day that was clicked on</td>
+</tr>
+<tr>
+<td>
+
 `jsEvent`
@@ -279,2 +294,53 @@ </td>
 
+### datesSet
+- Type `function`
+- Default `undefined`
+
+Callback function that is triggered when the date range of the calendar was originally set or changed by clicking the previous/next buttons, changing the view, manipulating the current date via the API, etc.
+
+```js
+function (info) {}
+```
+`info` is an object with the following properties:
+<table>
+<tr>
+<td>
+
+`start`
+</td>
+<td>JavaScript Date object for the beginning of the range the calendar needs events for</td>
+</tr>
+<tr>
+<td>
+
+`end`
+</td>
+<td>JavaScript Date object for the end of the range the calendar needs events for. Note: This value is exclusive</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>
+
+`view`
+</td>
+<td>
+
+The current [View](#view-object) object
+</td>
+</tr>
+</table>
+
 ### dayHeaderFormat
@@ -293,3 +359,3 @@ - Type `object` or `function`
 function (date) {
-  // return formatted date string
+    // return formatted date string
 }
@@ -426,3 +492,3 @@ ```
 function (eventInfo) {
-  // return string or object
+    // return string or object
 }
@@ -856,2 +922,16 @@ ```
 </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>
 </table>
@@ -884,3 +964,3 @@
 function (time) {
-  // return formatted time string
+    // return formatted time string
 }
@@ -1282,18 +1362,18 @@ ```
 <script>
-  import Calendar from '@event-calendar/core';
-  import TimeGrid from '@event-calendar/time-grid';
+    import Calendar from '@event-calendar/core';
+    import TimeGrid from '@event-calendar/time-grid';
 
-  let ec;
-  let plugins = [TimeGrid];
-  let options = {
-    view: 'timeGridWeek',
-    eventSources: [{events: function() {
-        console.log('fetching...');
-        return [];
-      }}]
-  };
+    let ec;
+    let plugins = [TimeGrid];
+    let options = {
+        view: 'timeGridWeek',
+        eventSources: [{events: function() {
+            console.log('fetching...');
+            return [];
+        }}]
+    };
 
-  function invokeMethod() {
-    ec.refetchEvents();
-  }
+    function invokeMethod() {
+        ec.refetchEvents();
+    }
 </script>
@@ -1300,0 +1380,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

79239

increased by2.26%

Lines of code

1292

increased by1.17%

Number of lines in readme file

1768

increased by4.74%

Dependency changes

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

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

• Updated@event-calendar/common@~0.4.0

• Updatedsvelte@^3.42.4