npm - @event-calendar/core - Versions diffs - 5.2.0 → 5.2.2 - Mend

@event-calendar/core 5.2.0 → 5.2.2

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 (15) hide show

package/README.md +13 -4
package/dist/index.css +20 -1
package/dist/index.js +36 -24
package/package.json +1 -1
package/src/Calendar.svelte +3 -2
package/src/lib/chunks.js +19 -17
package/src/plugins/day-grid/derived.js +1 -1
package/src/plugins/list/Day.svelte +1 -1
package/src/plugins/resource-timeline/derived.js +2 -2
package/src/plugins/resource-timeline/lib.js +5 -2
package/src/plugins/time-grid/derived.js +2 -2
package/src/plugins/time-grid/lib.js +6 -2
package/src/storage/options.svelte.js +3 -1
package/src/styles/index.css +1 -0
package/src/styles/scrollbars.css +19 -0

package/README.md CHANGED Viewed

@@ -41,6 +41,7 @@ Inspired by [FullCalendar](https://fullcalendar.io/), it implements similar opti
   - [buttonText](#buttontext)
   - [columnWidth](#columnwidth)
   - [customButtons](#custombuttons)
+  - [customScrollbars](#customscrollbars)
   - [date](#date)
   - [dateClick](#dateclick)
   - [datesAboveResources](#datesaboveresources)
@@ -67,9 +68,9 @@ Inspired by [FullCalendar](https://fullcalendar.io/), it implements similar opti
   - [eventDragStart](#eventdragstart)
   - [eventDragStop](#eventdragstop)
   - [eventDrop](#eventdrop)
-  - [eventDurationEditable](#eventdurationeditable)
   </td><td>
+  - [eventDurationEditable](#eventdurationeditable)
   - [eventFilter](#eventfilter)
   - [eventLongPressDelay](#eventlongpressdelay)
   - [eventMouseEnter](#eventmouseenter)
@@ -246,8 +247,8 @@ This bundle contains a version of the calendar that includes all plugins and is
 The first step is to 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@5.2.0/dist/event-calendar.min.css">
-<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.2.0/dist/event-calendar.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.2.2/dist/event-calendar.min.css">
+<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.2.2/dist/event-calendar.min.js"></script>
 ```
 <details>
@@ -342,7 +343,7 @@ When hidden with `false`, all-day events will not be displayed in `timeGrid`/`re
 <details>
     <summary>Default</summary>
-`{close: 'Close', dayGridMonth: 'month', listDay: 'list', listMonth: 'list', listWeek: 'list', listYear: 'list', resourceTimeGridDay: 'resources', resourceTimeGridWeek: 'resources', resourceTimelineDay: 'timeline', resourceTimelineMonth: 'timeline', resourceTimelineWeek: 'timeline', timeGridDay: 'day', timeGridWeek: 'week', today: 'today'}`
+`{close: 'Close', dayGridDay: 'day', dayGridMonth: 'month', dayGridWeek: 'week', listDay: 'list', listMonth: 'list', listWeek: 'list', listYear: 'list', resourceTimeGridDay: 'resources', resourceTimeGridWeek: 'resources', resourceTimelineDay: 'timeline', resourceTimelineMonth: 'timeline', resourceTimelineWeek: 'timeline', timeGridDay: 'day', timeGridWeek: 'week', today: 'today'}`
 > Views override the default value as follows:
 > - dayGridDay `text => ({...text, next: 'Next day', prev: 'Previous day'})`
 > - dayGridMonth `text => ({...text, next: 'Next month', prev: 'Previous month'})`
@@ -470,6 +471,14 @@ function (customButtons) {
 </tr>
 </table>
+### customScrollbars
+- Type `boolean`
+- Default `false`
+Enables scrollbars styling, which in turn prevents the scrollbars from being hidden in [supported](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::-webkit-scrollbar#browser_compatibility) browsers.
+This option can be useful, for example, for macOS users in `resourceTimeline` views to indicate that the calendar can be scrolled horizontally. On macOS, scrollbars can be hidden completely, and this option ensures they are always visible in [supported](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::-webkit-scrollbar#browser_compatibility) browsers.
 ### date
 - Type `Date` or `string`
 - Default `new Date()`

package/dist/index.css CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
- * EventCalendar v5.2.0
+ * EventCalendar v5.2.2
  * https://github.com/vkurko/calendar
  */
 .ec {
@@ -628,6 +628,25 @@
         pointer-events: auto;
     }
 }
+.ec-custom-scrollbars {
+    .ec-main {
+        &::-webkit-scrollbar {
+            background-color: transparent;
+        }
+        &::-webkit-scrollbar-thumb {
+            border: 4px solid transparent;
+            box-shadow: none;
+            background-color: var(--ec-border-color);
+            background-clip: padding-box;
+            border-radius: 8px;
+        }
+        &::-webkit-scrollbar-thumb:hover {
+            background-color: var(--ec-color-400);
+        }
+    }
+}
 .ec {
     display: flex;
     flex-direction: column;

package/dist/index.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
- * EventCalendar v5.2.0
+ * EventCalendar v5.2.2
  * https://github.com/vkurko/calendar
  */
 import { untrack, getAbortSignal, tick, getContext, setContext, onMount, mount, unmount } from "svelte";
@@ -473,8 +473,6 @@ function ghostEvent(display) {
 function pointerEvent(display) {
   return display === "pointer";
 }
-const ids = /* @__PURE__ */ new WeakMap();
-let idCounter = 1;
 function createEventChunk(event, start, end) {
   start = event.start > start ? event.start : start;
   end = event.end < end ? event.end : end;
@@ -482,20 +480,10 @@ function createEventChunk(event, start, end) {
     start,
     end,
     event,
-    get id() {
-      let id = ids.get(event);
-      if (!id) {
-        id = idCounter++;
-        ids.set(event, id);
-      }
-      delete this.id;
-      this.id = `${id}-${start.getTime()}`;
-      return this.id;
-    },
     zeroDuration: datesEqual(start, end)
   };
 }
-function createAllDayChunks(event, days) {
+function createAllDayChunks(event, days, withId = true) {
   let dates = [];
   let lastEnd;
   let gridColumn;
@@ -513,6 +501,9 @@ function createAllDayChunks(event, days) {
   if (dates.length) {
     let chunk = createEventChunk(event, dates[0], lastEnd);
     assign(chunk, { gridColumn, gridRow, dates });
+    if (withId) {
+      assignChunkId(chunk);
+    }
     return [chunk];
   }
   return [];
@@ -561,6 +552,17 @@ function repositionEvent$1(chunk, height2, top = 1) {
   assign(chunk, { top, bottom });
   return top;
 }
+const ids = /* @__PURE__ */ new WeakMap();
+let idCounter = 1;
+function assignChunkId(chunk) {
+  let { event, gridColumn, gridRow } = chunk;
+  let id = ids.get(event);
+  if (!id) {
+    id = idCounter++;
+    ids.set(event, id);
+  }
+  chunk.id = `${id}-${gridColumn}-${gridRow}`;
+}
 function intl(mainState, option) {
   return () => {
     let { options: { locale } } = mainState;
@@ -760,6 +762,8 @@ function createOptions(plugins) {
   let options = {
     buttonText: { today: "today" },
     customButtons: {},
+    customScrollbars: false,
+    // ec option
     date: /* @__PURE__ */ new Date(),
     datesSet: void 0,
     dayHeaderFormat: { weekday: "short", month: "numeric", day: "numeric" },
@@ -803,6 +807,7 @@ function createOptions(plugins) {
       buttonGroup: "ec-button-group",
       calendar: "ec",
       colHead: "ec-col-head",
+      customScrollbars: "ec-custom-scrollbars",
       day: "ec-day",
       dayHead: "ec-day-head",
       disabled: "ec-disabled",
@@ -1688,7 +1693,7 @@ function Calendar($$anchor, $$props) {
   let plugins = $.prop($$props, "plugins", 19, () => []), options = $.prop($$props, "options", 19, () => ({}));
   let mainState = new State(plugins(), options());
   setContext("state", mainState);
-  let auxComponents = $.derived(() => mainState.auxComponents), features = $.derived(() => mainState.features), events = $.derived(() => mainState.events), interaction = $.derived(() => mainState.interaction), iClass = $.derived(() => mainState.iClass), view2 = $.derived(() => mainState.view), View2 = $.derived(() => mainState.viewComponent), date = $.derived(() => mainState.options.date), duration = $.derived(() => mainState.options.duration), height2 = $.derived(() => mainState.options.height), hiddenDays = $.derived(() => mainState.options.hiddenDays), theme = $.derived(() => mainState.options.theme);
+  let auxComponents = $.derived(() => mainState.auxComponents), features = $.derived(() => mainState.features), events = $.derived(() => mainState.events), interaction = $.derived(() => mainState.interaction), iClass = $.derived(() => mainState.iClass), view2 = $.derived(() => mainState.view), View2 = $.derived(() => mainState.viewComponent), date = $.derived(() => mainState.options.date), duration = $.derived(() => mainState.options.duration), height2 = $.derived(() => mainState.options.height), hiddenDays = $.derived(() => mainState.options.hiddenDays), customScrollbars = $.derived(() => mainState.options.customScrollbars), theme = $.derived(() => mainState.options.theme);
   let prevOptions = { ...options() };
   $.user_pre_effect(() => {
     for (let [name, value] of diff(options(), prevOptions)) {
@@ -1826,7 +1831,8 @@ function Calendar($$anchor, $$props) {
       $.set_class(div, 1, $.clsx([
         $.get(theme).calendar,
         $.get(theme).view,
-        $.get(iClass) && $.get(theme)[$.get(iClass)]
+        $.get(iClass) && $.get(theme)[$.get(iClass)],
+        $.get(customScrollbars) && $.get(theme).customScrollbars
       ]));
       $.set_attribute(div, "role", $0);
       styles = $.set_style(div, "", styles, { height: $.get(height2) });
@@ -1909,7 +1915,7 @@ function iEventChunks$2(mainState, viewState) {
       }
       untrack(() => {
         for (let days of grid2) {
-          iChunks = iChunks.concat(createAllDayChunks(event, days));
+          iChunks = iChunks.concat(createAllDayChunks(event, days, false));
         }
       });
     }
@@ -3675,7 +3681,7 @@ function Day$2($$anchor, $$props) {
           $.attach(time_1, () => contentFrom($.get(intlListDaySide).format($$props.date)));
           $.reset(h4);
           var node_1 = $.sibling(h4, 2);
-          $.each(node_1, 17, () => $.get(chunks), (chunk) => chunk.id, ($$anchor4, chunk) => {
+          $.each(node_1, 17, () => $.get(chunks), (chunk) => chunk.event, ($$anchor4, chunk) => {
             Event$2($$anchor4, {
               get chunk() {
                 return $.get(chunk);
@@ -3816,7 +3822,7 @@ function initViewComponent$3(mainState) {
   mainState.features = ["list"];
   return View$2;
 }
-function createChunks$1(event, days) {
+function createChunks$1(event, days, withId = true) {
   let chunks = [];
   for (let { gridColumn, gridRow, resource, start, end, disabled } of days) {
     if (!disabled && eventIntersects(event, start, end, resource)) {
@@ -3828,6 +3834,9 @@ function createChunks$1(event, days) {
         height: (chunk.end - chunk.start) / 1e3,
         maxHeight: (end - chunk.start) / 1e3
       });
+      if (withId) {
+        assignChunkId(chunk);
+      }
       chunks.push(chunk);
     }
   }
@@ -4019,9 +4028,9 @@ function iEventChunks$1(mainState, viewState) {
       untrack(() => {
         for (let days of grid2) {
           if (event.allDay) {
-            allDayIChunks = allDayIChunks.concat(createAllDayChunks(event, days));
+            allDayIChunks = allDayIChunks.concat(createAllDayChunks(event, days, false));
           } else {
-            iChunks = iChunks.concat(createChunks$1(event, days));
+            iChunks = iChunks.concat(createChunks$1(event, days, false));
           }
         }
       });
@@ -5041,7 +5050,7 @@ function initViewComponent$2(mainState) {
   setExtensions(mainState);
   return View_1;
 }
-function createChunks(event, days, monthView2) {
+function createChunks(event, days, monthView2, withId = true) {
   let dates = [];
   let firstStart;
   let lastEnd;
@@ -5079,6 +5088,9 @@ function createChunks(event, days, monthView2) {
   if (dates.length) {
     let chunk = createEventChunk(event, firstStart, lastEnd);
     assign(chunk, { gridColumn, gridRow, dates, left, width });
+    if (withId) {
+      assignChunkId(chunk);
+    }
     return [chunk];
   }
   return [];
@@ -5178,7 +5190,7 @@ function eventChunks(mainState, viewState) {
 function iEventChunks(mainState, viewState) {
   return () => {
     let { iEvents } = mainState;
-    let { grid: grid2 } = viewState;
+    let { grid: grid2, monthView: monthView2 } = viewState;
     let iChunks = [];
     for (let [, event] of iEvents) {
       if (!event) {
@@ -5186,7 +5198,7 @@ function iEventChunks(mainState, viewState) {
       }
       untrack(() => {
         for (let days of grid2) {
-          iChunks = iChunks.concat(createChunks(event, days));
+          iChunks = iChunks.concat(createChunks(event, days, monthView2, false));
         }
       });
     }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@event-calendar/core",
-  "version": "5.2.0",
+  "version": "5.2.2",
   "title": "Event Calendar Core package",
   "description": "Full-sized drag & drop event calendar with resource & timeline views",
   "keywords": [

package/src/Calendar.svelte CHANGED Viewed

@@ -17,7 +17,7 @@
     let {
         auxComponents, features, events, interaction, iClass, view, viewComponent: View,
-        options: {date, duration, height, hiddenDays, theme}
+        options: {date, duration, height, hiddenDays, customScrollbars, theme}
     } = $derived(mainState);
     // Reactively update options that did change
@@ -131,7 +131,8 @@
     class={[
         theme.calendar,
         theme.view,
-        iClass && theme[iClass]
+        iClass && theme[iClass],
+        customScrollbars && theme.customScrollbars
     ]}
     style:height
     role="{features.includes('list') ? 'list' : 'table'}"

package/src/lib/chunks.js CHANGED Viewed

@@ -2,13 +2,9 @@ import {datesEqual} from './date.js';
 import {eventIntersects} from './events.js';
 import {assign} from './utils.js';
-// Storage of unique event identifiers for generating chunk ids
-const ids = new WeakMap();
-let idCounter = 1;
 /**
  * @returns {{
- *   id: String,  // this can be used as key in Svelte keyed each block
+ *   id?: String,  // this can be used as key in Svelte keyed each block
  *   start: Date,
  *   end: Date,
  *   event: Object,
@@ -32,21 +28,10 @@ let idCounter = 1;
 export function createEventChunk(event, start, end) {
     start = event.start > start ? event.start : start;
     end = event.end < end ? event.end : end;
     return {
         start,
         end,
         event,
-        get id() {
-            let id = ids.get(event);
-            if (!id) {
-                id = idCounter++;
-                ids.set(event, id);
-            }
-            delete this.id;
-            this.id = `${id}-${start.getTime()}`;
-            return this.id;
-        },
         zeroDuration: datesEqual(start, end)
     };
 }
@@ -54,7 +39,7 @@ export function createEventChunk(event, start, end) {
 /**
  * Create event chunk for month view and all-day slot in week view
  */
-export function createAllDayChunks(event, days) {
+export function createAllDayChunks(event, days, withId = true) {
     let dates = [];
     let lastEnd;
     let gridColumn;
@@ -73,6 +58,9 @@ export function createAllDayChunks(event, days) {
         let chunk = createEventChunk(event, dates[0], lastEnd);
         // Chunk layout
         assign(chunk, {gridColumn, gridRow, dates});
+        if (withId) {
+            assignChunkId(chunk);
+        }
         return [chunk];
     }
@@ -131,3 +119,17 @@ export function repositionEvent(chunk, height, top = 1) {
     return top;
 }
+// Storage of unique event identifiers for generating chunk ids
+const ids = new WeakMap();
+let idCounter = 1;
+export function assignChunkId(chunk) {
+    let {event, gridColumn, gridRow} = chunk;
+    let id = ids.get(event);
+    if (!id) {
+        id = idCounter++;
+        ids.set(event, id);
+    }
+    chunk.id = `${id}-${gridColumn}-${gridRow}`;
+}

package/src/plugins/day-grid/derived.js CHANGED Viewed

@@ -92,7 +92,7 @@ export function iEventChunks(mainState, viewState) {
             }
             untrack(() => {
                 for (let days of grid) {
-                    iChunks = iChunks.concat(createAllDayChunks(event, days));
+                    iChunks = iChunks.concat(createAllDayChunks(event, days, false));
                 }
             });
         }

package/src/plugins/list/Day.svelte CHANGED Viewed

@@ -38,7 +38,7 @@
             <time {datetime} {@attach contentFrom(intlListDay.format(date))}></time>
             <time class="{theme.daySide}" {datetime} {@attach contentFrom(intlListDaySide.format(date))}></time>
         </h4>
-        {#each chunks as chunk (chunk.id)}
+        {#each chunks as chunk (chunk.event)}
             <Event {chunk}/>
         {/each}
     </BaseDay>

package/src/plugins/resource-timeline/derived.js CHANGED Viewed

@@ -74,7 +74,7 @@ export function iEventChunks(mainState, viewState) {
     return () => {
         // Dependencies
         let {iEvents} = mainState;
-        let {grid} = viewState;
+        let {grid, monthView} = viewState;
         let iChunks = [];
@@ -84,7 +84,7 @@ export function iEventChunks(mainState, viewState) {
             }
             untrack(() => {
                 for (let days of grid) {
-                    iChunks = iChunks.concat(createChunks(event, days));
+                    iChunks = iChunks.concat(createChunks(event, days, monthView, false));
                 }
             });
         }

package/src/plugins/resource-timeline/lib.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import {assign, createDuration, createEventChunk, eventIntersects, max, min} from '#lib';
+import {assign, assignChunkId, createDuration, createEventChunk, eventIntersects, max, min} from '#lib';
-export function createChunks(event, days, monthView) {
+export function createChunks(event, days, monthView, withId = true) {
     let dates = [];
     let firstStart;
     let lastEnd;
@@ -39,6 +39,9 @@ export function createChunks(event, days, monthView) {
         let chunk = createEventChunk(event, firstStart, lastEnd);
         // Chunk layout
         assign(chunk, {gridColumn, gridRow, dates, left, width});
+        if (withId) {
+            assignChunkId(chunk);
+        }
         return [chunk];
     }

package/src/plugins/time-grid/derived.js CHANGED Viewed

@@ -87,9 +87,9 @@ export function iEventChunks(mainState, viewState) {
             untrack(() => {
                 for (let days of grid) {
                     if (event.allDay) {
-                        allDayIChunks = allDayIChunks.concat(createAllDayChunks(event, days));
+                        allDayIChunks = allDayIChunks.concat(createAllDayChunks(event, days, false));
                     } else {
-                        iChunks = iChunks.concat(createChunks(event, days));
+                        iChunks = iChunks.concat(createChunks(event, days, false));
                     }
                 }
             });

package/src/plugins/time-grid/lib.js CHANGED Viewed

@@ -1,8 +1,9 @@
 import {
-    addDuration, assign, cloneDate, createEventChunk, DAY_IN_SECONDS, eventIntersects, isFunction, subtractDay
+    addDuration, assign, assignChunkId, cloneDate, createEventChunk, DAY_IN_SECONDS, eventIntersects, isFunction,
+    subtractDay
 } from '#lib';
-export function createChunks(event, days) {
+export function createChunks(event, days, withId = true) {
     let chunks = [];
     for (let {gridColumn, gridRow, resource, start, end, disabled} of days) {
         if (!disabled && eventIntersects(event, start, end, resource)) {
@@ -15,6 +16,9 @@ export function createChunks(event, days) {
                 height: (chunk.end - chunk.start) / 1000,
                 maxHeight: (end - chunk.start) / 1000
             });
+            if (withId) {
+                assignChunkId(chunk);
+            }
             chunks.push(chunk);
         }
     }

package/src/storage/options.svelte.js CHANGED Viewed

@@ -11,6 +11,7 @@ function createOptions(plugins) {
             today: 'today',
         },
         customButtons: {},
+        customScrollbars: false,  // ec option
         date: new Date(),
         datesSet: undefined,
         dayHeaderFormat: {
@@ -31,7 +32,7 @@ function createOptions(plugins) {
         eventColor: undefined,
         eventContent: undefined,
         eventDidMount: undefined,
-        eventFilter: undefined,    // ec option
+        eventFilter: undefined,  // ec option
         eventMouseEnter: undefined,
         eventMouseLeave: undefined,
         eventOrder: undefined,
@@ -65,6 +66,7 @@ function createOptions(plugins) {
             buttonGroup: 'ec-button-group',
             calendar: 'ec',
             colHead: 'ec-col-head',
+            customScrollbars: 'ec-custom-scrollbars',
             day: 'ec-day',
             dayHead: 'ec-day-head',
             disabled: 'ec-disabled',

package/src/styles/index.css CHANGED Viewed

@@ -6,6 +6,7 @@
 @import "./events.css";
 @import "./now-indicator.css";
 @import "./popup.css";
+@import "./scrollbars.css";
 .ec {
     display: flex;

package/src/styles/scrollbars.css ADDED Viewed

@@ -0,0 +1,19 @@
+.ec-custom-scrollbars {
+    .ec-main {
+        &::-webkit-scrollbar {
+            background-color: transparent;
+        }
+        &::-webkit-scrollbar-thumb {
+            border: 4px solid transparent;
+            box-shadow: none;
+            background-color: var(--ec-border-color);
+            background-clip: padding-box;
+            border-radius: 8px;
+        }
+        &::-webkit-scrollbar-thumb:hover {
+            background-color: var(--ec-color-400);
+        }
+    }
+}