npm - @event-calendar/core - Versions diffs - 2.0.0 → 2.2.0 - Mend

@event-calendar/core 2.0.0 → 2.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 (13) hide show

package/README.md CHANGED Viewed

@@ -26,6 +26,7 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
   - [dateClick](#dateclick)
   - [datesAboveResources](#datesaboveresources)
   - [datesSet](#datesset)
+  - [dayCellFormat](#daycellformat)
   - [dayHeaderFormat](#dayheaderformat)
   - [dayMaxEvents](#daymaxevents)
   - [dayPopoverFormat](#daypopoverformat)
@@ -44,9 +45,9 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
   - [eventDragStart](#eventdragstart)
   - [eventDragStop](#eventdragstop)
   - [eventDrop](#eventdrop)
-  - [eventDurationEditable](#eventdurationeditable)
   </td><td>
+  - [eventDurationEditable](#eventdurationeditable)
   - [eventLongPressDelay](#eventlongpressdelay)
   - [eventMouseEnter](#eventmouseenter)
   - [eventMouseLeave](#eventmouseleave)
@@ -72,9 +73,9 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
   - [longPressDelay](#longpressdelay)
   - [moreLinkContent](#morelinkcontent)
   - [noEventsClick](#noeventsclick)
-  - [noEventsContent](#noeventscontent)
   </td><td>
+  - [noEventsContent](#noeventscontent)
   - [nowIndicator](#nowindicator)
   - [pointer](#pointer)
   - [resources](#resources)
@@ -124,6 +125,7 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
   - [unselect](#unselect-1)
   </td></tr>
   </table>
+- [Content](#content)
 - [Event object](#event-object)
   - [Parsing event from a plain object](#parsing-event-from-a-plain-object)
 - [Duration object](#duration-object)
@@ -194,8 +196,8 @@ import '@event-calendar/core/index.css';
 ### Pre-built browser ready bundle
 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@2.0.0/event-calendar.min.css">
-<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.0.0/event-calendar.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.2.0/event-calendar.min.css">
+<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.2.0/event-calendar.min.js"></script>
 ```
 <details>
@@ -286,15 +288,15 @@ When hidden with `false`, all-day events will not be displayed in `timeGrid`/`re
 - Type `object` or `function`
 - Default `{close: 'Close', dayGridMonth: 'month', listDay: 'list', listMonth: 'list', listWeek: 'list', listYear: 'list', resourceTimeGridDay: 'day', resourceTimeGridWeek: 'week', timeGridDay: 'day', timeGridWeek: 'week', today: 'today'}`
 > Views override the default value as follows:
-> - dayGridMonth `function (text) { return {...text, next: 'Next month', prev: 'Previous month'}; }`
-> - listDay `function (text) { return {...text, next: 'Next day', prev: 'Previous day'}; }`
-> - listMonth `function (text) { return {...text, next: 'Next month', prev: 'Previous month'}; }`
-> - listWeek `function (text) { return {...text, next: 'Next week', prev: 'Previous week'}; }`
-> - listYear `function (text) { return {...text, next: 'Next year', prev: 'Previous year'}; }`
-> - resourceTimeGridDay `function (text) { return {...text, next: 'Next day', prev: 'Previous day'}; }`
-> - resourceTimeGridWeek `function (text) { return {...text, next: 'Next week', prev: 'Previous week'}; }`
-> - timeGridDay `function (text) { return {...text, next: 'Next day', prev: 'Previous day'}; }`
-> - timeGridWeek `function (text) { return {...text, next: 'Next week', prev: 'Previous week'}; }`
+> - dayGridMonth `text => ({...text, next: 'Next month', prev: 'Previous month'})`
+> - 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'})`
+> - listYear `text => ({...text, next: 'Next year', prev: 'Previous year'})`
+> - resourceTimeGridDay `text => ({...text, next: 'Next day', prev: 'Previous day'})`
+> - resourceTimeGridWeek `text => ({...text, next: 'Next week', prev: 'Previous week'})`
+> - timeGridDay `text => ({...text, next: 'Next day', prev: 'Previous day'})`
+> - timeGridWeek `text => ({...text, next: 'Next week', prev: 'Previous week'})`
 Text that is displayed in buttons of the header toolbar.
@@ -452,6 +454,29 @@ The current [View](#view-object) object
 </tr>
 </table>
+### dayCellFormat
+- Type `object` or `function`
+- Default `{day: 'numeric'}`
+Defines the text that is displayed inside the day cell in the `dayGrid` 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>
 ### dayHeaderFormat
 - Type `object` or `function`
 - Default `{weekday: 'short', month: 'numeric', day: 'numeric'}`
@@ -1303,7 +1328,7 @@ Determines whether the events on the calendar can be dragged.
 Defines the time-text that is displayed on each event.
-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 formatted string:
+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 (start, end) {
@@ -1905,7 +1930,17 @@ This should be a value that can be parsed into a [Duration](#duration-object) ob
 ### theme
 - Type `object` or `function`
-- Default `{active: 'ec-active', allDay: 'ec-all-day', bgEvent: 'ec-bg-event', bgEvents: 'ec-bg-events', body: 'ec-body', button: 'ec-button', buttonGroup: 'ec-button-group', calendar: 'ec', compact: 'ec-compact', content: 'ec-content', day: 'ec-day', dayFoot: 'ec-day-foot', dayHead: 'ec-day-head', daySide: 'ec-day-side', days: 'ec-days', draggable: 'ec-draggable', dragging: 'ec-dragging', event: 'ec-event', eventBody: 'ec-event-body', eventTag: 'ec-event-tag', eventTime: 'ec-event-time', eventTitle: 'ec-event-title', events: 'ec-events', extra: 'ec-extra', ghost: 'ec-ghost', handle: 'ec-handle', header: 'ec-header', hiddenScroll: 'ec-hidden-scroll', highlight: 'ec-highlight', icon: 'ec-icon', line: 'ec-line', lines: 'ec-lines', list: 'ec-list', month: 'ec-month', noEvents: 'ec-no-events', nowIndicator: 'ec-now-indicator', otherMonth: 'ec-other-month', pointer: 'ec-pointer', popup: 'ec-popup', preview: 'ec-preview', resizer: 'ec-resizer', resizingX: 'ec-resizing-x', resizingY: 'ec-resizing-y', resource: 'ec-resource', resourceTitle: 'ec-resource-title', selecting: 'ec-selecting', sidebar: 'ec-sidebar', sidebarTitle: 'ec-sidebar-title', time: 'ec-time', title: 'ec-title', today: 'ec-today', toolbar: 'ec-toolbar', uniform: 'ec-uniform', week: 'ec-week', withScroll: 'ec-with-scroll'}`
+- Default `{active: 'ec-active', allDay: 'ec-all-day', bgEvent: 'ec-bg-event', bgEvents: 'ec-bg-events', body: 'ec-body', button: 'ec-button', buttonGroup: 'ec-button-group', calendar: 'ec', compact: 'ec-compact', content: 'ec-content', day: 'ec-day', dayFoot: 'ec-day-foot', dayHead: 'ec-day-head', daySide: 'ec-day-side', days: 'ec-days', draggable: 'ec-draggable', dragging: 'ec-dragging', event: 'ec-event', eventBody: 'ec-event-body', eventTag: 'ec-event-tag', eventTime: 'ec-event-time', eventTitle: 'ec-event-title', events: 'ec-events', extra: 'ec-extra', ghost: 'ec-ghost', handle: 'ec-handle', header: 'ec-header', hiddenScroll: 'ec-hidden-scroll', highlight: 'ec-highlight', icon: 'ec-icon', line: 'ec-line', lines: 'ec-lines', noEvents: 'ec-no-events', nowIndicator: 'ec-now-indicator', otherMonth: 'ec-other-month', pointer: 'ec-pointer', popup: 'ec-popup', preview: 'ec-preview', resizer: 'ec-resizer', resizingX: 'ec-resizing-x', resizingY: 'ec-resizing-y', resource: 'ec-resource', resourceTitle: 'ec-resource-title', selecting: 'ec-selecting', sidebar: 'ec-sidebar', sidebarTitle: 'ec-sidebar-title', time: 'ec-time', title: 'ec-title', today: 'ec-today', toolbar: 'ec-toolbar', uniform: 'ec-uniform', view: '', withScroll: 'ec-with-scroll'}`
+> Views override the default value as follows:
+> - dayGridMonth `theme => ({...theme, view: 'ec-day-grid ec-month-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'})`
+> - listYear `theme => ({...theme, view: 'ec-list ec-year-view'})`
+> - resourceTimeGridDay `theme => ({...theme, view: 'ec-time-grid ec-resource-day-view'})`
+> - resourceTimeGridWeek `theme => ({...theme, view: 'ec-time-grid ec-resource-week-view'})`
+> - timeGridDay `theme => ({...theme, view: 'ec-time-grid ec-day-view'})`
+> - timeGridWeek `theme => ({...theme, view: 'ec-time-grid ec-week-view'})`
 Defines the CSS classes that the Event Calendar uses to generate HTML markup.
@@ -1959,16 +1994,6 @@ function (start, end) {
 </tr>
 </table>
-The callback function can return HTML markup. If you want to use HTML entities in the title, you must use the callback function:
-```js
-function (date) {
-  let month = date.toLocaleDateString('en-US', { month: 'long' })
-  let year = date.toLocaleDateString('en-US', { year: 'numeric' })
-  return `<span class="month">${month}</span> <span class="year">${year}</span>`
-}
-```
 ### unselect
 - Type `function`
 - Default `undefined`

package/index.css CHANGED Viewed

@@ -161,7 +161,7 @@
 .ec:not(.ec-list) .ec-body {
   border-top: none;
 }
-.ec-month .ec-body {
+.ec-day-grid .ec-body {
   flex: 1 1 auto;
 }
@@ -190,11 +190,11 @@
 .ec-content {
   display: flex;
 }
-.ec-month .ec-content {
+.ec-day-grid .ec-content {
   flex-direction: column;
   height: 100%;
 }
-.ec-month .ec-uniform .ec-content {
+.ec-day-grid .ec-uniform .ec-content {
   overflow: hidden;
 }
 .ec-list .ec-content {
@@ -212,10 +212,10 @@
 .ec-days:last-child {
   border-bottom: none;
 }
-.ec-month .ec-days, .ec-resource .ec-days {
+.ec-day-grid .ec-days, .ec-resource .ec-days {
   flex: 1 0 auto;
 }
-.ec-month .ec-uniform .ec-days {
+.ec-day-grid .ec-uniform .ec-days {
   flex: 1 1 0%;
   min-height: 0;
 }
@@ -229,14 +229,14 @@
 .ec-day.ec-highlight {
   background-color: #e5f7fe;
 }
-.ec-month .ec-body .ec-day {
+.ec-day-grid .ec-body .ec-day {
   min-height: 5em;
   position: relative;
 }
-.ec-month .ec-uniform .ec-day {
+.ec-day-grid .ec-uniform .ec-day {
   min-height: 0;
 }
-.ec-month .ec-day:first-child {
+.ec-day-grid .ec-day:first-child {
   border-left: none;
 }
 .ec-day.ec-other-month .ec-day-head {
@@ -256,17 +256,17 @@
   border-top: none;
 }
-.ec-month .ec-day-head {
+.ec-day-grid .ec-day-head {
   text-align: right;
   padding: 4px 4px 3px;
 }
-.ec-month .ec-day-foot {
+.ec-day-grid .ec-day-foot {
   position: absolute;
   bottom: 0;
   padding: 2px;
   font-size: 0.85em;
 }
-.ec-month .ec-day-foot a {
+.ec-day-grid .ec-day-foot a {
   cursor: pointer;
 }
@@ -281,7 +281,7 @@
 .ec-events {
   margin: 0 6px 0 0;
 }
-.ec-week .ec-events, .ec-events.ec-preview {
+.ec-time-grid .ec-events, .ec-events.ec-preview {
   position: relative;
 }
@@ -297,10 +297,10 @@
   line-height: 1.5;
   z-index: 1;
 }
-.ec-month .ec-event, .ec-all-day .ec-event {
+.ec-day-grid .ec-event, .ec-all-day .ec-event {
   position: relative;
 }
-.ec-week .ec-body .ec-event {
+.ec-time-grid .ec-body .ec-event {
   position: absolute;
 }
 .ec-list .ec-event {
@@ -335,7 +335,7 @@
   flex-direction: column;
   width: 100%;
 }
-.ec-month .ec-event-body, .ec-all-day .ec-event-body {
+.ec-day-grid .ec-event-body, .ec-all-day .ec-event-body {
   flex-direction: row;
 }
@@ -351,7 +351,7 @@
   margin: 0 0 1px 0;
   flex-shrink: 0;
 }
-.ec-month .ec-event-time {
+.ec-day-grid .ec-event-time {
   margin: 0 3px 0 0;
   max-width: 100%;
   text-overflow: ellipsis;
@@ -360,12 +360,12 @@
 .ec-event-title {
   overflow: hidden;
 }
-.ec-month .ec-event-title, .ec-all-day .ec-event-title {
+.ec-day-grid .ec-event-title, .ec-all-day .ec-event-title {
   min-height: 1.5em;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-.ec-week .ec-body .ec-event-title {
+.ec-time-grid .ec-body .ec-event-title {
   position: sticky;
   top: 0;
 }
@@ -489,7 +489,7 @@
   position: absolute;
   user-select: none;
 }
-.ec-month .ec-resizer, .ec-all-day .ec-resizer {
+.ec-day-grid .ec-resizer, .ec-all-day .ec-resizer {
   top: 0;
   right: 0;
   bottom: 0;
@@ -497,7 +497,7 @@
   max-width: 8px;
   cursor: ew-resize;
 }
-.ec-week .ec-body .ec-resizer {
+.ec-time-grid .ec-body .ec-resizer {
   left: 0;
   right: 0;
   bottom: 0;

package/index.js CHANGED Viewed

@@ -8,30 +8,6 @@ function keyEnter(fn) {
     };
 }
-function btnTextDay(text) {
-    return btnText(text, 'day');
-}
-function btnTextWeek(text) {
-    return btnText(text, 'week');
-}
-function btnTextMonth(text) {
-    return btnText(text, 'month');
-}
-function btnTextYear(text) {
-    return btnText(text, 'year');
-}
-function btnText(text, period) {
-    return {
-        ...text,
-        next: 'Next ' + period,
-        prev: 'Previous ' + period
-    };
-}
 function setContent(node, content) {
     let actions = {
         update(content) {
@@ -569,6 +545,34 @@ function pointerEvent(display) {
     return display === 'pointer';
 }
+function btnTextDay(text) {
+    return btnText(text, 'day');
+}
+function btnTextWeek(text) {
+    return btnText(text, 'week');
+}
+function btnTextMonth(text) {
+    return btnText(text, 'month');
+}
+function btnTextYear(text) {
+    return btnText(text, 'year');
+}
+function btnText(text, period) {
+    return {
+        ...text,
+        next: 'Next ' + period,
+        prev: 'Previous ' + period
+    };
+}
+function themeView(view) {
+    return theme => ({...theme, view});
+}
 function writable2(value, parser, start) {
     return {
         ...writable(value, start),
@@ -710,7 +714,7 @@ function createOptions(plugins) {
             time: 'ec-time',
             title: 'ec-title',
             toolbar: 'ec-toolbar',
-            week: 'ec-week',
+            view: '',
             withScroll: 'ec-with-scroll'
         },
         titleFormat: {
@@ -730,9 +734,8 @@ function createOptions(plugins) {
     return options;
 }
-function createParsers(options, plugins) {
+function createParsers(plugins) {
     let parsers = {
-        buttonText: input => is_function(input) ? input(options.buttonText) : input,
         date: date => setMidnight(createDate(date)),
         duration: createDuration,
         events: createEvents,
@@ -742,12 +745,11 @@ function createParsers(options, plugins) {
         scrollTime: createDuration,
         slotDuration: createDuration,
         slotMaxTime: createDuration,
-        slotMinTime: createDuration,
-        theme: input => is_function(input) ? input(options.theme) : input
+        slotMinTime: createDuration
     };
     for (let plugin of plugins) {
-        plugin.createParsers?.(parsers, options);
+        plugin.createParsers?.(parsers);
     }
     return parsers;
@@ -768,18 +770,18 @@ function diff(options) {
     return diff;
 }
-function monthMode(state) {
+function dayGrid(state) {
     return derived(state.view, $view => $view?.startsWith('dayGrid'));
 }
 function activeRange(state) {
     return derived(
-        [state._currentRange, state.firstDay, state.slotMaxTime, state._monthMode],
-        ([$_currentRange, $firstDay, $slotMaxTime, $_monthMode]) => {
+        [state._currentRange, state.firstDay, state.slotMaxTime, state._dayGrid],
+        ([$_currentRange, $firstDay, $slotMaxTime, $_dayGrid]) => {
             let start = cloneDate($_currentRange.start);
             let end = cloneDate($_currentRange.end);
-            if ($_monthMode) {
+            if ($_dayGrid) {
                 // First day of week
                 prevClosestDay(start, $firstDay);
                 nextClosestDay(end, $firstDay);
@@ -798,10 +800,10 @@ function activeRange(state) {
 function currentRange(state) {
     return derived(
-        [state.date, state.duration, state.firstDay, state._monthMode],
-        ([$date, $duration, $firstDay, $_monthMode]) => {
+        [state.date, state.duration, state.firstDay, state._dayGrid],
+        ([$date, $duration, $firstDay, $_dayGrid]) => {
             let start = cloneDate($date), end;
-            if ($_monthMode) {
+            if ($_dayGrid) {
                 start.setUTCDate(1);
             } else if ($duration.inWeeks) {
                 // First day of week
@@ -842,9 +844,9 @@ function viewDates(state) {
 function viewTitle(state) {
     return derived(
-        [state.date, state._activeRange, state._intlTitle, state._monthMode],
-        ([$date, $_activeRange, $_intlTitle, $_monthMode]) => {
-            return $_monthMode
+        [state.date, state._activeRange, state._intlTitle, state._dayGrid],
+        ([$date, $_activeRange, $_intlTitle, $_dayGrid]) => {
+            return $_dayGrid
                 ? $_intlTitle.formatRange($date, $date)
                 : $_intlTitle.formatRange($_activeRange.start, subtractDay(cloneDate($_activeRange.end)));
         }
@@ -962,8 +964,8 @@ class State {
         plugins = plugins || [];
         // Create options
-        let options= createOptions(plugins);
-        let parsers = createParsers(options, plugins);
+        let options = createOptions(plugins);
+        let parsers = createParsers(plugins);
         // Parse options
         options = parseOpts(options, parsers);
@@ -977,7 +979,7 @@ class State {
         // Private stores
         this._queue = writable(new Map());  // debounce queue
         this._auxiliary = writable([]);  // auxiliary components
-        this._monthMode = monthMode(this);
+        this._dayGrid = dayGrid(this);
         this._currentRange = currentRange(this);
         this._activeRange = activeRange(this);
         this._fetchedRange = writable({start: undefined, end: undefined});
@@ -993,7 +995,6 @@ class State {
         this._viewTitle = viewTitle(this);
         this._viewDates = viewDates(this);
         this._view = view(this);
-        this._viewClass = writable(undefined);
         this._viewComponent = writable(undefined);
         // Resources
         this._resBgColor = writable(noop);
@@ -1017,7 +1018,7 @@ class State {
         // Set options for each view
         let views = new Set([...keys(options.views), ...keys(input.views ?? {})]);
         for (let view of views) {
-            let opts = assign({}, options, options.views[view] ?? {}, input, input.views?.[view] ?? {});
+            let opts = mergeOpts(options, options.views[view] ?? {}, input, input.views?.[view] ?? {});
             // Change view component when view changes
             this.view.subscribe(newView => {
                 if (newView === view) {
@@ -1069,6 +1070,17 @@ function parseOpts(opts, parsers) {
     return result;
 }
+function mergeOpts(...args) {
+    let mergable = ['buttonText', 'theme'];
+    let result = {};
+    for (let opts of args) {
+        for (let key of keys(opts)) {
+            result[key] = mergable.includes(key) && is_function(opts[key]) ? opts[key](result[key]) : opts[key];
+        }
+    }
+    return result;
+}
 /* packages/core/src/Buttons.svelte generated by Svelte v4.1.1 */
 function get_each_context$2(ctx, list, i) {
@@ -1077,7 +1089,7 @@ function get_each_context$2(ctx, list, i) {
 	return child_ctx;
 }
-// (38:27)
+// (52:27)
 function create_if_block_4(ctx) {
 	let button_1;
 	let t_value = /*$buttonText*/ ctx[5][/*button*/ ctx[23]] + "";
@@ -1129,7 +1141,7 @@ function create_if_block_4(ctx) {
 	};
 }
-// (36:32)
+// (46:32)
 function create_if_block_3(ctx) {
 	let button_1;
 	let t_value = /*$buttonText*/ ctx[5][/*button*/ ctx[23]] + "";
@@ -1176,13 +1188,14 @@ function create_if_block_3(ctx) {
 	};
 }
-// (34:31)
+// (39:31)
 function create_if_block_2(ctx) {
 	let button_1;
 	let i;
 	let i_class_value;
 	let button_1_class_value;
 	let button_1_aria_label_value;
+	let button_1_title_value;
 	let mounted;
 	let dispose;
@@ -1193,6 +1206,7 @@ function create_if_block_2(ctx) {
 			attr(i, "class", i_class_value = "" + (/*$theme*/ ctx[3].icon + " ec-" + /*button*/ ctx[23]));
 			attr(button_1, "class", button_1_class_value = "" + (/*$theme*/ ctx[3].button + " ec-" + /*button*/ ctx[23]));
 			attr(button_1, "aria-label", button_1_aria_label_value = /*$buttonText*/ ctx[5].next);
+			attr(button_1, "title", button_1_title_value = /*$buttonText*/ ctx[5].next);
 		},
 		m(target, anchor) {
 			insert(target, button_1, anchor);
@@ -1215,6 +1229,10 @@ function create_if_block_2(ctx) {
 			if (dirty & /*$buttonText*/ 32 && button_1_aria_label_value !== (button_1_aria_label_value = /*$buttonText*/ ctx[5].next)) {
 				attr(button_1, "aria-label", button_1_aria_label_value);
 			}
+			if (dirty & /*$buttonText*/ 32 && button_1_title_value !== (button_1_title_value = /*$buttonText*/ ctx[5].next)) {
+				attr(button_1, "title", button_1_title_value);
+			}
 		},
 		d(detaching) {
 			if (detaching) {
@@ -1234,6 +1252,7 @@ function create_if_block_1(ctx) {
 	let i_class_value;
 	let button_1_class_value;
 	let button_1_aria_label_value;
+	let button_1_title_value;
 	let mounted;
 	let dispose;
@@ -1244,6 +1263,7 @@ function create_if_block_1(ctx) {
 			attr(i, "class", i_class_value = "" + (/*$theme*/ ctx[3].icon + " ec-" + /*button*/ ctx[23]));
 			attr(button_1, "class", button_1_class_value = "" + (/*$theme*/ ctx[3].button + " ec-" + /*button*/ ctx[23]));
 			attr(button_1, "aria-label", button_1_aria_label_value = /*$buttonText*/ ctx[5].prev);
+			attr(button_1, "title", button_1_title_value = /*$buttonText*/ ctx[5].prev);
 		},
 		m(target, anchor) {
 			insert(target, button_1, anchor);
@@ -1266,6 +1286,10 @@ function create_if_block_1(ctx) {
 			if (dirty & /*$buttonText*/ 32 && button_1_aria_label_value !== (button_1_aria_label_value = /*$buttonText*/ ctx[5].prev)) {
 				attr(button_1, "aria-label", button_1_aria_label_value);
 			}
+			if (dirty & /*$buttonText*/ 32 && button_1_title_value !== (button_1_title_value = /*$buttonText*/ ctx[5].prev)) {
+				attr(button_1, "title", button_1_title_value);
+			}
 		},
 		d(detaching) {
 			if (detaching) {
@@ -2118,7 +2142,7 @@ function create_fragment(ctx) {
 	let mounted;
 	let dispose;
 	toolbar = new Toolbar({});
-	var switch_value = /*$_viewComponent*/ ctx[5];
+	var switch_value = /*$_viewComponent*/ ctx[4];
 	function switch_props(ctx, dirty) {
 		return {};
@@ -2139,15 +2163,13 @@ function create_fragment(ctx) {
 			t1 = space();
 			create_component(auxiliary.$$.fragment);
-			attr(div, "class", div_class_value = "" + (/*$theme*/ ctx[1].calendar + (/*$_viewClass*/ ctx[2]
-			? ' ' + /*$theme*/ ctx[1][/*$_viewClass*/ ctx[2]]
-			: '') + (/*$_scrollable*/ ctx[0]
+			attr(div, "class", div_class_value = "" + (/*$theme*/ ctx[1].calendar + " " + /*$theme*/ ctx[1].view + (/*$_scrollable*/ ctx[0]
 			? ' ' + /*$theme*/ ctx[1].withScroll
-			: '') + (/*$_iClass*/ ctx[3]
-			? ' ' + /*$theme*/ ctx[1][/*$_iClass*/ ctx[3]]
+			: '') + (/*$_iClass*/ ctx[2]
+			? ' ' + /*$theme*/ ctx[1][/*$_iClass*/ ctx[2]]
 			: '')));
-			set_style(div, "height", /*$height*/ ctx[4]);
+			set_style(div, "height", /*$height*/ ctx[3]);
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -2159,12 +2181,12 @@ function create_fragment(ctx) {
 			current = true;
 			if (!mounted) {
-				dispose = listen(window, "resize", /*recheckScrollable*/ ctx[18]);
+				dispose = listen(window, "resize", /*recheckScrollable*/ ctx[16]);
 				mounted = true;
 			}
 		},
 		p(ctx, dirty) {
-			if (dirty[0] & /*$_viewComponent*/ 32 && switch_value !== (switch_value = /*$_viewComponent*/ ctx[5])) {
+			if (dirty[0] & /*$_viewComponent*/ 16 && switch_value !== (switch_value = /*$_viewComponent*/ ctx[4])) {
 				if (switch_instance) {
 					group_outros();
 					const old_component = switch_instance;
@@ -2186,18 +2208,16 @@ function create_fragment(ctx) {
 				}
 			}
-			if (!current || dirty[0] & /*$theme, $_viewClass, $_scrollable, $_iClass*/ 15 && div_class_value !== (div_class_value = "" + (/*$theme*/ ctx[1].calendar + (/*$_viewClass*/ ctx[2]
-			? ' ' + /*$theme*/ ctx[1][/*$_viewClass*/ ctx[2]]
-			: '') + (/*$_scrollable*/ ctx[0]
+			if (!current || dirty[0] & /*$theme, $_scrollable, $_iClass*/ 7 && div_class_value !== (div_class_value = "" + (/*$theme*/ ctx[1].calendar + " " + /*$theme*/ ctx[1].view + (/*$_scrollable*/ ctx[0]
 			? ' ' + /*$theme*/ ctx[1].withScroll
-			: '') + (/*$_iClass*/ ctx[3]
-			? ' ' + /*$theme*/ ctx[1][/*$_iClass*/ ctx[3]]
+			: '') + (/*$_iClass*/ ctx[2]
+			? ' ' + /*$theme*/ ctx[1][/*$_iClass*/ ctx[2]]
 			: '')))) {
 				attr(div, "class", div_class_value);
 			}
-			if (!current || dirty[0] & /*$height*/ 16) {
-				set_style(div, "height", /*$height*/ ctx[4]);
+			if (dirty[0] & /*$height*/ 8) {
+				set_style(div, "height", /*$height*/ ctx[3]);
 			}
 		},
 		i(local) {
@@ -2237,7 +2257,6 @@ function instance($$self, $$props, $$invalidate) {
 	let $eventSources;
 	let $_interaction;
 	let $theme;
-	let $_viewClass;
 	let $_iClass;
 	let $height;
 	let $_viewComponent;
@@ -2246,18 +2265,17 @@ function instance($$self, $$props, $$invalidate) {
 	let component = get_current_component();
 	let state = new State(plugins, options);
 	setContext('state', state);
-	let { _viewComponent, _viewClass, _bodyEl, _interaction, _iClass, _events, _queue, _scrollable, events, eventSources, height, theme } = state;
-	component_subscribe($$self, _viewComponent, value => $$invalidate(5, $_viewComponent = value));
-	component_subscribe($$self, _viewClass, value => $$invalidate(2, $_viewClass = value));
-	component_subscribe($$self, _bodyEl, value => $$invalidate(33, $_bodyEl = value));
-	component_subscribe($$self, _interaction, value => $$invalidate(38, $_interaction = value));
-	component_subscribe($$self, _iClass, value => $$invalidate(3, $_iClass = value));
-	component_subscribe($$self, _events, value => $$invalidate(35, $_events = value));
-	component_subscribe($$self, _queue, value => $$invalidate(34, $_queue = value));
+	let { _viewComponent, _bodyEl, _interaction, _iClass, _events, _queue, _scrollable, events, eventSources, height, theme } = state;
+	component_subscribe($$self, _viewComponent, value => $$invalidate(4, $_viewComponent = value));
+	component_subscribe($$self, _bodyEl, value => $$invalidate(31, $_bodyEl = value));
+	component_subscribe($$self, _interaction, value => $$invalidate(36, $_interaction = value));
+	component_subscribe($$self, _iClass, value => $$invalidate(2, $_iClass = value));
+	component_subscribe($$self, _events, value => $$invalidate(33, $_events = value));
+	component_subscribe($$self, _queue, value => $$invalidate(32, $_queue = value));
 	component_subscribe($$self, _scrollable, value => $$invalidate(0, $_scrollable = value));
-	component_subscribe($$self, events, value => $$invalidate(36, $events = value));
-	component_subscribe($$self, eventSources, value => $$invalidate(37, $eventSources = value));
-	component_subscribe($$self, height, value => $$invalidate(4, $height = value));
+	component_subscribe($$self, events, value => $$invalidate(34, $events = value));
+	component_subscribe($$self, eventSources, value => $$invalidate(35, $eventSources = value));
+	component_subscribe($$self, height, value => $$invalidate(3, $height = value));
 	component_subscribe($$self, theme, value => $$invalidate(1, $theme = value));
 	function setOption(name, value) {
@@ -2365,12 +2383,12 @@ function instance($$self, $$props, $$invalidate) {
 	}
 	$$self.$$set = $$props => {
-		if ('plugins' in $$props) $$invalidate(19, plugins = $$props.plugins);
-		if ('options' in $$props) $$invalidate(20, options = $$props.options);
+		if ('plugins' in $$props) $$invalidate(17, plugins = $$props.plugins);
+		if ('options' in $$props) $$invalidate(18, options = $$props.options);
 	};
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty[0] & /*options*/ 1048576) {
+		if ($$self.$$.dirty[0] & /*options*/ 262144) {
 			// Reactively update options that did change
 			for (let [name, value] of diff(options)) {
 				setOption(name, value);
@@ -2381,12 +2399,10 @@ function instance($$self, $$props, $$invalidate) {
 	return [
 		$_scrollable,
 		$theme,
-		$_viewClass,
 		$_iClass,
 		$height,
 		$_viewComponent,
 		_viewComponent,
-		_viewClass,
 		_bodyEl,
 		_interaction,
 		_iClass,
@@ -2426,20 +2442,20 @@ class Calendar extends SvelteComponent {
 			create_fragment,
 			safe_not_equal,
 			{
-				plugins: 19,
-				options: 20,
-				setOption: 21,
-				getOption: 22,
-				refetchEvents: 23,
-				getEvents: 24,
-				getEventById: 25,
-				addEvent: 26,
-				updateEvent: 27,
-				removeEventById: 28,
-				getView: 29,
-				unselect: 30,
-				dateFromPoint: 31,
-				destroy: 32
+				plugins: 17,
+				options: 18,
+				setOption: 19,
+				getOption: 20,
+				refetchEvents: 21,
+				getEvents: 22,
+				getEventById: 23,
+				addEvent: 24,
+				updateEvent: 25,
+				removeEventById: 26,
+				getView: 27,
+				unselect: 28,
+				dateFromPoint: 29,
+				destroy: 30
 			},
 			null,
 			[-1, -1]
@@ -2447,52 +2463,52 @@ class Calendar extends SvelteComponent {
 	}
 	get setOption() {
-		return this.$$.ctx[21];
+		return this.$$.ctx[19];
 	}
 	get getOption() {
-		return this.$$.ctx[22];
+		return this.$$.ctx[20];
 	}
 	get refetchEvents() {
-		return this.$$.ctx[23];
+		return this.$$.ctx[21];
 	}
 	get getEvents() {
-		return this.$$.ctx[24];
+		return this.$$.ctx[22];
 	}
 	get getEventById() {
-		return this.$$.ctx[25];
+		return this.$$.ctx[23];
 	}
 	get addEvent() {
-		return this.$$.ctx[26];
+		return this.$$.ctx[24];
 	}
 	get updateEvent() {
-		return this.$$.ctx[27];
+		return this.$$.ctx[25];
 	}
 	get removeEventById() {
-		return this.$$.ctx[28];
+		return this.$$.ctx[26];
 	}
 	get getView() {
-		return this.$$.ctx[29];
+		return this.$$.ctx[27];
 	}
 	get unselect() {
-		return this.$$.ctx[30];
+		return this.$$.ctx[28];
 	}
 	get dateFromPoint() {
-		return this.$$.ctx[31];
+		return this.$$.ctx[29];
 	}
 	get destroy() {
-		return this.$$.ctx[32];
+		return this.$$.ctx[30];
 	}
 }
-export { DAY_IN_SECONDS, addDay, addDuration, ancestor, assign, bgEvent, btnTextDay, btnTextMonth, btnTextWeek, btnTextYear, cloneDate, cloneEvent, copyTime, createDate, createDuration, createElement, createEventChunk, createEventClasses, createEventContent, createEventSources, createEvents, createView, datesEqual, debounce, Calendar as default, derived2, eventIntersects, floor, flushDebounce, getElementWithPayload, getPayload, ghostEvent, hasPayload, hasYScroll, height, helperEvent, intl, intlRange, keyEnter, keys, max, min, nextClosestDay, noTimePart, outsideEvent, pointerEvent, prepareEventChunks, prevClosestDay, previewEvent, rect, repositionEvent, setContent, setMidnight, setPayload, sortEventChunks, subtractDay, subtractDuration, symbol, toEventWithLocalDates, toISOString, toLocalDate, toViewWithLocalDates, writable2 };
+export { DAY_IN_SECONDS, addDay, addDuration, ancestor, assign, bgEvent, btnTextDay, btnTextMonth, btnTextWeek, btnTextYear, cloneDate, cloneEvent, copyTime, createDate, createDuration, createElement, createEventChunk, createEventClasses, createEventContent, createEventSources, createEvents, createView, datesEqual, debounce, Calendar as default, derived2, eventIntersects, floor, flushDebounce, getElementWithPayload, getPayload, ghostEvent, hasPayload, hasYScroll, height, helperEvent, intl, intlRange, keyEnter, keys, max, min, nextClosestDay, noTimePart, outsideEvent, pointerEvent, prepareEventChunks, prevClosestDay, previewEvent, rect, repositionEvent, setContent, setMidnight, setPayload, sortEventChunks, subtractDay, subtractDuration, symbol, themeView, toEventWithLocalDates, toISOString, toLocalDate, toViewWithLocalDates, writable2 };

package/package.json CHANGED Viewed

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

package/src/Buttons.svelte CHANGED Viewed

@@ -30,12 +30,29 @@
         <!-- svelte-ignore a11y-missing-content -->
         <h2 class="{$theme.title}" use:setContent={$_viewTitle}></h2>
     {:else if button == 'prev'}
-        <button class="{$theme.button} ec-{button}" aria-label={$buttonText.prev} on:click={prev}><i class="{$theme.icon} ec-{button}"></i></button>
+        <button
+            class="{$theme.button} ec-{button}"
+            aria-label={$buttonText.prev}
+            title={$buttonText.prev}
+            on:click={prev}
+        ><i class="{$theme.icon} ec-{button}"></i></button>
     {:else if button == 'next'}
-        <button class="{$theme.button} ec-{button}" aria-label={$buttonText.next} on:click={next}><i class="{$theme.icon} ec-{button}"></i></button>
+        <button
+            class="{$theme.button} ec-{button}"
+            aria-label={$buttonText.next}
+            title={$buttonText.next}
+            on:click={next}
+        ><i class="{$theme.icon} ec-{button}"></i></button>
     {:else if button == 'today'}
-        <button class="{$theme.button} ec-{button}" on:click={() => $date = cloneDate(today)} disabled={isToday}>{$buttonText[button]}</button>
+        <button
+            class="{$theme.button} ec-{button}"
+            on:click={() => $date = cloneDate(today)}
+            disabled={isToday}
+        >{$buttonText[button]}</button>
     {:else if button != ''}
-        <button class="{$theme.button}{$view === button ? ' ' + $theme.active : ''} ec-{button}" on:click={() => $view = button}>{$buttonText[button]}</button>
+        <button
+            class="{$theme.button}{$view === button ? ' ' + $theme.active : ''} ec-{button}"
+            on:click={() => $view = button}
+        >{$buttonText[button]}</button>
     {/if}
 {/each}

package/src/Calendar.svelte CHANGED Viewed

@@ -26,7 +26,7 @@
     let state = new State(plugins, options);
     setContext('state', state);
-    let {_viewComponent, _viewClass, _bodyEl, _interaction, _iClass, _events, _queue, _scrollable,
+    let {_viewComponent, _bodyEl, _interaction, _iClass, _events, _queue, _scrollable,
         events, eventSources, height, theme} = state;
     // Reactively update options that did change
@@ -130,8 +130,8 @@
 </script>
 <div
-    class="{$theme.calendar}{$_viewClass ? ' ' + $theme[$_viewClass] : ''}{$_scrollable ? ' ' + $theme.withScroll : ''}{$_iClass ? ' ' + $theme[$_iClass] : ''}"
-    style="height: {$height}"
+    class="{$theme.calendar} {$theme.view}{$_scrollable ? ' ' + $theme.withScroll : ''}{$_iClass ? ' ' + $theme[$_iClass] : ''}"
+    style:height={$height}
 >
     <Toolbar/>
     <svelte:component this={$_viewComponent}/>

package/src/index.scss CHANGED Viewed

@@ -184,7 +184,7 @@
     border-top: none;
   }
-  .ec-month & {
+  .ec-day-grid & {
     flex: 1 1 auto;
   }
 }
@@ -215,12 +215,12 @@
 .ec-content {
   display: flex;
-  .ec-month & {
+  .ec-day-grid & {
     flex-direction: column;
     height: 100%;
   }
-  .ec-month .ec-uniform & {
+  .ec-day-grid .ec-uniform & {
     overflow: hidden;  // remove scrolling due to hidden events
   }
@@ -241,12 +241,12 @@
     border-bottom: none;
   }
-  .ec-month &,
+  .ec-day-grid &,
   .ec-resource & {
     flex: 1 0 auto;
   }
-  .ec-month .ec-uniform & {
+  .ec-day-grid .ec-uniform & {
     flex: 1 1 0%;  // % is required to work properly for both auto and fixed calendar height
     min-height: 0;
   }
@@ -263,16 +263,16 @@
     background-color: #e5f7fe;
   }
-  .ec-month .ec-body & {
+  .ec-day-grid .ec-body & {
     min-height: 5em;
     position: relative;
   }
-  .ec-month .ec-uniform & {
+  .ec-day-grid .ec-uniform & {
     min-height: 0;
   }
-  .ec-month &:first-child {
+  .ec-day-grid &:first-child {
     border-left: none;
   }
@@ -296,7 +296,7 @@
   }
 }
-.ec-month {
+.ec-day-grid {
   .ec-day-head {
     text-align: right;
     padding: 4px 4px 3px;
@@ -328,7 +328,7 @@
 .ec-events {
   margin: 0 6px 0 0;
-  .ec-week &,
+  .ec-time-grid &,
   &.ec-preview {
     position: relative;
   }
@@ -346,12 +346,12 @@
   line-height: 1.5;
   z-index: 1;  // put it above the pointer event (for multi-day events in month view)
-  .ec-month &,
+  .ec-day-grid &,
   .ec-all-day & {
     position: relative;
   }
-  .ec-week .ec-body & {
+  .ec-time-grid .ec-body & {
     position: absolute;
   }
@@ -390,7 +390,7 @@
   flex-direction: column;
   width: 100%;
-  .ec-month &,
+  .ec-day-grid &,
   .ec-all-day & {
     flex-direction: row;
   }
@@ -408,7 +408,7 @@
   margin: 0 0 1px 0;
   flex-shrink: 0;
-  .ec-month & {
+  .ec-day-grid & {
     margin: 0 3px 0 0;
     max-width: 100%;
     text-overflow: ellipsis;
@@ -418,14 +418,14 @@
 .ec-event-title {
   overflow: hidden;
-  .ec-month &,
+  .ec-day-grid &,
   .ec-all-day & {
     min-height: 1.5em;
     white-space: nowrap;
     text-overflow: ellipsis;
   }
-  .ec-week .ec-body & {
+  .ec-time-grid .ec-body & {
     position: sticky;
     top: 0;
   }
@@ -557,7 +557,7 @@
   position: absolute;
   user-select: none;
-  .ec-month &,
+  .ec-day-grid &,
   .ec-all-day & {
     top: 0;
     right: 0;
@@ -567,7 +567,7 @@
     cursor: ew-resize;
   }
-  .ec-week .ec-body & {
+  .ec-time-grid .ec-body & {
     left: 0;
     right: 0;
     bottom: 0;

package/src/lib/a11y.js CHANGED Viewed

@@ -4,27 +4,3 @@ export function keyEnter(fn) {
         return e.key === 'Enter' || e.key === ' ' ? fn.call(this, e) : undefined;
     };
 }
-export function btnTextDay(text) {
-    return btnText(text, 'day');
-}
-export function btnTextWeek(text) {
-    return btnText(text, 'week');
-}
-export function btnTextMonth(text) {
-    return btnText(text, 'month');
-}
-export function btnTextYear(text) {
-    return btnText(text, 'year');
-}
-function btnText(text, period) {
-    return {
-        ...text,
-        next: 'Next ' + period,
-        prev: 'Previous ' + period
-    };
-}

package/src/lib/options.js ADDED Viewed

@@ -0,0 +1,28 @@
+export function btnTextDay(text) {
+    return btnText(text, 'day');
+}
+export function btnTextWeek(text) {
+    return btnText(text, 'week');
+}
+export function btnTextMonth(text) {
+    return btnText(text, 'month');
+}
+export function btnTextYear(text) {
+    return btnText(text, 'year');
+}
+function btnText(text, period) {
+    return {
+        ...text,
+        next: 'Next ' + period,
+        prev: 'Previous ' + period
+    };
+}
+export function themeView(view) {
+    return theme => ({...theme, view});
+}

package/src/lib.js CHANGED Viewed

@@ -4,6 +4,7 @@ export * from './lib/date';
 export * from './lib/debounce';
 export * from './lib/dom';
 export * from './lib/events';
+export * from './lib/options';
 export * from './lib/stores';
 export * from './lib/utils';
 export * from './lib/view';

package/src/storage/options.js CHANGED Viewed

@@ -1,5 +1,4 @@
 import {assign, createDate, createDuration, setMidnight, createEvents, createEventSources} from '../lib.js';
-import {is_function} from 'svelte/internal';
 export function createOptions(plugins) {
     let options = {
@@ -92,7 +91,7 @@ export function createOptions(plugins) {
             time: 'ec-time',
             title: 'ec-title',
             toolbar: 'ec-toolbar',
-            week: 'ec-week',
+            view: '',
             withScroll: 'ec-with-scroll'
         },
         titleFormat: {
@@ -112,9 +111,8 @@ export function createOptions(plugins) {
     return options;
 }
-export function createParsers(options, plugins) {
+export function createParsers(plugins) {
     let parsers = {
-        buttonText: input => is_function(input) ? input(options.buttonText) : input,
         date: date => setMidnight(createDate(date)),
         duration: createDuration,
         events: createEvents,
@@ -124,12 +122,11 @@ export function createParsers(options, plugins) {
         scrollTime: createDuration,
         slotDuration: createDuration,
         slotMaxTime: createDuration,
-        slotMinTime: createDuration,
-        theme: input => is_function(input) ? input(options.theme) : input
+        slotMinTime: createDuration
     };
     for (let plugin of plugins) {
-        plugin.createParsers?.(parsers, options);
+        plugin.createParsers?.(parsers);
     }
     return parsers;

package/src/storage/state.js CHANGED Viewed

@@ -4,23 +4,23 @@ import {createOptions, createParsers} from './options';
 import {
     activeRange,
     currentRange,
+    dayGrid,
     events,
-    monthMode,
     now,
     today,
     viewDates,
     viewTitle,
     view as view2  // hack to avoid a runtime error in SvelteKit dev mode (ReferenceError: view is not defined)
 } from './stores';
-import {assign, keys, writable2, intl, intlRange} from '../lib.js';
+import {keys, writable2, intl, intlRange} from '../lib.js';
 export default class {
     constructor(plugins, input) {
         plugins = plugins || [];
         // Create options
-        let options= createOptions(plugins);
-        let parsers = createParsers(options, plugins);
+        let options = createOptions(plugins);
+        let parsers = createParsers(plugins);
         // Parse options
         options = parseOpts(options, parsers);
@@ -34,7 +34,7 @@ export default class {
         // Private stores
         this._queue = writable(new Map());  // debounce queue
         this._auxiliary = writable([]);  // auxiliary components
-        this._monthMode = monthMode(this);
+        this._dayGrid = dayGrid(this);
         this._currentRange = currentRange(this);
         this._activeRange = activeRange(this);
         this._fetchedRange = writable({start: undefined, end: undefined});
@@ -50,7 +50,6 @@ export default class {
         this._viewTitle = viewTitle(this);
         this._viewDates = viewDates(this);
         this._view = view2(this);
-        this._viewClass = writable(undefined);
         this._viewComponent = writable(undefined);
         // Resources
         this._resBgColor = writable(noop);
@@ -74,7 +73,7 @@ export default class {
         // Set options for each view
         let views = new Set([...keys(options.views), ...keys(input.views ?? {})]);
         for (let view of views) {
-            let opts = assign({}, options, options.views[view] ?? {}, input, input.views?.[view] ?? {});
+            let opts = mergeOpts(options, options.views[view] ?? {}, input, input.views?.[view] ?? {});
             // Change view component when view changes
             this.view.subscribe(newView => {
                 if (newView === view) {
@@ -125,3 +124,14 @@ function parseOpts(opts, parsers) {
     }
     return result;
 }
+function mergeOpts(...args) {
+    let mergable = ['buttonText', 'theme'];
+    let result = {};
+    for (let opts of args) {
+        for (let key of keys(opts)) {
+            result[key] = mergable.includes(key) && is_function(opts[key]) ? opts[key](result[key]) : opts[key];
+        }
+    }
+    return result;
+}

package/src/storage/stores.js CHANGED Viewed

@@ -19,18 +19,18 @@ import {
     debounce
 } from '../lib.js';
-export function monthMode(state) {
+export function dayGrid(state) {
     return derived(state.view, $view => $view?.startsWith('dayGrid'));
 }
 export function activeRange(state) {
     return derived(
-        [state._currentRange, state.firstDay, state.slotMaxTime, state._monthMode],
-        ([$_currentRange, $firstDay, $slotMaxTime, $_monthMode]) => {
+        [state._currentRange, state.firstDay, state.slotMaxTime, state._dayGrid],
+        ([$_currentRange, $firstDay, $slotMaxTime, $_dayGrid]) => {
             let start = cloneDate($_currentRange.start);
             let end = cloneDate($_currentRange.end);
-            if ($_monthMode) {
+            if ($_dayGrid) {
                 // First day of week
                 prevClosestDay(start, $firstDay);
                 nextClosestDay(end, $firstDay);
@@ -49,10 +49,10 @@ export function activeRange(state) {
 export function currentRange(state) {
     return derived(
-        [state.date, state.duration, state.firstDay, state._monthMode],
-        ([$date, $duration, $firstDay, $_monthMode]) => {
+        [state.date, state.duration, state.firstDay, state._dayGrid],
+        ([$date, $duration, $firstDay, $_dayGrid]) => {
             let start = cloneDate($date), end;
-            if ($_monthMode) {
+            if ($_dayGrid) {
                 start.setUTCDate(1);
             } else if ($duration.inWeeks) {
                 // First day of week
@@ -93,9 +93,9 @@ export function viewDates(state) {
 export function viewTitle(state) {
     return derived(
-        [state.date, state._activeRange, state._intlTitle, state._monthMode],
-        ([$date, $_activeRange, $_intlTitle, $_monthMode]) => {
-            return $_monthMode
+        [state.date, state._activeRange, state._intlTitle, state._dayGrid],
+        ([$date, $_activeRange, $_intlTitle, $_dayGrid]) => {
+            return $_dayGrid
                 ? $_intlTitle.formatRange($date, $date)
                 : $_intlTitle.formatRange($_activeRange.start, subtractDay(cloneDate($_activeRange.end)));
         }