npm - @event-calendar/core - Versions diffs - 5.5.0 → 5.6.0 - Mend

@event-calendar/core 5.5.0 → 5.6.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 (17) hide show

package/README.md +119 -19
package/dist/index.css +1 -1
package/dist/index.js +108 -97
package/package.json +2 -2
package/src/Buttons.svelte +4 -4
package/src/Calendar.svelte +3 -3
package/src/lib/components/BaseDay.svelte +15 -4
package/src/lib/utils.js +4 -0
package/src/plugins/day-grid/Day.svelte +27 -27
package/src/plugins/list/Day.svelte +10 -8
package/src/plugins/list/index.js +4 -4
package/src/plugins/resource-time-grid/index.js +2 -2
package/src/plugins/resource-timeline/derived.js +8 -6
package/src/plugins/resource-timeline/index.js +7 -7
package/src/plugins/time-grid/options.js +3 -3
package/src/storage/options.js +4 -1
package/src/storage/state.svelte.js +2 -2

package/README.md CHANGED Viewed

@@ -48,8 +48,10 @@ Inspired by [FullCalendar](https://fullcalendar.io/), it implements similar opti
   - [customScrollbars](#customscrollbars)
   - [date](#date)
   - [dateClick](#dateclick)
+  - [dateIncrement](#dateincrement)
   - [datesAboveResources](#datesaboveresources)
   - [datesSet](#datesset)
+  - [dayCellContent](#daycellcontent)
   - [dayCellFormat](#daycellformat)
   - [dayHeaderAriaLabelFormat](#dayheaderarialabelformat)
   - [dayHeaderFormat](#dayheaderformat)
@@ -72,9 +74,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)
@@ -103,13 +105,14 @@ Inspired by [FullCalendar](https://fullcalendar.io/), it implements similar opti
   - [loading](#loading)
   - [locale](#locale)
   - [longPressDelay](#longpressdelay)
+  - [monthHeaderFormat](#monthheaderformat)
   - [moreLinkContent](#morelinkcontent)
   - [noEventsClick](#noeventsclick)
   - [noEventsContent](#noeventscontent)
   - [nowIndicator](#nowindicator)
-  - [pointer](#pointer)
   </td><td>
+  - [pointer](#pointer)
   - [refetchResourcesOnNavigate](#refetchresourcesonnavigate)
   - [resizeConstraint](#resizeconstraint)
   - [resourceExpand](#resourceexpand)
@@ -257,8 +260,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.4.2/dist/event-calendar.min.css">
-<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.4.2/dist/event-calendar.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.6.0/dist/event-calendar.min.css">
+<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@5.6.0/dist/event-calendar.min.js"></script>
 ```
 <details>
@@ -353,7 +356,7 @@ When hidden with `false`, all-day events will not be displayed in `timeGrid`/`re
 <details>
     <summary>Default</summary>
-`{collapse: 'Collapse', close: 'Close', dayGridDay: 'day', dayGridMonth: 'month', dayGridWeek: 'week', expand: 'Expand', listDay: 'list', listMonth: 'list', listWeek: 'list', listYear: 'list', resourceTimeGridDay: 'resources', resourceTimeGridWeek: 'resources', resourceTimelineDay: 'timeline', resourceTimelineMonth: 'timeline', resourceTimelineWeek: 'timeline', timeGridDay: 'day', timeGridWeek: 'week', today: 'today'}`
+`{collapse: 'Collapse', close: 'Close', dayGridDay: 'day', dayGridMonth: 'month', dayGridWeek: 'week', expand: 'Expand', listDay: 'day', listMonth: 'month', listWeek: 'week', listYear: 'year', resourceTimeGridDay: 'day', resourceTimeGridWeek: 'week', resourceTimelineDay: 'day', resourceTimelineMonth: 'month', resourceTimelineWeek: 'week', resourceTimelineYear: 'year', 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'})`
@@ -367,6 +370,7 @@ When hidden with `false`, all-day events will not be displayed in `timeGrid`/`re
 > - resourceTimelineDay `text => ({...text, next: 'Next day', prev: 'Previous day'})`
 > - resourceTimelineMonth `text => ({...text, next: 'Next month', prev: 'Previous month'})`
 > - resourceTimelineWeek `text => ({...text, next: 'Next week', prev: 'Previous week'})`
+> - resourceTimelineYear `text => ({...text, next: 'Next year', prev: 'Previous year'})`
 > - timeGridDay `text => ({...text, next: 'Next day', prev: 'Previous day'})`
 > - timeGridWeek `text => ({...text, next: 'Next week', prev: 'Previous week'})`
@@ -568,6 +572,16 @@ If the current view is a resource view, the [Resource](#resource-object) object
 </tr>
 </table>
+### dateIncrement
+- Type `string`, `integer` or `object`
+- Default `undefined`
+Defines the interval by which the displayed view is shifted when pressing the prev/next buttons or when the [prev()](#prev)/[next()](#next) methods are called.
+This should be a value that can be parsed into a [Duration](#duration-object) object.
+If not specified, then equal to [duration](#duration).
 ### datesAboveResources
 - Type `boolean`
 - Default `false`
@@ -625,6 +639,60 @@ The current [View](#view-object) object
 </tr>
 </table>
+### dayCellContent
+- Type `Content` or `function`
+- Default `undefined`
+Defines the content that is rendered inside the day cell.
+This value can be either a [Content](#content) or a function that returns content:
+```js
+function (arg) {
+    // return Content
+}
+```
+`arg` is an object with the following properties:
+<table>
+<tr>
+<td>
+`allDay`
+</td>
+<td>
+`true` or `false`. Determines if the cell is within `all-day` slot. Month and list views are also considered as all-day slots
+</td>
+</tr>
+<tr>
+<td>
+`date`
+</td>
+<td>JavaScript Date object corresponding to the day</td>
+</tr>
+<tr>
+<td>
+`isToday`
+</td>
+<td>
+`true` or `false`. Determines if the cell is for today
+</td>
+</tr>
+<tr>
+<td>
+`resource`
+</td>
+<td>
+If the current view is a resource view, the [Resource](#resource-object) object that owns this cell
+</td>
+</tr>
+</table>
 ### dayCellFormat
 - Type `object` or `function`
 - Default `{day: 'numeric'}`
@@ -680,6 +748,7 @@ function (date) {
 > - dayGridDay `{weekday: 'long'}`
 > - dayGridMonth `{weekday: 'short'}`
 > - resourceTimelineMonth `{weekday: 'short', day: 'numeric'}`
+> - resourceTimelineYear `{weekday: 'short', day: 'numeric'}`
 > - timeGridDay `{weekday: 'long'}`
 Defines the text that is displayed on the calendar’s column headings.
@@ -734,6 +803,7 @@ function (date) {
 > - resourceTimelineDay `false`
 > - resourceTimelineMonth `false`
 > - resourceTimelineWeek `false`
+> - resourceTimelineYear `false`
 Determines whether to display an event’s end time.
@@ -765,6 +835,7 @@ Determines whether the calendar should automatically scroll during the event dra
 > - resourceTimeGridDay `{days: 1}`
 > - resourceTimelineDay `{days: 1}`
 > - resourceTimelineMonth `{months: 1}`
+> - resourceTimelineYear `{years: 1}`
 > - timeGridDay `{days: 1}`
 Sets the duration of a view.
@@ -1954,6 +2025,29 @@ For touch devices, the amount of time (in milliseconds) the user must hold down
 For a more granular configuration, see [eventLongPressDelay](#eventlongpressdelay) and [selectLongPressDelay](#selectlongpressdelay).
+### monthHeaderFormat
+- Type `object` or `function`
+- Default `{month: 'long'}`
+Defines the text that is displayed in month headings in `resourceTimelineYear` 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:
+```js
+function (date) {
+  // return Content with the formatted date string
+}
+```
+<table>
+<tr>
+<td>
+`date`
+</td>
+<td>JavaScript Date object that needs to be formatted</td>
+</tr>
+</table>
 ### moreLinkContent
 - Type `Content` or `function`
 - Default `undefined`
@@ -2412,6 +2506,7 @@ Defines how many pixels the user’s mouse must move before the selection begins
 - Default `'00:30:00'`
 > Views override the default value as follows:
 > - resourceTimelineMonth `{days: 1}`
+> - resourceTimelineYear `{days: 1}`
 Defines the frequency for displaying time slots.
@@ -2519,6 +2614,7 @@ If not specified, then equal to [slotDuration](#slotduration).
 > - resourceTimelineDay `theme => ({...theme, view: 'ec-resource ec-timeline ec-day-view'})`
 > - resourceTimelineMonth `theme => ({...theme, view: 'ec-resource ec-timeline ec-month-view'})`
 > - resourceTimelineWeek `theme => ({...theme, view: 'ec-resource ec-timeline ec-week-view'})`
+> - resourceTimelineYear `theme => ({...theme, view: 'ec-resource ec-timeline ec-year-view'})`
 > - timeGridDay `theme => ({...theme, view: 'ec-time-grid ec-day-view'})`
 > - timeGridWeek `theme => ({...theme, view: 'ec-time-grid ec-week-view'})`
 </details>
@@ -2549,6 +2645,9 @@ function (theme) {
 - Default `{year: 'numeric', month: 'short', day: 'numeric'}`
 > Views override the default value as follows:
 > - dayGridMonth `{year: 'numeric', month: 'long'}`
+> - listDay `{year: 'numeric', month: 'long', day: 'numeric'}`
+> - listMonth `{year: 'numeric', month: 'long'}`
+> - listYear `{year: 'numeric'}`
 > - timeGridDay `{year: 'numeric', month: 'long', day: 'numeric'}`
 Defines the text that is displayed in the header toolbar’s title.
@@ -2686,6 +2785,7 @@ The following values are available:
 - `'resourceTimelineDay'`
 - `'resourceTimelineWeek'`
 - `'resourceTimelineMonth'`
+- `'resourceTimelineYear'`
 - `'timeGridDay'`
 - `'timeGridWeek'`
@@ -2765,7 +2865,7 @@ function (arg) {
 - Type `boolean`
 - Default `false`
-Determines whether week numbers should be displayed in the `dayGrid` view.
+Determines whether week numbers should be displayed in `dayGrid`/`resourceTimeline` views.
 The numbering of weeks depends on the value of [firstDay](#firstday). When `firstDay` is `0`, the [Western](https://en.wikipedia.org/wiki/Week#Other_week_numbering_systems) system is used. Any other value uses the [ISO](https://en.wikipedia.org/wiki/Week#The_ISO_week_date_system) system.
@@ -2775,20 +2875,20 @@ Methods allow you to manipulate EventCalendar after initialization. They are acc
 In Svelte, methods are available from a component instance:
 ```html
 <script>
-    import {Calendar, TimeGrid} from '@event-calendar/core';
-    let ec = $state();
-    let options = $state({
-        view: 'timeGridWeek',
-        eventSources: [{events: function() {
-            console.log('fetching...');
-            return [];
-        }}]
-    });
+  import {Calendar, TimeGrid} from '@event-calendar/core';
-    function invokeMethod() {
-        ec.refetchEvents();
-    }
+  let ec = $state();
+  let options = $state({
+    view: 'timeGridWeek',
+    eventSources: [{events: function() {
+        console.log('fetching...');
+        return [];
+      }}]
+  });
+  function invokeMethod() {
+    ec.refetchEvents();
+  }
 </script>
 <button onclick={invokeMethod}>Refetch events</button>

package/dist/index.css CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
- * EventCalendar v5.5.0
+ * EventCalendar v5.6.0
  * https://github.com/vkurko/calendar
  */
 .ec {

package/dist/index.js CHANGED Viewed

@@ -1,5 +1,5 @@
 /*!
- * EventCalendar v5.5.0
+ * EventCalendar v5.6.0
  * https://github.com/vkurko/calendar
  */
 import { getAbortSignal, getContext, mount, onMount, setContext, tick, unmount, untrack } from "svelte";
@@ -115,6 +115,9 @@ var identity = (x) => x;
 function isRtl() {
 	return window.getComputedStyle(document.documentElement).direction === "rtl";
 }
+function undefinedOr(fn) {
+	return (input) => input === void 0 ? void 0 : fn(input);
+}
 //#endregion
 //#region packages/core/src/lib/date.js
 var DAY_IN_SECONDS = 86400;
@@ -796,7 +799,9 @@ function createOptions(plugins) {
 		customButtons: {},
 		customScrollbars: false,
 		date: /* @__PURE__ */ new Date(),
+		dateIncrement: void 0,
 		datesSet: void 0,
+		dayCellContent: void 0,
 		dayHeaderFormat: {
 			weekday: "short",
 			month: "numeric",
@@ -897,6 +902,7 @@ function createOptions(plugins) {
 function createParsers(plugins) {
 	let parsers = {
 		date: (input) => setMidnight(createDate(input)),
+		dateIncrement: undefinedOr(createDuration),
 		duration: createDuration,
 		events: createEvents,
 		eventSources: createEventSources,
@@ -1410,7 +1416,7 @@ var State = class {
 		this.#filteredEvents = $.derived(filteredEvents(this));
 		this.#mainEl = $.state();
 		this.#now = $.state($.proxy(createDate()));
-		this.#resources = $.state(arrayProxy(this.options.resources));
+		this.#resources = $.state(arrayProxy(isArray(this.options.resources) ? this.options.resources : []));
 		this.#today = $.state($.proxy(setMidnight(cloneDate(this.now))));
 		this.#intlEventTime = $.derived(intlRange(this, "eventTimeFormat"));
 		this.#intlDayHeader = $.derived(intl(this, "dayHeaderFormat"));
@@ -1444,14 +1450,14 @@ var State = class {
 //#region packages/core/src/Buttons.svelte
 var root_2$5 = $.from_html(`<h2></h2>`);
 var root_3$2 = $.from_html(`<button><i></i></button>`);
-var root_4$2 = $.from_html(`<button><i></i></button>`);
+var root_4$1 = $.from_html(`<button><i></i></button>`);
 var root_5 = $.from_html(`<button> </button>`);
 var root_6$1 = $.from_html(`<button></button>`);
 var root_7$1 = $.from_html(`<button> </button>`);
 function Buttons($$anchor, $$props) {
 	$.push($$props, true);
 	let mainState = getContext("state");
-	let currentRange = $.derived(() => mainState.currentRange), today = $.derived(() => mainState.today), viewTitle = $.derived(() => mainState.viewTitle), viewDates = $.derived(() => mainState.viewDates), buttonText = $.derived(() => mainState.options.buttonText), customButtons = $.derived(() => mainState.options.customButtons), date = $.derived(() => mainState.options.date), duration = $.derived(() => mainState.options.duration), hiddenDays = $.derived(() => mainState.options.hiddenDays), theme = $.derived(() => mainState.options.theme), validRange = $.derived(() => mainState.options.validRange), view = $.derived(() => mainState.options.view);
+	let currentRange = $.derived(() => mainState.currentRange), today = $.derived(() => mainState.today), viewTitle = $.derived(() => mainState.viewTitle), viewDates = $.derived(() => mainState.viewDates), buttonText = $.derived(() => mainState.options.buttonText), customButtons = $.derived(() => mainState.options.customButtons), date = $.derived(() => mainState.options.date), dateIncrement = $.derived(() => mainState.options.dateIncrement), duration = $.derived(() => mainState.options.duration), hiddenDays = $.derived(() => mainState.options.hiddenDays), theme = $.derived(() => mainState.options.theme), validRange = $.derived(() => mainState.options.validRange), view = $.derived(() => mainState.options.view);
 	let prevDisabled = $.state(false);
 	let nextDisabled = $.state(false);
 	let todayDisabled = $.state(false);
@@ -1487,10 +1493,10 @@ function Buttons($$anchor, $$props) {
 		return result;
 	}
 	function prev() {
-		mainState.setOption("date", prevDate(cloneDate($.get(date)), $.get(duration), $.get(hiddenDays)));
+		mainState.setOption("date", prevDate(cloneDate($.get(date)), $.get(dateIncrement) ?? $.get(duration), $.get(hiddenDays)));
 	}
 	function next() {
-		mainState.setOption("date", nextDate(cloneDate($.get(date)), $.get(duration), $.get(hiddenDays)));
+		mainState.setOption("date", nextDate(cloneDate($.get(date)), $.get(dateIncrement) ?? $.get(duration), $.get(hiddenDays)));
 	}
 	function setToday() {
 		mainState.setOption("date", cloneDate($.get(today)));
@@ -1521,7 +1527,7 @@ function Buttons($$anchor, $$props) {
 			$.append($$anchor, button_1);
 		};
 		var consequent_2 = ($$anchor) => {
-			var button_2 = root_4$2();
+			var button_2 = root_4$1();
 			var i_1 = $.child(button_2);
 			$.reset(button_2);
 			$.template_effect(() => {
@@ -1648,7 +1654,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), view = $.derived(() => mainState.view), View = $.derived(() => mainState.viewComponent), date = $.derived(() => mainState.options.date), duration = $.derived(() => mainState.options.duration), height = $.derived(() => mainState.options.height), hiddenDays = $.derived(() => mainState.options.hiddenDays), customScrollbars = $.derived(() => mainState.options.customScrollbars), 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), view = $.derived(() => mainState.view), View = $.derived(() => mainState.viewComponent), date = $.derived(() => mainState.options.date), dateIncrement = $.derived(() => mainState.options.dateIncrement), duration = $.derived(() => mainState.options.duration), height = $.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)) untrack(() => {
@@ -1718,11 +1724,11 @@ function Calendar($$anchor, $$props) {
 		return null;
 	}
 	function next() {
-		mainState.setOption("date", nextDate(cloneDate($.get(date)), $.get(duration), $.get(hiddenDays)));
+		mainState.setOption("date", nextDate(cloneDate($.get(date)), $.get(dateIncrement) ?? $.get(duration), $.get(hiddenDays)));
 		return this;
 	}
 	function prev() {
-		mainState.setOption("date", prevDate(cloneDate($.get(date)), $.get(duration), $.get(hiddenDays)));
+		mainState.setOption("date", prevDate(cloneDate($.get(date)), $.get(dateIncrement) ?? $.get(duration), $.get(hiddenDays)));
 		return this;
 	}
 	var $$exports = {
@@ -1931,9 +1937,15 @@ var root$9 = $.from_html(`<div><!></div>`);
 function BaseDay($$anchor, $$props) {
 	$.push($$props, true);
 	let el = $.prop($$props, "el", 15), allDay = $.prop($$props, "allDay", 3, false), resource = $.prop($$props, "resource", 3, void 0), dateFromPoint = $.prop($$props, "dateFromPoint", 3, () => $$props.date), classes = $.prop($$props, "classes", 3, identity), disabled = $.prop($$props, "disabled", 3, false), highlight = $.prop($$props, "highlight", 3, false), role = $.prop($$props, "role", 3, "cell"), noIeb = $.prop($$props, "noIeb", 3, false), noBeb = $.prop($$props, "noBeb", 3, false);
-	let $$d = $.derived(() => getContext("state")), today = $.derived(() => $.get($$d).today), action = $.derived(() => $.get($$d).interaction.action), theme = $.derived(() => $.get($$d).options.theme);
+	let $$d = $.derived(() => getContext("state")), today = $.derived(() => $.get($$d).today), action = $.derived(() => $.get($$d).interaction.action), dayCellContent = $.derived(() => $.get($$d).options.dayCellContent), theme = $.derived(() => $.get($$d).options.theme);
 	let $$d_1 = $.derived(() => getContext("view-state")), snap = $.derived(() => $.get($$d_1).snap);
 	let isToday = $.derived(() => datesEqual($$props.date, $.get(today)));
+	let dayContent = $.derived(() => isFunction($.get(dayCellContent)) ? $.get(dayCellContent)({
+		allDay: allDay(),
+		date: toLocalDate($$props.date),
+		isToday: $.get(isToday),
+		resource: resource()
+	}) : $.get(dayCellContent));
 	let classNames = $.derived(() => classes()([
 		$.get(theme).day,
 		$.get(theme).weekdays?.[$$props.date.getUTCDay()],
@@ -1957,9 +1969,10 @@ function BaseDay($$anchor, $$props) {
 	let onpointerdown = $.derived(() => !disabled() && $.get(action) ? (jsEvent) => $.get(action).select(jsEvent, $.get(snap)) : void 0);
 	var div = root$9();
 	var node = $.child(div);
-	$.snippet(node, () => $$props.children ?? $.noop);
+	$.snippet(node, () => $$props.content ?? $.noop, () => $.get(dayContent));
 	$.reset(div);
 	$.bind_this(div, ($$value) => el($$value), () => el());
+	$.attach(div, () => $$props.content ? null : contentFrom($.get(dayContent)));
 	$.template_effect(() => {
 		$.set_class(div, 1, $.clsx($.get(classNames)));
 		$.set_attribute(div, "role", role());
@@ -2193,15 +2206,15 @@ function InteractableEvent($$anchor, $$props) {
 }
 //#endregion
 //#region packages/core/src/plugins/day-grid/Day.svelte
-var root_2$4 = $.from_html(`<time></time>`);
-var root_3 = $.from_html(`<span></span>`);
-var root_4$1 = $.from_html(`<a role="button" tabindex="0" aria-haspopup="dialog"></a>`);
-var root_1$10 = $.from_html(`<div><!> <!></div> <div><!></div>`, 1);
+var root_2$4 = $.from_html(`<span></span>`);
+var root_3 = $.from_html(`<a role="button" tabindex="0" aria-haspopup="dialog"></a>`);
+var root_1$10 = $.from_html(`<div><time></time> <!></div> <div><!></div>`, 1);
 function Day$3($$anchor, $$props) {
 	$.push($$props, true);
 	let mainState = getContext("state");
 	let viewState = getContext("view-state");
-	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);
+	$.derived(() => mainState.features);
+	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 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());
@@ -2224,55 +2237,27 @@ function Day$3($$anchor, $$props) {
 	function showMore() {
 		viewState.popupDay = $$props.day;
 	}
-	BaseDay($$anchor, {
-		get date() {
-			return $.get(dayStart);
-		},
-		allDay: true,
-		get classes() {
-			return $.get(classes);
-		},
-		get disabled() {
-			return $.get(disabled);
-		},
-		get highlight() {
-			return $.get(highlight);
-		},
-		get noIeb() {
-			return $$props.noIeb;
-		},
-		get noBeb() {
-			return $$props.noBeb;
-		},
-		children: ($$anchor, $$slotProps) => {
+	{
+		const content = ($$anchor, dayContent = $.noop) => {
 			var fragment_1 = root_1$10();
 			var div = $.first_child(fragment_1);
-			var node = $.child(div);
+			var time = $.child(div);
+			$.attach(time, () => contentFrom(dayContent() ?? $.get(intlDayCell).format($.get(dayStart))));
+			var node = $.sibling(time, 2);
 			var consequent = ($$anchor) => {
-				var time = root_2$4();
-				$.attach(time, () => contentFrom($.get(intlDayCell).format($.get(dayStart))));
-				$.template_effect(($0) => $.set_attribute(time, "datetime", $0), [() => toISOString($.get(dayStart), 10)]);
-				$.append($$anchor, time);
-			};
-			var d = $.derived(() => $.get(features).includes("dayNumber"));
-			$.if(node, ($$render) => {
-				if ($.get(d)) $$render(consequent);
-			});
-			var node_1 = $.sibling(node, 2);
-			var consequent_1 = ($$anchor) => {
-				var span = root_3();
+				var span = root_2$4();
 				$.attach(span, () => contentFrom($.get(weekNumber)));
 				$.template_effect(() => $.set_class(span, 1, $.get(theme).weekNumber));
 				$.append($$anchor, span);
 			};
-			$.if(node_1, ($$render) => {
-				if ($.get(showWeekNumber)) $$render(consequent_1);
+			$.if(node, ($$render) => {
+				if ($.get(showWeekNumber)) $$render(consequent);
 			});
 			$.reset(div);
 			var div_1 = $.sibling(div, 2);
-			var node_2 = $.child(div_1);
-			var consequent_2 = ($$anchor) => {
-				var a = root_4$1();
+			var node_1 = $.child(div_1);
+			var consequent_1 = ($$anchor) => {
+				var a = root_3();
 				var event_handler = $.derived(() => stopPropagation(showMore));
 				var event_handler_1 = $.derived(() => keyEnter(showMore));
 				var event_handler_2 = $.derived(stopPropagation);
@@ -2288,18 +2273,41 @@ function Day$3($$anchor, $$props) {
 				});
 				$.append($$anchor, a);
 			};
-			$.if(node_2, ($$render) => {
-				if ($.get(dayHiddenChunks)) $$render(consequent_2);
+			$.if(node_1, ($$render) => {
+				if ($.get(dayHiddenChunks)) $$render(consequent_1);
 			});
 			$.reset(div_1);
-			$.template_effect(() => {
+			$.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)]);
 			$.append($$anchor, fragment_1);
-		},
-		$$slots: { default: true }
-	});
+		};
+		BaseDay($$anchor, {
+			get date() {
+				return $.get(dayStart);
+			},
+			allDay: true,
+			get classes() {
+				return $.get(classes);
+			},
+			get disabled() {
+				return $.get(disabled);
+			},
+			get highlight() {
+				return $.get(highlight);
+			},
+			get noIeb() {
+				return $$props.noIeb;
+			},
+			get noBeb() {
+				return $$props.noBeb;
+			},
+			content,
+			$$slots: { content: true }
+		});
+	}
 	$.pop();
 }
 $.delegate([
@@ -3476,23 +3484,12 @@ function Day$2($$anchor, $$props) {
 	var fragment = $.comment();
 	var node = $.first_child(fragment);
 	var consequent = ($$anchor) => {
-		BaseDay($$anchor, {
-			get date() {
-				return $$props.date;
-			},
-			allDay: true,
-			role: "listitem",
-			get disabled() {
-				return $.get(disabled);
-			},
-			get highlight() {
-				return $.get(highlight);
-			},
-			children: ($$anchor, $$slotProps) => {
+		{
+			const content = ($$anchor, dayContent = $.noop) => {
 				var fragment_2 = root_2$1();
 				var h4 = $.first_child(fragment_2);
 				var time = $.child(h4);
-				$.attach(time, () => contentFrom($.get(intlListDay).format($$props.date)));
+				$.attach(time, () => contentFrom(dayContent() ?? $.get(intlListDay).format($$props.date)));
 				var time_1 = $.sibling(time, 2);
 				$.attach(time_1, () => contentFrom($.get(intlListDaySide).format($$props.date)));
 				$.reset(h4);
@@ -3509,9 +3506,23 @@ function Day$2($$anchor, $$props) {
 					$.set_attribute(time_1, "datetime", $.get(datetime));
 				});
 				$.append($$anchor, fragment_2);
-			},
-			$$slots: { default: true }
-		});
+			};
+			BaseDay($$anchor, {
+				get date() {
+					return $$props.date;
+				},
+				allDay: true,
+				role: "listitem",
+				get disabled() {
+					return $.get(disabled);
+				},
+				get highlight() {
+					return $.get(highlight);
+				},
+				content,
+				$$slots: { content: true }
+			});
+		}
 	};
 	$.if(node, ($$render) => {
 		if ($.get(chunks).length) $$render(consequent);
@@ -3592,10 +3603,10 @@ var list_default = { createOptions(options) {
 		view: "listWeek"
 	});
 	assign(options.buttonText, {
-		listDay: "list",
-		listWeek: "list",
-		listMonth: "list",
-		listYear: "list"
+		listDay: "day",
+		listWeek: "week",
+		listMonth: "month",
+		listYear: "year"
 	});
 	assign(options.theme, {
 		daySide: "ec-day-side",
@@ -3755,10 +3766,10 @@ function createTRRParsers(parsers) {
 	if (!("scrollTime" in parsers)) assign(parsers, {
 		scrollTime: createDuration,
 		slotDuration: createDuration,
-		slotLabelInterval: (input) => input !== void 0 ? createDuration(input) : void 0,
+		slotLabelInterval: undefinedOr(createDuration),
 		slotMaxTime: createDuration,
 		slotMinTime: createDuration,
-		snapDuration: (input) => input !== void 0 ? createDuration(input) : void 0
+		snapDuration: undefinedOr(createDuration)
 	});
 }
 //#endregion
@@ -4796,8 +4807,8 @@ var resource_time_grid_default = {
 			view: "resourceTimeGridWeek"
 		});
 		assign(options.buttonText, {
-			resourceTimeGridDay: "resources",
-			resourceTimeGridWeek: "resources"
+			resourceTimeGridDay: "day",
+			resourceTimeGridWeek: "week"
 		});
 		assign(options.theme, { colGroup: "ec-col-group" });
 		assign(options.views, {
@@ -4948,7 +4959,7 @@ function grid(mainState, viewState) {
 }
 function extraHeads(mainState, viewState) {
 	return () => {
-		let { options: { firstDay, weekNumbers } } = mainState;
+		let { features, options: { firstDay, weekNumbers } } = mainState;
 		let { grid } = viewState;
 		let months = [];
 		let weeks = [];
@@ -4956,7 +4967,7 @@ function extraHeads(mainState, viewState) {
 			let month;
 			let week;
 			if (!empty(grid)) for (let { dayStart, gridColumn } of grid[0]) {
-				if (month && month.date.getUTCMonth() === dayStart.getUTCMonth()) ++month.span;
+				if (features.includes("month")) if (month && month.date.getUTCMonth() === dayStart.getUTCMonth()) ++month.span;
 				else {
 					month = {
 						date: dayStart,
@@ -5677,10 +5688,10 @@ var resource_timeline_default = {
 		assign(options.buttonText, {
 			expand: "Expand",
 			collapse: "Collapse",
-			resourceTimelineDay: "timeline",
-			resourceTimelineWeek: "timeline",
-			resourceTimelineMonth: "timeline",
-			resourceTimelineYear: "timeline"
+			resourceTimelineDay: "day",
+			resourceTimelineWeek: "week",
+			resourceTimelineMonth: "month",
+			resourceTimelineYear: "year"
 		});
 		assign(options.icons, {
 			collapse: { html: "&minus;" },
@@ -5752,10 +5763,10 @@ function initViewComponent$1(mainState) {
 	return _initViewComponent(mainState);
 }
 function initMonthViewComponent(mainState) {
-	return _initViewComponent(mainState);
+	return _initViewComponent(mainState, ["month"]);
 }
-function _initViewComponent(mainState) {
-	mainState.features = ["timeline"];
+function _initViewComponent(mainState, extraFeatures = []) {
+	mainState.features = ["timeline", ...extraFeatures];
 	mainState.extensions.viewResources = (resources) => resources.filter((resource) => !getPayload(resource).hidden);
 	return View;
 }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@event-calendar/core",
-  "version": "5.5.0",
+  "version": "5.6.0",
   "title": "Event Calendar Core package",
   "description": "Full-sized drag & drop event calendar with resource & timeline views",
   "keywords": [
@@ -32,6 +32,6 @@
     "#components": "./src/lib/components/index.js"
   },
   "dependencies": {
-    "svelte": "^5.53.12"
+    "svelte": "^5.55.0"
   }
 }

package/src/Buttons.svelte CHANGED Viewed

@@ -5,8 +5,8 @@
     let {buttons} = $props();
     let mainState = getContext('state');
-    let {currentRange, today, viewTitle, viewDates, options: {buttonText, customButtons, date, duration, hiddenDays,
-        theme, validRange, view}} = $derived(mainState);
+    let {currentRange, today, viewTitle, viewDates, options: {buttonText, customButtons, date, dateIncrement, duration,
+        hiddenDays, theme, validRange, view}} = $derived(mainState);
     let prevDisabled = $state(false);
     let nextDisabled = $state(false);
@@ -52,11 +52,11 @@
     }
     function prev() {
-        mainState.setOption('date', prevDate(cloneDate(date), duration, hiddenDays));
+        mainState.setOption('date', prevDate(cloneDate(date), dateIncrement ?? duration, hiddenDays));
     }
     function next() {
-        mainState.setOption('date', nextDate(cloneDate(date), duration, hiddenDays));
+        mainState.setOption('date', nextDate(cloneDate(date), dateIncrement ?? duration, hiddenDays));
     }
     function setToday() {

package/src/Calendar.svelte CHANGED Viewed

@@ -17,7 +17,7 @@
     let {
         auxComponents, features, events, interaction, iClass, view, viewComponent: View,
-        options: {date, duration, height, hiddenDays, customScrollbars, theme}
+        options: {date, dateIncrement, duration, height, hiddenDays, customScrollbars, theme}
     } = $derived(mainState);
     // Reactively update options that did change
@@ -113,12 +113,12 @@
     }
     export function next() {
-        mainState.setOption('date', nextDate(cloneDate(date), duration, hiddenDays));
+        mainState.setOption('date', nextDate(cloneDate(date), dateIncrement ?? duration, hiddenDays));
         return this;
     }
     export function prev() {
-        mainState.setOption('date', prevDate(cloneDate(date), duration, hiddenDays));
+        mainState.setOption('date', prevDate(cloneDate(date), dateIncrement ?? duration, hiddenDays));
         return this;
     }
 </script>

package/src/lib/components/BaseDay.svelte CHANGED Viewed

@@ -1,6 +1,6 @@
 <script>
     import {getContext, onMount} from 'svelte';
-    import {datesEqual, identity, setPayload} from '#lib';
+    import {contentFrom, datesEqual, identity, isFunction, setPayload, toLocalDate} from '#lib';
     let {
         el = $bindable(),
@@ -14,13 +14,23 @@
         role = 'cell',
         noIeb = false,
         noBeb = false,
-        children
+        content
     } = $props();
-    let {today, interaction: {action}, options: {theme}} = $derived(getContext('state'));
+    let {today, interaction: {action}, options: {dayCellContent, theme}} = $derived(getContext('state'));
     let {snap} = $derived(getContext('view-state'));  // timeGrid has snap, others don't
     let isToday = $derived(datesEqual(date, today));
+    let dayContent = $derived(
+        isFunction(dayCellContent)
+            ? dayCellContent({
+                allDay,
+                date: toLocalDate(date),
+                isToday,
+                resource
+            })
+            : dayCellContent
+    );
     // Class
     let classNames = $derived(classes([
@@ -54,4 +64,5 @@
     class={classNames}
     {role}
     {onpointerdown}
->{@render children?.()}</div>
+    {@attach content ? null : contentFrom(dayContent)}
+>{@render content?.(dayContent)}</div>

package/src/lib/utils.js CHANGED Viewed

@@ -77,3 +77,7 @@ export const identity = (x) => x;
 export function isRtl() {
     return window.getComputedStyle(document.documentElement).direction === 'rtl';
 }
+export function undefinedOr(fn) {
+    return input => input === undefined ? undefined : fn(input);
+}

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

@@ -48,35 +48,35 @@
 </script>
 <BaseDay date={dayStart} allDay {classes} {disabled} {highlight} {noIeb} {noBeb}>
-    <div class="{theme.dayHead}">
-        {#if features.includes('dayNumber')}
+    {#snippet content(dayContent)}
+        <div class="{theme.dayHead}">
             <time
                 datetime="{toISOString(dayStart, 10)}"
-                {@attach contentFrom(intlDayCell.format(dayStart))}
+                {@attach contentFrom(dayContent ?? intlDayCell.format(dayStart))}
             ></time>
-        {/if}
-        {#if showWeekNumber}
-            <span
-                class="{theme.weekNumber}"
-                {@attach contentFrom(weekNumber)}
-            ></span>
-        {/if}
-    </div>
+            {#if showWeekNumber}
+                <span
+                    class="{theme.weekNumber}"
+                    {@attach contentFrom(weekNumber)}
+                ></span>
+            {/if}
+        </div>
-    <div class="{theme.dayFoot}">
-        {#if dayHiddenChunks}
-            <!-- svelte-ignore a11y_missing_attribute -->
-            <!-- svelte-ignore a11y_missing_content -->
-            <!-- svelte-ignore a11y_consider_explicit_label -->
-            <a
-                role="button"
-                tabindex="0"
-                aria-haspopup="dialog"
-                onclick={stopPropagation(showMore)}
-                onkeydown={keyEnter(showMore)}
-                onpointerdown={stopPropagation()}
-                {@attach contentFrom(moreLink)}
-            ></a>
-        {/if}
-    </div>
+        <div class="{theme.dayFoot}">
+            {#if dayHiddenChunks}
+                <!-- svelte-ignore a11y_missing_attribute -->
+                <!-- svelte-ignore a11y_missing_content -->
+                <!-- svelte-ignore a11y_consider_explicit_label -->
+                <a
+                    role="button"
+                    tabindex="0"
+                    aria-haspopup="dialog"
+                    onclick={stopPropagation(showMore)}
+                    onkeydown={keyEnter(showMore)}
+                    onpointerdown={stopPropagation()}
+                    {@attach contentFrom(moreLink)}
+                ></a>
+            {/if}
+        </div>
+    {/snippet}
 </BaseDay>

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

@@ -33,13 +33,15 @@
 {#if chunks.length}
     <BaseDay {date} allDay role="listitem" {disabled} {highlight}>
-        <!-- svelte-ignore a11y_missing_content -->
-        <h4 class="{theme.dayHead}">
-            <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)}
-            <Event {chunk}/>
-        {/each}
+        {#snippet content(dayContent)}
+            <!-- svelte-ignore a11y_missing_content -->
+            <h4 class="{theme.dayHead}">
+                <time {datetime} {@attach contentFrom(dayContent ?? intlListDay.format(date))}></time>
+                <time class="{theme.daySide}" {datetime} {@attach contentFrom(intlListDaySide.format(date))}></time>
+            </h4>
+            {#each chunks as chunk (chunk.event)}
+                <Event {chunk}/>
+            {/each}
+        {/snippet}
     </BaseDay>
 {/if}

package/src/plugins/list/index.js CHANGED Viewed

@@ -12,10 +12,10 @@ export default {
             view: 'listWeek'
         });
         assign(options.buttonText, {
-            listDay: 'list',
-            listWeek: 'list',
-            listMonth: 'list',
-            listYear: 'list'
+            listDay: 'day',
+            listWeek: 'week',
+            listMonth: 'month',
+            listYear: 'year'
         });
         assign(options.theme, {
             daySide: 'ec-day-side',

package/src/plugins/resource-time-grid/index.js CHANGED Viewed

@@ -15,8 +15,8 @@ export default {
             view: 'resourceTimeGridWeek'
         });
         assign(options.buttonText, {
-            resourceTimeGridDay: 'resources',
-            resourceTimeGridWeek: 'resources'
+            resourceTimeGridDay: 'day',
+            resourceTimeGridWeek: 'week'
         });
         assign(options.theme, {
             colGroup: 'ec-col-group'

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

@@ -45,7 +45,7 @@ export function grid(mainState, viewState) {
 export function extraHeads(mainState, viewState) {
     return () => {
         // Dependencies
-        let {options: {firstDay, weekNumbers}} = mainState;
+        let {features, options: {firstDay, weekNumbers}} = mainState;
         let {grid} = viewState;
         let months = [];
@@ -56,11 +56,13 @@ export function extraHeads(mainState, viewState) {
             let week;
             if (!empty(grid)) {
                 for (let {dayStart, gridColumn} of grid[0]) {
-                    if (month && month.date.getUTCMonth() === dayStart.getUTCMonth()) {
-                        ++month.span;
-                    } else {
-                        month = {date: dayStart, gridColumn, span: 1};
-                        months.push(month);
+                    if (features.includes('month')) {
+                        if (month && month.date.getUTCMonth() === dayStart.getUTCMonth()) {
+                            ++month.span;
+                        } else {
+                            month = {date: dayStart, gridColumn, span: 1};
+                            months.push(month);
+                        }
                     }
                     if (weekNumbers) {
                         let number = getWeekNumber(dayStart, firstDay);

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

@@ -20,10 +20,10 @@ export default {
 		assign(options.buttonText, {
 			expand: 'Expand',
 			collapse: 'Collapse',
-			resourceTimelineDay:  'timeline',
-			resourceTimelineWeek: 'timeline',
-			resourceTimelineMonth: 'timeline',
-			resourceTimelineYear: 'timeline'
+			resourceTimelineDay:  'day',
+			resourceTimelineWeek: 'week',
+			resourceTimelineMonth: 'month',
+			resourceTimelineYear: 'year'
 		});
 		assign(options.icons, {
 			collapse: {html: '&minus;'},
@@ -91,11 +91,11 @@ function initViewComponent(mainState) {
 }
 function initMonthViewComponent(mainState) {
-	return _initViewComponent(mainState);
+	return _initViewComponent(mainState, ['month']);
 }
-function _initViewComponent(mainState) {
-	mainState.features = ['timeline'];
+function _initViewComponent(mainState, extraFeatures = []) {
+	mainState.features = ['timeline', ...extraFeatures];
 	mainState.extensions.viewResources = resources => resources.filter(resource => !getPayload(resource).hidden);
 	return View;
 }

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

@@ -1,4 +1,4 @@
-import {assign, createDuration} from '#lib';
+import {assign, createDuration, undefinedOr} from '#lib';
 /**
  * TimeGrid + ResourceTimeGrid + ResourceTimeline
@@ -53,10 +53,10 @@ export function createTRRParsers(parsers) {
         assign(parsers, {
             scrollTime: createDuration,
             slotDuration: createDuration,
-            slotLabelInterval: input => input !== undefined ? createDuration(input) : undefined,
+            slotLabelInterval: undefinedOr(createDuration),
             slotMaxTime: createDuration,
             slotMinTime: createDuration,
-            snapDuration: input => input !== undefined ? createDuration(input) : undefined
+            snapDuration: undefinedOr(createDuration)
         });
     }
 }

package/src/storage/options.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import {untrack} from 'svelte';
 import {
     assign, createDate, createDateRange, createDuration, createEvents, createEventSources, createResources, hasOwn,
-    isArray, isFunction, isPlainObject, keys, setMidnight
+    isArray, isFunction, isPlainObject, keys, setMidnight, undefinedOr
 } from '#lib';
 import {objectProxy} from './proxy.svelte.js';
@@ -13,7 +13,9 @@ function createOptions(plugins) {
         customButtons: {},
         customScrollbars: false,  // ec option
         date: new Date(),
+        dateIncrement: undefined,
         datesSet: undefined,
+        dayCellContent: undefined,
         dayHeaderFormat: {
             weekday: 'short',
             month: 'numeric',
@@ -114,6 +116,7 @@ function createOptions(plugins) {
 function createParsers(plugins) {
     let parsers = {
         date: input => setMidnight(createDate(input)),
+        dateIncrement: undefinedOr(createDuration),
         duration: createDuration,
         events: createEvents,
         eventSources: createEventSources,

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

@@ -1,5 +1,5 @@
 import {SvelteMap} from 'svelte/reactivity';
-import {cloneDate, createDate, identity, intl, intlRange, setMidnight} from '#lib';
+import {cloneDate, createDate, identity, intl, intlRange, isArray, setMidnight} from '#lib';
 import {optionsState} from './options.js';
 import {
     createLoadingInvoker, loadEvents, loadResources, runDatesSet, runEventAllUpdated, runViewDidMount, setNowAndToday,
@@ -27,7 +27,7 @@ export default class State {
         this.filteredEvents = $derived.by(filteredEvents(this));
         this.mainEl = $state();
         this.now = $state(createDate());
-        this.resources = $state.raw(arrayProxy(this.options.resources));
+        this.resources = $state.raw(arrayProxy(isArray(this.options.resources) ? this.options.resources : []));
         this.today = $state(setMidnight(cloneDate(this.now)));
         this.intlEventTime = $derived.by(intlRange(this, 'eventTimeFormat'));
         this.intlDayHeader = $derived.by(intl(this, 'dayHeaderFormat'));