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

@event-calendar/core 5.1.4 → 5.2.0

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 +46 -13
package/dist/index.css +5 -2
package/dist/index.js +100 -62
package/package.json +1 -1
package/src/lib/chunks.js +25 -9
package/src/plugins/day-grid/Day.svelte +7 -5
package/src/plugins/day-grid/Event.svelte +3 -3
package/src/plugins/day-grid/View.svelte +10 -8
package/src/plugins/day-grid/derived.js +2 -2
package/src/plugins/day-grid/index.js +20 -4
package/src/plugins/list/Day.svelte +1 -1
package/src/plugins/resource-timeline/View.svelte +2 -2
package/src/plugins/time-grid/View.svelte +4 -4
package/src/storage/derived.js +5 -7
package/src/styles/days.css +4 -1

package/README.md CHANGED Viewed

@@ -246,8 +246,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.1.4/dist/event-calendar.min.css">
-<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.1.4/dist/event-calendar.min.js"></script>
+<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>
 ```
 <details>
@@ -337,9 +337,16 @@ When hidden with `false`, all-day events will not be displayed in `timeGrid`/`re
 ### buttonText
 - Type `object` or `function`
-- Default `{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'}`
+<ul>
+<li>
+<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'}`
 > 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'})`
+> - dayGridWeek `text => ({...text, next: 'Next week', prev: 'Previous week'})`
 > - listDay `text => ({...text, next: 'Next day', prev: 'Previous day'})`
 > - listMonth `text => ({...text, next: 'Next month', prev: 'Previous month'})`
 > - listWeek `text => ({...text, next: 'Next week', prev: 'Previous week'})`
@@ -352,6 +359,10 @@ When hidden with `false`, all-day events will not be displayed in `timeGrid`/`re
 > - timeGridDay `text => ({...text, next: 'Next day', prev: 'Previous day'})`
 > - timeGridWeek `text => ({...text, next: 'Next week', prev: 'Previous week'})`
+</details>
+</li>
+</ul>
 Text that is displayed in buttons of the header toolbar.
 This value can be either a plain object with all necessary properties, or a callback function that receives default button text object and should return a new one:
@@ -465,7 +476,7 @@ function (customButtons) {
 Date that is currently displayed on the calendar.
-This value can be either a JavaScript Date object, or an ISO8601 date string like `'2022-12-31'`.
+This value can be either a JavaScript Date object, or an ISO8601 date string like `'2026-12-31'`.
 ### dateClick
 - Type `function`
@@ -599,7 +610,7 @@ The current [View](#view-object) object
 - Type `object` or `function`
 - Default `{day: 'numeric'}`
-Defines the text that is displayed inside the day cell in the `dayGrid` view.
+Defines the text that is displayed inside the day cell in the `dayGridMonth` view.
 This value can be either an object with options for the native JavaScript [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) object, or a callback function that returns a [Content](#content) with the formatted string:
@@ -647,6 +658,7 @@ function (date) {
 - Type `object` or `function`
 - Default `{weekday: 'short', month: 'numeric', day: 'numeric'}`
 > Views override the default value as follows:
+> - dayGridDay `{weekday: 'long'}`
 > - dayGridMonth `{weekday: 'short'}`
 > - resourceTimelineMonth `{weekday: 'short', day: 'numeric'}`
 > - timeGridDay `{weekday: 'long'}`
@@ -697,7 +709,9 @@ function (date) {
 - Type `boolean`
 - Default `true`
 > Views override the default value as follows:
+> - dayGridDay `false`
 > - dayGridMonth `false`
+> - dayGridWeek `false`
 > - resourceTimelineDay `false`
 > - resourceTimelineMonth `false`
 > - resourceTimelineWeek `false`
@@ -724,6 +738,7 @@ Determines whether the calendar should automatically scroll during the event dra
 - Type `string`, `integer` or `object`
 - Default `{weeks: 1}`
 > Views override the default value as follows:
+> - dayGridDay `{days: 1}`
 > - dayGridMonth `{months: 1}`
 > - listDay `{days: 1}`
 > - listMonth `{months: 1}`
@@ -1799,7 +1814,7 @@ Exclude certain days-of-the-week from being displayed, where Sunday is `0`, Mond
 Array of dates that need to be highlighted in the calendar.
-Each date can be either an ISO8601 date string like `'2022-12-31'`, or a JavaScript Date object.
+Each date can be either an ISO8601 date string like `'2026-12-31'`, or a JavaScript Date object.
 ### lazyFetching
 - Type `boolean`
@@ -2297,7 +2312,9 @@ If not specified, then equal to [slotDuration](#slotduration).
 `'{allDay: 'ec-all-day', active: 'ec-active', bgEvent: 'ec-bg-event', bgEvents: 'ec-bg-events', body: 'ec-body', button: 'ec-button', buttonGroup: 'ec-button-group', calendar: 'ec', colHead: 'ec-col-head', day: 'ec-day', dayHead: 'ec-day-head', disabled: 'ec-disabled', event: 'ec-event', eventBody: 'ec-event-body', eventTime: 'ec-event-time', eventTitle: 'ec-event-title', events: 'ec-events', grid: 'ec-grid', header: 'ec-header', hidden: 'ec-hidden', highlight: 'ec-highlight', icon: 'ec-icon', main: 'ec-main', noIeb: 'ec-no-ieb', noBeb: 'ec-no-beb', today: 'ec-today', title: 'ec-title', toolbar: 'ec-toolbar', view: 'ec-list ec-week-view', weekdays: ['ec-sun', ec-mon', ec-tue', ec-wed', ec-thu', ec-fri', ec-sat'], draggable: 'ec-draggable', ghost: 'ec-ghost', preview: 'ec-preview', pointer: 'ec-pointer', resizer: 'ec-resizer', start: 'ec-start', dragging: 'ec-dragging', resizingY: 'ec-resizing-y', resizingX: 'ec-resizing-x', selecting: 'ec-selecting', uniform: 'ec-uniform', dayFoot: 'ec-day-foot', otherMonth: 'ec-other-month', popup: 'ec-popup', weekNumber: 'ec-week-number', daySide: 'ec-day-side', eventTag: 'ec-event-tag', noEvents: 'ec-no-events', nowIndicator: 'ec-now-indicator', sidebar: 'ec-sidebar', slot: 'ec-slot', colGroup: 'ec-col-group', expander: 'ec-expander', rowHead: 'ec-row-head', slots: 'ec-slots}'`
 > Views override the default value as follows:
+> - dayGridDay `theme => ({...theme, view: 'ec-day-grid ec-day-view'})`
 > - dayGridMonth `theme => ({...theme, view: 'ec-day-grid ec-month-view'})`
+> - dayGridWeek `theme => ({...theme, view: 'ec-day-grid ec-week-view'})`
 > - listDay `theme => ({...theme, view: 'ec-list ec-day-view'})`
 > - listMonth `theme => ({...theme, view: 'ec-list ec-month-view'})`
 > - listWeek `theme => ({...theme, view: 'ec-list ec-week-view'})`
@@ -2438,7 +2455,7 @@ The range should be an object with the following properties:
 </td>
 <td>
-`string` or `Date` This should be either an ISO8601 date string like `'2025-12-31'`, or a JavaScript Date object holding the range start date
+`string` or `Date` This should be either an ISO8601 date string like `'2026-12-31'`, or a JavaScript Date object holding the range start date
 </td>
 </tr>
 <tr>
@@ -2448,7 +2465,7 @@ The range should be an object with the following properties:
 </td>
 <td>
-`string` or `Date` This should be either an ISO8601 date string like `'2025-12-31'`, or a JavaScript Date object holding the range end date
+`string` or `Date` This should be either an ISO8601 date string like `'2026-12-31'`, or a JavaScript Date object holding the range end date
 </td>
 </tr>
 </table>
@@ -2457,9 +2474,25 @@ It is not necessary to specify both properties. The range may have only `start`
 ### view
 - Type `string`
-- Default `'resourceTimeGridWeek'`
-The view that is displayed in the calendar. Can be `'dayGridMonth'`, `'listDay'`, `'listWeek'`, `'listMonth'`, `'listYear'`, `'resourceTimeGridDay'`, `'resourceTimeGridWeek'`, `'resourceTimelineDay'`, `'resourceTimelineWeek'`, `'resourceTimelineMonth'`, `'timeGridDay'` or `'timeGridWeek'`.
+- Default `'timeGridWeek'`
+The view that is displayed in the calendar.
+The following values are available:
+- `'dayGridDay'`
+- `'dayGridWeek'`
+- `'dayGridMonth'`
+- `'listDay'`
+- `'listWeek'`
+- `'listMonth'`
+- `'listYear'`
+- `'resourceTimeGridDay'`
+- `'resourceTimeGridWeek'`
+- `'resourceTimelineDay'`
+- `'resourceTimelineWeek'`
+- `'resourceTimelineMonth'`
+- `'timeGridDay'`
+- `'timeGridWeek'`
 ### viewDidMount
 - Type `function`
@@ -2878,7 +2911,7 @@ Here are all admissible fields for the event’s input object:
 </td>
 <td>
-`string` or `Date` This should be either an ISO8601 datetime string like `'2022-12-31 09:00:00'`, or a JavaScript Date object holding the event’s start time
+`string` or `Date` This should be either an ISO8601 datetime string like `'2026-12-31 09:00:00'`, or a JavaScript Date object holding the event’s start time
 </td>
 </tr>
 <tr>
@@ -2888,7 +2921,7 @@ Here are all admissible fields for the event’s input object:
 </td>
 <td>
-`string` or `Date` This should be either an ISO8601 datetime string like `'2022-12-31 13:00:00'`, or a JavaScript Date object holding the event’s end time
+`string` or `Date` This should be either an ISO8601 datetime string like `'2026-12-31 13:00:00'`, or a JavaScript Date object holding the event’s end time
 </td>
 </tr>
 <tr>

package/dist/index.css CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
- * EventCalendar v5.1.4
+ * EventCalendar v5.2.0
  * https://github.com/vkurko/calendar
  */
 .ec {
@@ -152,7 +152,10 @@
     display: flex;
     flex-direction: row-reverse;
     justify-content: space-between;
-    padding: .375rem;
+    .ec-day-grid.ec-month-view & {
+        padding: .375rem;
+    }
     .ec-day.ec-other-month & time {
         opacity: .3;

package/dist/index.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
- * EventCalendar v5.1.4
+ * EventCalendar v5.2.0
  * https://github.com/vkurko/calendar
  */
 import { untrack, getAbortSignal, tick, getContext, setContext, onMount, mount, unmount } from "svelte";
@@ -473,14 +473,27 @@ function ghostEvent(display) {
 function pointerEvent(display) {
   return display === "pointer";
 }
+const ids = /* @__PURE__ */ new WeakMap();
+let idCounter = 1;
 function createEventChunk(event, start, end) {
-  let chunk = {
-    start: event.start > start ? event.start : start,
-    end: event.end < end ? event.end : end,
-    event
+  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)
   };
-  chunk.zeroDuration = datesEqual(chunk.start, chunk.end);
-  return chunk;
 }
 function createAllDayChunks(event, days) {
   let dates = [];
@@ -526,7 +539,7 @@ function prepareAllDayChunks(chunks) {
     prevChunks[key] = chunk;
   }
 }
-function repositionEvent$1(chunk, height2, top = 0) {
+function repositionEvent$1(chunk, height2, top = 1) {
   if (chunk.prev) {
     top = chunk.prev.bottom + 1;
   }
@@ -1148,8 +1161,8 @@ function viewDates(mainState) {
     let { hiddenDays } = options;
     let dates = [];
     untrack(() => {
-      let date = setMidnight(cloneDate(activeRange2.start));
-      let end = setMidnight(cloneDate(activeRange2.end));
+      let date = cloneDate(activeRange2.start);
+      let end = cloneDate(activeRange2.end);
       while (date < end) {
         if (!hiddenDays.includes(date.getUTCDay())) {
           dates.push(cloneDate(date));
@@ -1167,10 +1180,10 @@ function viewDates(mainState) {
 }
 function viewTitle(mainState) {
   return () => {
-    let { activeRange: activeRange2, intlTitle, features, options: { date } } = mainState;
+    let { currentRange: currentRange2, intlTitle } = mainState;
     let title;
     untrack(() => {
-      title = features.includes("day-grid") ? intlTitle.formatRange(date, date) : intlTitle.formatRange(activeRange2.start, subtractDay(cloneDate(activeRange2.end)));
+      title = intlTitle.formatRange(currentRange2.start, subtractDay(cloneDate(currentRange2.end)));
     });
     return title;
   };
@@ -1391,7 +1404,7 @@ class State {
   }
 }
 var root_2$4 = $.from_html(`<h2></h2>`);
-var root_4 = $.from_html(`<button><i></i></button>`);
+var root_4$1 = $.from_html(`<button><i></i></button>`);
 var root_6$1 = $.from_html(`<button><i></i></button>`);
 var root_8 = $.from_html(`<button> </button>`);
 var root_10 = $.from_html(`<button></button>`);
@@ -1466,7 +1479,7 @@ function Buttons($$anchor, $$props) {
         var node_2 = $.first_child(fragment_2);
         {
           var consequent_1 = ($$anchor4) => {
-            var button_1 = root_4();
+            var button_1 = root_4$1();
             button_1.__click = prev;
             var i = $.child(button_1);
             $.reset(button_1);
@@ -1825,9 +1838,9 @@ function Calendar($$anchor, $$props) {
 }
 function colsCount(mainState) {
   return () => {
-    let { options: { hiddenDays } } = mainState;
+    let { viewDates: viewDates2, options: { duration, hiddenDays } } = mainState;
     let count;
-    untrack(() => count = 7 - hiddenDays.length);
+    untrack(() => count = duration.months || duration.inWeeks ? 7 - hiddenDays.length : viewDates2.length);
     return count;
   };
 }
@@ -2248,16 +2261,17 @@ function InteractableEvent($$anchor, $$props) {
   }
   $.pop();
 }
-var root_2$3 = $.from_html(`<span></span>`);
-var root_3 = $.from_html(`<a role="button" tabindex="0" aria-haspopup="dialog"></a>`);
-var root_1$8 = $.from_html(`<div><time></time> <!></div> <div><!></div>`, 1);
+var root_2$3 = $.from_html(`<time></time>`);
+var root_3 = $.from_html(`<span></span>`);
+var root_4 = $.from_html(`<a role="button" tabindex="0" aria-haspopup="dialog"></a>`);
+var root_1$8 = $.from_html(`<div><!> <!></div> <div><!></div>`, 1);
 function Day$3($$anchor, $$props) {
   $.push($$props, true);
   const $firstDay = () => $.store_get($.get(firstDay), "$firstDay", $$stores);
   const [$$stores, $$cleanup] = $.setup_stores();
   let mainState = getContext("state");
   let viewState = getContext("view-state");
-  let date = $.derived(() => mainState.options.date), firstDay = $.derived(() => mainState.options.firstDay), moreLinkContent = $.derived(() => mainState.options.moreLinkContent), theme = $.derived(() => mainState.options.theme), weekNumbers = $.derived(() => mainState.options.weekNumbers), weekNumberContent = $.derived(() => mainState.options.weekNumberContent);
+  let features = $.derived(() => mainState.features), date = $.derived(() => mainState.options.date), firstDay = $.derived(() => mainState.options.firstDay), moreLinkContent = $.derived(() => mainState.options.moreLinkContent), theme = $.derived(() => mainState.options.theme), weekNumbers = $.derived(() => mainState.options.weekNumbers), weekNumberContent = $.derived(() => mainState.options.weekNumberContent);
   let hiddenChunks = $.derived(() => viewState.hiddenChunks), intlDayCell = $.derived(() => viewState.intlDayCell);
   let dayStart = $.derived(() => $$props.day.dayStart), disabled = $.derived(() => $$props.day.disabled), highlight = $.derived(() => $$props.day.highlight);
   let otherMonth = $.derived(() => $.get(dayStart).getUTCMonth() !== $.get(date).getUTCMonth());
@@ -2314,26 +2328,36 @@ function Day$3($$anchor, $$props) {
     children: ($$anchor2, $$slotProps) => {
       var fragment_1 = root_1$8();
       var div = $.first_child(fragment_1);
-      var time = $.child(div);
-      $.attach(time, () => contentFrom($.get(intlDayCell).format($.get(dayStart))));
-      var node = $.sibling(time, 2);
+      var node = $.child(div);
       {
         var consequent = ($$anchor3) => {
-          var span = root_2$3();
+          var time = root_2$3();
+          $.attach(time, () => contentFrom($.get(intlDayCell).format($.get(dayStart))));
+          $.template_effect(($0) => $.set_attribute(time, "datetime", $0), [() => toISOString($.get(dayStart), 10)]);
+          $.append($$anchor3, time);
+        };
+        $.if(node, ($$render) => {
+          if ($.get(features).includes("dayNumber")) $$render(consequent);
+        });
+      }
+      var node_1 = $.sibling(node, 2);
+      {
+        var consequent_1 = ($$anchor3) => {
+          var span = root_3();
           $.attach(span, () => contentFrom($.get(weekNumber)));
           $.template_effect(() => $.set_class(span, 1, $.get(theme).weekNumber));
           $.append($$anchor3, span);
         };
-        $.if(node, ($$render) => {
-          if ($.get(showWeekNumber)) $$render(consequent);
+        $.if(node_1, ($$render) => {
+          if ($.get(showWeekNumber)) $$render(consequent_1);
         });
       }
       $.reset(div);
       var div_1 = $.sibling(div, 2);
-      var node_1 = $.child(div_1);
+      var node_2 = $.child(div_1);
       {
-        var consequent_1 = ($$anchor3) => {
-          var a = root_3();
+        var consequent_2 = ($$anchor3) => {
+          var a = root_4();
           var event_handler = $.derived(() => stopPropagation(showMore));
           a.__click = function(...$$args) {
             $.get(event_handler)?.apply(this, $$args);
@@ -2349,19 +2373,15 @@ function Day$3($$anchor, $$props) {
           $.attach(a, () => contentFrom($.get(moreLink)));
           $.append($$anchor3, a);
         };
-        $.if(node_1, ($$render) => {
-          if ($.get(dayHiddenChunks)) $$render(consequent_1);
+        $.if(node_2, ($$render) => {
+          if ($.get(dayHiddenChunks)) $$render(consequent_2);
         });
       }
       $.reset(div_1);
-      $.template_effect(
-        ($0) => {
-          $.set_class(div, 1, $.get(theme).dayHead);
-          $.set_attribute(time, "datetime", $0);
-          $.set_class(div_1, 1, $.get(theme).dayFoot);
-        },
-        [() => toISOString($.get(dayStart), 10)]
-      );
+      $.template_effect(() => {
+        $.set_class(div, 1, $.get(theme).dayHead);
+        $.set_class(div_1, 1, $.get(theme).dayFoot);
+      });
       $.append($$anchor2, fragment_1);
     },
     $$slots: { default: true }
@@ -2376,14 +2396,14 @@ function Event$3($$anchor, $$props) {
   let $$d = $.derived(() => getContext("state")), dayMaxEvents = $.derived(() => $.get($$d).options.dayMaxEvents);
   let $$d_1 = $.derived(() => getContext("view-state")), colsCount2 = $.derived(() => $.get($$d_1).colsCount), gridEl = $.derived(() => $.get($$d_1).gridEl), hiddenChunks = $.derived(() => $.get($$d_1).hiddenChunks), popupDay = $.derived(() => $.get($$d_1).popupDay);
   let el = $.state(void 0);
-  let margin = $.state(0);
+  let margin = $.state(1);
   let hidden = $.state(false);
   let event = $.derived(() => $$props.chunk.event);
   let display = $.derived(() => $$props.chunk.event.display);
   let dayEl = $.derived(() => $.get(gridEl).children.item(($$props.chunk.gridRow - 1) * $.get(colsCount2) + $$props.chunk.gridColumn - 1));
   $.user_effect(() => {
     if (!inPopup()) {
-      $.set(margin, height($.get(dayEl).firstElementChild), true);
+      $.set(margin, height($.get(dayEl).firstElementChild) || 1, true);
     }
   });
   let styles = $.derived(() => (style) => {
@@ -2405,7 +2425,7 @@ function Event$3($$anchor, $$props) {
     return style;
   });
   function reposition() {
-    $.set(margin, repositionEvent$1($$props.chunk, height($.get(el)), height($.get(dayEl).firstElementChild)), true);
+    $.set(margin, repositionEvent$1($$props.chunk, height($.get(el)), height($.get(dayEl).firstElementChild) || 1), true);
   }
   function hide() {
     if ($.get(dayMaxEvents) === true) {
@@ -2597,14 +2617,16 @@ function View$3($$anchor, $$props) {
   let grid2 = $.derived(() => viewState.grid), chunks = $.derived(() => viewState.chunks), bgChunks = $.derived(() => viewState.bgChunks), iChunks = $.derived(() => viewState.iChunks), hiddenChunks = $.derived(() => viewState.hiddenChunks), popupDay = $.derived(() => viewState.popupDay);
   let refs = [];
   function reposition() {
-    $.get(hiddenChunks).clear();
     runReposition(refs, $.get(chunks));
+    $.get(hiddenChunks).clear();
+    tick().then(hide);
   }
-  $.user_effect(reposition);
-  $.user_effect(() => {
-    $.get(chunks);
+  function hide() {
+    $.get(hiddenChunks).size;
     refs.forEach((ref) => ref.hide());
-  });
+  }
+  $.user_effect(reposition);
+  $.user_effect(hide);
   var section = root$7();
   let styles;
   var header = $.child(section);
@@ -2661,7 +2683,7 @@ function View$3($$anchor, $$props) {
   $.bind_this(div_3, ($$value) => viewState.gridEl = $$value, () => viewState?.gridEl);
   var div_4 = $.sibling(div_3, 2);
   var node_1 = $.child(div_4);
-  $.each(node_1, 17, () => $.get(chunks), $.index, ($$anchor2, chunk, i) => {
+  $.each(node_1, 19, () => $.get(chunks), (chunk) => chunk.id, ($$anchor2, chunk, i) => {
     $.bind_this(
       Event$3($$anchor2, {
         get chunk() {
@@ -2670,11 +2692,11 @@ function View$3($$anchor, $$props) {
       }),
       ($$value, i2) => refs[i2] = $$value,
       (i2) => refs?.[i2],
-      () => [i]
+      () => [$.get(i)]
     );
   });
   var node_2 = $.sibling(node_1, 2);
-  $.each(node_2, 17, () => $.get(bgChunks), $.index, ($$anchor2, chunk) => {
+  $.each(node_2, 17, () => $.get(bgChunks), (chunk) => chunk.id, ($$anchor2, chunk) => {
     Event$3($$anchor2, {
       get chunk() {
         return $.get(chunk);
@@ -2734,7 +2756,9 @@ const index$5 = {
       view: "dayGridMonth"
     });
     assign(options.buttonText, {
+      dayGridDay: "day",
       dayGridMonth: "month",
+      dayGridWeek: "week",
       close: "Close"
     });
     assign(options.theme, {
@@ -2745,9 +2769,23 @@ const index$5 = {
       weekNumber: "ec-week-number"
     });
     assign(options.views, {
+      dayGridDay: {
+        buttonText: btnTextDay,
+        component: () => View$3,
+        dayHeaderFormat: { weekday: "long" },
+        displayEventEnd: false,
+        duration: { days: 1 },
+        theme: themeView("ec-day-grid ec-day-view")
+      },
+      dayGridWeek: {
+        buttonText: btnTextWeek,
+        component: () => View$3,
+        displayEventEnd: false,
+        theme: themeView("ec-day-grid ec-week-view")
+      },
       dayGridMonth: {
         buttonText: btnTextMonth,
-        component: initViewComponent$4,
+        component: initMonthViewComponent$1,
         dayHeaderFormat: { weekday: "short" },
         dayHeaderAriaLabelFormat: { weekday: "long" },
         displayEventEnd: false,
@@ -2758,8 +2796,8 @@ const index$5 = {
     });
   }
 };
-function initViewComponent$4(mainState) {
-  mainState.features = ["day-grid"];
+function initMonthViewComponent$1(mainState) {
+  mainState.features = ["dayNumber"];
   mainState.extensions.activeRange = (start, end) => {
     let { options: { firstDay } } = mainState;
     return {
@@ -3637,7 +3675,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.event, ($$anchor4, chunk) => {
+          $.each(node_1, 17, () => $.get(chunks), (chunk) => chunk.id, ($$anchor4, chunk) => {
             Event$2($$anchor4, {
               get chunk() {
                 return $.get(chunk);
@@ -4562,7 +4600,7 @@ function View$1($$anchor, $$props) {
       $.reset(div_2);
       var div_3 = $.sibling(div_2, 2);
       var node_5 = $.child(div_3);
-      $.each(node_5, 17, () => $.get(allDayChunks), $.index, ($$anchor3, chunk, i) => {
+      $.each(node_5, 19, () => $.get(allDayChunks), (chunk) => chunk.id, ($$anchor3, chunk, i) => {
         $.bind_this(
           AllDayEvent($$anchor3, {
             get chunk() {
@@ -4571,11 +4609,11 @@ function View$1($$anchor, $$props) {
           }),
           ($$value, i2) => refs[i2] = $$value,
           (i2) => refs?.[i2],
-          () => [i]
+          () => [$.get(i)]
         );
       });
       var node_6 = $.sibling(node_5, 2);
-      $.each(node_6, 17, () => $.get(allDayBgChunks), $.index, ($$anchor3, chunk) => {
+      $.each(node_6, 17, () => $.get(allDayBgChunks), (chunk) => chunk.id, ($$anchor3, chunk) => {
         AllDayEvent($$anchor3, {
           get chunk() {
             return $.get(chunk);
@@ -4644,7 +4682,7 @@ function View$1($$anchor, $$props) {
   $.reset(div_6);
   var div_7 = $.sibling(div_6, 2);
   var node_9 = $.child(div_7);
-  $.each(node_9, 17, () => $.get(chunks), $.index, ($$anchor2, chunk) => {
+  $.each(node_9, 17, () => $.get(chunks), (chunk) => chunk.id, ($$anchor2, chunk) => {
     Event$1($$anchor2, {
       get chunk() {
         return $.get(chunk);
@@ -4652,7 +4690,7 @@ function View$1($$anchor, $$props) {
     });
   });
   var node_10 = $.sibling(node_9, 2);
-  $.each(node_10, 17, () => $.get(bgChunks), $.index, ($$anchor2, chunk) => {
+  $.each(node_10, 17, () => $.get(bgChunks), (chunk) => chunk.id, ($$anchor2, chunk) => {
     Event$1($$anchor2, {
       get chunk() {
         return $.get(chunk);
@@ -5685,7 +5723,7 @@ function View($$anchor, $$props) {
   $.reset(div_4);
   var div_5 = $.sibling(div_4, 2);
   var node_7 = $.child(div_5);
-  $.each(node_7, 17, () => $.get(chunks), $.index, ($$anchor2, chunk, i) => {
+  $.each(node_7, 19, () => $.get(chunks), (chunk) => chunk.id, ($$anchor2, chunk, i) => {
     $.bind_this(
       Event($$anchor2, {
         get chunk() {
@@ -5694,11 +5732,11 @@ function View($$anchor, $$props) {
       }),
       ($$value, i2) => refs[i2] = $$value,
       (i2) => refs?.[i2],
-      () => [i]
+      () => [$.get(i)]
     );
   });
   var node_8 = $.sibling(node_7, 2);
-  $.each(node_8, 17, () => $.get(bgChunks), $.index, ($$anchor2, chunk) => {
+  $.each(node_8, 17, () => $.get(bgChunks), (chunk) => chunk.id, ($$anchor2, chunk) => {
     Event($$anchor2, {
       get chunk() {
         return $.get(chunk);

package/package.json CHANGED Viewed

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

package/src/lib/chunks.js CHANGED Viewed

@@ -2,12 +2,17 @@ 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
  *   start: Date,
  *   end: Date,
  *   event: Object,
- *   zeroDuration?: boolean,
+ *   zeroDuration: boolean,
  *   gridColumn?: Number,
  *   gridRow?: Number,
  *   group?: Object,
@@ -25,14 +30,25 @@ import {assign} from './utils.js';
  * }}
  */
 export function createEventChunk(event, start, end) {
-    let chunk = {
-        start: event.start > start ? event.start : start,
-        end: event.end < end ? event.end : end,
-        event
-    };
-    chunk.zeroDuration = datesEqual(chunk.start, chunk.end);
+    start = event.start > start ? event.start : start;
+    end = event.end < end ? event.end : end;
-    return chunk;
+    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)
+    };
 }
 /**
@@ -92,7 +108,7 @@ export function prepareAllDayChunks(chunks) {
     }
 }
-export function repositionEvent(chunk, height, top = 0) {
+export function repositionEvent(chunk, height, top = 1) {
     if (chunk.prev) {
         top = chunk.prev.bottom + 1;
     }

package/src/plugins/day-grid/Day.svelte CHANGED Viewed

@@ -10,7 +10,7 @@
     let mainState = getContext('state');
     let viewState = getContext('view-state');
-    let {options: {date, firstDay, moreLinkContent, theme, weekNumbers, weekNumberContent}} = $derived(mainState);
+    let {features, options: {date, firstDay, moreLinkContent, theme, weekNumbers, weekNumberContent}} = $derived(mainState);
     let {hiddenChunks, intlDayCell} = $derived(viewState);
     let {dayStart, disabled, highlight} = $derived(day);
@@ -59,10 +59,12 @@
 <BaseDay date={dayStart} allDay {classes} {disabled} {highlight} {noIeb} {noBeb}>
     <div class="{theme.dayHead}">
-        <time
-            datetime="{toISOString(dayStart, 10)}"
-            {@attach contentFrom(intlDayCell.format(dayStart))}
-        ></time>
+        {#if features.includes('dayNumber')}
+            <time
+                datetime="{toISOString(dayStart, 10)}"
+                {@attach contentFrom(intlDayCell.format(dayStart))}
+            ></time>
+        {/if}
         {#if showWeekNumber}
             <span
                 class="{theme.weekNumber}"

package/src/plugins/day-grid/Event.svelte CHANGED Viewed

@@ -9,7 +9,7 @@
     let {colsCount, gridEl, hiddenChunks, popupDay} = $derived(getContext('view-state'));
     let el = $state();
-    let margin = $state(0);
+    let margin = $state(1);
     let hidden = $state(false);
     let event = $derived(chunk.event);
@@ -18,7 +18,7 @@
     $effect(() => {
         if (!inPopup) {
-            margin = height(dayEl.firstElementChild);
+            margin = height(dayEl.firstElementChild) || 1;
         }
     });
@@ -44,7 +44,7 @@
     });
     export function reposition() {
-        margin = repositionEvent(chunk, height(el), height(dayEl.firstElementChild));
+        margin = repositionEvent(chunk, height(el), height(dayEl.firstElementChild) || 1);
     }
     export function hide() {

package/src/plugins/day-grid/View.svelte CHANGED Viewed

@@ -1,5 +1,5 @@
 <script>
-    import {getContext, setContext} from 'svelte';
+    import {getContext, setContext, tick} from 'svelte';
     import {contentFrom, resizeObserver, runReposition} from '#lib';
     import ViewState from './state.svelte.js';
     import Day from './Day.svelte';
@@ -16,14 +16,16 @@
     // Events reposition
     let refs = [];
     function reposition() {
-        hiddenChunks.clear();
         runReposition(refs, chunks);
+        hiddenChunks.clear();
+        tick().then(hide);
     }
-    $effect(reposition);
-    $effect(() => {
-        chunks;
+    function hide() {
+        hiddenChunks.size;
         refs.forEach(ref => ref.hide());
-    });
+    }
+    $effect(reposition);
+    $effect(hide);
 </script>
 <section
@@ -59,11 +61,11 @@
             {/each}
         </div>
         <div class="{theme.events}">
-            {#each chunks as chunk, i}
+            {#each chunks as chunk, i (chunk.id)}
                 <!-- svelte-ignore binding_property_non_reactive -->
                 <Event bind:this={refs[i]} {chunk}/>
             {/each}
-            {#each bgChunks as chunk}
+            {#each bgChunks as chunk (chunk.id)}
                 <Event {chunk}/>
             {/each}
             {#each iChunks as chunk}

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

@@ -4,11 +4,11 @@ import {addDay, bgEvent, cloneDate, createAllDayChunks, datesEqual, outsideRange
 export function colsCount(mainState) {
     return () => {
         // Dependencies
-        let {options: {hiddenDays}} = mainState;
+        let {viewDates, options: {duration, hiddenDays}} = mainState;
         let count;
-        untrack(() => count = 7 - hiddenDays.length);
+        untrack(() => count = duration.months || duration.inWeeks ? 7 - hiddenDays.length : viewDates.length);
         return count;
     };

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

@@ -1,4 +1,4 @@
-import {assign, btnTextMonth, nextClosestDay, prevClosestDay, themeView} from '#lib';
+import {assign, btnTextDay, btnTextMonth, btnTextWeek, nextClosestDay, prevClosestDay, themeView} from '#lib';
 import View from './View.svelte';
 export default {
@@ -14,7 +14,9 @@ export default {
             view: 'dayGridMonth'
         });
         assign(options.buttonText, {
+            dayGridDay: 'day',
             dayGridMonth: 'month',
+            dayGridWeek: 'week',
             close: 'Close'
         });
         assign(options.theme, {
@@ -25,9 +27,23 @@ export default {
             weekNumber: 'ec-week-number'
         });
         assign(options.views, {
+            dayGridDay: {
+                buttonText: btnTextDay,
+                component: () => View,
+                dayHeaderFormat: {weekday: 'long'},
+                displayEventEnd: false,
+                duration: {days: 1},
+                theme: themeView('ec-day-grid ec-day-view')
+            },
+            dayGridWeek: {
+                buttonText: btnTextWeek,
+                component: () => View,
+                displayEventEnd: false,
+                theme: themeView('ec-day-grid ec-week-view')
+            },
             dayGridMonth: {
                 buttonText: btnTextMonth,
-                component: initViewComponent,
+                component: initMonthViewComponent,
                 dayHeaderFormat: {weekday: 'short'},
                 dayHeaderAriaLabelFormat: {weekday: 'long'},
                 displayEventEnd: false,
@@ -39,8 +55,8 @@ export default {
     }
 }
-function initViewComponent(mainState) {
-    mainState.features = ['day-grid'];
+function initMonthViewComponent(mainState) {
+    mainState.features = ['dayNumber'];
     mainState.extensions.activeRange = (start, end) => {
         // Dependencies
         let {options: {firstDay}} = mainState;

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.event)}
+        {#each chunks as chunk (chunk.id)}
             <Event {chunk}/>
         {/each}
     </BaseDay>

package/src/plugins/resource-timeline/View.svelte CHANGED Viewed

@@ -124,11 +124,11 @@
             {/each}
         </div>
         <div class="{theme.events}">
-            {#each chunks as chunk, i}
+            {#each chunks as chunk, i (chunk.id)}
                 <!-- svelte-ignore binding_property_non_reactive -->
                 <Event bind:this={refs[i]} {chunk}/>
             {/each}
-            {#each bgChunks as chunk}
+            {#each bgChunks as chunk (chunk.id)}
                 <Event {chunk}/>
             {/each}
             {#each iChunks as chunk}

package/src/plugins/time-grid/View.svelte CHANGED Viewed

@@ -84,11 +84,11 @@
                     {/each}
                 </div>
                 <div class="{theme.events}">
-                    {#each allDayChunks as chunk, i}
+                    {#each allDayChunks as chunk, i (chunk.id)}
                         <!-- svelte-ignore binding_property_non_reactive -->
                         <AllDayEvent bind:this={refs[i]} {chunk}/>
                     {/each}
-                    {#each allDayBgChunks as chunk}
+                    {#each allDayBgChunks as chunk (chunk.id)}
                         <AllDayEvent {chunk}/>
                     {/each}
                     {#each allDayIChunks as chunk}
@@ -121,10 +121,10 @@
             {/each}
         </div>
         <div class="{theme.events}">
-            {#each chunks as chunk}
+            {#each chunks as chunk (chunk.id)}
                 <Event {chunk}/>
             {/each}
-            {#each bgChunks as chunk}
+            {#each bgChunks as chunk (chunk.id)}
                 <Event {chunk}/>
             {/each}
             {#each iChunks as chunk}

package/src/storage/derived.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import {untrack} from 'svelte';
 import {
-    addDay, addDuration, cloneDate, createView, isFunction, prevClosestDay, setMidnight, subtractDay,
+    addDay, addDuration, cloneDate, createView, isFunction, prevClosestDay, subtractDay,
     toEventWithLocalDates, toViewWithLocalDates
 } from '#lib';
@@ -91,8 +91,8 @@ export function viewDates(mainState) {
         let dates = [];
         untrack(() => {
-            let date = setMidnight(cloneDate(activeRange.start));
-            let end = setMidnight(cloneDate(activeRange.end));
+            let date = cloneDate(activeRange.start);
+            let end = cloneDate(activeRange.end);
             while (date < end) {
                 if (!hiddenDays.includes(date.getUTCDay())) {
                     dates.push(cloneDate(date));
@@ -114,14 +114,12 @@ export function viewDates(mainState) {
 export function viewTitle(mainState) {
     return () => {
         // Dependencies
-        let {activeRange, intlTitle, features, options: {date}} = mainState;
+        let {currentRange, intlTitle} = mainState;
         let title;
         untrack(() => {
-            title = features.includes('day-grid')
-                ? intlTitle.formatRange(date, date)
-                : intlTitle.formatRange(activeRange.start, subtractDay(cloneDate(activeRange.end)));
+            title = intlTitle.formatRange(currentRange.start, subtractDay(cloneDate(currentRange.end)));
         });
         return title;

package/src/styles/days.css CHANGED Viewed

@@ -81,7 +81,10 @@
     display: flex;
     flex-direction: row-reverse;
     justify-content: space-between;
-    padding: .375rem;
+    .ec-day-grid.ec-month-view & {
+        padding: .375rem;
+    }
     .ec-day.ec-other-month & time {
         opacity: .3;