npm - @event-calendar/core - Versions diffs - 2.4.0 → 2.5.0 - Mend

@event-calendar/core 2.4.0 → 2.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/README.md CHANGED Viewed

@@ -197,8 +197,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.4.0/event-calendar.min.css">
-<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.4.0/event-calendar.min.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.5.0/event-calendar.min.css">
+<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.5.0/event-calendar.min.js"></script>
 ```
 <details>
@@ -478,6 +478,31 @@ function (date) {
 </tr>
 </table>
+### dayHeaderAriaLabelFormat
+- Type `object` or `function`
+- Default `{dateStyle: 'long'}`
+> Views override the default value as follows:
+> - dayGridMonth `{weekday: 'long'}`
+Defines the text that is used inside the `aria-label` attribute in calendar column headings.
+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 formatted string:
+```js
+function (date) {
+    // return 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'}`
@@ -2222,13 +2247,6 @@ If the current view is a resource view, the [Resource](#resource-object) object
 Using this method, you can, for example, find out on which day a click occurred inside a multi-day event. To do this, inside [eventClick](#eventclick), pass the `jsEvent.clientX` and `jsEvent.clientY` coordinates to `dateFromPoint` and get the desired date.
-<details>
-  <summary>Note</summary>
-> In the `'listDay'`, `'listWeek'`, `'listMonth'` and `'listYear'` views, the events are rendered outside the day container, so the method will return `null` for the coordinates that are inside the events.
-</details>
 ### destroy()
 - Return value `undefined`
@@ -2300,7 +2318,7 @@ Here are all properties that exist in Event object:
 </td>
 <td>
-The text appearing on the event. See [Content](#content)</td>
+`Content` The text appearing on the event. See [Content](#content)</td>
 </tr>
 <tr>
 <td>
@@ -2590,14 +2608,10 @@ Here are all properties that exist in Resource object:
 `title`
 </td>
-<td>The title of the resource</td>
-</tr>
-<tr>
 <td>
-`titleHTML`
+The title of the resource. See [Content](#content).
 </td>
-<td>The HTML version of the title</td>
 </tr>
 <tr>
 <td>
@@ -2637,17 +2651,7 @@ Here are all admissible fields for the resource’s input object:
 </td>
 <td>
-`string` Text that will be displayed on the resource when it is rendered. Default `''`
-</td>
-</tr>
-<tr>
-<td>
-`titleHTML`
-</td>
-<td>
-`string` The HTML version of the title to be displayed instead of the text version. Default `''`
+`Content` Text that will be displayed on the resource when it is rendered. See [Content](#content). Default `''`
 </td>
 </tr>
 <tr>
@@ -2723,18 +2727,11 @@ Here are all properties that exist in View object:
 ## Theming
-The library provides a built-in dark theme. This theme is activated automatically if the current [preferred color theme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) is a dark one.
-You can also activate the dark theme manually by adding the `ec-dark` CSS class to any parent element of the calendar, e.g. `<body class="ec-dark">`.
+The library provides a built-in dark theme. You can activate it by adding the `ec-dark` CSS class to any parent element of the calendar, e.g. `<body class="ec-dark">`.
-<details>
-  <summary>Note</summary>
-> Use the `ec-light` CSS class to manually activate the light theme when the current [preferred color theme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) is a dark theme, e.g. `<body class="ec-light">`.
-</details>
+If you want the dark theme to be activated automatically based on the [preferred color scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme), then use the `ec-auto-dark` CSS class instead.
-Please note that the dark theme does not change the background and font color in the calendar. It is assumed that the page background and font color are set by page styles, and the calendar inherits these styles.
+Please note that the dark theme does not change the background and font color in the calendar. These are assumed to be set by the page styles, and the calendar inherits these styles.
 If you do need to set the background or font color of the calendar, use local CSS variables for this:
 ```css

package/index.css CHANGED Viewed

@@ -49,7 +49,7 @@
   --ec-bg-fallback-color: #22272e;
 }
 @media (prefers-color-scheme: dark) {
-  .ec {
+  .ec-auto-dark .ec {
     color-scheme: dark;
     --ec-h: 215;
     --ec-s: 15%;
@@ -59,16 +59,6 @@
     --ec-l-700: 57.30%;
     --ec-bg-fallback-color: #22272e;
   }
-  .ec-light .ec {
-    color-scheme: light;
-    --ec-h: 0;
-    --ec-s: 0%;
-    --ec-l-300: 91.00%;
-    --ec-l-500: 83.50%;
-    --ec-l-600: 78.40%;
-    --ec-l-700: 71.40%;
-    --ec-bg-fallback-color: #fff;
-  }
 }
 /* Grid */
@@ -193,7 +183,8 @@
 .ec-all-day,
 .ec-body,
 .ec-days,
-.ec-day {
+.ec-day,
+.ec-list .ec-day-head {
   border: 1px solid var(--ec-border-color);
 }
@@ -321,20 +312,11 @@
   opacity: 0.3;
 }
 .ec-list .ec-day {
-  flex: 1 0 auto;
-  background-color: var(--ec-list-day-bg-color);
-  border-style: solid none;
-  padding: 8px 14px;
-  font-weight: bold;
-  position: sticky;
-  top: 0;
-  z-index: 2;
-}
-.ec-list .ec-day:first-child {
-  border-top: none;
+  border: none;
 }
 .ec-day-grid .ec-day-head {
+  display: block;
   text-align: right;
   padding: 4px 4px 3px;
 }
@@ -348,6 +330,19 @@
   cursor: pointer;
 }
+.ec-list .ec-day-head {
+  flex: 1 0 auto;
+  background-color: var(--ec-list-day-bg-color);
+  border-style: solid none;
+  margin: -1px 0 0;
+  padding: 8px 14px;
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+.ec-list .ec-day:first-child .ec-day-head {
+  border-top: none;
+}
 .ec-list .ec-day-side {
   float: right;
 }
@@ -437,6 +432,8 @@
 .ec-event-title {
   overflow: hidden;
+  margin: unset;
+  font-weight: inherit;
 }
 .ec-day-grid .ec-event-title, .ec-all-day .ec-event-title {
   min-height: 1.5em;

package/index.js CHANGED Viewed

@@ -4,7 +4,9 @@ import { derived, get, writable, readable } from 'svelte/store';
 function keyEnter(fn) {
     return function (e) {
-        return e.key === 'Enter' || e.key === ' ' ? fn.call(this, e) : undefined;
+        return e.key === 'Enter' || e.key === ' ' && !e.preventDefault()  // prevent page scroll down
+            ? fn.call(this, e)
+            : undefined;
     };
 }
@@ -134,8 +136,8 @@ function toLocalDate(date) {
     );
 }
-function toISOString(date) {
-    return date.toISOString().substring(0, 19);
+function toISOString(date, len = 19) {
+    return date.toISOString().substring(0, len);
 }
 function datesEqual(date1, ...dates2) {
@@ -230,7 +232,7 @@ function symbol() {
     return Symbol('ec');
 }
-function createElement(tag, className, content) {
+function createElement(tag, className, content, attrs = []) {
     let el = document.createElement(tag);
     el.className = className;
     if (typeof content == 'string') {
@@ -240,6 +242,9 @@ function createElement(tag, className, content) {
     } else if (content.html) {
         el.innerHTML = content.html;
     }
+    for (let attr of attrs) {
+        el.setAttribute(...attr);
+    }
     return el;
 }
@@ -313,6 +318,10 @@ function toViewWithLocalDates(view) {
     return view;
 }
+function listView(view) {
+    return view.startsWith('list');
+}
 let eventId = 1;
 function createEvents(input) {
     return input.map(event => ({
@@ -457,28 +466,35 @@ function createEventContent(chunk, displayEventEnd, eventContent, theme, _intlEv
             })
             : eventContent;
     } else {
+        let domNodes;
         switch (chunk.event.display) {
             case 'background':
-                content = '';
+                domNodes = [];
                 break;
             case 'pointer':
-                content = {
-                    domNodes: [createElement('div', theme.eventTime, timeText)]
-                };
+                domNodes = [createTimeElement(timeText, chunk, theme)];
                 break;
             default:
-                content = {
-                    domNodes: [
-                        ...chunk.event.allDay ? [] : [createElement('div', theme.eventTime, timeText)],
-                        createElement('div', theme.eventTitle, chunk.event.title)
-                    ]
-                };
+                domNodes = [
+                    ...chunk.event.allDay ? [] : [createTimeElement(timeText, chunk, theme)],
+                    createElement('h4', theme.eventTitle, chunk.event.title)
+                ];
         }
+        content = {domNodes};
     }
     return [timeText, content];
 }
+function createTimeElement(timeText, chunk, theme) {
+    return createElement(
+        'time',
+        theme.eventTime,
+        timeText,
+        [['datetime', toISOString(chunk.start)]]
+    );
+}
 function createEventClasses(eventClassNames, event, _view) {
     if (eventClassNames) {
         if (is_function(eventClassNames)) {
@@ -609,6 +625,9 @@ function createOptions(plugins) {
             month: 'numeric',
             day: 'numeric'
         },
+        dayHeaderAriaLabelFormat: {
+            dateStyle: 'long'
+        },
         displayEventEnd: true,
         duration: {weeks: 1},
         events: [],
@@ -959,6 +978,7 @@ class State {
         this._intlEventTime = intlRange(this.locale, this.eventTimeFormat);
         this._intlSlotLabel = intl(this.locale, this.slotLabelFormat);
         this._intlDayHeader = intl(this.locale, this.dayHeaderFormat);
+        this._intlDayHeaderAL = intl(this.locale, this.dayHeaderAriaLabelFormat);
         this._intlTitle = intlRange(this.locale, this.titleFormat);
         this._bodyEl = writable(undefined);
         this._scrollable = writable(false);
@@ -1091,7 +1111,7 @@ function validKey(key, state) {
     return state.hasOwnProperty(key) && key[0] !== '_';
 }
-/* packages/core/src/Buttons.svelte generated by Svelte v4.2.2 */
+/* packages/core/src/Buttons.svelte generated by Svelte v4.2.8 */
 function get_each_context$2(ctx, list, i) {
 	const child_ctx = ctx.slice();
@@ -1544,7 +1564,7 @@ class Buttons extends SvelteComponent {
 	}
 }
-/* packages/core/src/Toolbar.svelte generated by Svelte v4.2.2 */
+/* packages/core/src/Toolbar.svelte generated by Svelte v4.2.8 */
 function get_each_context$1(ctx, list, i) {
 	const child_ctx = ctx.slice();
@@ -1807,8 +1827,8 @@ function create_each_block$1(ctx) {
 }
 function create_fragment$2(ctx) {
-	let div;
-	let div_class_value;
+	let nav;
+	let nav_class_value;
 	let current;
 	let each_value = ensure_array_like(Object.keys(/*sections*/ ctx[0]));
 	let each_blocks = [];
@@ -1823,20 +1843,20 @@ function create_fragment$2(ctx) {
 	return {
 		c() {
-			div = element("div");
+			nav = element("nav");
 			for (let i = 0; i < each_blocks.length; i += 1) {
 				each_blocks[i].c();
 			}
-			attr(div, "class", div_class_value = /*$theme*/ ctx[1].toolbar);
+			attr(nav, "class", nav_class_value = /*$theme*/ ctx[1].toolbar);
 		},
 		m(target, anchor) {
-			insert(target, div, anchor);
+			insert(target, nav, anchor);
 			for (let i = 0; i < each_blocks.length; i += 1) {
 				if (each_blocks[i]) {
-					each_blocks[i].m(div, null);
+					each_blocks[i].m(nav, null);
 				}
 			}
@@ -1857,7 +1877,7 @@ function create_fragment$2(ctx) {
 						each_blocks[i] = create_each_block$1(child_ctx);
 						each_blocks[i].c();
 						transition_in(each_blocks[i], 1);
-						each_blocks[i].m(div, null);
+						each_blocks[i].m(nav, null);
 					}
 				}
@@ -1870,8 +1890,8 @@ function create_fragment$2(ctx) {
 				check_outros();
 			}
-			if (!current || dirty & /*$theme*/ 2 && div_class_value !== (div_class_value = /*$theme*/ ctx[1].toolbar)) {
-				attr(div, "class", div_class_value);
+			if (!current || dirty & /*$theme*/ 2 && nav_class_value !== (nav_class_value = /*$theme*/ ctx[1].toolbar)) {
+				attr(nav, "class", nav_class_value);
 			}
 		},
 		i(local) {
@@ -1894,7 +1914,7 @@ function create_fragment$2(ctx) {
 		},
 		d(detaching) {
 			if (detaching) {
-				detach(div);
+				detach(nav);
 			}
 			destroy_each(each_blocks, detaching);
@@ -1930,7 +1950,7 @@ class Toolbar extends SvelteComponent {
 	}
 }
-/* packages/core/src/Auxiliary.svelte generated by Svelte v4.2.2 */
+/* packages/core/src/Auxiliary.svelte generated by Svelte v4.2.8 */
 function get_each_context(ctx, list, i) {
 	const child_ctx = ctx.slice();
@@ -2138,7 +2158,7 @@ class Auxiliary extends SvelteComponent {
 	}
 }
-/* packages/core/src/Calendar.svelte generated by Svelte v4.2.2 */
+/* packages/core/src/Calendar.svelte generated by Svelte v4.2.8 */
 function create_fragment(ctx) {
 	let div;
@@ -2146,13 +2166,14 @@ function create_fragment(ctx) {
 	let t0;
 	let switch_instance;
 	let div_class_value;
+	let div_role_value;
 	let t1;
 	let auxiliary;
 	let current;
 	let mounted;
 	let dispose;
 	toolbar = new Toolbar({});
-	var switch_value = /*$_viewComponent*/ ctx[4];
+	var switch_value = /*$_viewComponent*/ ctx[5];
 	function switch_props(ctx, dirty) {
 		return {};
@@ -2179,6 +2200,7 @@ function create_fragment(ctx) {
 			? ' ' + /*$theme*/ ctx[1][/*$_iClass*/ ctx[2]]
 			: '')));
+			attr(div, "role", div_role_value = listView(/*$view*/ ctx[4]) ? 'list' : 'table');
 			set_style(div, "height", /*$height*/ ctx[3]);
 		},
 		m(target, anchor) {
@@ -2191,12 +2213,12 @@ function create_fragment(ctx) {
 			current = true;
 			if (!mounted) {
-				dispose = listen(window, "resize", /*recheckScrollable*/ ctx[14]);
+				dispose = listen(window, "resize", /*recheckScrollable*/ ctx[16]);
 				mounted = true;
 			}
 		},
 		p(ctx, dirty) {
-			if (dirty[0] & /*$_viewComponent*/ 16 && switch_value !== (switch_value = /*$_viewComponent*/ ctx[4])) {
+			if (dirty[0] & /*$_viewComponent*/ 32 && switch_value !== (switch_value = /*$_viewComponent*/ ctx[5])) {
 				if (switch_instance) {
 					group_outros();
 					const old_component = switch_instance;
@@ -2226,6 +2248,10 @@ function create_fragment(ctx) {
 				attr(div, "class", div_class_value);
 			}
+			if (!current || dirty[0] & /*$view*/ 16 && div_role_value !== (div_role_value = listView(/*$view*/ ctx[4]) ? 'list' : 'table')) {
+				attr(div, "role", div_role_value);
+			}
 			if (dirty[0] & /*$height*/ 8) {
 				set_style(div, "height", /*$height*/ ctx[3]);
 			}
@@ -2267,22 +2293,24 @@ function instance($$self, $$props, $$invalidate) {
 	let $theme;
 	let $_iClass;
 	let $height;
+	let $view;
 	let $_viewComponent;
 	let { plugins = [] } = $$props;
 	let { options = {} } = $$props;
 	let component = get_current_component();
 	let state = new State(plugins, options);
 	setContext('state', state);
-	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(29, $_bodyEl = value));
-	component_subscribe($$self, _interaction, value => $$invalidate(31, $_interaction = value));
+	let { _viewComponent, _bodyEl, _interaction, _iClass, _events, _queue, _scrollable, height, theme, view } = state;
+	component_subscribe($$self, _viewComponent, value => $$invalidate(5, $_viewComponent = value));
+	component_subscribe($$self, _bodyEl, value => $$invalidate(31, $_bodyEl = value));
+	component_subscribe($$self, _interaction, value => $$invalidate(33, $_interaction = value));
 	component_subscribe($$self, _iClass, value => $$invalidate(2, $_iClass = value));
-	component_subscribe($$self, _events, value => $$invalidate(32, $_events = value));
-	component_subscribe($$self, _queue, value => $$invalidate(30, $_queue = value));
+	component_subscribe($$self, _events, value => $$invalidate(34, $_events = value));
+	component_subscribe($$self, _queue, value => $$invalidate(32, $_queue = value));
 	component_subscribe($$self, _scrollable, value => $$invalidate(0, $_scrollable = 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));
 	// Reactively update options that did change
 	let prevOptions = { ...options };
@@ -2378,12 +2406,12 @@ function instance($$self, $$props, $$invalidate) {
 	}
 	$$self.$$set = $$props => {
-		if ('plugins' in $$props) $$invalidate(15, plugins = $$props.plugins);
-		if ('options' in $$props) $$invalidate(16, 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*/ 65536) {
+		if ($$self.$$.dirty[0] & /*options*/ 262144) {
 			for (let [name, value] of diff(options, prevOptions)) {
 				setOption(name, value);
 			}
@@ -2395,6 +2423,7 @@ function instance($$self, $$props, $$invalidate) {
 		$theme,
 		$_iClass,
 		$height,
+		$view,
 		$_viewComponent,
 		_viewComponent,
 		_bodyEl,
@@ -2405,6 +2434,7 @@ function instance($$self, $$props, $$invalidate) {
 		_scrollable,
 		height,
 		theme,
+		view,
 		recheckScrollable,
 		plugins,
 		options,
@@ -2434,20 +2464,20 @@ class Calendar extends SvelteComponent {
 			create_fragment,
 			safe_not_equal,
 			{
-				plugins: 15,
-				options: 16,
-				setOption: 17,
-				getOption: 18,
-				refetchEvents: 19,
-				getEvents: 20,
-				getEventById: 21,
-				addEvent: 22,
-				updateEvent: 23,
-				removeEventById: 24,
-				getView: 25,
-				unselect: 26,
-				dateFromPoint: 27,
-				destroy: 28
+				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]
@@ -2455,52 +2485,52 @@ class Calendar extends SvelteComponent {
 	}
 	get setOption() {
-		return this.$$.ctx[17];
+		return this.$$.ctx[19];
 	}
 	get getOption() {
-		return this.$$.ctx[18];
+		return this.$$.ctx[20];
 	}
 	get refetchEvents() {
-		return this.$$.ctx[19];
+		return this.$$.ctx[21];
 	}
 	get getEvents() {
-		return this.$$.ctx[20];
+		return this.$$.ctx[22];
 	}
 	get getEventById() {
-		return this.$$.ctx[21];
+		return this.$$.ctx[23];
 	}
 	get addEvent() {
-		return this.$$.ctx[22];
+		return this.$$.ctx[24];
 	}
 	get updateEvent() {
-		return this.$$.ctx[23];
+		return this.$$.ctx[25];
 	}
 	get removeEventById() {
-		return this.$$.ctx[24];
+		return this.$$.ctx[26];
 	}
 	get getView() {
-		return this.$$.ctx[25];
+		return this.$$.ctx[27];
 	}
 	get unselect() {
-		return this.$$.ctx[26];
+		return this.$$.ctx[28];
 	}
 	get dateFromPoint() {
-		return this.$$.ctx[27];
+		return this.$$.ctx[29];
 	}
 	get destroy() {
-		return this.$$.ctx[28];
+		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, 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 };
+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, 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, setContent, setMidnight, setPayload, sortEventChunks, subtractDay, subtractDuration, symbol, themeView, toEventWithLocalDates, toISOString, toLocalDate, toViewWithLocalDates };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@event-calendar/core",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "title": "Event Calendar Core package",
   "description": "Full-sized drag & drop event calendar with resource view",
   "keywords": [
@@ -27,6 +27,6 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "svelte": "^4.1.1"
+    "svelte": "^4.2.8"
   }
 }

package/src/Calendar.svelte CHANGED Viewed

@@ -16,7 +16,8 @@
         getElementWithPayload,
         getPayload,
         flushDebounce,
-        hasYScroll
+        hasYScroll,
+        listView
     } from './lib.js';
     export let plugins = [];
@@ -27,8 +28,7 @@
     let state = new State(plugins, options);
     setContext('state', state);
-    let {_viewComponent, _bodyEl, _interaction, _iClass, _events, _queue, _scrollable,
-        events, eventSources, height, theme} = state;
+    let {_viewComponent, _bodyEl, _interaction, _iClass, _events, _queue, _scrollable, height, theme, view} = state;
     // Reactively update options that did change
     let prevOptions = {...options};
@@ -125,6 +125,7 @@
 <div
     class="{$theme.calendar} {$theme.view}{$_scrollable ? ' ' + $theme.withScroll : ''}{$_iClass ? ' ' + $theme[$_iClass] : ''}"
     style:height={$height}
+    role="{listView($view) ? 'list' : 'table'}"
 >
     <Toolbar/>
     <svelte:component this={$_viewComponent}/>

package/src/Toolbar.svelte CHANGED Viewed

@@ -17,7 +17,7 @@
     }
 </script>
-<div class="{$theme.toolbar}">
+<nav class="{$theme.toolbar}">
     {#each Object.keys(sections) as key}
         <div>
             {#each sections[key] as buttons}
@@ -31,4 +31,4 @@
             {/each}
         </div>
     {/each}
-</div>
+</nav>

package/src/lib/a11y.js CHANGED Viewed

@@ -1,6 +1,8 @@
 export function keyEnter(fn) {
     return function (e) {
-        return e.key === 'Enter' || e.key === ' ' ? fn.call(this, e) : undefined;
+        return e.key === 'Enter' || e.key === ' ' && !e.preventDefault()  // prevent page scroll down
+            ? fn.call(this, e)
+            : undefined;
     };
 }

package/src/lib/date.js CHANGED Viewed

@@ -87,8 +87,8 @@ export function toLocalDate(date) {
     );
 }
-export function toISOString(date) {
-    return date.toISOString().substring(0, 19);
+export function toISOString(date, len = 19) {
+    return date.toISOString().substring(0, len);
 }
 export function datesEqual(date1, ...dates2) {

package/src/lib/dom.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import {symbol} from './utils.js';
-export function createElement(tag, className, content) {
+export function createElement(tag, className, content, attrs = []) {
     let el = document.createElement(tag);
     el.className = className;
     if (typeof content == 'string') {
@@ -10,6 +10,9 @@ export function createElement(tag, className, content) {
     } else if (content.html) {
         el.innerHTML = content.html;
     }
+    for (let attr of attrs) {
+        el.setAttribute(...attr);
+    }
     return el;
 }

package/src/lib/events.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import {addDay, datesEqual, createDate, cloneDate, setMidnight, toLocalDate, noTimePart, copyTime} from './date';
+import {addDay, datesEqual, createDate, cloneDate, setMidnight, toLocalDate, toISOString, noTimePart, copyTime} from './date';
 import {createElement} from './dom';
 import {assign} from './utils';
 import {toViewWithLocalDates} from './view';
@@ -148,28 +148,35 @@ export function createEventContent(chunk, displayEventEnd, eventContent, theme,
             })
             : eventContent;
     } else {
+        let domNodes;
         switch (chunk.event.display) {
             case 'background':
-                content = '';
+                domNodes = [];
                 break;
             case 'pointer':
-                content = {
-                    domNodes: [createElement('div', theme.eventTime, timeText)]
-                };
+                domNodes = [createTimeElement(timeText, chunk, theme)];
                 break;
             default:
-                content = {
-                    domNodes: [
-                        ...chunk.event.allDay ? [] : [createElement('div', theme.eventTime, timeText)],
-                        createElement('div', theme.eventTitle, chunk.event.title)
-                    ]
-                };
+                domNodes = [
+                    ...chunk.event.allDay ? [] : [createTimeElement(timeText, chunk, theme)],
+                    createElement('h4', theme.eventTitle, chunk.event.title)
+                ];
         }
+        content = {domNodes};
     }
     return [timeText, content];
 }
+function createTimeElement(timeText, chunk, theme) {
+    return createElement(
+        'time',
+        theme.eventTime,
+        timeText,
+        [['datetime', toISOString(chunk.start)]]
+    );
+}
 export function createEventClasses(eventClassNames, event, _view) {
     if (eventClassNames) {
         if (is_function(eventClassNames)) {

package/src/lib/view.js CHANGED Viewed

@@ -21,4 +21,8 @@ export function toViewWithLocalDates(view) {
     view.activeEnd = toLocalDate(view.activeEnd);
     return view;
-}
+}
+export function listView(view) {
+    return view.startsWith('list');
+}

package/src/storage/options.js CHANGED Viewed

@@ -14,6 +14,9 @@ export function createOptions(plugins) {
             month: 'numeric',
             day: 'numeric'
         },
+        dayHeaderAriaLabelFormat: {
+            dateStyle: 'long'
+        },
         displayEventEnd: true,
         duration: {weeks: 1},
         events: [],

package/src/storage/state.js CHANGED Viewed

@@ -44,6 +44,7 @@ export default class {
         this._intlEventTime = intlRange(this.locale, this.eventTimeFormat);
         this._intlSlotLabel = intl(this.locale, this.slotLabelFormat);
         this._intlDayHeader = intl(this.locale, this.dayHeaderFormat);
+        this._intlDayHeaderAL = intl(this.locale, this.dayHeaderAriaLabelFormat);
         this._intlTitle = intlRange(this.locale, this.titleFormat);
         this._bodyEl = writable(undefined);
         this._scrollable = writable(false);

package/src/styles/index.scss CHANGED Viewed

@@ -138,7 +138,8 @@
 .ec-all-day,
 .ec-body,
 .ec-days,
-.ec-day {
+.ec-day,
+.ec-list .ec-day-head {
   border: 1px solid var(--ec-border-color);
 }
@@ -288,23 +289,13 @@
   }
   .ec-list & {
-    flex: 1 0 auto;
-    background-color: var(--ec-list-day-bg-color);
-    border-style: solid none;
-    padding: 8px 14px;
-    font-weight: bold;
-    position: sticky;
-    top: 0;
-    z-index: 2;
-    &:first-child {
-      border-top: none;
-    }
+    border: none;
   }
 }
 .ec-day-grid {
   .ec-day-head {
+    display: block;
     text-align: right;
     padding: 4px 4px 3px;
   }
@@ -322,6 +313,21 @@
 }
 .ec-list {
+  .ec-day-head {
+    flex: 1 0 auto;
+    background-color: var(--ec-list-day-bg-color);
+    border-style: solid none;
+    margin: -1px 0 0;
+    padding: 8px 14px;
+    position: sticky;
+    top: 0;
+    z-index: 2;
+  }
+  .ec-day:first-child .ec-day-head {
+    border-top: none;
+  }
   .ec-day-side {
     float: right;
   }
@@ -424,6 +430,8 @@
 .ec-event-title {
   overflow: hidden;
+  margin: unset;
+  font-weight: inherit;
   .ec-day-grid &,
   .ec-all-day & {

package/src/styles/theme.scss CHANGED Viewed

@@ -88,9 +88,8 @@
   }
   @media (prefers-color-scheme: dark) {
-    @include dark-theme;
-    .ec-light & {
-      @include light-theme;
+    .ec-auto-dark & {
+      @include dark-theme;
     }
   }
 }