@openui5/sap.m 1.126.1 → 1.128.0

package/src/sap/m/SinglePlanningCalendar.js

@@ -111,7 +111,7 @@ function(
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.126.1
+	 * @version 1.128.0
 	 *
 	 * @constructor
 	 * @public
@@ -294,7 +294,20 @@ function(
 						aggregation: "appointments"
 					}
 				},
-
+				/**
+				 * Sets the provided period to be displayed as a non-working.
+				 *
+				 * <b>Note:</b> The visualization of non-working periods is present in all views that include hours representation.
+				 * @since 1.128
+				 */
+				nonWorkingPeriods: {
+					type: "sap.ui.unified.NonWorkingPeriod",
+					multiple: true,
+					forwarding: {
+						getter: "_getCurrentGrid",
+						aggregation: "nonWorkingPeriods"
+					}
+				},
 				/**
 				 * Views of the <code>SinglePlanningCalendar</code>.
 				 *

package/src/sap/m/SinglePlanningCalendarDayView.js

@@ -25,7 +25,7 @@ function (library, SinglePlanningCalendarView) {
 	 * @extends sap.m.SinglePlanningCalendarView
 	 *
 	 * @author SAP SE
-	 * @version 1.126.1
+	 * @version 1.128.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/SinglePlanningCalendarGrid.js

@@ -115,7 +115,7 @@ sap.ui.define([
 		 * @extends sap.ui.core.Control
 		 *
 		 * @author SAP SE
-		 * @version 1.126.1
+		 * @version 1.128.0
 		 *
 		 * @constructor
 		 * @private
@@ -254,6 +254,12 @@ sap.ui.define([
 					 */
 					specialDates : {type : "sap.ui.unified.DateTypeRange", multiple : true, singularName : "specialDate"},
 
+					/**
+					 * Sets the provided period to be displayed as a non-working.
+					 * @since 1.128
+					 */
+					nonWorkingPeriods: {type: "sap.ui.unified.NonWorkingPeriod", multiple: true},
+
 					/**
 					 * Hidden, for internal use only.
 					 * The date row which shows the header of the columns in the <code>SinglePlanningCalendarGrid</code>.
@@ -1290,6 +1296,17 @@ sap.ui.define([
 			}
 		};
 
+		SinglePlanningCalendarGrid.prototype._findGridHeaderCell = function (oEvent) {
+			const oGridCell = oEvent.target;
+			const oColumnGridHeaderCell = oGridCell.classList.contains("sapUiCalItem") ? oGridCell : oGridCell.parentElement;
+
+			if (!oColumnGridHeaderCell?.getAttribute("data-sap-day") || !oColumnGridHeaderCell.classList.contains("sapUiCalItem")) {
+				return null;
+			}
+
+			return oColumnGridHeaderCell;
+		};
+
 		SinglePlanningCalendarGrid.prototype.onmouseup = function (oEvent) {
 			var bMultiDateSelection = SinglePlanningCalendarSelectionMode.MultiSelect === this.getDateSelectionMode();
 			if (!bMultiDateSelection && !(oEvent.metaKey || oEvent.ctrlKey)) {
@@ -1309,15 +1326,23 @@ sap.ui.define([
 		 * @param {jQuery.Event} oEvent The event object.
 		 */
 		SinglePlanningCalendarGrid.prototype.onkeyup = function(oEvent) {
-			var bMultiDateSelection = SinglePlanningCalendarSelectionMode.MultiSelect === this.getDateSelectionMode();
-			if ((oEvent.which === KeyCodes.ARROW_LEFT || oEvent.which === KeyCodes.ARROW_RIGHT) && oEvent.shiftKey && bMultiDateSelection) {
+			if (!this._findGridHeaderCell(oEvent)){
+				return;
+			}
+
+			const bMultiDateSelection = SinglePlanningCalendarSelectionMode.MultiSelect === this.getDateSelectionMode();
+			const bArrowNavigation = oEvent.which === KeyCodes.ARROW_LEFT || oEvent.which === KeyCodes.ARROW_RIGHT;
+			const bSpaceOrEnter = oEvent.which === KeyCodes.SPACE || oEvent.which === KeyCodes.ENTER;
+
+			if (bArrowNavigation && oEvent.shiftKey && bMultiDateSelection) {
 				this._bMultiDateSelectWithArrow = true;
 			} else if (oEvent.which === KeyCodes.SPACE && !oEvent.shiftKey && bMultiDateSelection) {
 				this._bMultiDateSelect = true;
-			} else if ((oEvent.which === KeyCodes.SPACE || oEvent.which === KeyCodes.ENTER) && !oEvent.shiftKey) {
+			} else if (bSpaceOrEnter && !oEvent.shiftKey) {
 				this.removeAllSelectedDates();
 				this._bMultiDateSelect = true;
 			}
+
 			this._fireSelectionEvent(oEvent);
 			// Prevent scrolling
 			oEvent.preventDefault();
@@ -1329,9 +1354,10 @@ sap.ui.define([
 		 * @param {jQuery.Event} oEvent The event object.
 		 */
 		SinglePlanningCalendarGrid.prototype.onkeydown = function (oEvent) {
-			var bMultiDateSelection = SinglePlanningCalendarSelectionMode.MultiSelect === this.getDateSelectionMode();
-			if (oEvent.which === KeyCodes.SPACE || oEvent.which === KeyCodes.ENTER ||
-				oEvent.which === KeyCodes.ARROW_LEFT || oEvent.which === KeyCodes.ARROW_RIGHT) {
+			const bMultiDateSelection = SinglePlanningCalendarSelectionMode.MultiSelect === this.getDateSelectionMode();
+			const bSpaceOrEnter = oEvent.which === KeyCodes.SPACE || oEvent.which === KeyCodes.ENTER;
+
+			if (bSpaceOrEnter) {
 				if (oEvent.which === KeyCodes.SPACE && oEvent.shiftKey && bMultiDateSelection) {
 					this._bCurrentWeekSelection = true;
 				}
@@ -1339,9 +1365,8 @@ sap.ui.define([
 				this._fireSelectionEvent(oEvent);
 
 				var oControl = this._findSrcControl(oEvent);
-				if (oControl && oControl.isA("sap.ui.unified.CalendarAppointment")) {
-					var sBundleKey = oControl.getSelected() ? "APPOINTMENT_SELECTED" : "APPOINTMENT_UNSELECTED";
-					this._oInvisibleMessage.announce(this._oUnifiedRB.getText(sBundleKey), InvisibleMessageMode.Polite);
+				if (oControl && oControl.isA("sap.ui.unified.CalendarAppointment") && !oControl.getSelected()) {
+					this._oInvisibleMessage.announce(this._oUnifiedRB.getText("APPOINTMENT_UNSELECTED"), InvisibleMessageMode.Polite);
 				}
 
 				// Prevent scrolling
@@ -1375,6 +1400,9 @@ sap.ui.define([
 		 * @param {jQuery.Event} oEvent The event object.
 		 */
 		SinglePlanningCalendarGrid.prototype._fireSelectionEvent = function (oEvent) {
+			const oColumnGridHeaderCell = this._findGridHeaderCell(oEvent);
+			const bArrowNavigation = oEvent.which === KeyCodes.ARROW_LEFT || oEvent.which === KeyCodes.ARROW_RIGHT;
+
 			var oControl = this._findSrcControl(oEvent),
 				oGridCell = oEvent.target;
 
@@ -1390,7 +1418,7 @@ sap.ui.define([
 					appointment: undefined,
 					appointments: this._toggleAppointmentSelection(undefined, true)
 				});
-			} else if (oControl && oControl.isA("sap.ui.unified.CalendarAppointment")) {
+			} else if (oControl && oControl.isA("sap.ui.unified.CalendarAppointment") && !oColumnGridHeaderCell && !bArrowNavigation) {
 
 				// add suffix in appointment
 				if (oGridCell.parentElement && oGridCell.parentElement.getAttribute("id")) {
@@ -1408,17 +1436,7 @@ sap.ui.define([
 					appointment: oControl,
 					appointments: this._toggleAppointmentSelection(oControl, !(oEvent.ctrlKey || oEvent.metaKey))
 				});
-			} else {
-				var oColumnGridHeaderCell;
-				if (!oGridCell.classList.contains("sapUiCalItem")){
-					oColumnGridHeaderCell = oGridCell.parentElement;
-				} else {
-					oColumnGridHeaderCell = oGridCell;
-				}
-
-				if (!oColumnGridHeaderCell.getAttribute("data-sap-day")) {
-					return;
-				}
+			} else if (oColumnGridHeaderCell?.getAttribute("data-sap-day")) {
 				var oStartDateFromGrid = this._oFormatYyyymmdd.parse(oColumnGridHeaderCell.getAttribute("data-sap-day"));
 				var oStartDate = new CalendarDate(oStartDateFromGrid.getFullYear(),oStartDateFromGrid.getMonth(), oStartDateFromGrid.getDate());
 				this._handelMultiDateSelection(oStartDate, oColumnGridHeaderCell);
@@ -1484,7 +1502,7 @@ sap.ui.define([
 
 			for (var i = 0; i < aSelectedDates.length; i++){
 				var oSelectStartDate = aSelectedDates[i].getStartDate();
-				if (CalendarDate.fromLocalJSDate(oSelectStartDate).isSame(CalendarDate.fromLocalJSDate(oStartDate))) {
+				if (CalendarDate.fromLocalJSDate(oSelectStartDate).isSame(oStartDate)) {
 					this.removeAggregation("selectedDates", i);
 					break;
 				}
@@ -1522,6 +1540,44 @@ sap.ui.define([
 			return false;
 		};
 
+		/**
+		 * Checks whether there are appointments related to a given grid cell
+		 * @param {Date} oStart The start date date of the grid cell
+		 * @param {Date} oEnd The end date of the grid cell
+		 * @returns {boolean} Indicator if there are appointments related to a given grid cell
+		 */
+		SinglePlanningCalendarGrid.prototype._doesContainAppointments = function(oStart, oEnd) {
+			const oStartDate = UI5Date.getInstance(oStart);
+			const oEndDate = UI5Date.getInstance(oEnd);
+			return this.getAppointments().some((oAppointment) => {
+				const oAppStartDate = UI5Date.getInstance(oAppointment.getStartDate());
+				const oAppEndDate = UI5Date.getInstance(oAppointment.getEndDate());
+				return oAppStartDate.getTime() >= oStartDate.getTime() && oAppStartDate.getTime() < oEndDate.getTime()
+					|| oAppEndDate.getTime() > oStartDate.getTime() &&  oAppEndDate.getTime() <= oEndDate.getTime();
+			});
+		};
+
+		/**
+		 * Checks whether there are appointments related to a given grid cell
+		 * @param {sap.ui.unified.calendar.CalendarDate} oDay The date of the grid cell
+		 * @returns {boolean} Indicator if there are appointments realted to the grid cell
+		 */
+		SinglePlanningCalendarGrid.prototype._doesContainBlockers = function(oDay) {
+			return this.getAppointments().some((oAppointment) => {
+				if (oAppointment.getStartDate() && oAppointment.getEndDate()) {
+					const oStartDate = CalendarDate.fromLocalJSDate(oAppointment.getStartDate());
+					const oEndDate = CalendarDate.fromLocalJSDate(oAppointment.getEndDate());
+
+					return oDay.isSameOrAfter(oStartDate) && oDay.isBefore(oEndDate);
+				}
+				return false;
+			});
+		};
+
+		SinglePlanningCalendarGrid.prototype._getCellDescription = function () {
+			return Core.getLibraryResourceBundle("sap.m").getText("SPC_CELL_DESCRIPTION");
+		};
+
 		/**
 		 * Determines which is the first visible hour of the grid.
 		 *
@@ -2288,9 +2344,9 @@ sap.ui.define([
 				bFullDay = !oEndDate;
 
 			if (bFullDay) {
-				return sStartTime + ": " + this._oFormatAriaFullDayCell.format(oStartDate) + "; ";
+				return sStartTime + ": " + this._oFormatAriaFullDayCell.format(oStartDate);
 			}
-			return sStartTime + ": " + this._oFormatStartEndInfoAria.format(oStartDate) + "; " + sEndTime + ": " + this._oFormatStartEndInfoAria.format(oEndDate);
+			return sStartTime + ": " + this._oFormatStartEndInfoAria.format(oStartDate) + ", " + sEndTime + ": " + this._oFormatStartEndInfoAria.format(oEndDate);
 		};
 
 		/**

package/src/sap/m/SinglePlanningCalendarGridRenderer.js

@@ -5,7 +5,7 @@
  */
 
 sap.ui.define([
-	"sap/base/i18n/Localization",
+	'sap/base/i18n/Localization',
 	"sap/ui/core/Element",
 	'sap/ui/unified/calendar/CalendarDate',
 	'sap/ui/unified/calendar/CalendarUtils',
@@ -14,7 +14,8 @@ sap.ui.define([
 	'sap/ui/core/InvisibleText',
 	'./PlanningCalendarLegend',
 	'sap/ui/unified/library',
-	"sap/ui/core/date/UI5Date"
+	'sap/ui/unified/calendar/RecurrenceUtils',
+	'sap/ui/core/date/UI5Date'
 ],
 	function(
 		Localization,
@@ -26,6 +27,7 @@ sap.ui.define([
 		InvisibleText,
 		PlanningCalendarLegend,
 		unifiedLibrary,
+		RecurrenceUtils,
 		UI5Date
 	) {
 		"use strict";
@@ -58,7 +60,6 @@ sap.ui.define([
 			oRm.renderControl(oControl.getAggregation("_columnHeaders"));
 			this.renderBlockersContainer(oRm, oControl);
 			oRm.openStart("div");
-			oRm.attr("role", "grid");
 			oRm.class("sapMSinglePCGridContent");
 			oRm.openEnd();
 			this.renderRowHeaders(oRm, oControl);
@@ -139,6 +140,9 @@ sap.ui.define([
 				if (oControl._sLegendId && sLegendItemType) {
 					oRm.text(sLegendItemType);
 				}
+				if (oControl._doesContainBlockers(oColumnCalDate)) {
+					oRm.text(oControl._getCellDescription());
+				}
 				oRm.close("span");
 
 				oRm.close("div"); // END .sapMSinglePCColumn
@@ -176,6 +180,10 @@ sap.ui.define([
 			var that = this,
 				oBlockersList = oControl._getBlockersToRender().oBlockersList;
 
+			oRm.openStart("div");
+			oRm.attr("role", "gridcell");
+			oRm.openEnd();
+
 			oRm.openStart("div");
 			oRm.attr("role", "list");
 			oRm.attr("aria-labelledby", InvisibleText.getStaticId("sap.m", "SPC_BLOCKERS"));
@@ -187,6 +195,8 @@ sap.ui.define([
 				that.renderBlockerAppointment(oRm, oControl, oBlocker);
 			});
 			oRm.close("div"); // END .sapMSinglePCBlockers
+
+			oRm.close("div");
 		};
 
 		SinglePlanningCalendarGridRenderer.renderBlockerAppointment = function(oRm, oControl, oBlockerNode) {
@@ -242,7 +252,10 @@ sap.ui.define([
 			}
 
 			if (oBlocker.getSelected()) {
-				mAccProps["labelledby"].value = mAccProps["labelledby"].value + " " + InvisibleText.getStaticId("sap.ui.unified", "APPOINTMENT_SELECTED");
+				mAccProps["describedby"] = {
+					value: InvisibleText.getStaticId("sap.ui.unified", "APPOINTMENT_SELECTED"),
+					append: true
+				};
 			}
 
 			oRm.openStart("div", oBlocker);
@@ -293,7 +306,7 @@ sap.ui.define([
 			oRm.openStart("div");
 			oRm.class("sapUiCalendarAppCont");
 
-			if (sColor) {
+			if (sColor && !oBlocker.getSelected()) {
 				oRm.style("background-color", oBlocker._getCSSColorForBackground(sColor));
 			}
 
@@ -416,7 +429,7 @@ sap.ui.define([
 
 				this.renderDndPlaceholders(oRm, oControl, oControl._dndPlaceholdersMap[oColumnCalDate]);
 
-				this.renderRows(oRm, oControl, sDate);
+				this.renderRows(oRm, oControl, sDate, oColumnCalDate);
 				this.renderAppointments(oRm, oControl, oAppointmentsToRender[sDate], oColumnCalDate, i);
 				oRm.close("div"); // END .sapMSinglePCColumn
 			}
@@ -432,16 +445,29 @@ sap.ui.define([
 			oRm.close("div");
 		};
 
-		SinglePlanningCalendarGridRenderer.renderRows = function (oRm, oControl, sDate) {
-			var iStartHour = oControl._getVisibleStartHour(),
-				iEndHour = oControl._getVisibleEndHour(),
-				oFormat = oControl._getDateFormatter(),
-				oCellStartDate,
-				oCellEndDate;
+		SinglePlanningCalendarGridRenderer.renderRows = function (oRm, oControl, sDate, oColumnCalDate) {
+			const iStartHour = oControl._getVisibleStartHour();
+			const iEndHour = oControl._getVisibleEndHour();
+			const oFormat = oControl._getDateFormatter();
+			const oDate = oControl._parseDateStringAndHours(sDate, 0);
+			const aRecurrenceNonWorkingForDay = oControl._isNonWorkingDay(oColumnCalDate) ? [] : oControl.getNonWorkingPeriods().filter((oPeriod) => {
+				if (!oPeriod.isRecurring()) {
+					return oPeriod.getStartDate() >= oDate && oPeriod.getEndDate() <= oDate;
+				}
+				const hasOccurrenceOnDate = RecurrenceUtils.hasOccurrenceOnDate.bind(oPeriod);
+				return hasOccurrenceOnDate(oDate);
+			}).sort((oCalendarItemA, oCalendarItemB) => {
+				return  oCalendarItemA.getStartDate().getMinutes() - oCalendarItemB.getStartDate().getMinutes() ||
+				oCalendarItemA.getEndDate().getMinutes() - oCalendarItemB.getEndDate().getMinutes();
+			});
 
-			for (var i = iStartHour; i <= iEndHour; i++) {
-				oCellStartDate = oControl._parseDateStringAndHours(sDate, i);
-				oCellEndDate = UI5Date.getInstance(oCellStartDate.getFullYear(), oCellStartDate.getMonth(), oCellStartDate.getDate(), oCellStartDate.getHours() + 1);
+			for (let i = iStartHour; i <= iEndHour; i++) {
+				const oCellStartDate = oControl._parseDateStringAndHours(sDate, i);
+				const oCellEndDate = UI5Date.getInstance(oCellStartDate.getFullYear(), oCellStartDate.getMonth(), oCellStartDate.getDate(), oCellStartDate.getHours() + 1);
+
+				const aNonWorkingPartsForHour = aRecurrenceNonWorkingForDay.filter((oCalendarItem) => {
+					return oCalendarItem.hasNonWorkingAtHour(oCellStartDate);
+				});
 
 				oRm.openStart("div");
 				oRm.attr("role", "gridcell");
@@ -461,8 +487,25 @@ sap.ui.define([
 				oRm.class("sapUiInvisibleText");
 				oRm.openEnd();
 				oRm.text(oControl._getCellStartEndInfo(oCellStartDate, oCellEndDate));
+
+				if (oControl._doesContainAppointments(oCellStartDate, oCellEndDate)) {
+					oRm.text(oControl._getCellDescription());
+				}
 				oRm.close("span");
 
+				if (!aNonWorkingPartsForHour?.length) {
+					oRm.close("div"); // END .sapMSinglePCRow
+					continue;
+				}
+
+				RecurrenceUtils.getWorkingAndNonWorkingSegments(oCellStartDate, aNonWorkingPartsForHour).forEach((oHourParts) => {
+					if (oHourParts.type === "working") {
+						this.renderWorkingParts(oRm, oHourParts.duration);
+					} else {
+						this.renderNonWorkingParts(oRm, oHourParts.duration);
+					}
+				});
+
 				oRm.close("div"); // END .sapMSinglePCRow
 			}
 		};
@@ -472,12 +515,17 @@ sap.ui.define([
 				iIndex = 0;
 
 			if (oAppointmentsByDate) {
+				oRm.openStart("div");
+				oRm.attr("role", "gridcell");
+				oRm.openEnd();
+
 				oRm.openStart("div");
 				oRm.attr("role", "list");
 				oRm.class("sapMSinglePCAppointments");
 				oRm.class("sapUiCalendarRowVisFilled"); // TODO: when refactor the CSS of appointments maybe we won't need this class
 
 				oRm.openEnd();
+
 				oAppointmentsByDate.oAppointmentsList.getIterator().forEach(function (oAppointmentNode) {
 					var iMaxLevel = oAppointmentsByDate.iMaxLevel,
 						iLevel = oAppointmentNode.level,
@@ -488,6 +536,7 @@ sap.ui.define([
 					iIndex++;
 				});
 				oRm.close("div");
+				oRm.close("div");
 			}
 		};
 
@@ -561,7 +610,10 @@ sap.ui.define([
 			}
 
 			if (oAppointment.getSelected()) {
-				mAccProps["labelledby"].value = mAccProps["labelledby"].value + " " + InvisibleText.getStaticId("sap.ui.unified", "APPOINTMENT_SELECTED");
+				mAccProps["describedby"] = {
+					value: InvisibleText.getStaticId("sap.ui.unified", "APPOINTMENT_SELECTED"),
+					append: true
+				};
 			}
 
 			oRm.openStart("div", oAppointment.getId() + "-" + iColumn + "_" + iIndex);
@@ -616,7 +668,7 @@ sap.ui.define([
 			oRm.openStart("div");
 			oRm.class("sapUiCalendarAppCont");
 
-			if (sColor) {
+			if (sColor && !oAppointment.getSelected()) {
 				oRm.style("background-color", oAppointment._getCSSColorForBackground(sColor));
 			}
 
@@ -762,6 +814,25 @@ sap.ui.define([
 			}
 		};
 
+		SinglePlanningCalendarGridRenderer.renderWorkingParts = function (oRm, iDuration){
+			const iHeight = iDuration / 60 * 100;
+
+			oRm.openStart("div");
+			oRm.style("height",`${iHeight}%`);
+			oRm.openEnd();
+			oRm.close("div");
+		};
+
+		SinglePlanningCalendarGridRenderer.renderNonWorkingParts = function (oRm, iDuration){
+			const iHeight = iDuration / 60 * 100;
+
+			oRm.openStart("div");
+			oRm.class("sapMSinglePCNonWorkingPeriod");
+			oRm.style("height",`${iHeight}%`);
+			oRm.openEnd();
+			oRm.close("div");
+		};
+
 		return SinglePlanningCalendarGridRenderer;
 
 	}, true /* bExport */);

package/src/sap/m/SinglePlanningCalendarMonthGrid.js

@@ -95,7 +95,7 @@ sap.ui.define([
 		 * @extends sap.ui.core.Control
 		 *
 		 * @author SAP SE
-		 * @version 1.126.1
+		 * @version 1.128.0
 		 *
 		 * @constructor
 		 * @private
@@ -444,6 +444,27 @@ sap.ui.define([
 			return false;
 		};
 
+		/**
+		 * Checks whether there are appointments related to a given grid cell
+		 * @param {sap.ui.unified.calendar.CalendarDate} oDay The date of the grid cell
+		 * @returns {boolean} Indicator if there are appointments realted to the grid cell
+		 */
+		SinglePlanningCalendarMonthGrid.prototype._doesContainAppointments = function(oDay) {
+			return this.getAppointments().some((oAppointment) => {
+				if (oAppointment.getStartDate() && oAppointment.getEndDate()) {
+					const oStartDate = CalendarDate.fromLocalJSDate(oAppointment.getStartDate());
+					const oEndDate = CalendarDate.fromLocalJSDate(oAppointment.getEndDate());
+
+					return oDay.isSameOrAfter(oStartDate) && oDay.isBefore(oEndDate);
+				}
+				return false;
+			});
+		};
+
+		SinglePlanningCalendarMonthGrid.prototype._getCellDescription = function () {
+			return Core.getLibraryResourceBundle("sap.m").getText("SPC_CELL_DESCRIPTION");
+		};
+
 		SinglePlanningCalendarMonthGrid.prototype.onAfterRendering = function() {
 			this._initItemNavigation();
 			this._aMoreCountPerDay.fill(0);
@@ -520,7 +541,7 @@ sap.ui.define([
 				return;
 			}
 
-			const oFirstSiblingElement = oEvent.originalEvent.target.nextSibling.children[0];
+			const oFirstSiblingElement = oEvent.target.nextSibling.querySelectorAll(".sapMSPCMonthDay")[0];
 			const iIndex =  this._aGridCells.indexOf(oFirstSiblingElement);
 			this._oItemNavigation.focusItem(iIndex);
 		};
@@ -578,14 +599,52 @@ sap.ui.define([
 				}
 
 				var oControl = this._findSrcControl(oEvent);
-				if (oControl && oControl.isA("sap.ui.unified.CalendarAppointment")) {
-					var sBundleKey = oControl.getSelected() ? "APPOINTMENT_SELECTED" : "APPOINTMENT_UNSELECTED";
-					this._oInvisibleMessage.announce(this._oUnifiedRB.getText(sBundleKey), InvisibleMessageMode.Polite);
+				if (oControl && oControl.isA("sap.ui.unified.CalendarAppointment") && !oControl.getSelected()) {
+					this._oInvisibleMessage.announce(this._oUnifiedRB.getText("APPOINTMENT_UNSELECTED"), InvisibleMessageMode.Polite);
 				}
 
 				// Prevent scrolling
 				oEvent.preventDefault();
 			}
+
+			if (oEvent.which !== KeyCodes.TAB) {
+				return;
+			}
+
+			if (oEvent.target.classList.contains("sapMSPCMonthDay")) {
+				const parentContainer = oEvent.target.parentElement;
+				const aAppointments = parentContainer.querySelectorAll(".sapUiCalendarRowApps");
+				if (aAppointments.length) {
+					oEvent.preventDefault();
+					aAppointments[0].focus();
+				}
+			} else if (oEvent.shiftKey && oEvent.target.classList.contains("sapMLnk")) {
+				const parentContainer = oEvent.target.parentElement.parentElement.parentElement;
+				const aLinks = parentContainer.querySelectorAll(".sapMSPCMonthLnkMore");
+				const oFirstLink = aLinks[0].querySelector(".sapMLnk");
+
+				if (oFirstLink.id === oEvent.target.id) {
+					const aAppointments = parentContainer.querySelectorAll(".sapUiCalendarRowApps");
+					if (aAppointments.length) {
+						const oLastApp = aAppointments[aAppointments.length - 1];
+						oEvent.preventDefault();
+						oLastApp.focus();
+					}
+				}
+			} else if (!oEvent.shiftKey && oEvent.target.classList.contains("sapUiCalendarRowApps")) {
+				const parentContainer = oEvent.target.parentElement;
+				const aAppointments = parentContainer.children;
+				if (aAppointments.length) {
+					const oLastApp = aAppointments[aAppointments.length - 1];
+					if (oLastApp.id === oEvent.target.id) {
+						const oMoreLink = parentContainer.parentElement.querySelector(".sapMSPCMonthLnkMore > .sapMLnk");
+						if (oMoreLink) {
+							oEvent.preventDefault();
+							oMoreLink.focus();
+						}
+					}
+				}
+			}
 		};
 
 		SinglePlanningCalendarMonthGrid.prototype._isSelectAppointment = function (oEvent) {
@@ -755,7 +814,9 @@ sap.ui.define([
 		SinglePlanningCalendarMonthGrid.prototype._fireGridCellSelectionEvent = function (oEvent, bWeekNumberSelect){
 			const iExtraDayCount = 6;
 			const iSingleDay = 1;
-			const oSelectedCell = bWeekNumberSelect ? oEvent.originalEvent.target.nextSibling.children[0] : this._findSelectCell(oEvent.target);
+			const oSelectedCell = bWeekNumberSelect
+				? oEvent.target.nextSibling.querySelectorAll(".sapMSPCMonthDay")[0]
+				: this._findSelectCell(oEvent.target);
 			const iNextDays = bWeekNumberSelect ? iExtraDayCount : iSingleDay;
 			const iTimestamp = parseInt(oSelectedCell.getAttribute("sap-ui-date"));
 			let oStartDate = UI5Date.getInstance(iTimestamp);
@@ -1345,7 +1406,7 @@ sap.ui.define([
 				.getLibraryResourceBundle("sap.ui.unified")
 				.getText("CALENDAR_START_TIME");
 
-				return sStartTime + ": " + this._oFormatAriaFullDayCell.format(oStartDate) + "; ";
+				return sStartTime + ": " + this._oFormatAriaFullDayCell.format(oStartDate);
 		};
 
 		SinglePlanningCalendarMonthGrid.prototype._getAppointmentAnnouncementInfo = function(oAppointment) {

package/src/sap/m/SinglePlanningCalendarMonthGridRenderer.js

@@ -122,11 +122,9 @@ sap.ui.define([
 				oRm.attr("role", "row");
 				oRm.openEnd();
 
-				for (j = 0; j < iColumns; j++) {
-					iCellIndex = i * iColumns + j;
-					oDay = aCells[iCellIndex];
-					this.renderDay(oRm, oControl, oDay, oLocaleData, aMoreCountPerCell[iCellIndex], iCellIndex);
-				}
+				oRm.openStart("div");
+				oRm.attr("role", "gridcell" );
+				oRm.openEnd();
 
 				oRm.openStart("div");
 				oRm.class("sapMSinglePCBlockers");
@@ -147,6 +145,13 @@ sap.ui.define([
 				}
 
 				oRm.close("div"); // end appointments
+				oRm.close("div");
+
+				for (j = 0; j < iColumns; j++) {
+					iCellIndex = i * iColumns + j;
+					oDay = aCells[iCellIndex];
+					this.renderDay(oRm, oControl, oDay, oLocaleData, aMoreCountPerCell[iCellIndex], iCellIndex);
+				}
 				oRm.close("div"); // end cells
 				oRm.close("div"); // end grid
 			}
@@ -238,6 +243,9 @@ sap.ui.define([
 			if (oControl._sLegendId && sLegendItemType) {
 				oRm.text(sLegendItemType);
 			}
+			if (oControl._doesContainAppointments(oDay)) {
+				oRm.text(oControl._getCellDescription());
+			}
 			oRm.close("span");
 
 			if (bToday) {
@@ -375,7 +383,10 @@ sap.ui.define([
 			}
 
 			if (oAppointment.getSelected()) {
-				mAccProps["labelledby"].value = mAccProps["labelledby"].value + " " + InvisibleText.getStaticId("sap.ui.unified", "APPOINTMENT_SELECTED");
+				mAccProps["describedby"] = {
+					value: InvisibleText.getStaticId("sap.ui.unified", "APPOINTMENT_SELECTED"),
+					append: true
+				};
 			}
 
 			oRm.openStart("div", oAppointment.getId() + "-" + iColumn + "_" + iRow);
@@ -428,7 +439,7 @@ sap.ui.define([
 			oRm.openStart("div");
 			oRm.class("sapUiCalendarAppCont");
 
-			if (sColor) {
+			if (sColor && !oAppointment.getSelected()) {
 				oRm.style("background-color", oAppointment._getCSSColorForBackground(sColor));
 			}
 
@@ -514,7 +525,6 @@ sap.ui.define([
 				oFirstRenderedDate.setDate(oFirstRenderedDate.getDate() + 1);
 
 				oRm.accessibilityState(null, {
-					role: "columnheader",
 					label: aWeekDaysWide[iDayIndex]
 				});
 				oRm.openEnd();

package/src/sap/m/SinglePlanningCalendarMonthView.js

@@ -28,7 +28,7 @@ sap.ui.define([
 		 * @extends sap.m.SinglePlanningCalendarView
 		 *
 		 * @author SAP SE
-		 * @version 1.126.1
+		 * @version 1.128.0
 		 *
 		 * @constructor
 		 * @public

package/src/sap/m/SinglePlanningCalendarView.js

@@ -26,7 +26,7 @@ function (library, Log, Element) {
 	 * @extends sap.ui.core.Element
 	 *
 	 * @author SAP SE
-	 * @version 1.126.1
+	 * @version 1.128.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/SinglePlanningCalendarWeekView.js

@@ -31,7 +31,7 @@ function (library, SinglePlanningCalendarView, Formatting, LocaleData, CalendarD
 	 * @extends sap.m.SinglePlanningCalendarView
 	 *
 	 * @author SAP SE
-	 * @version 1.126.1
+	 * @version 1.128.0
 	 *
 	 * @constructor
 	 * @public