@event-calendar/day-grid - npm Package Compare versions

Comparing version 2.4.1 to 2.5.0

index.js

 import { derived, writable } from 'svelte/store';
-import { cloneDate, subtractDay, addDay, setContent, helperEvent, toEventWithLocalDates, toViewWithLocalDates, createEventClasses, createEventContent, previewEvent, repositionEvent, height, ancestor, max, keyEnter, outsideEvent, rect, datesEqual, debounce, assign, createEventChunk, setPayload, bgEvent, eventIntersects, prepareEventChunks, btnTextMonth, themeView, intl } from '@event-calendar/core';
+import { cloneDate, subtractDay, addDay, setContent, keyEnter, helperEvent, toEventWithLocalDates, toViewWithLocalDates, createEventClasses, createEventContent, previewEvent, repositionEvent, height, ancestor, max, toISOString, outsideEvent, rect, datesEqual, debounce, assign, createEventChunk, setPayload, bgEvent, eventIntersects, prepareEventChunks, btnTextMonth, themeView, intl } from '@event-calendar/core';
 import { SvelteComponent, init, safe_not_equal, ensure_array_like, element, space, attr, insert, append, noop, detach, destroy_each, component_subscribe, action_destroyer, is_function, create_slot, update_slot_base, get_all_dirty_from_scope, get_slot_changes, transition_in, transition_out, binding_callbacks, construct_svelte_component, create_component, mount_component, listen, group_outros, destroy_component, check_outros, run_all, text, stop_propagation, update_keyed_each, outro_and_destroy_block, empty, set_store_value, bubble } from 'svelte/internal';
@@ -27,7 +27,7 @@ import { getContext, onMount, tick, afterUpdate } from 'svelte';
 
-/* packages/day-grid/src/Header.svelte generated by Svelte v4.2.2 */
+/* packages/day-grid/src/Header.svelte generated by Svelte v4.2.8 */
 
 function get_each_context$4(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[6] = list[i];
+	child_ctx[8] = list[i];
 	return child_ctx;
@@ -39,4 +39,7 @@ }
 	let div;
+	let span;
+	let span_aria_label_value;
+	let setContent_action;
+	let t;
 	let div_class_value;
-	let setContent_action;
 	let mounted;
@@ -48,9 +51,15 @@ let dispose;
 			div = element("div");
-			attr(div, "class", div_class_value = "" + (/*$theme*/ ctx[0].day + " " + /*$theme*/ ctx[0].weekdays?.[/*day*/ ctx[6].getUTCDay()]));
+			span = element("span");
+			t = space();
+			attr(span, "aria-label", span_aria_label_value = /*$_intlDayHeaderAL*/ ctx[2].format(/*day*/ ctx[8]));
+			attr(div, "class", div_class_value = "" + (/*$theme*/ ctx[0].day + " " + /*$theme*/ ctx[0].weekdays?.[/*day*/ ctx[8].getUTCDay()]));
+			attr(div, "role", "columnheader");
 		},
 		m(target, anchor) {
 			insert(target, div, anchor);
+			append(div, span);
+			append(div, t);
 
 			if (!mounted) {
-				dispose = action_destroyer(setContent_action = setContent.call(null, div, /*$_intlDayHeader*/ ctx[2].format(/*day*/ ctx[6])));
+				dispose = action_destroyer(setContent_action = setContent.call(null, span, /*$_intlDayHeader*/ ctx[3].format(/*day*/ ctx[8])));
 				mounted = true;
@@ -62,7 +71,11 @@ }
 
-			if (dirty & /*$theme, $_days*/ 3 && div_class_value !== (div_class_value = "" + (/*$theme*/ ctx[0].day + " " + /*$theme*/ ctx[0].weekdays?.[/*day*/ ctx[6].getUTCDay()]))) {
+			if (dirty & /*$_intlDayHeaderAL, $_days*/ 6 && span_aria_label_value !== (span_aria_label_value = /*$_intlDayHeaderAL*/ ctx[2].format(/*day*/ ctx[8]))) {
+				attr(span, "aria-label", span_aria_label_value);
+			}
+
+			if (setContent_action && is_function(setContent_action.update) && dirty & /*$_intlDayHeader, $_days*/ 10) setContent_action.update.call(null, /*$_intlDayHeader*/ ctx[3].format(/*day*/ ctx[8]));
+
+			if (dirty & /*$theme, $_days*/ 3 && div_class_value !== (div_class_value = "" + (/*$theme*/ ctx[0].day + " " + /*$theme*/ ctx[0].weekdays?.[/*day*/ ctx[8].getUTCDay()]))) {
 				attr(div, "class", div_class_value);
 			}
-
-			if (setContent_action && is_function(setContent_action.update) && dirty & /*$_intlDayHeader, $_days*/ 6) setContent_action.update.call(null, /*$_intlDayHeader*/ ctx[2].format(/*day*/ ctx[6]));
 		},
@@ -107,2 +120,3 @@ d(detaching) {
 			attr(div0, "class", div0_class_value = /*$theme*/ ctx[0].days);
+			attr(div0, "role", "row");
 			attr(div1, "class", div1_class_value = /*$theme*/ ctx[0].hiddenScroll);
@@ -125,3 +139,3 @@ attr(div2, "class", div2_class_value = /*$theme*/ ctx[0].header);
 		p(ctx, [dirty]) {
-			if (dirty & /*$theme, $_days, $_intlDayHeader*/ 7) {
+			if (dirty & /*$theme, $_days, $_intlDayHeaderAL, $_intlDayHeader*/ 15) {
 				each_value = ensure_array_like(/*$_days*/ ctx[1]);
@@ -176,8 +190,20 @@ let i;
 	let $_days;
+	let $_intlDayHeaderAL;
 	let $_intlDayHeader;
-	let { theme, _intlDayHeader, _days } = getContext('state');
+	let { theme, _intlDayHeader, _intlDayHeaderAL, _days } = getContext('state');
 	component_subscribe($$self, theme, value => $$invalidate(0, $theme = value));
-	component_subscribe($$self, _intlDayHeader, value => $$invalidate(2, $_intlDayHeader = value));
+	component_subscribe($$self, _intlDayHeader, value => $$invalidate(3, $_intlDayHeader = value));
+	component_subscribe($$self, _intlDayHeaderAL, value => $$invalidate(2, $_intlDayHeaderAL = value));
 	component_subscribe($$self, _days, value => $$invalidate(1, $_days = value));
-	return [$theme, $_days, $_intlDayHeader, theme, _intlDayHeader, _days];
+
+	return [
+		$theme,
+		$_days,
+		$_intlDayHeaderAL,
+		$_intlDayHeader,
+		theme,
+		_intlDayHeader,
+		_intlDayHeaderAL,
+		_days
+	];
 }
@@ -192,3 +218,3 @@
 
-/* packages/day-grid/src/Body.svelte generated by Svelte v4.2.2 */
+/* packages/day-grid/src/Body.svelte generated by Svelte v4.2.8 */
 
@@ -313,15 +339,17 @@ function create_fragment$5(ctx) {
 
-/* packages/day-grid/src/Event.svelte generated by Svelte v4.2.2 */
+/* packages/day-grid/src/Event.svelte generated by Svelte v4.2.8 */
 
 function create_fragment$4(ctx) {
-	let div1;
-	let div0;
-	let div0_class_value;
+	let article;
+	let div;
+	let div_class_value;
 	let setContent_action;
 	let t;
 	let switch_instance;
+	let article_role_value;
+	let article_tabindex_value;
 	let current;
 	let mounted;
 	let dispose;
-	var switch_value = /*$_interaction*/ ctx[7].resizer;
+	var switch_value = /*$_interaction*/ ctx[8].resizer;
 
@@ -336,3 +364,3 @@ function switch_props(ctx, dirty) {
 		switch_instance.$on("pointerdown", function () {
-			if (is_function(/*createDragHandler*/ ctx[32](/*$_interaction*/ ctx[7], true))) /*createDragHandler*/ ctx[32](/*$_interaction*/ ctx[7], true).apply(this, arguments);
+			if (is_function(/*createDragHandler*/ ctx[32](/*$_interaction*/ ctx[8], true))) /*createDragHandler*/ ctx[32](/*$_interaction*/ ctx[8], true).apply(this, arguments);
 		});
@@ -343,16 +371,18 @@ }
 		c() {
-			div1 = element("div");
-			div0 = element("div");
+			article = element("article");
+			div = element("div");
 			t = space();
 			if (switch_instance) create_component(switch_instance.$$.fragment);
-			attr(div0, "class", div0_class_value = /*$theme*/ ctx[1].eventBody);
-			attr(div1, "class", /*classes*/ ctx[3]);
-			attr(div1, "style", /*style*/ ctx[4]);
+			attr(div, "class", div_class_value = /*$theme*/ ctx[2].eventBody);
+			attr(article, "class", /*classes*/ ctx[4]);
+			attr(article, "style", /*style*/ ctx[5]);
+			attr(article, "role", article_role_value = /*onclick*/ ctx[7] ? 'button' : undefined);
+			attr(article, "tabindex", article_tabindex_value = /*onclick*/ ctx[7] ? 0 : undefined);
 		},
 		m(target, anchor) {
-			insert(target, div1, anchor);
-			append(div1, div0);
-			append(div1, t);
-			if (switch_instance) mount_component(switch_instance, div1, null);
-			/*div1_binding*/ ctx[50](div1);
+			insert(target, article, anchor);
+			append(article, div);
+			append(article, t);
+			if (switch_instance) mount_component(switch_instance, article, null);
+			/*article_binding*/ ctx[51](article);
 			current = true;
@@ -362,14 +392,17 @@
 				dispose = [
-					action_destroyer(setContent_action = setContent.call(null, div0, /*content*/ ctx[5])),
-					listen(div1, "click", function () {
-						if (is_function(/*createHandler*/ ctx[31](/*$eventClick*/ ctx[8], /*display*/ ctx[6]))) /*createHandler*/ ctx[31](/*$eventClick*/ ctx[8], /*display*/ ctx[6]).apply(this, arguments);
+					action_destroyer(setContent_action = setContent.call(null, div, /*content*/ ctx[6])),
+					listen(article, "click", function () {
+						if (is_function(/*onclick*/ ctx[7])) /*onclick*/ ctx[7].apply(this, arguments);
 					}),
-					listen(div1, "mouseenter", function () {
-						if (is_function(/*createHandler*/ ctx[31](/*$eventMouseEnter*/ ctx[9], /*display*/ ctx[6]))) /*createHandler*/ ctx[31](/*$eventMouseEnter*/ ctx[9], /*display*/ ctx[6]).apply(this, arguments);
+					listen(article, "keydown", function () {
+						if (is_function(/*onclick*/ ctx[7] && keyEnter(/*onclick*/ ctx[7]))) (/*onclick*/ ctx[7] && keyEnter(/*onclick*/ ctx[7])).apply(this, arguments);
 					}),
-					listen(div1, "mouseleave", function () {
-						if (is_function(/*createHandler*/ ctx[31](/*$eventMouseLeave*/ ctx[10], /*display*/ ctx[6]))) /*createHandler*/ ctx[31](/*$eventMouseLeave*/ ctx[10], /*display*/ ctx[6]).apply(this, arguments);
+					listen(article, "mouseenter", function () {
+						if (is_function(/*createHandler*/ ctx[31](/*$eventMouseEnter*/ ctx[9], /*display*/ ctx[1]))) /*createHandler*/ ctx[31](/*$eventMouseEnter*/ ctx[9], /*display*/ ctx[1]).apply(this, arguments);
 					}),
-					listen(div1, "pointerdown", function () {
-						if (is_function(!helperEvent(/*display*/ ctx[6]) && /*createDragHandler*/ ctx[32](/*$_interaction*/ ctx[7]))) (!helperEvent(/*display*/ ctx[6]) && /*createDragHandler*/ ctx[32](/*$_interaction*/ ctx[7])).apply(this, arguments);
+					listen(article, "mouseleave", function () {
+						if (is_function(/*createHandler*/ ctx[31](/*$eventMouseLeave*/ ctx[10], /*display*/ ctx[1]))) /*createHandler*/ ctx[31](/*$eventMouseLeave*/ ctx[10], /*display*/ ctx[1]).apply(this, arguments);
+					}),
+					listen(article, "pointerdown", function () {
+						if (is_function(!helperEvent(/*display*/ ctx[1]) && /*createDragHandler*/ ctx[32](/*$_interaction*/ ctx[8]))) (!helperEvent(/*display*/ ctx[1]) && /*createDragHandler*/ ctx[32](/*$_interaction*/ ctx[8])).apply(this, arguments);
 					})
@@ -384,9 +417,9 @@ ];
 
-			if (!current || dirty[0] & /*$theme*/ 2 && div0_class_value !== (div0_class_value = /*$theme*/ ctx[1].eventBody)) {
-				attr(div0, "class", div0_class_value);
+			if (!current || dirty[0] & /*$theme*/ 4 && div_class_value !== (div_class_value = /*$theme*/ ctx[2].eventBody)) {
+				attr(div, "class", div_class_value);
 			}
 
-			if (setContent_action && is_function(setContent_action.update) && dirty[0] & /*content*/ 32) setContent_action.update.call(null, /*content*/ ctx[5]);
+			if (setContent_action && is_function(setContent_action.update) && dirty[0] & /*content*/ 64) setContent_action.update.call(null, /*content*/ ctx[6]);
 
-			if (dirty[0] & /*$_interaction*/ 128 && switch_value !== (switch_value = /*$_interaction*/ ctx[7].resizer)) {
+			if (dirty[0] & /*$_interaction*/ 256 && switch_value !== (switch_value = /*$_interaction*/ ctx[8].resizer)) {
 				if (switch_instance) {
@@ -407,3 +440,3 @@ group_outros();
 					switch_instance.$on("pointerdown", function () {
-						if (is_function(/*createDragHandler*/ ctx[32](/*$_interaction*/ ctx[7], true))) /*createDragHandler*/ ctx[32](/*$_interaction*/ ctx[7], true).apply(this, arguments);
+						if (is_function(/*createDragHandler*/ ctx[32](/*$_interaction*/ ctx[8], true))) /*createDragHandler*/ ctx[32](/*$_interaction*/ ctx[8], true).apply(this, arguments);
 					});
@@ -413,3 +446,3 @@
 					transition_in(switch_instance.$$.fragment, 1);
-					mount_component(switch_instance, div1, null);
+					mount_component(switch_instance, article, null);
 				} else {
@@ -424,9 +457,17 @@ switch_instance = null;
 
-			if (!current || dirty[0] & /*classes*/ 8) {
-				attr(div1, "class", /*classes*/ ctx[3]);
+			if (!current || dirty[0] & /*classes*/ 16) {
+				attr(article, "class", /*classes*/ ctx[4]);
 			}
 
-			if (!current || dirty[0] & /*style*/ 16) {
-				attr(div1, "style", /*style*/ ctx[4]);
+			if (!current || dirty[0] & /*style*/ 32) {
+				attr(article, "style", /*style*/ ctx[5]);
 			}
+
+			if (!current || dirty[0] & /*onclick*/ 128 && article_role_value !== (article_role_value = /*onclick*/ ctx[7] ? 'button' : undefined)) {
+				attr(article, "role", article_role_value);
+			}
+
+			if (!current || dirty[0] & /*onclick*/ 128 && article_tabindex_value !== (article_tabindex_value = /*onclick*/ ctx[7] ? 0 : undefined)) {
+				attr(article, "tabindex", article_tabindex_value);
+			}
 		},
@@ -444,7 +485,7 @@ i(local) {
 			if (detaching) {
-				detach(div1);
+				detach(article);
 			}
 
 			if (switch_instance) destroy_component(switch_instance);
-			/*div1_binding*/ ctx[50](null);
+			/*article_binding*/ ctx[51](null);
 			mounted = false;
@@ -457,2 +498,3 @@ run_all(dispose);
 function instance$4($$self, $$props, $$invalidate) {
+	let $eventClick;
 	let $_hiddenEvents;
@@ -475,3 +517,2 @@ let $dayMaxEvents;
 	let $_resBgColor;
-	let $eventClick;
 	let $eventMouseEnter;
@@ -483,22 +524,22 @@ let $eventMouseLeave;
 	let { dayMaxEvents, displayEventEnd, eventBackgroundColor, eventTextColor, eventClick, eventColor, eventContent, eventClassNames, eventDidMount, eventMouseEnter, eventMouseLeave, theme, _view, _intlEventTime, _interaction, _iClasses, _resBgColor, _resTxtColor, _hiddenEvents, _popupDate } = getContext('state');
-	component_subscribe($$self, dayMaxEvents, value => $$invalidate(53, $dayMaxEvents = value));
-	component_subscribe($$self, displayEventEnd, value => $$invalidate(42, $displayEventEnd = value));
-	component_subscribe($$self, eventBackgroundColor, value => $$invalidate(48, $eventBackgroundColor = value));
-	component_subscribe($$self, eventTextColor, value => $$invalidate(45, $eventTextColor = value));
-	component_subscribe($$self, eventClick, value => $$invalidate(8, $eventClick = value));
-	component_subscribe($$self, eventColor, value => $$invalidate(47, $eventColor = value));
-	component_subscribe($$self, eventContent, value => $$invalidate(41, $eventContent = value));
-	component_subscribe($$self, eventClassNames, value => $$invalidate(43, $eventClassNames = value));
-	component_subscribe($$self, eventDidMount, value => $$invalidate(55, $eventDidMount = value));
+	component_subscribe($$self, dayMaxEvents, value => $$invalidate(54, $dayMaxEvents = value));
+	component_subscribe($$self, displayEventEnd, value => $$invalidate(43, $displayEventEnd = value));
+	component_subscribe($$self, eventBackgroundColor, value => $$invalidate(49, $eventBackgroundColor = value));
+	component_subscribe($$self, eventTextColor, value => $$invalidate(46, $eventTextColor = value));
+	component_subscribe($$self, eventClick, value => $$invalidate(39, $eventClick = value));
+	component_subscribe($$self, eventColor, value => $$invalidate(48, $eventColor = value));
+	component_subscribe($$self, eventContent, value => $$invalidate(42, $eventContent = value));
+	component_subscribe($$self, eventClassNames, value => $$invalidate(44, $eventClassNames = value));
+	component_subscribe($$self, eventDidMount, value => $$invalidate(56, $eventDidMount = value));
 	component_subscribe($$self, eventMouseEnter, value => $$invalidate(9, $eventMouseEnter = value));
 	component_subscribe($$self, eventMouseLeave, value => $$invalidate(10, $eventMouseLeave = value));
-	component_subscribe($$self, theme, value => $$invalidate(1, $theme = value));
-	component_subscribe($$self, _view, value => $$invalidate(39, $_view = value));
-	component_subscribe($$self, _intlEventTime, value => $$invalidate(40, $_intlEventTime = value));
-	component_subscribe($$self, _interaction, value => $$invalidate(7, $_interaction = value));
-	component_subscribe($$self, _iClasses, value => $$invalidate(44, $_iClasses = value));
-	component_subscribe($$self, _resBgColor, value => $$invalidate(49, $_resBgColor = value));
-	component_subscribe($$self, _resTxtColor, value => $$invalidate(46, $_resTxtColor = value));
-	component_subscribe($$self, _hiddenEvents, value => $$invalidate(52, $_hiddenEvents = value));
-	component_subscribe($$self, _popupDate, value => $$invalidate(54, $_popupDate = value));
+	component_subscribe($$self, theme, value => $$invalidate(2, $theme = value));
+	component_subscribe($$self, _view, value => $$invalidate(40, $_view = value));
+	component_subscribe($$self, _intlEventTime, value => $$invalidate(41, $_intlEventTime = value));
+	component_subscribe($$self, _interaction, value => $$invalidate(8, $_interaction = value));
+	component_subscribe($$self, _iClasses, value => $$invalidate(45, $_iClasses = value));
+	component_subscribe($$self, _resBgColor, value => $$invalidate(50, $_resBgColor = value));
+	component_subscribe($$self, _resTxtColor, value => $$invalidate(47, $_resTxtColor = value));
+	component_subscribe($$self, _hiddenEvents, value => $$invalidate(53, $_hiddenEvents = value));
+	component_subscribe($$self, _popupDate, value => $$invalidate(55, $_popupDate = value));
 	let el;
@@ -513,2 +554,3 @@ let event;
 	let display;
+	let onclick;
 
@@ -602,6 +644,6 @@ onMount(() => {
 
-	function div1_binding($$value) {
+	function article_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			el = $$value;
-			$$invalidate(2, el);
+			$$invalidate(3, el);
 		});
@@ -621,5 +663,5 @@ }
 
-		if ($$self.$$.dirty[0] & /*event, style, $theme*/ 19 | $$self.$$.dirty[1] & /*$_resBgColor, $eventBackgroundColor, $eventColor, $_resTxtColor, $eventTextColor, chunk, margin, hidden, $_iClasses, $eventClassNames, $_view*/ 520644) {
+		if ($$self.$$.dirty[0] & /*event, style, $theme*/ 37 | $$self.$$.dirty[1] & /*$_resBgColor, $eventBackgroundColor, $eventColor, $_resTxtColor, $eventTextColor, chunk, margin, hidden, $_iClasses, $eventClassNames, $_view*/ 1041092) {
 			{
-				$$invalidate(6, display = event.display);
+				$$invalidate(1, display = event.display);
 
@@ -630,17 +672,17 @@ // Class & Style
 				let txtColor = event.textColor || $_resTxtColor(event) || $eventTextColor;
-				$$invalidate(4, style = `width:calc(${chunk.days * 100}% + ${(chunk.days - 1) * 7}px);` + `margin-top:${margin}px;`);
+				$$invalidate(5, style = `width:calc(${chunk.days * 100}% + ${(chunk.days - 1) * 7}px);` + `margin-top:${margin}px;`);
 
 				if (bgColor) {
-					$$invalidate(4, style += `background-color:${bgColor};`);
+					$$invalidate(5, style += `background-color:${bgColor};`);
 				}
 
 				if (txtColor) {
-					$$invalidate(4, style += `color:${txtColor};`);
+					$$invalidate(5, style += `color:${txtColor};`);
 				}
 
 				if (hidden) {
-					$$invalidate(4, style += 'visibility:hidden;');
+					$$invalidate(5, style += 'visibility:hidden;');
 				}
 
-				$$invalidate(3, classes = [
+				$$invalidate(4, classes = [
 					$theme.event,
@@ -653,6 +695,11 @@ ...$_iClasses([], event),
 
-		if ($$self.$$.dirty[0] & /*$theme*/ 2 | $$self.$$.dirty[1] & /*chunk, $displayEventEnd, $eventContent, $_intlEventTime, $_view*/ 3844) {
+		if ($$self.$$.dirty[0] & /*$theme*/ 4 | $$self.$$.dirty[1] & /*chunk, $displayEventEnd, $eventContent, $_intlEventTime, $_view*/ 7684) {
 			// Content
-			$$invalidate(5, [timeText, content] = createEventContent(chunk, $displayEventEnd, $eventContent, $theme, $_intlEventTime, $_view), content);
+			$$invalidate(6, [timeText, content] = createEventContent(chunk, $displayEventEnd, $eventContent, $theme, $_intlEventTime, $_view), content);
 		}
+
+		if ($$self.$$.dirty[0] & /*display*/ 2 | $$self.$$.dirty[1] & /*$eventClick*/ 256) {
+			// Onclick handler
+			$$invalidate(7, onclick = createHandler($eventClick, display));
+		}
 	};
@@ -662,2 +709,3 @@
 		event,
+		display,
 		$theme,
@@ -668,5 +716,4 @@ el,
 		content,
-		display,
+		onclick,
 		$_interaction,
-		$eventClick,
 		$eventMouseEnter,
@@ -702,2 +749,3 @@ $eventMouseLeave,
 		hidden,
+		$eventClick,
 		$_view,
@@ -714,3 +762,3 @@ $_intlEventTime,
 		$_resBgColor,
-		div1_binding
+		article_binding
 	];
@@ -745,3 +793,3 @@ }
 
-/* packages/day-grid/src/Popup.svelte generated by Svelte v4.2.2 */
+/* packages/day-grid/src/Popup.svelte generated by Svelte v4.2.8 */
 
@@ -805,3 +853,4 @@ function get_each_context$3(ctx, list, i) {
 	let div0;
-	let span;
+	let time;
+	let time_datetime_value;
 	let setContent_action;
@@ -835,3 +884,3 @@ let t0;
 			div0 = element("div");
-			span = element("span");
+			time = element("time");
 			t0 = space();
@@ -847,2 +896,3 @@ a = element("a");
 
+			attr(time, "datetime", time_datetime_value = toISOString(/*$_popupDate*/ ctx[3], 10));
 			attr(a, "role", "button");
@@ -859,3 +909,3 @@ attr(a, "tabindex", "0");
 			append(div2, div0);
-			append(div0, span);
+			append(div0, time);
 			append(div0, t0);
@@ -878,3 +928,3 @@ append(div0, a);
 				dispose = [
-					action_destroyer(setContent_action = setContent.call(null, span, /*$_intlDayPopover*/ ctx[5].format(/*$_popupDate*/ ctx[3]))),
+					action_destroyer(setContent_action = setContent.call(null, time, /*$_intlDayPopover*/ ctx[5].format(/*$_popupDate*/ ctx[3]))),
 					listen(a, "click", stop_propagation(/*close*/ ctx[13])),
@@ -891,2 +941,6 @@ listen(a, "keydown", keyEnter(/*close*/ ctx[13])),
 		p(ctx, [dirty]) {
+			if (!current || dirty & /*$_popupDate*/ 8 && time_datetime_value !== (time_datetime_value = toISOString(/*$_popupDate*/ ctx[3], 10))) {
+				attr(time, "datetime", time_datetime_value);
+			}
+
 			if (setContent_action && is_function(setContent_action.update) && dirty & /*$_intlDayPopover, $_popupDate*/ 40) setContent_action.update.call(null, /*$_intlDayPopover*/ ctx[5].format(/*$_popupDate*/ ctx[3]));
@@ -1086,3 +1140,3 @@
 
-/* packages/day-grid/src/Day.svelte generated by Svelte v4.2.2 */
+/* packages/day-grid/src/Day.svelte generated by Svelte v4.2.8 */
 
@@ -1097,3 +1151,3 @@ function get_each_context$2(ctx, list, i) {
 
-// (115:4) {#if iChunks[1] && datesEqual(iChunks[1].date, date)}
+// (120:4) {#if iChunks[1] && datesEqual(iChunks[1].date, date)}
 function create_if_block_3(ctx) {
@@ -1145,3 +1199,3 @@ let div;
 
-// (121:4) {#if iChunks[0] && datesEqual(iChunks[0].date, date)}
+// (126:4) {#if iChunks[0] && datesEqual(iChunks[0].date, date)}
 function create_if_block_2(ctx) {
@@ -1193,3 +1247,3 @@ let div;
 
-// (127:8) {#each dayChunks as chunk, i (chunk.event)}
+// (132:8) {#each dayChunks as chunk, i (chunk.event)}
 function create_each_block$2(key_1, ctx) {
@@ -1258,3 +1312,3 @@ let first;
 
-// (131:4) {#if showPopup}
+// (136:4) {#if showPopup}
 function create_if_block_1(ctx) {
@@ -1288,3 +1342,3 @@ let popup;
 
-// (135:8) {#if hiddenEvents.size}
+// (140:8) {#if hiddenEvents.size}
 function create_if_block(ctx) {
@@ -1332,5 +1386,6 @@ let a;
 function create_fragment$2(ctx) {
-	let div3;
-	let div0;
-	let div0_class_value;
+	let div2;
+	let time;
+	let time_class_value;
+	let time_datetime_value;
 	let setContent_action;
@@ -1342,11 +1397,11 @@ let t0;
 	let t2;
-	let div1;
+	let div0;
 	let each_blocks = [];
 	let each_1_lookup = new Map();
-	let div1_class_value;
+	let div0_class_value;
 	let t3;
 	let t4;
-	let div2;
+	let div1;
+	let div1_class_value;
 	let div2_class_value;
-	let div3_class_value;
 	let current;
@@ -1371,4 +1426,4 @@ let mounted;
 		c() {
-			div3 = element("div");
-			div0 = element("div");
+			div2 = element("div");
+			time = element("time");
 			t0 = space();
@@ -1379,3 +1434,3 @@ if (if_block0) if_block0.c();
 			t2 = space();
-			div1 = element("div");
+			div0 = element("div");
 
@@ -1389,9 +1444,10 @@ for (let i = 0; i < each_blocks.length; i += 1) {
 			t4 = space();
-			div2 = element("div");
+			div1 = element("div");
 			if (if_block3) if_block3.c();
-			attr(div0, "class", div0_class_value = /*$theme*/ ctx[12].dayHead);
-			attr(div1, "class", div1_class_value = /*$theme*/ ctx[12].events);
-			attr(div2, "class", div2_class_value = /*$theme*/ ctx[12].dayFoot);
+			attr(time, "class", time_class_value = /*$theme*/ ctx[12].dayHead);
+			attr(time, "datetime", time_datetime_value = toISOString(/*date*/ ctx[0], 10));
+			attr(div0, "class", div0_class_value = /*$theme*/ ctx[12].events);
+			attr(div1, "class", div1_class_value = /*$theme*/ ctx[12].dayFoot);
 
-			attr(div3, "class", div3_class_value = "" + (/*$theme*/ ctx[12].day + " " + /*$theme*/ ctx[12].weekdays?.[/*date*/ ctx[0].getUTCDay()] + (/*isToday*/ ctx[8] ? ' ' + /*$theme*/ ctx[12].today : '') + (/*otherMonth*/ ctx[9]
+			attr(div2, "class", div2_class_value = "" + (/*$theme*/ ctx[12].day + " " + /*$theme*/ ctx[12].weekdays?.[/*date*/ ctx[0].getUTCDay()] + (/*isToday*/ ctx[8] ? ' ' + /*$theme*/ ctx[12].today : '') + (/*otherMonth*/ ctx[9]
 			? ' ' + /*$theme*/ ctx[12].otherMonth
@@ -1401,25 +1457,27 @@ : '') + (/*highlight*/ ctx[10]
 			: '')));
+
+			attr(div2, "role", "cell");
 		},
 		m(target, anchor) {
-			insert(target, div3, anchor);
-			append(div3, div0);
-			append(div3, t0);
-			if (if_block0) if_block0.m(div3, null);
-			append(div3, t1);
-			if (if_block1) if_block1.m(div3, null);
-			append(div3, t2);
-			append(div3, div1);
+			insert(target, div2, anchor);
+			append(div2, time);
+			append(div2, t0);
+			if (if_block0) if_block0.m(div2, null);
+			append(div2, t1);
+			if (if_block1) if_block1.m(div2, null);
+			append(div2, t2);
+			append(div2, div0);
 
 			for (let i = 0; i < each_blocks.length; i += 1) {
 				if (each_blocks[i]) {
-					each_blocks[i].m(div1, null);
+					each_blocks[i].m(div0, null);
 				}
 			}
 
-			append(div3, t3);
-			if (if_block2) if_block2.m(div3, null);
-			append(div3, t4);
-			append(div3, div2);
-			if (if_block3) if_block3.m(div2, null);
-			/*div3_binding*/ ctx[37](div3);
+			append(div2, t3);
+			if (if_block2) if_block2.m(div2, null);
+			append(div2, t4);
+			append(div2, div1);
+			if (if_block3) if_block3.m(div1, null);
+			/*div2_binding*/ ctx[37](div2);
 			current = true;
@@ -1430,10 +1488,10 @@
 					listen(window, "resize", /*reposition*/ ctx[27]),
-					action_destroyer(setContent_action = setContent.call(null, div0, /*$_intlDayCell*/ ctx[14].format(/*date*/ ctx[0]))),
-					listen(div3, "pointerenter", function () {
+					action_destroyer(setContent_action = setContent.call(null, time, /*$_intlDayCell*/ ctx[14].format(/*date*/ ctx[0]))),
+					listen(div2, "pointerenter", function () {
 						if (is_function(/*createPointerEnterHandler*/ ctx[25](/*$_interaction*/ ctx[13]))) /*createPointerEnterHandler*/ ctx[25](/*$_interaction*/ ctx[13]).apply(this, arguments);
 					}),
-					listen(div3, "pointerleave", function () {
+					listen(div2, "pointerleave", function () {
 						if (is_function(/*$_interaction*/ ctx[13].pointer?.leave)) /*$_interaction*/ ctx[13].pointer?.leave.apply(this, arguments);
 					}),
-					listen(div3, "pointerdown", function () {
+					listen(div2, "pointerdown", function () {
 						if (is_function(/*$_interaction*/ ctx[13].action?.select)) /*$_interaction*/ ctx[13].action?.select.apply(this, arguments);
@@ -1449,6 +1507,10 @@ })
 
-			if (!current || dirty[0] & /*$theme*/ 4096 && div0_class_value !== (div0_class_value = /*$theme*/ ctx[12].dayHead)) {
-				attr(div0, "class", div0_class_value);
+			if (!current || dirty[0] & /*$theme*/ 4096 && time_class_value !== (time_class_value = /*$theme*/ ctx[12].dayHead)) {
+				attr(time, "class", time_class_value);
 			}
 
+			if (!current || dirty[0] & /*date*/ 1 && time_datetime_value !== (time_datetime_value = toISOString(/*date*/ ctx[0], 10))) {
+				attr(time, "datetime", time_datetime_value);
+			}
+
 			if (setContent_action && is_function(setContent_action.update) && dirty[0] & /*$_intlDayCell, date*/ 16385) setContent_action.update.call(null, /*$_intlDayCell*/ ctx[14].format(/*date*/ ctx[0]));
@@ -1468,3 +1530,3 @@ if (dirty[0] & /*iChunks, date*/ 5) show_if_1 = /*iChunks*/ ctx[2][1] && datesEqual(/*iChunks*/ ctx[2][1].date, /*date*/ ctx[0]);
 					transition_in(if_block0, 1);
-					if_block0.m(div3, t1);
+					if_block0.m(div2, t1);
 				}
@@ -1494,3 +1556,3 @@ } else if (if_block0) {
 					transition_in(if_block1, 1);
-					if_block1.m(div3, t2);
+					if_block1.m(div2, t2);
 				}
@@ -1510,8 +1572,8 @@ } else if (if_block1) {
 				group_outros();
-				each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, div1, outro_and_destroy_block, create_each_block$2, null, get_each_context$2);
+				each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx, each_value, each_1_lookup, div0, outro_and_destroy_block, create_each_block$2, null, get_each_context$2);
 				check_outros();
 			}
 
-			if (!current || dirty[0] & /*$theme*/ 4096 && div1_class_value !== (div1_class_value = /*$theme*/ ctx[12].events)) {
-				attr(div1, "class", div1_class_value);
+			if (!current || dirty[0] & /*$theme*/ 4096 && div0_class_value !== (div0_class_value = /*$theme*/ ctx[12].events)) {
+				attr(div0, "class", div0_class_value);
 			}
@@ -1528,3 +1590,3 @@
 					transition_in(if_block2, 1);
-					if_block2.m(div3, t4);
+					if_block2.m(div2, t4);
 				}
@@ -1547,3 +1609,3 @@ } else if (if_block2) {
 					if_block3.c();
-					if_block3.m(div2, null);
+					if_block3.m(div1, null);
 				}
@@ -1555,7 +1617,7 @@ } else if (if_block3) {
 
-			if (!current || dirty[0] & /*$theme*/ 4096 && div2_class_value !== (div2_class_value = /*$theme*/ ctx[12].dayFoot)) {
-				attr(div2, "class", div2_class_value);
+			if (!current || dirty[0] & /*$theme*/ 4096 && div1_class_value !== (div1_class_value = /*$theme*/ ctx[12].dayFoot)) {
+				attr(div1, "class", div1_class_value);
 			}
 
-			if (!current || dirty[0] & /*$theme, date, isToday, otherMonth, highlight*/ 5889 && div3_class_value !== (div3_class_value = "" + (/*$theme*/ ctx[12].day + " " + /*$theme*/ ctx[12].weekdays?.[/*date*/ ctx[0].getUTCDay()] + (/*isToday*/ ctx[8] ? ' ' + /*$theme*/ ctx[12].today : '') + (/*otherMonth*/ ctx[9]
+			if (!current || dirty[0] & /*$theme, date, isToday, otherMonth, highlight*/ 5889 && div2_class_value !== (div2_class_value = "" + (/*$theme*/ ctx[12].day + " " + /*$theme*/ ctx[12].weekdays?.[/*date*/ ctx[0].getUTCDay()] + (/*isToday*/ ctx[8] ? ' ' + /*$theme*/ ctx[12].today : '') + (/*otherMonth*/ ctx[9]
 			? ' ' + /*$theme*/ ctx[12].otherMonth
@@ -1565,3 +1627,3 @@ : '') + (/*highlight*/ ctx[10]
 			: '')))) {
-				attr(div3, "class", div3_class_value);
+				attr(div2, "class", div2_class_value);
 			}
@@ -1594,3 +1656,3 @@ },
 			if (detaching) {
-				detach(div3);
+				detach(div2);
 			}
@@ -1607,3 +1669,3 @@
 			if (if_block3) if_block3.d();
-			/*div3_binding*/ ctx[37](null);
+			/*div2_binding*/ ctx[37](null);
 			mounted = false;
@@ -1689,3 +1751,3 @@ run_all(dispose);
 
-	function div3_binding($$value) {
+	function div2_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
@@ -1822,3 +1884,3 @@ el = $$value;
 		event_binding,
-		div3_binding
+		div2_binding
 	];
@@ -1849,3 +1911,3 @@ }
 
-/* packages/day-grid/src/Week.svelte generated by Svelte v4.2.2 */
+/* packages/day-grid/src/Week.svelte generated by Svelte v4.2.8 */
 
@@ -1927,2 +1989,3 @@ function get_each_context$1(ctx, list, i) {
 			attr(div, "class", div_class_value = /*$theme*/ ctx[4].days);
+			attr(div, "role", "row");
 		},
@@ -2083,3 +2146,3 @@ m(target, anchor) {
 
-/* packages/day-grid/src/View.svelte generated by Svelte v4.2.2 */
+/* packages/day-grid/src/View.svelte generated by Svelte v4.2.8 */
 
@@ -2342,2 +2405,3 @@ function get_each_context(ctx, list, i) {
 			dayHeaderFormat: {weekday: 'short'},
+			dayHeaderAriaLabelFormat: {weekday: 'long'},
 			displayEventEnd: false,
@@ -2344,0 +2408,0 @@ duration: {months: 1},

package.json

 {
   "name": "@event-calendar/day-grid",
-  "version": "2.4.1",
+  "version": "2.5.0",
   "title": "Event Calendar DayGrid plugin",
@@ -29,5 +29,5 @@ "description": "Full-sized drag & drop event calendar with resource view",
   "dependencies": {
-    "@event-calendar/core": "~2.4.1",
-    "svelte": "^4.1.1"
+    "@event-calendar/core": "~2.5.0",
+    "svelte": "^4.2.8"
   }
 }

README.md

@@ -200,4 +200,4 @@ # Event Calendar [![](https://data.jsdelivr.com/v1/package/npm/@event-calendar/build/badge)](https://www.jsdelivr.com/package/npm/@event-calendar/build) [![npm](https://img.shields.io/npm/dm/@event-calendar/core?color=red&label=npm&style=flat-square)](https://www.npmjs.com/package/@event-calendar/core)
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.4.1/event-calendar.min.css">
-<script src="https://cdn.jsdelivr.net/npm/@event-calendar/build@2.4.1/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>
 ```
@@ -482,2 +482,27 @@
 
+### 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
@@ -2227,9 +2252,2 @@ - Type `object` or `function`
 
-<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()
@@ -2306,3 +2324,3 @@ - Return value `undefined`
 
-The text appearing on the event. See [Content](#content)</td>
+`Content` The text appearing on the event. See [Content](#content)</td>
 </tr>
@@ -2597,10 +2615,6 @@ <tr>
 </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>
@@ -2645,3 +2659,3 @@ <tr>
 
-`string` Text that will be displayed on the resource when it is rendered. Default `''`
+`Content` Text that will be displayed on the resource when it is rendered. See [Content](#content). Default `''`
 </td>
@@ -2652,12 +2666,2 @@ </tr>
 
-`titleHTML`
-</td>
-<td>
-
-`string` The HTML version of the title to be displayed instead of the text version. Default `''`
-</td>
-</tr>
-<tr>
-<td>
-
 `eventBackgroundColor`
@@ -2664,0 +2668,0 @@ </td>

src/index.js

@@ -23,2 +23,3 @@ import {writable} from 'svelte/store';
 			dayHeaderFormat: {weekday: 'short'},
+			dayHeaderAriaLabelFormat: {weekday: 'long'},
 			displayEventEnd: false,
@@ -25,0 +26,0 @@ duration: {months: 1},

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

145963

increased by2.34%

Lines of code

2121

increased by2.76%

Number of lines in readme file

2749

increased by0.15%

Dependency changes

• + Added@event-calendar/core@2.5.1(transitive)

• - Removed@event-calendar/core@2.4.1(transitive)

• Updated@event-calendar/core@~2.5.0

• Updatedsvelte@^4.2.8