@event-calendar/core - npm Package Compare versions

Comparing version 0.3.3 to 0.4.0

index.js

@@ -1,5 +0,5 @@
-import { is_function, tick, SvelteComponent, init, safe_not_equal, empty, insert, detach, noop, destroy_each, component_subscribe, set_store_value, element, text, attr, append, listen, set_data, space, transition_in, group_outros, transition_out, check_outros, create_component, mount_component, destroy_component, set_style } from 'svelte/internal';
+import { is_function, tick, noop, SvelteComponent, init, safe_not_equal, empty, insert, detach, destroy_each, component_subscribe, set_store_value, element, text, attr, append, listen, set_data, space, transition_in, group_outros, transition_out, check_outros, create_component, mount_component, destroy_component, set_style } from 'svelte/internal';
 import { getContext, setContext } from 'svelte';
 import { derived, writable, get } from 'svelte/store';
-import { setMidnight, createDate, createDuration, createEvents, createEventSources, assign, cloneDate, prevClosestDay, addDuration, nextClosestDay, DAY_IN_SECONDS, subtractDay, derived2, addDay, createView, toLocalDate, toISOString, writable2, intl, intlRange, subtractDuration, toEventWithLocalDates, toViewWithLocalDates } from '@event-calendar/common';
+import { setMidnight, createDate, createDuration, createEvents, createEventSources, assign, cloneDate, prevClosestDay, addDuration, subtractDay, derived2, addDay, createView, nextClosestDay, DAY_IN_SECONDS, toLocalDate, toISOString, writable2, intl, intlRange, subtractDuration, toEventWithLocalDates, toViewWithLocalDates } from '@event-calendar/common';
 
@@ -13,2 +13,3 @@ function createOptions(plugins) {
         dateClick: undefined,
+        datesSet: undefined,
         dayHeaderFormat: {
@@ -150,3 +151,3 @@ weekday: 'short',
 function activeRange(state) {
-    return derived(
+    let _activeRange = derived(
         [state._currentRange, state.firstDay, state.monthMode, state.slotMinTime, state.slotMaxTime],
@@ -172,2 +173,20 @@ ([$_currentRange, $firstDay, $monthMode, $slotMinTime, $slotMaxTime]) => {
     );
+
+    let debounce = 0;
+    derived([_activeRange, state.datesSet], ([$_activeRange, $datesSet]) => {
+        if ($datesSet && !debounce) {
+            ++debounce;
+            tick().then(() => {
+                --debounce;
+                $datesSet({
+                    start: toLocalDate($_activeRange.start),
+                    end: toLocalDate($_activeRange.end),
+                    startStr: toISOString($_activeRange.start),
+                    endStr: toISOString($_activeRange.end)
+                });
+            });
+        }
+    }).subscribe(noop);
+
+    return _activeRange;
 }
@@ -271,2 +290,5 @@
                 };
+                // Prepare other stuff
+                let startStr = toISOString($_activeRange.start);
+                let endStr = toISOString($_activeRange.end);
                 // Loop over event sources
@@ -278,3 +300,5 @@ for (let source of $eventSources) {
                             start: toLocalDate($_activeRange.start),
-                            end: toLocalDate($_activeRange.end)
+                            end: toLocalDate($_activeRange.end),
+                            startStr,
+                            endStr
                         }, success, failure);
@@ -288,4 +312,4 @@ if (result !== undefined) {
                         let params = is_function(source.extraParams) ? source.extraParams() : assign({}, source.extraParams);
-                        params.start = toISOString($_activeRange.start);
-                        params.end = toISOString($_activeRange.end);
+                        params.start = startStr;
+                        params.end = endStr;
                         params = new URLSearchParams(params);
@@ -417,3 +441,3 @@ // Prepare fetch
 
-/* packages/core/src/Buttons.svelte generated by Svelte v3.42.3 */
+/* packages/core/src/Buttons.svelte generated by Svelte v3.42.4 */
 
@@ -821,3 +845,3 @@ function get_each_context$1(ctx, list, i) {
 
-/* packages/core/src/Toolbar.svelte generated by Svelte v3.42.3 */
+/* packages/core/src/Toolbar.svelte generated by Svelte v3.42.4 */
 
@@ -1192,3 +1216,3 @@ function get_each_context(ctx, list, i) {
 
-/* packages/core/src/Calendar.svelte generated by Svelte v3.42.3 */
+/* packages/core/src/Calendar.svelte generated by Svelte v3.42.4 */
 
@@ -1396,4 +1420,4 @@ function create_fragment(ctx) {
 
-	function removeEventById(eventId) {
-		state._events.update(events => events.filter(event => event.id != eventId));
+	function removeEventById(id) {
+		state._events.update(events => events.filter(event => event.id != id));
 		return this;
@@ -1400,0 +1424,0 @@ }

package.json

 {
   "name": "@event-calendar/core",
-  "version": "0.3.3",
+  "version": "0.4.0",
   "title": "Event Calendar Core package",
@@ -21,5 +21,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 @@

No alert changes

Improved metrics

Total package byte prevSize

87366

increased by2.66%

Lines of code

1323

increased by1.69%

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