@openui5/sap.m 1.96.5 → 1.99.0

package/src/sap/m/SinglePlanningCalendarGrid.js

@@ -53,15 +53,15 @@ sap.ui.define([
 	) {
 		"use strict";
 
-		var ROW_HEIGHT_COZY = 69,
-			ROW_HEIGHT_COMPACT = 48,
-			BLOCKER_ROW_HEIGHT_COZY = 34,
-			BLOCKER_ROW_HEIGHT_COMPACT = 25,
+		var ROW_HEIGHT_COZY = 4.3125, // Unit in rem, equals 69px with default font size
+			ROW_HEIGHT_COMPACT = 3, // Unit in rem, equals 48px with default font size
+			BLOCKER_ROW_HEIGHT_COZY = 2.125, // Unit in rem, equals 34px with default font size
+			BLOCKER_ROW_HEIGHT_COMPACT = 1.5625, // Unit in rem, equals 25px with default font size
 			HALF_HOUR_MS = 3600000 / 2,
 			ONE_MIN_MS = 60 * 1000,
 			// Day view only - indicates the special dates
 			// 3px height the marker itself + 2x2px on its top and bottom both on cozy & compact
-			DAY_MARKER_HEIGHT_PX = 7,
+			DAY_MARKER_HEIGHT = 0.4375, // Unit in rem, equals 7px with default font size
 			FIRST_HOUR_OF_DAY = 0,
 			LAST_HOUR_OF_DAY = 24;
 
@@ -96,7 +96,7 @@ sap.ui.define([
 		 * @extends sap.ui.core.Control
 		 *
 		 * @author SAP SE
-		 * @version 1.96.5
+		 * @version 1.99.0
 		 *
 		 * @constructor
 		 * @private
@@ -167,7 +167,15 @@ sap.ui.define([
 					 *
 					 * @since 1.65
 					 */
-					enableAppointmentsCreate: { type: "boolean", group: "Misc", defaultValue: false }
+					enableAppointmentsCreate: { type: "boolean", group: "Misc", defaultValue: false },
+
+					/**
+					 * Determines scale factor for the appointments.
+					 *
+					 * Acceptable range is from 1 to 6.
+					 * @since 1.99
+					 */
+					scaleFactor: {type: "float", group: "Data", defaultValue: 1}
 				},
 				aggregations: {
 
@@ -348,10 +356,10 @@ sap.ui.define([
 
 			this._oUnifiedRB = sap.ui.getCore().getLibraryResourceBundle("sap.ui.unified");
 			this._oFormatStartEndInfoAria = DateFormat.getDateTimeInstance({
-				pattern: "EEEE dd/MM/YYYY 'at' " + sTimePattern
+				pattern: "EEEE dd/MM/yyyy 'at' " + sTimePattern
 			});
 			this._oFormatAriaFullDayCell = DateFormat.getDateTimeInstance({
-				pattern: "EEEE dd/MM/YYYY"
+				pattern: "EEEE dd/MM/yyyy"
 			});
 
 			//the id of the SPC's legend if any
@@ -852,9 +860,9 @@ sap.ui.define([
 			};
 		};
 
-		SinglePlanningCalendarGrid.prototype._adjustAppointmentsHeightforCompact = function (sDate, oColumnStartDateAndHour, oColumnEndDateAndHour) {
+		SinglePlanningCalendarGrid.prototype._adjustAppointmentsHeightforCompact = function (sDate, oColumnStartDateAndHour, oColumnEndDateAndHour, iColumn) {
 			var oAppointment,
-				$appointment,
+				oAppDomRef,
 				oAppStartDate,
 				oAppEndDate,
 				iAppTop,
@@ -862,25 +870,25 @@ sap.ui.define([
 				bAppStartIsOutsideVisibleStartHour,
 				bAppEndIsOutsideVisibleEndHour,
 				iRowHeight = this._getRowHeight(),
-				that = this;
+				iRow = 0;
 
 			if (this._oAppointmentsToRender[sDate]) {
 				this._oAppointmentsToRender[sDate].oAppointmentsList.getIterator().forEach(function(oAppNode) {
 					oAppointment = oAppNode.getData();
-					$appointment = jQuery("div[data-sap-day='" + sDate + "'].sapMSinglePCColumn #" + oAppointment.getId());
+					oAppDomRef = this.getDomRef().querySelector("#" + oAppointment.getId() + "-" + iColumn + "_" + iRow);
 					oAppStartDate = oAppointment.getStartDate();
 					oAppEndDate = oAppointment.getEndDate();
 					bAppStartIsOutsideVisibleStartHour = oColumnStartDateAndHour.getTime() > oAppStartDate.getTime();
 					bAppEndIsOutsideVisibleEndHour = oColumnEndDateAndHour.getTime() < oAppEndDate.getTime();
 
-					iAppTop = bAppStartIsOutsideVisibleStartHour ? 0 : that._calculateTopPosition(oAppStartDate);
-					iAppBottom = bAppEndIsOutsideVisibleEndHour ? 0 : that._calculateBottomPosition(oAppEndDate);
+					iAppTop = bAppStartIsOutsideVisibleStartHour ? 0 : this._calculateTopPosition(oAppStartDate);
+					iAppBottom = bAppEndIsOutsideVisibleEndHour ? 0 : this._calculateBottomPosition(oAppEndDate);
 
-					$appointment.css("top", iAppTop);
-					$appointment.css("bottom", iAppBottom);
-					$appointment.find(".sapUiCalendarApp")
-								.css("min-height", iRowHeight / 2 - 3);
-				});
+					oAppDomRef.style["top"] = iAppTop + "rem";
+					oAppDomRef.style["bottom"] = iAppBottom  + "rem";
+					oAppDomRef.querySelector(".sapUiCalendarApp").style["minHeight"] = (iRowHeight / 2 - 0.1875) + "rem";
+					++iRow;
+				}.bind(this));
 			}
 		};
 
@@ -888,16 +896,16 @@ sap.ui.define([
 			var iMaxLevel = this._getBlockersToRender().iMaxlevel,
 				iContainerHeight = (iMaxLevel + 1) * this._getBlockerRowHeight(),
 				// Day view has bigger height because of the day marker for special days
-				iRecalculatedContHeight = this._getColumns() === 1 ? iContainerHeight + DAY_MARKER_HEIGHT_PX : iContainerHeight,
+				iRecalculatedContHeight = this._getColumns() === 1 ? iContainerHeight + DAY_MARKER_HEIGHT : iContainerHeight,
 				iBlockerRowHeight = this._getBlockerRowHeight();
 
-			if (iMaxLevel > 0) { // hackie thing to calculate the container witdth. When we have more than 1 line of blockers - we must add 3 px in order to render the blockers visually in the container.
-				iRecalculatedContHeight = iRecalculatedContHeight + 3;
+			if (iMaxLevel > 0) { // hackie thing to calculate the container witdth. When we have more than 1 line of blockers - we must add 0.1875rem in order to render the blockers visually in the container.
+				iRecalculatedContHeight = iRecalculatedContHeight + 0.1875;
 			}
-			this.$().find(".sapMSinglePCBlockersColumns").css("height", iRecalculatedContHeight);
+			this.$().find(".sapMSinglePCBlockersColumns").css("height", iRecalculatedContHeight + "rem");
 
-			this._oBlockersToRender.oBlockersList.getIterator().forEach(function(oBlokcerNode) {
-				oBlokcerNode.getData().$().css("top", iBlockerRowHeight * oBlokcerNode.level + 1);
+			this._oBlockersToRender.oBlockersList.getIterator().forEach(function(oBlockerNode) {
+				oBlockerNode.getData().$().css("top", (iBlockerRowHeight * oBlockerNode.level + 0.0625) + "rem");
 			});
 		};
 
@@ -910,7 +918,7 @@ sap.ui.define([
 
 			if (this._getColumns() === 1) {
 				iContainerHeight = (iMaxLevel + 1) * this._getBlockerRowHeight();
-				this.$().find(".sapMSinglePCBlockersColumns").css("height", iContainerHeight + DAY_MARKER_HEIGHT_PX);
+				this.$().find(".sapMSinglePCBlockersColumns").css("height", (iContainerHeight + DAY_MARKER_HEIGHT) + "rem");
 			}
 		};
 
@@ -925,7 +933,7 @@ sap.ui.define([
 						sDate = this._getDateFormatter().format(oColumnCalDate.toLocalJSDate()),
 						oColumnStartDateAndHour = new UniversalDate(oColumnCalDate.getYear(), oColumnCalDate.getMonth(), oColumnCalDate.getDate(), this._getVisibleStartHour()),
 						oColumnEndDateAndHour = new UniversalDate(oColumnCalDate.getYear(), oColumnCalDate.getMonth(), oColumnCalDate.getDate(), this._getVisibleEndHour(), 59, 59);
-					this._adjustAppointmentsHeightforCompact(sDate, oColumnStartDateAndHour, oColumnEndDateAndHour);
+					this._adjustAppointmentsHeightforCompact(sDate, oColumnStartDateAndHour, oColumnEndDateAndHour, i);
 				}
 				this._adjustBlockersHeightforCompact();
 			} else {
@@ -1108,11 +1116,11 @@ sap.ui.define([
 
 		/**
 		 * Checking when an arrow key is pressed from the keyboard weather the cell focus should go in
-		 * the next or preveous day or week
+		 * the next or previous day or week
 		 *
-		 * @param {sap.ui.unified.CalendarDate} oCellStartDate The start date the cell or the visible part of the appointment
+		 * @param {Date} oFocusedElement The start date of the focused cell or of the visible part of the appointment
 		 * @param {int} iDirection The key the was pressed
-		 * @returns {boolean} Idicator if the gird border is reached
+		 * @returns {boolean} Indicator if the gird border is reached
 		 * @private
 		 */
 		SinglePlanningCalendarGrid.prototype._isBorderReached = function(oFocusedElement, iDirection) {
@@ -1129,7 +1137,7 @@ sap.ui.define([
 		 * Ensures that the focus is moved from an appointment to the correct cell from the visible grid area or
 		 * borderReached event is fired when the correct cell to focus is outside of the visible grid area.
 		 *
-		 * @param {object} oEvent The event object that is passed to the onsapup, onsapdown, onsapright, on sapleft handlers
+		 * @param {sap.ui.unified.CalendarAppointment} oAppointment Appointment from which to start navigation
 		 * @param {int} iDirection Number representing the key code of the pressed arrow from the keyboard
 		 * @private
 		 */
@@ -1207,15 +1215,15 @@ sap.ui.define([
 		SinglePlanningCalendarGrid.prototype._findSrcControl = function (oEvent) {
 			// data-sap-ui-related - This is a relation to appointment object.
 			// This is the connection between the DOM Element and the Object representing an appointment.
-			var $targetElement = oEvent.target,
-				$targetsParentElement = $targetElement.parentElement,
+			var oTargetElement = oEvent.target,
+				oTargetsParentElement = oTargetElement.parentElement,
 				sAppointmentId;
-			if (!$targetsParentElement) {
+			if (!oTargetsParentElement) {
 				return oEvent.srcControl;
-			} else if ($targetsParentElement.classList.contains("sapUiCalendarRowApps")) {
-				sAppointmentId = $targetsParentElement.getAttribute("data-sap-ui-related");
+			} else if (oTargetsParentElement.classList.contains("sapUiCalendarRowApps")) {
+				sAppointmentId = oTargetsParentElement.getAttribute("data-sap-ui-related") || oTargetsParentElement.id;
 			} else {
-				sAppointmentId = $targetElement.getAttribute("data-sap-ui-related");
+				sAppointmentId = oTargetElement.getAttribute("data-sap-ui-related") || oTargetElement.id;
 			}
 
 			// finding the appointment
@@ -1329,8 +1337,8 @@ sap.ui.define([
 		 * Takes a string date and integer hour and returns a JS Date object as a result.
 		 * Example: this._parseDateStringAndHours("20180614-0000", 4) -> Thu Jun 14 2018 04:00:00 GMT+0300 (Eastern European Summer Time)
 		 *
-		 * @param {string} iRow the row to be checked
-		 * @param {int} iRow the row to be checked
+		 * @param {string} sDay the date string to parse
+		 * @param {int} iHours the hours to be set
 		 * @returns {Date} The parsed JavaScript date object.
 		 * @private
 		 */
@@ -1346,7 +1354,7 @@ sap.ui.define([
 
 		SinglePlanningCalendarGrid.prototype._getDateFormatter = function () {
 			if (!(this._oDateFormat instanceof DateFormat)) {
-				this._oDateFormat = DateFormat.getDateTimeInstance({ pattern: "YYYYMMdd-HHmm" });
+				this._oDateFormat = DateFormat.getDateTimeInstance({ pattern: "yyyyMMdd-HHmm" });
 			}
 			return this._oDateFormat;
 		};
@@ -1390,7 +1398,7 @@ sap.ui.define([
 				iMinutes = oDate.getMinutes(),
 				iRowHeight = this._getRowHeight();
 
-			return Math.floor((iRowHeight * iHour) + (iRowHeight / 60) * iMinutes);
+			return (iRowHeight * iHour) + (iRowHeight / 60) * iMinutes;
 		};
 
 		/**
@@ -1405,7 +1413,7 @@ sap.ui.define([
 				iMinutes = oDate.getMinutes(),
 				iRowHeight = this._getRowHeight();
 
-			return Math.floor((iRowHeight * iHour) - (iRowHeight / 60) * iMinutes);
+			return (iRowHeight * iHour) - (iRowHeight / 60) * iMinutes;
 		};
 
 		/**
@@ -1435,7 +1443,7 @@ sap.ui.define([
 				bCurrentHourNotVisible = !this._isVisibleHour(oDate.getHours());
 
 			$nowMarker.toggleClass("sapMSinglePCNowMarkerHidden", bCurrentHourNotVisible);
-			$nowMarker.css("top", this._calculateTopPosition(oDate) + "px");
+			$nowMarker.css("top", this._calculateTopPosition(oDate) + "rem");
 			$nowMarkerText.text(this._formatTimeAsString(oDate));
 			$nowMarkerAMPM.text(this._addAMPM(oDate));
 			$nowMarkerText.append($nowMarkerAMPM);
@@ -1565,6 +1573,7 @@ sap.ui.define([
 		 * @private
 		 */
 		SinglePlanningCalendarGrid.prototype._calculateAppointmentsLevelsAndWidth = function (oVisibleAppointments) {
+			var iDuration = HALF_HOUR_MS - ((this.getScaleFactor() - 1) * 5 * 60 * 1000); // min step is 5min (5 * 60 * 1000)
 			var that = this;
 
 			return Object.keys(oVisibleAppointments).reduce(function (oAcc, sDate) {
@@ -1588,10 +1597,10 @@ sap.ui.define([
 							iAppointmentEnd = oAppointment.getEndDate().getTime(),
 							iAppointmentDuration = iAppointmentEnd - iAppointmentStart;
 
-						if (iAppointmentDuration < HALF_HOUR_MS) {
+						if (iAppointmentDuration < iDuration) {
 							// Take into account that appointments smaller than one hour will be rendered as one hour
 							// in height. That's why the calculation for levels should consider this too.
-							iAppointmentEnd = iAppointmentEnd + (HALF_HOUR_MS - iAppointmentDuration);
+							iAppointmentEnd = iAppointmentEnd + (iDuration - iAppointmentDuration);
 						}
 
 						if (iCurrentAppointmentStart >= iAppointmentStart && iCurrentAppointmentStart < iAppointmentEnd) {
@@ -1848,7 +1857,7 @@ sap.ui.define([
 		 * @private
 		 */
 		SinglePlanningCalendarGrid.prototype._getRowHeight = function () {
-			return this._isCompact() ? ROW_HEIGHT_COMPACT : ROW_HEIGHT_COZY;
+			return this._isCompact() ? ROW_HEIGHT_COMPACT * this.getScaleFactor() :  ROW_HEIGHT_COZY * this.getScaleFactor();
 		};
 
 		/**

package/src/sap/m/SinglePlanningCalendarGridRenderer.js

@@ -23,9 +23,9 @@ sap.ui.define([
 		unifiedLibrary) {
 		"use strict";
 
-		var iVerticalPaddingBetweenAppointments = 2;
-		var iAppointmentBottomPadding = 2;
-		var iAppointmentTopPadding = 1;
+		var iVerticalPaddingBetweenAppointments = 0.125;
+		var iAppointmentBottomPadding = 0.125;
+		var iAppointmentTopPadding = 0.0625;
 
 		// shortcut for sap.ui.unified.CalendarDayType
 		var CalendarDayType = unifiedLibrary.CalendarDayType;
@@ -42,7 +42,7 @@ sap.ui.define([
 		 * Renders the HTML for the given control, using the provided {@link sap.ui.core.RenderManager}.
 		 *
 		 * @param {sap.ui.core.RenderManager} oRm The RenderManager that can be used for writing to the render output buffer
-		 * @param {sap.ui.core.Control} oControl An object representation of the control that should be rendered
+		 * @param {sap.m.SinglePlanningCalendarGrid} oControl An object representation of the control that should be rendered
 		 */
 		SinglePlanningCalendarGridRenderer.render = function (oRm, oControl) {
 			oRm.openStart("div", oControl);
@@ -65,8 +65,8 @@ sap.ui.define([
 			var iColumns = oControl._getColumns(),
 				iMaxLevel = oControl._getBlockersToRender().iMaxlevel,
 				oStartDate = oControl.getStartDate(),
-				// hackie thing to calculate the container width. When we have more than 1 line of blockers - we must add 3 px in order to render the blockers visually in the container.
-				iContainerHeight = (iMaxLevel + 1) * oControl._getBlockerRowHeight() + 3,
+				// hackie thing to calculate the container width. When we have more than 1 line of blockers - we must add 0.1875rem in order to render the blockers visually in the container.
+				iContainerHeight = (iMaxLevel + 1) * oControl._getBlockerRowHeight() + 0.1875,
 				oFormat = oControl._getDateFormatter(),
 				aSpecialDates = oControl._getSpecialDates(),
 				oCalendarDate = CalendarDate.fromLocalJSDate(oStartDate),
@@ -95,7 +95,7 @@ sap.ui.define([
 				oRm.class("sapMSpecialDaysInDayView");
 			}
 
-			oRm.style("height", iContainerHeight + "px");
+			oRm.style("height", iContainerHeight + "rem");
 			oRm.openEnd();
 
 			this.renderDndPlaceholders(oRm, oControl, oControl.getAggregation("_blockersPlaceholders"));
@@ -234,7 +234,7 @@ sap.ui.define([
 				}
 			}
 
-			oRm.style("top", iRowHeight * iBlockerLevel + 1 + "px"); // Adding 1px to render all of the blockers 1px below in order to have space on top of them.
+			oRm.style("top", iRowHeight * iBlockerLevel + 0.0625 + "rem"); // Adding 0.0625rem to render all of the blockers 0.0625rem below in order to have space on top of them.
 			oRm.style(bIsRTL ? "right" : "left", Math.max(iLeftPosition, 0) + "%");
 			oRm.style(bIsRTL ? "left" : "right", Math.max(iRightPosition, 0) + "%");
 			oRm.openEnd();
@@ -268,7 +268,7 @@ sap.ui.define([
 
 			if (iLeftPosition < 0) {
 				aClasses = ["sapUiCalendarAppArrowIconLeft", "sapUiCalendarAppArrowIcon"];
-				oRm.icon("sap-icon://arrow-left", aClasses, { title: null });
+				oRm.icon("sap-icon://arrow-left", aClasses, { title: null, role: "img" });
 			}
 
 			if (sIcon) {
@@ -277,6 +277,7 @@ sap.ui.define([
 
 				mAttributes["id"] = sId + "-Icon";
 				mAttributes["title"] = null;
+				mAttributes["role"] = "img";
 				oRm.icon(sIcon, aClasses, mAttributes);
 			}
 
@@ -290,7 +291,7 @@ sap.ui.define([
 
 			if (iRightPosition < 0) {
 				aClasses = ["sapUiCalendarAppArrowIconRight", "sapUiCalendarAppArrowIcon"];
-				oRm.icon("sap-icon://arrow-right", aClasses, { title: null });
+				oRm.icon("sap-icon://arrow-right", aClasses, { title: null, role: "img" });
 			}
 
 			oRm.openStart("span", sId + "-Descr");
@@ -407,7 +408,7 @@ sap.ui.define([
 				oRm.openStart("div");
 				oRm.attr("role", "gridcell");
 				oRm.class("sapMSinglePCRow");
-
+				oRm.style("height", oControl._getRowHeight() + "rem");
 				if (!oControl._isVisibleHour(i)) {
 					oRm.class("sapMSinglePCNonWorkingRow");
 				}
@@ -487,6 +488,8 @@ sap.ui.define([
 				iAppBottom = bAppEndIsOutsideVisibleEndHour ? 0 : oControl._calculateBottomPosition(oAppEndDate),
 				iAppChunkWidth = 100 / (iMaxLevel + 1),
 				bDraggable = oAppointment.getParent().getEnableAppointmentsDragAndDrop(),
+				iScaleFactor = oControl.getProperty("scaleFactor"),
+				iDivider = 2 * iScaleFactor,
 				iStartDayDiff,
 				iEndDayDiff,
 				bArrowLeft,
@@ -546,16 +549,15 @@ sap.ui.define([
 					oRm.style("border-left-color", sColor);
 				}
 			}
-			oRm.style("top", iAppTop + "px");
-			oRm.style("bottom", iAppBottom + "px");
+			oRm.style("top", iAppTop + "rem");
+			oRm.style("bottom", iAppBottom + "rem");
 			oRm.style(sap.ui.getCore().getConfiguration().getRTL() ? "right" : "left", iAppChunkWidth * iAppointmentLevel + "%");
 			oRm.style("width", iAppChunkWidth * iAppointmentWidth + "%"); // TODO: take into account the levels
 			oRm.openEnd();
 
 			oRm.openStart("div");
 			oRm.class("sapUiCalendarApp");
-
-			oRm.style("min-height", (iRowHeight - (iVerticalPaddingBetweenAppointments + iAppointmentBottomPadding + iAppointmentTopPadding)) / 2 + "px");
+			oRm.style("min-height", (iRowHeight - ((iVerticalPaddingBetweenAppointments + iAppointmentBottomPadding + iAppointmentTopPadding) * iScaleFactor)) / iDivider + "rem");
 
 			if (oAppointment.getSelected()) {
 				oRm.class("sapUiCalendarAppSel");
@@ -605,7 +607,7 @@ sap.ui.define([
 
 			if (bArrowLeft && iStartDayDiff < 0) {
 				aClasses = ["sapUiCalendarAppArrowIconLeft", "sapUiCalendarAppArrowIcon"];
-				oRm.icon("sap-icon://arrow-left", aClasses, { title: null });
+				oRm.icon("sap-icon://arrow-left", aClasses, { title: null, role: "img" });
 			}
 
 			if (sIcon) {
@@ -614,6 +616,7 @@ sap.ui.define([
 
 				mAttributes["id"] = sId + "-Icon";
 				mAttributes["title"] = null;
+				mAttributes["role"] = "img";
 				oRm.icon(sIcon, aClasses, mAttributes);
 			}
 
@@ -642,7 +645,7 @@ sap.ui.define([
 
 			if (bArrowRight && iEndDayDiff < 0) {
 				aClasses = ["sapUiCalendarAppArrowIconRight", "sapUiCalendarAppArrowIcon"];
-				oRm.icon("sap-icon://arrow-right", aClasses, { title: null });
+				oRm.icon("sap-icon://arrow-right", aClasses, { title: null, role: "img" });
 			}
 
 			// ARIA information about start and end
@@ -677,7 +680,7 @@ sap.ui.define([
 			var oDate = new Date();
 
 			oRm.openStart("div", oControl.getId() + "-nowMarker");
-			oRm.style("top", oControl._calculateTopPosition(oDate) + "px");
+			oRm.style("top", oControl._calculateTopPosition(oDate) + "rem");
 			oRm.class("sapMSinglePCNowMarker");
 
 			if (!oControl._isVisibleHour(oDate.getHours())) {
@@ -721,7 +724,7 @@ sap.ui.define([
 		 *
 		 * @param {Date} oAppStartDate start date of the appointment
 		 * @param {Date} oAppEndDate end date of the appointment
-		 * @return {String} Returns maximum allowed rows for the appointment as string
+		 * @return {string} Returns maximum allowed rows for the appointment as string
 		 * @private
 		 */
 		SinglePlanningCalendarGridRenderer._getLineClamp = function (oAppStartDate, oAppEndDate) {

package/src/sap/m/SinglePlanningCalendarMonthGrid.js

@@ -76,7 +76,7 @@ sap.ui.define([
 		 * @extends sap.ui.core.Control
 		 *
 		 * @author SAP SE
-		 * @version 1.96.5
+		 * @version 1.99.0
 		 *
 		 * @constructor
 		 * @private
@@ -101,7 +101,15 @@ sap.ui.define([
 					 * The drag and drop interaction is visualized by a placeholder highlighting the area where the
 					 * appointment can be dropped by the user.
 					 */
-					enableAppointmentsDragAndDrop: { type: "boolean", group: "Misc", defaultValue: false }
+					enableAppointmentsDragAndDrop: { type: "boolean", group: "Misc", defaultValue: false },
+
+					/**
+					 * If set, the first day of the displayed week is this day. Valid values are 0 to 6 starting on Sunday.
+					 * If there is no valid value set, the default of the used locale is used.
+					 *
+					 * @since 1.98
+					 */
+					firstDayOfWeek : {type : "int", group : "Appearance", defaultValue : -1}
 				},
 				aggregations: {
 
@@ -476,6 +484,7 @@ sap.ui.define([
 
 		SinglePlanningCalendarMonthGrid.prototype._getVisibleDays = function(oStartDate) {
 			var oCalStartDate,
+				iAPIFirstDayOfWeek,
 				oDay,
 				oCalDate,
 				iDaysOldMonth,
@@ -489,7 +498,8 @@ sap.ui.define([
 			}
 
 			oCalStartDate = CalendarDate.fromLocalJSDate(oStartDate);
-			iFirstDayOfWeek = this._getCoreLocaleData().getFirstDayOfWeek();
+			iAPIFirstDayOfWeek = this.getFirstDayOfWeek();
+			iFirstDayOfWeek = iAPIFirstDayOfWeek > 0 ? iAPIFirstDayOfWeek : this._getCoreLocaleData().getFirstDayOfWeek();
 
 			// determine weekday of first day in month
 			oFirstDay = new CalendarDate(oCalStartDate);

package/src/sap/m/SinglePlanningCalendarMonthGridRenderer.js

@@ -42,7 +42,7 @@ sap.ui.define([
 		 * Renders the HTML for the given control, using the provided {@link sap.ui.core.RenderManager}.
 		 *
 		 * @param {sap.ui.core.RenderManager} oRm The RenderManager that can be used for writing to the render output buffer
-		 * @param {sap.ui.core.Control} oControl An object representation of the control that should be rendered
+		 * @param {sap.m.SinglePlanningCalendarMonthGrid} oControl An object representation of the control that should be rendered
 		 */
 		SinglePlanningCalendarMonthGridRenderer.render = function(oRm, oControl) {
 			var oLocaleData = oControl._getCoreLocaleData();
@@ -341,7 +341,7 @@ sap.ui.define([
 
 			if (app.hasPrevious < 0) {
 				aClasses = ["sapUiCalendarAppArrowIconLeft", "sapUiCalendarAppArrowIcon"];
-				oRm.icon("sap-icon://arrow-left", aClasses, { title: null });
+				oRm.icon("sap-icon://arrow-left", aClasses, { title: null, role: "img" });
 			}
 
 			if (sIcon) {
@@ -350,6 +350,7 @@ sap.ui.define([
 
 				mAttributes["id"] = sId + "-Icon";
 				mAttributes["title"] = null;
+				mAttributes["role"] = "img";
 				oRm.icon(sIcon, aClasses, mAttributes);
 			}
 
@@ -363,7 +364,7 @@ sap.ui.define([
 
 			if (app.hasNext < 0) {
 				aClasses = ["sapUiCalendarAppArrowIconRight", "sapUiCalendarAppArrowIcon"];
-				oRm.icon("sap-icon://arrow-right", aClasses, { title: null });
+				oRm.icon("sap-icon://arrow-right", aClasses, { title: null, role: "img" });
 			}
 
 			oRm.openStart("span", sId + "-Descr");
@@ -379,15 +380,19 @@ sap.ui.define([
 		};
 
 		SinglePlanningCalendarMonthGridRenderer.renderDayNames = function(oRm, oControl, oLocaleData) {
-			var iFirstDayOfWeek = oLocaleData.getFirstDayOfWeek(),
+			var iAPIFirstDayOfWeek = oControl.getFirstDayOfWeek(),
+				iFirstDayOfWeek = iAPIFirstDayOfWeek > 0 ? iAPIFirstDayOfWeek : oLocaleData.getFirstDayOfWeek(),
 				sId = oControl.getId(),
 				sDayId,
 				sCalendarType = Core.getConfiguration().getCalendarType(),
 				aWeekDays = oLocaleData.getDaysStandAlone("abbreviated", sCalendarType),
 				aWeekDaysWide = oLocaleData.getDaysStandAlone("wide", sCalendarType),
-				oFirstRenderedDate = CalendarUtils._getFirstDateOfWeek(CalendarDate.fromLocalJSDate(oControl.getStartDate())),
+				oStartDate = new Date(oControl.getStartDate()),
+				oFirstRenderedDate,
 				iDayIndex;
 
+			oStartDate.setDate(oStartDate.getDate() - oStartDate.getDay() + iFirstDayOfWeek);
+			oFirstRenderedDate = CalendarDate.fromLocalJSDate(oStartDate);
 			oRm.openStart("div", sId + "-Names");
 			oRm.class("sapMSPCMonthDayNames");
 			oRm.openEnd(); // span element

package/src/sap/m/SinglePlanningCalendarMonthView.js

@@ -28,7 +28,7 @@ sap.ui.define([
 		 * @extends sap.m.SinglePlanningCalendarView
 		 *
 		 * @author SAP SE
-		 * @version 1.96.5
+		 * @version 1.99.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.96.5
+	 * @version 1.99.0
 	 *
 	 * @constructor
 	 * @public
@@ -48,7 +48,18 @@ function (library, Log, Element) {
 				/**
 				 * Adds a title for the view
 				 */
-				title : { type : "string", group : "Appearance" }
+				title : { type : "string", group : "Appearance" },
+
+				/**
+				 * If set, the first day of the displayed week is this day. Valid values are 0 to 6 starting on Sunday.
+				 * If there is no valid value set, the default of the used locale is used.
+				 *
+				 * Note: This property will only have effect in Week view and Month view of the SinglePlanningCalendar,
+				 * but it wouldn't have effect in WorkWeek view.
+				 *
+				 * @since 1.98
+				 */
+				firstDayOfWeek : {type : "int", group : "Appearance", defaultValue : -1}
 
 			}
 		}

package/src/sap/m/SinglePlanningCalendarWeekView.js

@@ -7,10 +7,11 @@
 sap.ui.define([
 	'./library',
 	'./SinglePlanningCalendarView',
+	'sap/ui/core/LocaleData',
 	'sap/ui/unified/calendar/CalendarDate',
 	'sap/ui/unified/calendar/CalendarUtils'
 ],
-function (library, SinglePlanningCalendarView, CalendarDate, CalendarUtils) {
+function (library, SinglePlanningCalendarView, LocaleData, CalendarDate, CalendarUtils) {
 	"use strict";
 
 	/**
@@ -27,7 +28,7 @@ function (library, SinglePlanningCalendarView, CalendarDate, CalendarUtils) {
 	 * @extends sap.m.SinglePlanningCalendarView
 	 *
 	 * @author SAP SE
-	 * @version 1.96.5
+	 * @version 1.99.0
 	 *
 	 * @constructor
 	 * @public
@@ -75,9 +76,19 @@ function (library, SinglePlanningCalendarView, CalendarDate, CalendarUtils) {
 	 */
 	SinglePlanningCalendarWeekView.prototype.calculateStartDate = function (oStartDate) {
 		var oCalDate = CalendarDate.fromLocalJSDate(oStartDate),
-			oCalFirstDateOfWeek = CalendarUtils._getFirstDateOfWeek(oCalDate);
+			oCalFirstDateOfWeek = CalendarUtils._getFirstDateOfWeek(oCalDate),
+			oSPCStart = oCalFirstDateOfWeek.toLocalJSDate(),
+			iOldFirstDayOfWeek = oSPCStart.getDay(),
+			iResultFirstDayOfWeek = this.getFirstDayOfWeek(),
+			oLocaleData;
 
-		return oCalFirstDateOfWeek.toLocalJSDate();
+		if (iResultFirstDayOfWeek === -1) { // -1 is the default value of firstDayOfWeek property. It means that the information from the used locale is used.
+			oLocaleData = LocaleData.getInstance(sap.ui.getCore().getConfiguration().getFormatSettings().getFormatLocale());
+			iResultFirstDayOfWeek = oLocaleData.getFirstDayOfWeek();
+		}
+		oSPCStart.setDate(oSPCStart.getDate() - iOldFirstDayOfWeek + iResultFirstDayOfWeek);
+
+		return oSPCStart;
 	};
 
 	return SinglePlanningCalendarWeekView;

package/src/sap/m/SinglePlanningCalendarWorkWeekView.js

@@ -28,7 +28,7 @@ function (library, SinglePlanningCalendarView, CalendarDate, CalendarUtils, Loca
 	 * @extends sap.m.SinglePlanningCalendarView
 	 *
 	 * @author SAP SE
-	 * @version 1.96.5
+	 * @version 1.99.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/SlideTile.js

@@ -41,7 +41,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.96.5
+	 * @version 1.99.0
 	 * @since 1.34
 	 *
 	 * @public

package/src/sap/m/SlideTileRenderer.js

@@ -23,7 +23,7 @@ sap.ui.define(['./library', "sap/base/security/encodeCSS"],
 	 * Renders the HTML for the given control, using the provided {@link sap.ui.core.RenderManager}.
 	 *
 	 * @param {sap.ui.core.RenderManager} oRm the RenderManager that can be used for writing to the Render-Output-Buffer
-	 * @param {sap.ui.core.Control} oControl the control to be rendered
+	 * @param {sap.m.SlideTile} oControl the control to be rendered
 	 */
 	SlideTileRenderer.render = function(oRm, oControl) {
 		var sTooltip = oControl.getTooltip_AsString(),

package/src/sap/m/Slider.js

@@ -95,7 +95,7 @@ function(
 		 * @implements sap.ui.core.IFormContent
 		 *
 		 * @author SAP SE
-		 * @version 1.96.5
+		 * @version 1.99.0
 		 *
 		 * @constructor
 		 * @public