npm - @event-calendar/core - Versions diffs - 3.0.2 → 3.1.0 - Mend

@event-calendar/core 3.0.2 → 3.1.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 (14) hide show

package/README.md CHANGED Viewed

@@ -4,7 +4,7 @@ See [demo](https://vkurko.github.io/calendar/) and [changelog](CHANGELOG.md).
 Full-sized drag & drop JavaScript event calendar with resource & timeline views:
-* Lightweight (34kb [br](https://en.wikipedia.org/wiki/Brotli) compressed)
+* Lightweight (39kb [br](https://en.wikipedia.org/wiki/Brotli) compressed)
 * Zero-dependency (pre-built bundle)
 * Used on over 70,000 websites with [Bookly](https://wordpress.org/plugins/bookly-responsive-appointment-booking-tool/)
@@ -115,10 +115,10 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
   - [setOption](#setoption-name-value-)
   </td><td>
-  - [getEvents](#getevents)
+  - [addEvent](#addevent-event-)
   - [getEventById](#geteventbyid-id-)
+  - [getEvents](#getevents)
   - [removeEventById](#removeeventbyid-id-)
-  - [addEvent](#addevent-event-)
   - [updateEvent](#updateevent-event-)
   - [refetchEvents](#refetchevents)
   </td><td>
@@ -126,6 +126,8 @@ Inspired by [FullCalendar](https://fullcalendar.io/), implements similar options
   - [dateFromPoint](#datefrompoint-x-y-)
   - [destroy](#destroy)
   - [getView](#getview)
+  - [next](#next)
+  - [prev](#prev)
   - [unselect](#unselect-1)
   </td></tr>
   </table>
@@ -202,8 +204,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@3.0.2/event-calendar.min.css">
-<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@3.0.2/event-calendar.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@3.1.0/event-calendar.min.css">
+<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@3.1.0/event-calendar.min.js"></script>
 ```
 <details>
@@ -292,21 +294,21 @@ 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', resourceTimelineDay: 'timeline', resourceTimelineWeek: 'timeline', resourceTimeGridDay: 'resources', resourceTimeGridWeek: 'resources', timeGridDay: 'day', timeGridWeek: 'week', today: 'today'}`
+- 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'}`
 > Views override the default value as follows:
 > - 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'})`
-> - resourceTimelineDay `text => ({...text, next: 'Next day', prev: 'Previous day'})`
-> - resourceTimelineWeek `text => ({...text, next: 'Next week', prev: 'Previous week'})`
 > - resourceTimeGridDay `text => ({...text, next: 'Next day', prev: 'Previous day'})`
 > - resourceTimeGridWeek `text => ({...text, next: 'Next week', prev: 'Previous week'})`
+> - 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'})`
 > - 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.
 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:
@@ -538,8 +540,6 @@ function (date) {
 - Default `{dateStyle: 'long'}`
 > Views override the default value as follows:
 > - dayGridMonth `{weekday: 'long'}`
-> - resourceTimelineDay `{dateStyle: 'long', timeStyle: 'short'}`
-> - resourceTimelineWeek `{dateStyle: 'long', timeStyle: 'short'}`
 Defines the text that is used inside the `aria-label` attribute in calendar column headings.
@@ -565,6 +565,7 @@ function (date) {
 - Default `{weekday: 'short', month: 'numeric', day: 'numeric'}`
 > Views override the default value as follows:
 > - dayGridMonth `{weekday: 'short'}`
+> - resourceTimelineMonth `{weekday: 'short', day: 'numeric'}`
 > - timeGridDay `{weekday: 'long'}`
 Defines the text that is displayed on the calendar’s column headings.
@@ -614,6 +615,9 @@ function (date) {
 - Default `true`
 > Views override the default value as follows:
 > - dayGridMonth `false`
+> - resourceTimelineDay `false`
+> - resourceTimelineMonth `false`
+> - resourceTimelineWeek `false`
 Determines whether to display an event’s end time.
@@ -632,8 +636,9 @@ Determines whether the calendar should automatically scroll during the event dra
 > - listDay `{days: 1}`
 > - listMonth `{months: 1}`
 > - listYear `{years: 1}`
-> - resourceTimelineDay `{days: 1}`
 > - resourceTimeGridDay `{days: 1}`
+> - resourceTimelineDay `{days: 1}`
+> - resourceTimelineMonth `{months: 1}`
 > - timeGridDay `{days: 1}`
 Sets the duration of a view.
@@ -1691,7 +1696,7 @@ function (isLoading) { }
 - Type `string`
 - Default `undefined`
-Defines the `locales` parameter for the native JavaScript [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat) object that the Event Calendar uses to format date and time strings in options such as [dayHeaderFormat](#dayheaderformat), [eventTimeFormat](#eventtimeformat), etc.
+Defines the `locales` parameter for the native JavaScript [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#locales) object that the Event Calendar uses to format date and time strings in options such as [dayHeaderFormat](#dayheaderformat), [eventTimeFormat](#eventtimeformat), etc.
 ### longPressDelay
 - Type `integer`
@@ -1990,6 +1995,8 @@ This should be a value that can be parsed into a [Duration](#duration-object) ob
 ### slotDuration
 - Type `string`, `integer` or `object`
 - Default `'00:30:00'`
+> Views override the default value as follows:
+> - resourceTimelineMonth `{days: 1}`
 Defines the frequency for displaying time slots.
@@ -2077,6 +2084,9 @@ Defines the time slot width in pixels in `ResourceTimeline` views. When changing
 > - 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'})`
+> - resourceTimelineDay `theme => ({...theme, view: 'ec-timeline ec-resource-day-view'})`
+> - resourceTimelineMonth `theme => ({...theme, view: 'ec-timeline ec-resource-month-view'})`
+> - resourceTimelineWeek `theme => ({...theme, view: 'ec-timeline ec-resource-week-view'})`
 > - timeGridDay `theme => ({...theme, view: 'ec-time-grid ec-day-view'})`
 > - timeGridWeek `theme => ({...theme, view: 'ec-time-grid ec-week-view'})`
@@ -2194,7 +2204,7 @@ Clicking on elements that match this CSS selector will prevent the current selec
 - Type `string`
 - Default `'resourceTimeGridWeek'`
-The view that is displayed in the calendar. Can be `'dayGridMonth'`, `'listDay'`, `'listWeek'`, `'listMonth'`, `'listYear'`, `'resourceTimelineDay'`, `'resourceTimelineWeek'`, `'resourceTimeGridDay'`, `'resourceTimeGridWeek'`, `'timeGridDay'` or `'timeGridWeek'`.
+The view that is displayed in the calendar. Can be `'dayGridMonth'`, `'listDay'`, `'listWeek'`, `'listMonth'`, `'listYear'`, `'resourceTimeGridDay'`, `'resourceTimeGridWeek'`, `'resourceTimelineDay'`, `'resourceTimelineWeek'`, `'resourceTimelineMonth'`, `'timeGridDay'` or `'timeGridWeek'`.
 ### viewDidMount
 - Type `function`
@@ -2277,10 +2287,13 @@ This method allows you to set new value to any calendar option.
 // E.g. Change the current date
 ec.setOption('date', new Date());
 ```
-### getEvents()
-- Return value `Event[]` Array of [Event](#event-object) objects
-Returns an array of events that the calendar has in memory.
+### addEvent( event )
+- Parameters
+  - `event` `object` A plain object that will be parsed into an [Event](#event-object) object
+- Return value [Event](#event-object) object or `null`
+Adds a new event to the calendar.
 ### getEventById( id )
 - Parameters
@@ -2289,6 +2302,11 @@ Returns an array of events that the calendar has in memory.
 Returns a single event with the matching `id`.
+### getEvents()
+- Return value `Event[]` Array of [Event](#event-object) objects
+Returns an array of events that the calendar has in memory.
 ### removeEventById( id )
 - Parameters
   - `id` `string|integer` The ID of the event
@@ -2296,13 +2314,6 @@ Returns a single event with the matching `id`.
 Removes a single event with the matching `id`.
-### addEvent( event )
-- Parameters
-  - `event` `object` A plain object that will be parsed into an [Event](#event-object) object
-- Return value [Event](#event-object) object or `null`
-Adds a new event to the calendar.
 ### updateEvent( event )
 - Parameters
   - `event` `object` A plain object or [Event](#event-object) object
@@ -2369,6 +2380,16 @@ Destroys the calendar, removing all DOM elements, event handlers, and internal d
 Returns the [View](#view-object) object for the current view.
+### next()
+- Return value `EventCalendar` The calendar instance for chaining
+Moves the current calendar date forward by 1 day/week/month (depending on the current view).
+### prev()
+- Return value `EventCalendar` The calendar instance for chaining
+Moves the current calendar date backward by 1 day/week/month (depending on the current view).
 ### unselect()
 - Return value `EventCalendar` The calendar instance for chaining

package/index.css CHANGED Viewed

@@ -112,21 +112,23 @@
 }
 .ec-timeline .ec-times {
   display: flex;
-  border-style: solid none none;
+  border-top: 1px solid var(--ec-border-color);
 }
 .ec-timeline .ec-time {
   border-left: 1px solid var(--ec-border-color);
   box-sizing: border-box;
+  font-size: 0.95em;
   min-height: 24px;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 .ec-timeline .ec-time, .ec-timeline .ec-line {
-  width: 52px;
+  width: 72px;
 }
 .ec-timeline .ec-events {
   position: relative;
   height: 100%;
+  margin: 0;
 }
 .ec-timeline .ec-event {
   position: absolute;
@@ -356,7 +358,6 @@
 .ec-body,
 .ec-days,
 .ec-day,
-.ec-times,
 .ec-day-head {
   border: 1px solid var(--ec-border-color);
 }

package/index.js CHANGED Viewed

@@ -179,6 +179,27 @@ function toSeconds(duration, defaultValue = 0) {
     return duration?.seconds ?? defaultValue;
 }
+/**
+ * Move the date forward (when pressing the next button)
+ */
+function nextDate(date, duration) {
+    addDuration(date, duration);
+    return date;
+}
+/**
+ * Move the date backward (when pressing the prev button)
+ */
+function prevDate(date, duration, hiddenDays) {
+    subtractDuration(date, duration);
+    if (hiddenDays.length && hiddenDays.length < 7) {
+        while (hiddenDays.includes(date.getUTCDay())) {
+            subtractDay(date);
+        }
+    }
+    return date;
+}
 /**
  * Private functions
  */
@@ -732,7 +753,7 @@ function viewResources(state) {
     );
 }
-function createTimes(date, $slotDuration, $_slotTimeLimits, $_intlSlotLabel, $_intlDayHeaderAL) {
+function createTimes(date, $slotDuration, $_slotTimeLimits, $_intlSlotLabel) {
     date = cloneDate(date);
     let compact = $slotDuration.seconds < 3600;
     let times = [];
@@ -744,8 +765,7 @@ function createTimes(date, $slotDuration, $_slotTimeLimits, $_intlSlotLabel, $_i
         times.push([
             toISOString(date),
             $_intlSlotLabel.format(date),
-            times.length && (i || !compact),
-            $_intlDayHeaderAL && $_intlDayHeaderAL.format(date)
+            times.length && (i || !compact)
         ]);
         addDuration(date, $slotDuration);
         i = 1 - i;
@@ -811,7 +831,7 @@ function createOptions(plugins) {
             day: 'numeric'
         },
         dayHeaderAriaLabelFormat: {
-            dateStyle: 'long'
+            dateStyle: 'full'
         },
         displayEventEnd: true,
         duration: {weeks: 1},
@@ -860,7 +880,7 @@ function createOptions(plugins) {
         },
         slotMaxTime: '24:00:00',
         slotMinTime: '00:00:00',
-        slotWidth: 52,
+        slotWidth: 72,
         theme: {
             allDay: 'ec-all-day',
             active: 'ec-active',
@@ -956,6 +976,10 @@ function dayGrid(state) {
     return derived(state.view, $view => $view?.startsWith('dayGrid'));
 }
+function monthView(state) {
+    return derived(state.view, $view => $view?.includes('Month'));
+}
 function activeRange(state) {
     return derived(
         [state._currentRange, state.firstDay, state.slotMaxTime, state._dayGrid],
@@ -982,10 +1006,10 @@ function activeRange(state) {
 function currentRange(state) {
     return derived(
-        [state.date, state.duration, state.firstDay, state._dayGrid],
-        ([$date, $duration, $firstDay, $_dayGrid]) => {
+        [state.date, state.duration, state.firstDay, state._monthView],
+        ([$date, $duration, $firstDay, $_monthView]) => {
             let start = cloneDate($date), end;
-            if ($_dayGrid) {
+            if ($_monthView) {
                 start.setUTCDate(1);
             } else if ($duration.inWeeks) {
                 // First day of week
@@ -1164,6 +1188,7 @@ class State {
         this._tasks = new Map();  // timeout IDs for tasks
         this._auxiliary = writable([]);  // auxiliary components
         this._dayGrid = dayGrid(this);
+        this._monthView = monthView(this);
         this._currentRange = currentRange(this);
         this._activeRange = activeRange(this);
         this._fetchedRange = writable({start: undefined, end: undefined});
@@ -1306,7 +1331,7 @@ function validKey(key, state) {
     return state.hasOwnProperty(key) && key[0] !== '_';
 }
-/* packages/core/src/Buttons.svelte generated by Svelte v4.2.16 */
+/* packages/core/src/Buttons.svelte generated by Svelte v4.2.18 */
 function get_each_context$2(ctx, list, i) {
 	const child_ctx = ctx.slice();
@@ -1314,7 +1339,7 @@ function get_each_context$2(ctx, list, i) {
 	return child_ctx;
 }
-// (57:27)
+// (51:27)
 function create_if_block_5(ctx) {
 	let button_1;
 	let t_value = /*$buttonText*/ ctx[5][/*button*/ ctx[25]] + "";
@@ -1366,7 +1391,7 @@ function create_if_block_5(ctx) {
 	};
 }
-// (52:37)
+// (46:37)
 function create_if_block_4(ctx) {
 	let button_1;
 	let t_value = /*$customButtons*/ ctx[6][/*button*/ ctx[25]].text + "";
@@ -1412,7 +1437,7 @@ function create_if_block_4(ctx) {
 	};
 }
-// (46:32)
+// (40:32)
 function create_if_block_3(ctx) {
 	let button_1;
 	let t_value = /*$buttonText*/ ctx[5][/*button*/ ctx[25]] + "";
@@ -1459,7 +1484,7 @@ function create_if_block_3(ctx) {
 	};
 }
-// (39:31)
+// (33:31)
 function create_if_block_2(ctx) {
 	let button_1;
 	let i;
@@ -1516,7 +1541,7 @@ function create_if_block_2(ctx) {
 	};
 }
-// (32:31)
+// (26:31)
 function create_if_block_1(ctx) {
 	let button_1;
 	let i;
@@ -1573,7 +1598,7 @@ function create_if_block_1(ctx) {
 	};
 }
-// (29:4) {#if button == 'title'}
+// (23:4) {#if button == 'title'}
 function create_if_block$1(ctx) {
 	let h2;
 	let h2_class_value;
@@ -1612,7 +1637,7 @@ function create_if_block$1(ctx) {
 	};
 }
-// (28:0) {#each buttons as button}
+// (22:0) {#each buttons as button}
 function create_each_block$2(ctx) {
 	let if_block_anchor;
@@ -1748,19 +1773,11 @@ function instance$3($$self, $$props, $$invalidate) {
 	let today = setMidnight(createDate()), isToday;
 	function prev() {
-		let d = subtractDuration($date, $duration);
-		if ($hiddenDays.length && $hiddenDays.length < 7) {
-			while ($hiddenDays.includes(d.getUTCDay())) {
-				subtractDay(d);
-			}
-		}
-		set_store_value(date, $date = d, $date);
+		set_store_value(date, $date = prevDate($date, $duration, $hiddenDays), $date);
 	}
 	function next() {
-		set_store_value(date, $date = addDuration($date, $duration), $date);
+		set_store_value(date, $date = nextDate($date, $duration), $date);
 	}
 	const click_handler = () => set_store_value(date, $date = cloneDate(today), $date);
@@ -1810,7 +1827,7 @@ class Buttons extends SvelteComponent {
 	}
 }
-/* packages/core/src/Toolbar.svelte generated by Svelte v4.2.16 */
+/* packages/core/src/Toolbar.svelte generated by Svelte v4.2.18 */
 function get_each_context$1(ctx, list, i) {
 	const child_ctx = ctx.slice();
@@ -1824,7 +1841,7 @@ function get_each_context_1(ctx, list, i) {
 	return child_ctx;
 }
-// (28:16) {:else}
+// (29:16) {:else}
 function create_else_block(ctx) {
 	let buttons_1;
 	let current;
@@ -1858,7 +1875,7 @@ function create_else_block(ctx) {
 	};
 }
-// (24:16) {#if buttons.length > 1}
+// (25:16) {#if buttons.length > 1}
 function create_if_block(ctx) {
 	let div;
 	let buttons_1;
@@ -1905,7 +1922,7 @@ function create_if_block(ctx) {
 	};
 }
-// (23:12) {#each sections[key] as buttons}
+// (24:12) {#each sections[key] as buttons}
 function create_each_block_1(ctx) {
 	let current_block_type_index;
 	let if_block;
@@ -1978,10 +1995,11 @@ function create_each_block_1(ctx) {
 	};
 }
-// (21:4) {#each Object.keys(sections) as key}
+// (22:4) {#each keys(sections) as key}
 function create_each_block$1(ctx) {
 	let div;
 	let t;
+	let div_class_value;
 	let current;
 	let each_value_1 = ensure_array_like(/*sections*/ ctx[0][/*key*/ ctx[5]]);
 	let each_blocks = [];
@@ -2003,6 +2021,7 @@ function create_each_block$1(ctx) {
 			}
 			t = space();
+			attr(div, "class", div_class_value = "ec-" + /*key*/ ctx[5]);
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
@@ -2017,7 +2036,7 @@ function create_each_block$1(ctx) {
 			current = true;
 		},
 		p(ctx, dirty) {
-			if (dirty & /*$theme, sections, Object*/ 3) {
+			if (dirty & /*$theme, sections*/ 3) {
 				each_value_1 = ensure_array_like(/*sections*/ ctx[0][/*key*/ ctx[5]]);
 				let i;
@@ -2043,6 +2062,10 @@ function create_each_block$1(ctx) {
 				check_outros();
 			}
+			if (!current || dirty & /*sections*/ 1 && div_class_value !== (div_class_value = "ec-" + /*key*/ ctx[5])) {
+				attr(div, "class", div_class_value);
+			}
 		},
 		i(local) {
 			if (current) return;
@@ -2076,7 +2099,7 @@ function create_fragment$2(ctx) {
 	let nav;
 	let nav_class_value;
 	let current;
-	let each_value = ensure_array_like(Object.keys(/*sections*/ ctx[0]));
+	let each_value = ensure_array_like(keys(/*sections*/ ctx[0]));
 	let each_blocks = [];
 	for (let i = 0; i < each_value.length; i += 1) {
@@ -2109,8 +2132,8 @@ function create_fragment$2(ctx) {
 			current = true;
 		},
 		p(ctx, [dirty]) {
-			if (dirty & /*sections, Object, $theme*/ 3) {
-				each_value = ensure_array_like(Object.keys(/*sections*/ ctx[0]));
+			if (dirty & /*sections, $theme*/ 3) {
+				each_value = ensure_array_like(keys(/*sections*/ ctx[0]));
 				let i;
 				for (i = 0; i < each_value.length; i += 1) {
@@ -2179,7 +2202,7 @@ function instance$2($$self, $$props, $$invalidate) {
 	$$self.$$.update = () => {
 		if ($$self.$$.dirty & /*sections, $headerToolbar*/ 17) {
 			{
-				for (let key of Object.keys(sections)) {
+				for (let key of keys(sections)) {
 					$$invalidate(0, sections[key] = $headerToolbar[key].split(' ').map(group => group.split(',')), sections);
 				}
 			}
@@ -2196,7 +2219,7 @@ class Toolbar extends SvelteComponent {
 	}
 }
-/* packages/core/src/Auxiliary.svelte generated by Svelte v4.2.16 */
+/* packages/core/src/Auxiliary.svelte generated by Svelte v4.2.18 */
 function get_each_context(ctx, list, i) {
 	const child_ctx = ctx.slice();
@@ -2404,7 +2427,7 @@ class Auxiliary extends SvelteComponent {
 	}
 }
-/* packages/core/src/Calendar.svelte generated by Svelte v4.2.16 */
+/* packages/core/src/Calendar.svelte generated by Svelte v4.2.18 */
 function create_fragment(ctx) {
 	let div;
@@ -2459,7 +2482,7 @@ function create_fragment(ctx) {
 			current = true;
 			if (!mounted) {
-				dispose = listen(window, "resize", /*recheckScrollable*/ ctx[17]);
+				dispose = listen(window, "resize", /*recheckScrollable*/ ctx[20]);
 				mounted = true;
 			}
 		},
@@ -2535,6 +2558,9 @@ function instance($$self, $$props, $$invalidate) {
 	let $_scrollable;
 	let $_queue2;
 	let $_queue;
+	let $hiddenDays;
+	let $duration;
+	let $date;
 	let $_interaction;
 	let $_events;
 	let $theme;
@@ -2547,15 +2573,18 @@ function instance($$self, $$props, $$invalidate) {
 	let component = get_current_component();
 	let state = new State(plugins, options);
 	setContext('state', state);
-	let { _viewComponent, _bodyEl, _interaction, _iClass, _events, _queue, _queue2, _tasks, _scrollable, height, theme, view } = state;
+	let { _viewComponent, _bodyEl, _interaction, _iClass, _events, _queue, _queue2, _tasks, _scrollable, date, duration, hiddenDays, height, theme, view } = state;
 	component_subscribe($$self, _viewComponent, value => $$invalidate(5, $_viewComponent = value));
-	component_subscribe($$self, _bodyEl, value => $$invalidate(32, $_bodyEl = value));
-	component_subscribe($$self, _interaction, value => $$invalidate(35, $_interaction = value));
+	component_subscribe($$self, _bodyEl, value => $$invalidate(37, $_bodyEl = value));
+	component_subscribe($$self, _interaction, value => $$invalidate(43, $_interaction = value));
 	component_subscribe($$self, _iClass, value => $$invalidate(2, $_iClass = value));
-	component_subscribe($$self, _events, value => $$invalidate(36, $_events = value));
-	component_subscribe($$self, _queue, value => $$invalidate(34, $_queue = value));
-	component_subscribe($$self, _queue2, value => $$invalidate(33, $_queue2 = value));
+	component_subscribe($$self, _events, value => $$invalidate(44, $_events = value));
+	component_subscribe($$self, _queue, value => $$invalidate(39, $_queue = value));
+	component_subscribe($$self, _queue2, value => $$invalidate(38, $_queue2 = value));
 	component_subscribe($$self, _scrollable, value => $$invalidate(0, $_scrollable = value));
+	component_subscribe($$self, date, value => $$invalidate(42, $date = value));
+	component_subscribe($$self, duration, value => $$invalidate(41, $duration = value));
+	component_subscribe($$self, hiddenDays, value => $$invalidate(40, $hiddenDays = value));
 	component_subscribe($$self, height, value => $$invalidate(3, $height = value));
 	component_subscribe($$self, theme, value => $$invalidate(1, $theme = value));
 	component_subscribe($$self, view, value => $$invalidate(4, $view = value));
@@ -2626,10 +2655,7 @@ function instance($$self, $$props, $$invalidate) {
 	}
 	function unselect() {
-		if ($_interaction.action) {
-			$_interaction.action.unselect();
-		}
+		$_interaction.action?.unselect();
 		return this;
 	}
@@ -2642,6 +2668,16 @@ function instance($$self, $$props, $$invalidate) {
 		destroy_component(component, true);
 	}
+	function next() {
+		set_store_value(date, $date = nextDate($date, $duration), $date);
+		return this;
+	}
+	function prev() {
+		set_store_value(date, $date = prevDate($date, $duration, $hiddenDays), $date);
+		return this;
+	}
 	beforeUpdate(() => {
 		flushDebounce($_queue);
 	});
@@ -2658,12 +2694,12 @@ function instance($$self, $$props, $$invalidate) {
 	}
 	$$self.$$set = $$props => {
-		if ('plugins' in $$props) $$invalidate(18, plugins = $$props.plugins);
-		if ('options' in $$props) $$invalidate(19, options = $$props.options);
+		if ('plugins' in $$props) $$invalidate(21, plugins = $$props.plugins);
+		if ('options' in $$props) $$invalidate(22, options = $$props.options);
 	};
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty[0] & /*options*/ 524288) {
+		if ($$self.$$.dirty[0] & /*options*/ 4194304) {
 			for (let [name, value] of diff(options, prevOptions)) {
 				setOption(name, value);
 			}
@@ -2685,6 +2721,9 @@ function instance($$self, $$props, $$invalidate) {
 		_queue,
 		_queue2,
 		_scrollable,
+		date,
+		duration,
+		hiddenDays,
 		height,
 		theme,
 		view,
@@ -2702,7 +2741,9 @@ function instance($$self, $$props, $$invalidate) {
 		getView,
 		unselect,
 		dateFromPoint,
-		destroy
+		destroy,
+		next,
+		prev
 	];
 }
@@ -2717,20 +2758,22 @@ class Calendar extends SvelteComponent {
 			create_fragment,
 			safe_not_equal,
 			{
-				plugins: 18,
-				options: 19,
-				setOption: 20,
-				getOption: 21,
-				refetchEvents: 22,
-				getEvents: 23,
-				getEventById: 24,
-				addEvent: 25,
-				updateEvent: 26,
-				removeEventById: 27,
-				getView: 28,
-				unselect: 29,
-				dateFromPoint: 30,
-				destroy: 31
+				plugins: 21,
+				options: 22,
+				setOption: 23,
+				getOption: 24,
+				refetchEvents: 25,
+				getEvents: 26,
+				getEventById: 27,
+				addEvent: 28,
+				updateEvent: 29,
+				removeEventById: 30,
+				getView: 31,
+				unselect: 32,
+				dateFromPoint: 33,
+				destroy: 34,
+				next: 35,
+				prev: 36
 			},
 			null,
 			[-1, -1]
@@ -2738,52 +2781,60 @@ class Calendar extends SvelteComponent {
 	}
 	get setOption() {
-		return this.$$.ctx[20];
+		return this.$$.ctx[23];
 	}
 	get getOption() {
-		return this.$$.ctx[21];
+		return this.$$.ctx[24];
 	}
 	get refetchEvents() {
-		return this.$$.ctx[22];
+		return this.$$.ctx[25];
 	}
 	get getEvents() {
-		return this.$$.ctx[23];
+		return this.$$.ctx[26];
 	}
 	get getEventById() {
-		return this.$$.ctx[24];
+		return this.$$.ctx[27];
 	}
 	get addEvent() {
-		return this.$$.ctx[25];
+		return this.$$.ctx[28];
 	}
 	get updateEvent() {
-		return this.$$.ctx[26];
+		return this.$$.ctx[29];
 	}
 	get removeEventById() {
-		return this.$$.ctx[27];
+		return this.$$.ctx[30];
 	}
 	get getView() {
-		return this.$$.ctx[28];
+		return this.$$.ctx[31];
 	}
 	get unselect() {
-		return this.$$.ctx[29];
+		return this.$$.ctx[32];
 	}
 	get dateFromPoint() {
-		return this.$$.ctx[30];
+		return this.$$.ctx[33];
 	}
 	get destroy() {
-		return this.$$.ctx[31];
+		return this.$$.ctx[34];
+	}
+	get next() {
+		return this.$$.ctx[35];
+	}
+	get prev() {
+		return this.$$.ctx[36];
 	}
 }
-export { DAY_IN_SECONDS, addDay, addDuration, ancestor, assign, bgEvent, btnTextDay, btnTextMonth, btnTextWeek, btnTextYear, ceil, cloneDate, cloneEvent, copyTime, createDate, createDuration, createElement, createEventChunk, createEventClasses, createEventContent, createEventSources, createEvents, createResources, createSlotTimeLimits, createTimes, createView, datesEqual, debounce, Calendar as default, eventIntersects, floor, flushDebounce, getElementWithPayload, getPayload, ghostEvent, hasPayload, hasYScroll, height, helperEvent, intl, intlRange, keyEnter, keys, listView, max, min, nextClosestDay, noTimePart, outsideEvent, pointerEvent, prepareEventChunks, prevClosestDay, previewEvent, rect, repositionEvent, runReposition, setContent, setMidnight, setPayload, sortEventChunks, subtractDay, subtractDuration, symbol, task, themeView, timelineView, toEventWithLocalDates, toISOString, toLocalDate, toSeconds, toViewWithLocalDates, viewResources };
+export { DAY_IN_SECONDS, addDay, addDuration, ancestor, assign, bgEvent, btnTextDay, btnTextMonth, btnTextWeek, btnTextYear, ceil, cloneDate, cloneEvent, copyTime, createDate, createDuration, createElement, createEventChunk, createEventClasses, createEventContent, createEventSources, createEvents, createResources, createSlotTimeLimits, createTimes, createView, datesEqual, debounce, Calendar as default, eventIntersects, floor, flushDebounce, getElementWithPayload, getPayload, ghostEvent, hasPayload, hasYScroll, height, helperEvent, intl, intlRange, keyEnter, keys, listView, max, min, nextClosestDay, nextDate, noTimePart, outsideEvent, pointerEvent, prepareEventChunks, prevClosestDay, prevDate, previewEvent, rect, repositionEvent, runReposition, setContent, setMidnight, setPayload, sortEventChunks, subtractDay, subtractDuration, symbol, task, themeView, timelineView, toEventWithLocalDates, toISOString, toLocalDate, toSeconds, toViewWithLocalDates, viewResources };

package/package.json CHANGED Viewed

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

package/src/Buttons.svelte CHANGED Viewed

@@ -1,6 +1,6 @@
 <script>
     import {getContext} from 'svelte';
-    import {createDate, cloneDate, subtractDay, addDuration, setContent, subtractDuration, setMidnight} from './lib.js';
+    import {createDate, cloneDate, setContent, setMidnight, nextDate, prevDate} from './lib.js';
     export let buttons;
@@ -11,17 +11,11 @@
     $: isToday = today >= $_currentRange.start && today < $_currentRange.end || null;
     function prev() {
-        let d = subtractDuration($date, $duration);
-        if ($hiddenDays.length && $hiddenDays.length < 7) {
-            while ($hiddenDays.includes(d.getUTCDay())) {
-                subtractDay(d);
-            }
-        }
-        $date = d;
+        $date = prevDate($date, $duration, $hiddenDays);
     }
     function next() {
-        $date = addDuration($date, $duration);
+        $date = nextDate($date, $duration);
     }
 </script>

package/src/Calendar.svelte CHANGED Viewed

@@ -18,7 +18,7 @@
         flushDebounce,
         hasYScroll,
         listView,
-        task
+        task, prevDate, nextDate
     } from './lib.js';
     export let plugins = [];
@@ -29,7 +29,8 @@
     let state = new State(plugins, options);
     setContext('state', state);
-    let {_viewComponent, _bodyEl, _interaction, _iClass, _events, _queue, _queue2, _tasks, _scrollable, height, theme, view} = state;
+    let {_viewComponent, _bodyEl, _interaction, _iClass, _events, _queue, _queue2, _tasks, _scrollable,
+        date, duration, hiddenDays, height, theme, view} = state;
     // Reactively update options that did change
     let prevOptions = {...options};
@@ -96,9 +97,7 @@
     }
     export function unselect() {
-        if ($_interaction.action) {
-            $_interaction.action.unselect();
-        }
+        $_interaction.action?.unselect();
         return this;
     }
@@ -111,6 +110,16 @@
         destroy_component(component, true);
     }
+    export function next() {
+        $date = nextDate($date, $duration);
+        return this;
+    }
+    export function prev() {
+        $date = prevDate($date, $duration, $hiddenDays);
+        return this;
+    }
     beforeUpdate(() => {
         flushDebounce($_queue);
     });

package/src/Toolbar.svelte CHANGED Viewed

@@ -1,5 +1,6 @@
 <script>
     import {getContext} from 'svelte';
+    import {keys} from './lib.js';
     import Buttons from './Buttons.svelte';
     let {headerToolbar, theme} = getContext('state');
@@ -11,15 +12,15 @@
     };
     $: {
-        for (let key of Object.keys(sections)) {
+        for (let key of keys(sections)) {
             sections[key] = $headerToolbar[key].split(' ').map(group => group.split(','));
         }
     }
 </script>
 <nav class="{$theme.toolbar}">
-    {#each Object.keys(sections) as key}
-        <div>
+    {#each keys(sections) as key}
+        <div class="ec-{key}">
             {#each sections[key] as buttons}
                 {#if buttons.length > 1}
                     <div class="{$theme.buttonGroup}">

package/src/lib/date.js CHANGED Viewed

@@ -130,6 +130,27 @@ export function toSeconds(duration, defaultValue = 0) {
     return duration?.seconds ?? defaultValue;
 }
+/**
+ * Move the date forward (when pressing the next button)
+ */
+export function nextDate(date, duration) {
+    addDuration(date, duration);
+    return date;
+}
+/**
+ * Move the date backward (when pressing the prev button)
+ */
+export function prevDate(date, duration, hiddenDays) {
+    subtractDuration(date, duration);
+    if (hiddenDays.length && hiddenDays.length < 7) {
+        while (hiddenDays.includes(date.getUTCDay())) {
+            subtractDay(date);
+        }
+    }
+    return date;
+}
 /**
  * Private functions
  */

package/src/lib/times.js CHANGED Viewed

@@ -3,7 +3,7 @@ import {addDuration, cloneDate, createDuration, DAY_IN_SECONDS, toISOString, toS
 import {max as maxFn, min as minFn} from './utils.js';
 import {bgEvent} from './events.js';
-export function createTimes(date, $slotDuration, $_slotTimeLimits, $_intlSlotLabel, $_intlDayHeaderAL) {
+export function createTimes(date, $slotDuration, $_slotTimeLimits, $_intlSlotLabel) {
     date = cloneDate(date);
     let compact = $slotDuration.seconds < 3600;
     let times = [];
@@ -15,8 +15,7 @@ export function createTimes(date, $slotDuration, $_slotTimeLimits, $_intlSlotLab
         times.push([
             toISOString(date),
             $_intlSlotLabel.format(date),
-            times.length && (i || !compact),
-            $_intlDayHeaderAL && $_intlDayHeaderAL.format(date)
+            times.length && (i || !compact)
         ]);
         addDuration(date, $slotDuration);
         i = 1 - i;

package/src/storage/options.js CHANGED Viewed

@@ -25,7 +25,7 @@ export function createOptions(plugins) {
             day: 'numeric'
         },
         dayHeaderAriaLabelFormat: {
-            dateStyle: 'long'
+            dateStyle: 'full'
         },
         displayEventEnd: true,
         duration: {weeks: 1},
@@ -74,7 +74,7 @@ export function createOptions(plugins) {
         },
         slotMaxTime: '24:00:00',
         slotMinTime: '00:00:00',
-        slotWidth: 52,
+        slotWidth: 72,
         theme: {
             allDay: 'ec-all-day',
             active: 'ec-active',

package/src/storage/state.js CHANGED Viewed

@@ -5,6 +5,7 @@ import {
     activeRange,
     currentRange,
     dayGrid,
+    monthView,
     events,
     now,
     today,
@@ -37,6 +38,7 @@ export default class {
         this._tasks = new Map();  // timeout IDs for tasks
         this._auxiliary = writable([]);  // auxiliary components
         this._dayGrid = dayGrid(this);
+        this._monthView = monthView(this);
         this._currentRange = currentRange(this);
         this._activeRange = activeRange(this);
         this._fetchedRange = writable({start: undefined, end: undefined});

package/src/storage/stores.js CHANGED Viewed

@@ -22,6 +22,10 @@ export function dayGrid(state) {
     return derived(state.view, $view => $view?.startsWith('dayGrid'));
 }
+export function monthView(state) {
+    return derived(state.view, $view => $view?.includes('Month'));
+}
 export function activeRange(state) {
     return derived(
         [state._currentRange, state.firstDay, state.slotMaxTime, state._dayGrid],
@@ -48,10 +52,10 @@ export function activeRange(state) {
 export function currentRange(state) {
     return derived(
-        [state.date, state.duration, state.firstDay, state._dayGrid],
-        ([$date, $duration, $firstDay, $_dayGrid]) => {
+        [state.date, state.duration, state.firstDay, state._monthView],
+        ([$date, $duration, $firstDay, $_monthView]) => {
             let start = cloneDate($date), end;
-            if ($_dayGrid) {
+            if ($_monthView) {
                 start.setUTCDate(1);
             } else if ($duration.inWeeks) {
                 // First day of week

package/src/styles/index.scss CHANGED Viewed

@@ -140,7 +140,6 @@
 .ec-body,
 .ec-days,
 .ec-day,
-.ec-times,
 .ec-day-head {
   border: 1px solid var(--ec-border-color);
 }

package/src/styles/timeline.scss CHANGED Viewed

@@ -64,24 +64,26 @@
   .ec-times {
     display: flex;
-    border-style: solid none none;
+    border-top: 1px solid var(--ec-border-color);;
   }
   .ec-time {
     border-left: 1px solid var(--ec-border-color);
     box-sizing: border-box;
+    font-size: .95em;
     min-height: 24px;
     overflow: hidden;
     text-overflow: ellipsis;
   }
   .ec-time, .ec-line {
-    width: 52px;
+    width: 72px;
   }
   .ec-events {
     position: relative;
     height: 100%;
+    margin: 0;
   }
   .ec-event {