@schukai/monster 5.1.2 → 5.2.0

package/source/components/time/month-calendar.mjs

@@ -11,25 +11,17 @@
  */
 
 import { instanceSymbol } from "../../constants.mjs";
-import { addAttributeToken } from "../../dom/attributes.mjs";
 import {
 	ATTRIBUTE_ERRORMESSAGE,
 	ATTRIBUTE_ROLE,
 } from "../../dom/constants.mjs";
-import { CustomControl } from "../../dom/customcontrol.mjs";
-import {
-	CustomElement,
-	getSlottedElements,
-	initMethodSymbol,
-} from "../../dom/customelement.mjs";
+import { CustomElement, initMethodSymbol } from "../../dom/customelement.mjs";
 import {
 	assembleMethodSymbol,
 	registerCustomElement,
 } from "../../dom/customelement.mjs";
 import { findTargetElementFromEvent } from "../../dom/events.mjs";
-import { isFunction, isString } from "../../types/is.mjs";
-
-import { fireCustomEvent } from "../../dom/events.mjs";
+import { isString } from "../../types/is.mjs";
 import { getLocaleOfDocument } from "../../dom/locale.mjs";
 import { addErrorAttribute, removeErrorAttribute } from "../../dom/error.mjs";
 import { MonthCalendarStyleSheet } from "./stylesheet/month-calendar.mjs";
@@ -43,7 +35,7 @@ import { Datasource } from "../datatable/datasource.mjs";
 import { Observer } from "../../types/observer.mjs";
 import { positionPopper } from "../form/util/floating-ui.mjs";
 import { Segment as AppointmentSegment } from "./timeline/segment.mjs";
-import { Appointment as AppointmentAppointment } from "./timeline/appointment.mjs";
+import "./timeline/appointment.mjs";
 
 export { MonthCalendar };
 
@@ -66,6 +58,11 @@ const lastValidDateSymbol = Symbol("lastValidDate");
 const calendarDateInvalidSymbol = Symbol("calendarDateInvalid");
 const appointmentObserverSymbol = Symbol("appointmentObserver");
 const boundDaysSymbol = Symbol("boundDays");
+const appointmentMoveHandlersBoundSymbol = Symbol(
+	"appointmentMoveHandlersBound",
+);
+const appointmentMoveSymbol = Symbol("appointmentMove");
+const pointerCandidateSymbol = Symbol("pointerCandidate");
 
 /**
  * A Calendar
@@ -77,6 +74,7 @@ const boundDaysSymbol = Symbol("boundDays");
  * @since 3.112.0
  * @copyright Volker Schukai
  * @summary A month calendar for appointments and date-based planning, with optional datasource-driven event loading.
+ * @fires monster-appointment-move - Cancelable before the local data option is updated. Detail contains the original and moved appointment, stable id/index, source and target dates, day delta and input type.
  */
 class MonthCalendar extends CustomElement {
 	/**
@@ -135,6 +133,7 @@ class MonthCalendar extends CustomElement {
 	 * @property {Object} features Features for the control
 	 * @property {boolean} features.showWeekend Show the weekend
 	 * @property {boolean} features.monthOneLine Show the month in one line
+	 * @property {boolean} features.appointmentMove Allow appointments to be moved by drag and drop or keyboard
 	 * @property {Object} actions Actions for the control
 	 * @property {Object} locale Locale for the control
 	 * @property {string} locale.weekdayFormat Weekday format
@@ -156,13 +155,14 @@ class MonthCalendar extends CustomElement {
 			templates: {
 				main: getTemplate(),
 			},
-			labels: getTranslations(),
+			labels: Object.assign(getTranslations(), getMoveTranslations()),
 			classes: {},
 
 			disabled: false,
 			features: {
 				showWeekend: true,
 				monthOneLine: false,
+				appointmentMove: false,
 			},
 
 			actions: {},
@@ -306,6 +306,36 @@ function getTranslations() {
 	}
 }
 
+/**
+ * @private
+ * @return {object}
+ */
+function getMoveTranslations() {
+	const locale = getLocaleOfDocument();
+	if (locale.language === "de") {
+		return {
+			moveAppointment: "Termin verschieben: {label}",
+			moveInstructions:
+				"Leertaste zum Aufnehmen, Pfeiltasten zum Verschieben, Eingabetaste zum Ablegen und Escape zum Abbrechen.",
+			movePicked: "{label} aufgenommen. Zieldatum {date}.",
+			moveTarget: "Zieldatum {date}.",
+			moveCommitted: "{label} wurde auf {date} verschoben.",
+			moveCancelled: "Verschieben von {label} abgebrochen.",
+			moveInvalid: "Der Termin kann nicht auf {date} verschoben werden.",
+		};
+	}
+	return {
+		moveAppointment: "Move appointment: {label}",
+		moveInstructions:
+			"Press Space to pick up, use the arrow keys to move, press Enter to drop, or Escape to cancel.",
+		movePicked: "Picked up {label}. Target date {date}.",
+		moveTarget: "Target date {date}.",
+		moveCommitted: "Moved {label} to {date}.",
+		moveCancelled: "Cancelled moving {label}.",
+		moveInvalid: "The appointment cannot be moved to {date}.",
+	};
+}
+
 /**
  * Splits an appointment across the visible calendar rows.
  * Weekend dates are naturally omitted when the calendar contains weekdays only.
@@ -380,42 +410,50 @@ function getWeekdays(format = "long") {
  * @return {Array} The segments with assigned "line" property
  */
 function assignLinesToSegments(segments, columnCount = 7) {
-	const groups = {};
+	const groups = new Map();
 	segments.forEach((segment) => {
 		const week = Math.floor(segment.startIndex / columnCount);
-		if (!groups[week]) {
-			groups[week] = [];
-		}
-		groups[week].push(segment);
+		if (!groups.has(week)) groups.set(week, []);
+		groups.get(week).push(segment);
 	});
 
-	Object.keys(groups).forEach((weekKey) => {
-		const weekSegments = groups[weekKey];
-
-		weekSegments.sort((a, b) => a.startIndex - b.startIndex);
-
-		const lineEnds = [];
+	const preferredLines = new Map();
+	const chronologicalWeeks = [...groups.entries()].sort(
+		([weekA], [weekB]) => weekA - weekB,
+	);
+	for (const [, weekSegments] of chronologicalWeeks) {
+		weekSegments.sort(
+			(a, b) =>
+				a.startIndex - b.startIndex ||
+				b.columns - a.columns ||
+				a.appointmentIndex - b.appointmentIndex,
+		);
 
-		weekSegments.forEach((segment) => {
+		const lines = [];
+		for (const segment of weekSegments) {
 			const segStart = segment.startIndex;
 			const segEnd = segment.startIndex + segment.columns - 1;
-			let placed = false;
-
-			for (let line = 0; line < lineEnds.length; line++) {
-				if (segStart >= lineEnds[line] + 1) {
-					segment.line = line;
-					lineEnds[line] = segEnd;
-					placed = true;
-					break;
-				}
+			const preferred = preferredLines.get(segment.appointmentIndex);
+			const candidates = [];
+			if (Number.isInteger(preferred)) candidates.push(preferred);
+			for (let line = 0; line <= lines.length; line++) {
+				if (!candidates.includes(line)) candidates.push(line);
 			}
 
-			if (!placed) {
-				segment.line = lineEnds.length;
-				lineEnds.push(segEnd);
+			for (const line of candidates) {
+				const occupied = lines[line] || [];
+				const overlaps = occupied.some(
+					(range) => segStart <= range.end && segEnd >= range.start,
+				);
+				if (overlaps) continue;
+				segment.line = line;
+				occupied.push({ start: segStart, end: segEnd });
+				lines[line] = occupied;
+				preferredLines.set(segment.appointmentIndex, line);
+				break;
 			}
-		});
-	});
+		}
+	}
 
 	return segments;
 }
@@ -505,7 +543,7 @@ function placeAppointments() {
 		day.appointments = app[k];
 	});
 
-	appointments.forEach((appointment) => {
+	appointments.forEach((appointment, appointmentIndex) => {
 		if (!appointment?.startDate || !appointment?.endDate) {
 			addErrorAttribute(this, "Missing start or end date in appointment");
 			return;
@@ -553,6 +591,7 @@ function placeAppointments() {
 				...segment,
 				label: label,
 				appointment: appointment,
+				appointmentIndex,
 			});
 
 			maxLineHeight = Math.max(maxLineHeight, getTextHeight.call(this, label));
@@ -599,7 +638,7 @@ function placeAppointments() {
 			containerHeight - maxLineHeight - marginAppointmentContainer;
 		let linesThatCanBeShown = Math.floor(availableHeight / maxLineHeight);
 
-		if (segment.line > linesThatCanBeShown) {
+		if (segment.line >= linesThatCanBeShown) {
 			daysWithMoreAppointments.add(segment.start);
 
 			const calendarDays = this.getOption("calendarDays");
@@ -650,6 +689,7 @@ function placeAppointments() {
 		appointmentSegment.style.top = `${segment.line * maxLineHeight + h.maxHeaderHeight}px`;
 
 		appointmentSegment.setOption("labels.text", segment.label);
+		configureAppointmentSegment.call(this, appointmentSegment, segment);
 
 		container.appendChild(appointmentSegment);
 	}
@@ -703,6 +743,7 @@ function placeAppointments() {
 			appointmentSegment.style.height = maxLineHeight + "px";
 
 			appointmentSegment.setOption("labels.text", appointment.label);
+			configureAppointmentSegment.call(this, appointmentSegment, appointment);
 
 			moreAppointmentsContainer.appendChild(appointmentSegment);
 		}
@@ -971,12 +1012,478 @@ function getAppointmentsPerDay(appointments, start, end) {
 	return appointmentsMap;
 }
 
+function formatMoveLabel(template, values) {
+	let value = String(template || "");
+	for (const [key, replacement] of Object.entries(values)) {
+		value = value.replaceAll(`{${key}}`, String(replacement));
+	}
+	return value;
+}
+
+function formatCalendarDay(value) {
+	const date = parseCalendarDate(value);
+	if (date === null) return "";
+	return (
+		date.getFullYear() +
+		"-" +
+		("00" + (date.getMonth() + 1)).slice(-2) +
+		"-" +
+		("00" + date.getDate()).slice(-2)
+	);
+}
+
+function isAppointmentMoveEnabled() {
+	return (
+		this.getOption("features.appointmentMove") === true &&
+		this.getOption("disabled") !== true
+	);
+}
+
+function configureAppointmentSegment(element, segment) {
+	const enabled = isAppointmentMoveEnabled.call(this);
+	const label = segment.label || "Appointment";
+	element.setAttribute("data-monster-role", "appointment-segment");
+	element.setAttribute(
+		"data-monster-appointment-index",
+		String(segment.appointmentIndex),
+	);
+	element.setAttribute("data-monster-segment-start", segment.start);
+	if (!enabled) return;
+
+	element.draggable = true;
+	element.tabIndex = 0;
+	element.setAttribute("role", "button");
+	element.setAttribute(
+		"aria-keyshortcuts",
+		"Space Enter ArrowLeft ArrowRight ArrowUp ArrowDown Escape",
+	);
+	const moveLabel = formatMoveLabel(this.getOption("labels.moveAppointment"), {
+		label,
+	});
+	element.setAttribute(
+		"aria-label",
+		`${moveLabel}. ${this.getOption("labels.moveInstructions")}`,
+	);
+}
+
+function getAppointmentSegmentFromEvent(event) {
+	return findTargetElementFromEvent(event, "data-monster-appointment-index");
+}
+
+function getCalendarDayByKey(dayKey) {
+	return this.getOption("calendarDays").find((day) => day.day === dayKey);
+}
+
+function getCalendarDayAtPoint(clientX, clientY, event) {
+	const cells = this[calendarBodyElementSymbol]?.querySelector(
+		'[data-monster-role="cells"]',
+	);
+	if (cells instanceof HTMLElement) {
+		const rect = cells.getBoundingClientRect();
+		const columns = this.getOption("features.showWeekend") === false ? 5 : 7;
+		const days = this.getOption("calendarDays");
+		const rows = Math.ceil(days.length / columns);
+		if (
+			rect.width > 0 &&
+			rect.height > 0 &&
+			clientX >= rect.left &&
+			clientX <= rect.right &&
+			clientY >= rect.top &&
+			clientY <= rect.bottom
+		) {
+			const column = Math.min(
+				columns - 1,
+				Math.floor((clientX - rect.left) / (rect.width / columns)),
+			);
+			const row = Math.min(
+				rows - 1,
+				Math.floor((clientY - rect.top) / (rect.height / rows)),
+			);
+			return days[row * columns + column];
+		}
+	}
+
+	if (event) {
+		const cell = findTargetElementFromEvent(
+			event,
+			"data-monster-role",
+			"day-cell",
+		);
+		if (cell) return getCalendarDayByKey.call(this, cell.dataset.monsterDay);
+	}
+	return undefined;
+}
+
+function announceAppointmentMove(message) {
+	const status = this.shadowRoot.querySelector(
+		'[data-monster-role="move-status"]',
+	);
+	if (status) status.textContent = message;
+}
+
+function clearAppointmentMove() {
+	this.shadowRoot
+		.querySelectorAll("[data-monster-drop-target]")
+		.forEach((element) => {
+			element.removeAttribute("data-monster-drop-target");
+		});
+	this.shadowRoot
+		.querySelectorAll("[data-monster-dragging]")
+		.forEach((element) => {
+			element.removeAttribute("data-monster-dragging");
+		});
+	delete this[appointmentMoveSymbol];
+	delete this[pointerCandidateSymbol];
+}
+
+function setAppointmentMoveTarget(day) {
+	const move = this[appointmentMoveSymbol];
+	if (!move || !day) return;
+	this.shadowRoot
+		.querySelectorAll("[data-monster-drop-target]")
+		.forEach((element) => {
+			element.removeAttribute("data-monster-drop-target");
+		});
+	const cell = this.shadowRoot.querySelector(
+		`[data-monster-role="day-cell"][data-monster-day="${day.day}"]`,
+	);
+	cell?.setAttribute("data-monster-drop-target", "true");
+	move.targetDay = day.day;
+	announceAppointmentMove.call(
+		this,
+		formatMoveLabel(this.getOption("labels.moveTarget"), { date: day.day }),
+	);
+}
+
+function beginAppointmentMove(segment, anchorDay, inputType) {
+	if (!isAppointmentMoveEnabled.call(this) || !segment || !anchorDay)
+		return false;
+	const appointmentIndex = Number(
+		segment.getAttribute("data-monster-appointment-index"),
+	);
+	const appointment = this.getOption("data")[appointmentIndex];
+	if (!appointment) return false;
+
+	const label =
+		appointment.label || segment.getOption?.("labels.text") || "Appointment";
+	this[appointmentMoveSymbol] = {
+		appointmentIndex,
+		anchorDay: anchorDay.day,
+		targetDay: anchorDay.day,
+		inputType,
+		label,
+	};
+	this.shadowRoot
+		.querySelectorAll(`[data-monster-appointment-index="${appointmentIndex}"]`)
+		.forEach((element) => {
+			element.setAttribute("data-monster-dragging", "true");
+		});
+	setAppointmentMoveTarget.call(this, anchorDay);
+	announceAppointmentMove.call(
+		this,
+		formatMoveLabel(this.getOption("labels.movePicked"), {
+			label,
+			date: anchorDay.day,
+		}),
+	);
+	return true;
+}
+
+function getCalendarDayDelta(fromValue, toValue) {
+	const from = parseCalendarDate(fromValue);
+	const to = parseCalendarDate(toValue);
+	if (from === null || to === null) return null;
+	const fromUTC = Date.UTC(from.getFullYear(), from.getMonth(), from.getDate());
+	const toUTC = Date.UTC(to.getFullYear(), to.getMonth(), to.getDate());
+	return Math.round((toUTC - fromUTC) / 86400000);
+}
+
+function shiftAppointmentDate(value, dayDelta) {
+	const date = parseCalendarDate(value);
+	if (date === null) return null;
+	date.setDate(date.getDate() + dayDelta);
+	return value instanceof Date ? date : formatCalendarDay(date);
+}
+
+function completeAppointmentMove(inputType) {
+	const move = this[appointmentMoveSymbol];
+	if (!move) return false;
+	const appointments = this.getOption("data");
+	const appointment = appointments[move.appointmentIndex];
+	const dayDelta = getCalendarDayDelta(move.anchorDay, move.targetDay);
+	if (!appointment || dayDelta === null) {
+		clearAppointmentMove.call(this);
+		return false;
+	}
+
+	if (dayDelta === 0) {
+		clearAppointmentMove.call(this);
+		return true;
+	}
+
+	const startDate = shiftAppointmentDate(appointment.startDate, dayDelta);
+	const endDate = shiftAppointmentDate(appointment.endDate, dayDelta);
+	const calendarDays = this.getOption("calendarDays");
+	const firstDay = calendarDays[0]?.date;
+	const lastDay = calendarDays.at(-1)?.date;
+	const movedStart = parseCalendarDate(startDate);
+	const movedEnd = parseCalendarDate(endDate);
+	if (
+		movedStart === null ||
+		movedEnd === null ||
+		!firstDay ||
+		!lastDay ||
+		movedStart < firstDay ||
+		movedEnd > lastDay
+	) {
+		announceAppointmentMove.call(
+			this,
+			formatMoveLabel(this.getOption("labels.moveInvalid"), {
+				date: move.targetDay,
+			}),
+		);
+		clearAppointmentMove.call(this);
+		return false;
+	}
+
+	const movedAppointment = { ...appointment, startDate, endDate };
+	const detail = {
+		appointment,
+		movedAppointment,
+		appointmentId: appointment.id ?? null,
+		appointmentIndex: move.appointmentIndex,
+		dayDelta,
+		inputType: inputType || move.inputType,
+		source: {
+			anchorDate: move.anchorDay,
+			startDate: appointment.startDate,
+			endDate: appointment.endDate,
+		},
+		target: {
+			anchorDate: move.targetDay,
+			startDate,
+			endDate,
+		},
+	};
+	const accepted = this.dispatchEvent(
+		new CustomEvent("monster-appointment-move", {
+			bubbles: true,
+			cancelable: true,
+			composed: true,
+			detail,
+		}),
+	);
+	if (!accepted) {
+		announceAppointmentMove.call(
+			this,
+			formatMoveLabel(this.getOption("labels.moveCancelled"), {
+				label: move.label,
+			}),
+		);
+		clearAppointmentMove.call(this);
+		return false;
+	}
+
+	const nextAppointments = appointments.map((value, index) =>
+		index === move.appointmentIndex ? movedAppointment : value,
+	);
+	const focusIndex = move.appointmentIndex;
+	const label = move.label;
+	const targetDay = move.targetDay;
+	clearAppointmentMove.call(this);
+	this.setOption("data", nextAppointments);
+	announceAppointmentMove.call(
+		this,
+		formatMoveLabel(this.getOption("labels.moveCommitted"), {
+			label,
+			date: targetDay,
+		}),
+	);
+	setTimeout(() => {
+		this.shadowRoot
+			.querySelector(`[data-monster-appointment-index="${focusIndex}"]`)
+			?.focus();
+	}, 0);
+	return true;
+}
+
+function initAppointmentMoveHandlers() {
+	if (this[appointmentMoveHandlersBoundSymbol]) return;
+	this[appointmentMoveHandlersBoundSymbol] = true;
+	const calendar = this[calendarElementSymbol];
+
+	calendar.addEventListener("pointerdown", (event) => {
+		const segment = getAppointmentSegmentFromEvent(event);
+		if (!isAppointmentMoveEnabled.call(this) || !segment) return;
+		const anchorDay =
+			getCalendarDayAtPoint.call(this, event.clientX, event.clientY, event) ||
+			getCalendarDayByKey.call(
+				this,
+				segment.getAttribute("data-monster-segment-start"),
+			);
+		this[pointerCandidateSymbol] = {
+			segment,
+			anchorDay,
+			pointerId: event.pointerId,
+			pointerType: event.pointerType,
+			startX: event.clientX,
+			startY: event.clientY,
+		};
+	});
+
+	calendar.addEventListener("pointermove", (event) => {
+		const candidate = this[pointerCandidateSymbol];
+		if (
+			!candidate ||
+			candidate.pointerType === "mouse" ||
+			candidate.pointerId !== event.pointerId
+		)
+			return;
+		if (!this[appointmentMoveSymbol]) {
+			const distance = Math.hypot(
+				event.clientX - candidate.startX,
+				event.clientY - candidate.startY,
+			);
+			if (distance < 8) return;
+			if (
+				!beginAppointmentMove.call(
+					this,
+					candidate.segment,
+					candidate.anchorDay,
+					"pointer",
+				)
+			)
+				return;
+			try {
+				candidate.segment.setPointerCapture?.(event.pointerId);
+			} catch (error) {
+				if (error?.name !== "NotFoundError") throw error;
+			}
+		}
+		event.preventDefault();
+		const target = getCalendarDayAtPoint.call(
+			this,
+			event.clientX,
+			event.clientY,
+			event,
+		);
+		if (target) setAppointmentMoveTarget.call(this, target);
+	});
+
+	calendar.addEventListener("pointerup", (event) => {
+		const candidate = this[pointerCandidateSymbol];
+		if (!candidate || candidate.pointerId !== event.pointerId) return;
+		if (this[appointmentMoveSymbol]?.inputType === "pointer")
+			completeAppointmentMove.call(this, "pointer");
+		else delete this[pointerCandidateSymbol];
+	});
+
+	calendar.addEventListener("pointercancel", () => {
+		clearAppointmentMove.call(this);
+	});
+
+	calendar.addEventListener("dragstart", (event) => {
+		const segment = getAppointmentSegmentFromEvent(event);
+		if (!isAppointmentMoveEnabled.call(this) || !segment) return;
+		const candidate = this[pointerCandidateSymbol];
+		const anchorDay =
+			(candidate?.segment === segment && candidate.anchorDay) ||
+			getCalendarDayByKey.call(
+				this,
+				segment.getAttribute("data-monster-segment-start"),
+			);
+		if (!beginAppointmentMove.call(this, segment, anchorDay, "drag")) return;
+		event.dataTransfer?.setData(
+			"text/plain",
+			segment.getAttribute("data-monster-appointment-index"),
+		);
+		if (event.dataTransfer) event.dataTransfer.effectAllowed = "move";
+	});
+
+	calendar.addEventListener("dragover", (event) => {
+		if (this[appointmentMoveSymbol]?.inputType !== "drag") return;
+		const target = getCalendarDayAtPoint.call(
+			this,
+			event.clientX,
+			event.clientY,
+			event,
+		);
+		if (!target) return;
+		event.preventDefault();
+		if (event.dataTransfer) event.dataTransfer.dropEffect = "move";
+		setAppointmentMoveTarget.call(this, target);
+	});
+
+	calendar.addEventListener("drop", (event) => {
+		if (this[appointmentMoveSymbol]?.inputType !== "drag") return;
+		event.preventDefault();
+		completeAppointmentMove.call(this, "drag");
+	});
+
+	calendar.addEventListener("dragend", () => {
+		if (this[appointmentMoveSymbol]?.inputType === "drag")
+			clearAppointmentMove.call(this);
+	});
+
+	calendar.addEventListener("keydown", (event) => {
+		const segment = getAppointmentSegmentFromEvent(event);
+		if (!isAppointmentMoveEnabled.call(this) || !segment) return;
+		const move = this[appointmentMoveSymbol];
+		if (!move) {
+			if (event.key !== " " && event.key !== "Enter") return;
+			event.preventDefault();
+			const anchorDay = getCalendarDayByKey.call(
+				this,
+				segment.getAttribute("data-monster-segment-start"),
+			);
+			beginAppointmentMove.call(this, segment, anchorDay, "keyboard");
+			return;
+		}
+		if (
+			move.inputType !== "keyboard" ||
+			Number(segment.getAttribute("data-monster-appointment-index")) !==
+				move.appointmentIndex
+		)
+			return;
+
+		if (event.key === "Escape") {
+			event.preventDefault();
+			announceAppointmentMove.call(
+				this,
+				formatMoveLabel(this.getOption("labels.moveCancelled"), {
+					label: move.label,
+				}),
+			);
+			clearAppointmentMove.call(this);
+			return;
+		}
+		if (event.key === " " || event.key === "Enter") {
+			event.preventDefault();
+			completeAppointmentMove.call(this, "keyboard");
+			return;
+		}
+		const columns = this.getOption("features.showWeekend") === false ? 5 : 7;
+		const offsets = {
+			ArrowLeft: -1,
+			ArrowRight: 1,
+			ArrowUp: -columns,
+			ArrowDown: columns,
+		};
+		if (!(event.key in offsets)) return;
+		event.preventDefault();
+		const days = this.getOption("calendarDays");
+		const currentIndex = days.findIndex((day) => day.day === move.targetDay);
+		const target = days[currentIndex + offsets[event.key]];
+		if (target) setAppointmentMoveTarget.call(this, target);
+	});
+}
+
 /**
  * @private
  * @return {initEventHandler}
  */
 function initEventHandler() {
-	const self = this;
+	initAppointmentMoveHandlers.call(this);
 
 	setTimeout(() => {
 		if (!this[appointmentObserverSymbol]) {
@@ -1071,7 +1578,8 @@ function getTextHeight(text) {
 	div.textContent = text;
 
 	this.shadowRoot.appendChild(div);
-	const height = div.clientHeight;
+	const height =
+		div.clientHeight || parseFloat(getComputedStyle(div).lineHeight) || 16;
 	this.shadowRoot.removeChild(div);
 
 	return height;
@@ -1133,6 +1641,9 @@ function getTemplate() {
                     <div data-monster-role="cells" data-monster-insert="cell path:calendarDays"></div>
                 </div>
             </div>
+            <div class="visually-hidden" data-monster-role="move-status"
+                 role="status" aria-live="polite" aria-atomic="true"></div>
+        </div>
     `;
 }