@openui5/sap.m 1.92.0 → 1.95.0

package/src/sap/m/SelectDialogBase.js

@@ -0,0 +1,148 @@
+/*!
+ * OpenUI5
+ * (c) Copyright 2009-2021 SAP SE or an SAP affiliate company.
+ * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
+ */
+
+// Provides control sap.m.SelectDialogBase.
+sap.ui.define([
+		'sap/ui/Device',
+		'sap/ui/core/Control'
+],
+function(
+	Device,
+	Control
+) {
+	"use strict";
+
+	/**
+	 * Constructor for a new SelectDialogBase.
+	 *
+	 * @param {string} [sId] ID for the new control, generated automatically if no ID is given
+	 * @param {object} [mSettings] Initial settings for the new control
+	 *
+	 * @class
+	 * The <code>sap.m.SelectDialogBase</code> control provides a base functionality of the
+	 * <code>sap.m.SelectDialog</code> and <code>sap.m.TableSelectDialog</code> controls.
+	 * @extends sap.ui.core.Control
+	 *
+	 * @author SAP SE
+	 * @version 1.95.0
+	 *
+	 * @constructor
+	 * @public
+	 * @abstract
+	 * @since 1.93
+	 * @alias sap.m.SelectDialogBase
+	 * @ui5-metamodel This control/element also will be described in the UI5 (legacy) designtime metamodel
+	 */
+	var SelectDialogBase = Control.extend("sap.m.SelectDialogBase", /** @lends sap.m.SelectDialogBase.prototype */ {
+		metadata: {
+			library: "sap.m",
+			"abstract": true,
+			properties: {},
+			aggregations: {},
+			events: {
+				/**
+				 * Fires before <code>items</code> binding is updated (e.g. sorting, filtering)
+				 *
+				 * <b>Note:</b> Event handler should not invalidate the control.				 *
+				 * @since 1.93
+				 */
+				updateStarted : {
+					parameters : {
+
+						/**
+						 * The reason of the update, e.g. Binding, Filter, Sort, Growing, Change, Refresh, Context.
+						 */
+						reason : {type : "string"},
+
+						/**
+						 * Actual number of items.
+						 */
+						actual : {type : "int"},
+
+						/**
+						 * The total count of bound items. This can be used if the <code>growing</code> property is set to <code>true</code>.
+						 */
+						total : {type : "int"}
+					}
+				},
+
+				/**
+				 * Fires after <code>items</code> binding is updated and processed by the control.
+				 * @since 1.93
+				 */
+				updateFinished : {
+					parameters : {
+
+						/**
+						 * The reason of the update, e.g. Binding, Filter, Sort, Growing, Change, Refresh, Context.
+						 */
+						reason : {type : "string"},
+
+						/**
+						 * Actual number of items.
+						 */
+						actual : {type : "int"},
+
+						/**
+						 * The total count of bound items. This can be used if the <code>growing</code> property is set to <code>true</code>.
+						 */
+						total : {type : "int"}
+					}
+				},
+
+				/**
+				 * Fires when selection is changed via user interaction inside the control.
+				 * @since 1.93
+				 */
+				selectionChange : {
+					parameters : {
+
+						/**
+						 * The item whose selection has changed. In <code>MultiSelect</code> mode, only the up-most selected item is returned. This parameter can be used for single-selection modes.
+						 */
+						listItem : {type : "sap.m.ListItemBase"},
+
+						/**
+						 * Array of items whose selection has changed. This parameter can be used for <code>MultiSelect</code> mode.
+						 */
+						listItems : {type : "sap.m.ListItemBase[]"},
+
+						/**
+						 * Indicates whether the <code>listItem</code> parameter is selected or not.
+						 */
+						selected : {type : "boolean"},
+
+						/**
+						 * Indicates whether the select all action is triggered or not.
+						 */
+						selectAll : {type : "boolean"}
+					}
+				}
+			}
+		},
+		renderer: {
+			apiVersion: 2,
+			render: function () {
+			}
+		}
+	});
+
+	SelectDialogBase.prototype._setInitialFocus = function () {
+		if (!Device.system.desktop) {
+			return;
+		}
+
+		var oInitiallyFocusedControl = this._oSearchField;
+
+		if (this.getItems().length) {
+			oInitiallyFocusedControl = this.getItems()[0];
+		}
+
+		this._oDialog.setInitialFocus(oInitiallyFocusedControl);
+	};
+
+	return SelectDialogBase;
+});

package/src/sap/m/SelectList.js

@@ -37,7 +37,7 @@ sap.ui.define([
 		 * @extends sap.ui.core.Control
 		 *
 		 * @author SAP SE
-		 * @version 1.92.0
+		 * @version 1.95.0
 		 *
 		 * @constructor
 		 * @public
@@ -256,7 +256,7 @@ sap.ui.define([
 			}
 		};
 
-		SelectList.prototype.updateItems = function(sReason) {
+		SelectList.prototype.updateItems = function(sReason, oEventInfo) {
 			this.bItemsUpdated = false;
 
 			// note: for backward compatibility and to keep the old data binding behavior,
@@ -265,6 +265,16 @@ sap.ui.define([
 			this.updateAggregation("items");
 			this.bItemsUpdated = true;
 
+			// Do not try to synchronize selection when updateItems is called with reason Add/Remove VirtualContext,
+			// as in some cases, when forceSelection is "true", unwanted PATCH requests with null value may be triggered
+			if (oEventInfo && (oEventInfo.detailedReason === "AddVirtualContext"
+				|| oEventInfo.detailedReason === "RemoveVirtualContext")) {
+				this._bHasVirtualContext = true;
+				return;
+			}
+
+			this._bHasVirtualContext = false;
+
 			// Try to synchronize the selection (synchronous), but if any item's key match with the value of the "selectedKey" property,
 			// don't force the first enabled item to be selected when the forceSelection property is set to true.
 			// It could be possible that the items' properties (models and bindingContext) are not propagated at this point.
@@ -612,7 +622,7 @@ sap.ui.define([
 
 			// the aggregation items is not bound or
 			// it is bound and the data is already available
-			} else if (bForceSelection && this.getDefaultSelectedItem() && (!this.isBound("items") || this.bItemsUpdated)) {
+			} else if (bForceSelection && !this._bHasVirtualContext && this.getDefaultSelectedItem() && (!this.isBound("items") || this.bItemsUpdated)) {
 				try {
 					this.setSelection(this.getDefaultSelectedItem());
 				} catch (e) {

package/src/sap/m/SelectRenderer.js

@@ -178,6 +178,9 @@ sap.ui.define(['sap/ui/core/Renderer', 'sap/ui/core/IconPool', 'sap/m/library',
 			oRm.attr("tabindex", "-1");
 			oRm.attr("aria-hidden", "true");
 
+			//The hidden field is not shown to the user, but the data is sent when the form is submitted.
+			oRm.attr("type", "hidden");
+
 			// Classes
 			oRm.class("sapUiPseudoInvisibleText");
 
@@ -196,12 +199,19 @@ sap.ui.define(['sap/ui/core/Renderer', 'sap/ui/core/IconPool', 'sap/m/library',
 				sTextDir = oSelect.getTextDirection(),
 				sTextAlign = Renderer.getTextAlign(oSelect.getTextAlign(), sTextDir),
 				CSS_CLASS = SelectRenderer.CSS_CLASS,
-				bEditabledAndEnabled = oSelect.getEnabled() && oSelect.getEditable();
+				bEditabledAndEnabled = oSelect.getEnabled() && oSelect.getEditable(),
+				sTooltip = oSelect.getTooltip_AsString();
 
 			oRm.openStart("span", oSelect.getId() + "-label");
 			oRm.attr("aria-hidden", true);
 			oRm.class(CSS_CLASS + "Label");
 
+			// since focusable element has sapUiPseudoInvisibleText class
+			// the tooltip is also set to the label element to be visually displayed
+			if (sTooltip) {
+				oRm.attr("title", sTooltip);
+			}
+
 			if (oSelect.getValueState() !== ValueState.None && bEditabledAndEnabled) {
 				oRm.class(CSS_CLASS + "LabelState");
 				oRm.class(CSS_CLASS + "Label" + oSelect.getValueState());
@@ -264,11 +274,13 @@ sap.ui.define(['sap/ui/core/Renderer', 'sap/ui/core/IconPool', 'sap/m/library',
 		 * @private
 		 */
 		SelectRenderer.renderIcon = function(oRm, oSelect) {
-			var sTooltip = oSelect.getTooltip_AsString();
+			var sTooltip = oSelect.getTooltip_AsString(),
+				oIconInfo = IconPool.getIconInfo(oSelect.getIcon()),
+				sIconText = oIconInfo && oIconInfo.text;
 
 			oRm.icon(oSelect.getIcon(), SelectRenderer.CSS_CLASS + "Icon", {
 				id: oSelect.getId() + "-icon",
-				title: sTooltip || null
+				title: sTooltip || sIconText || null
 			});
 		};
 

package/src/sap/m/SelectionDetails.js

@@ -39,7 +39,7 @@ function(
 	 * <b><i>Note:</i></b>It is protected and should only be used within the framework itself.
 	 *
 	 * @author SAP SE
-	 * @version 1.92.0
+	 * @version 1.95.0
 	 *
 	 * @extends sap.ui.core.Control
 	 * @constructor
@@ -617,7 +617,10 @@ function(
 	 * @private
 	 */
 	SelectionDetails.prototype._getNavContainer = function(NavContainer) {
-		return this._oNavContainer || (this._oNavContainer = new NavContainer(this.getId() + "-nav-container"));
+		if (!this._oNavContainer) {
+			this._oNavContainer = new NavContainer(this.getId() + "-nav-container");
+		}
+		return this._oNavContainer;
 	};
 
 	/**

package/src/sap/m/SelectionDetailsFacade.js

@@ -10,7 +10,7 @@
  * @since 1.48.0
  * @public
  * @author SAP SE
- * @version 1.92.0
+ * @version 1.95.0
  * @borrows sap.ui.core.Element#addCustomData as #addCustomData
  * @borrows sap.ui.core.Element#getCustomData as #getCustomData
  * @borrows sap.ui.core.Element#indexOfCustomData as #indexOfCustomData
@@ -45,7 +45,7 @@
  * @since 1.48.0
  * @public
  * @author SAP SE
- * @version 1.92.0
+ * @version 1.95.0
  * @borrows sap.ui.core.Element#addCustomData as #addCustomData
  * @borrows sap.ui.core.Element#getCustomData as #getCustomData
  * @borrows sap.ui.core.Element#indexOfCustomData as #indexOfCustomData

package/src/sap/m/SelectionDetailsItem.js

@@ -54,7 +54,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Element
 	 *
 	 * @author SAP SE
-	 * @version 1.92.0
+	 * @version 1.95.0
 	 *
 	 * @constructor
 	 * @protected

package/src/sap/m/SelectionDetailsItemLine.js

@@ -23,7 +23,7 @@ sap.ui.define(["sap/ui/core/Element", "sap/base/Log", "sap/base/util/isPlainObje
 	 * @extends sap.ui.core.Element
 	 *
 	 * @author SAP SE
-	 * @version 1.92.0
+	 * @version 1.95.0
 	 *
 	 * @constructor
 	 * @protected

package/src/sap/m/Shell.js

@@ -13,9 +13,9 @@ sap.ui.define([
 	'sap/m/ShellRenderer',
 	"sap/ui/util/Mobile",
 	"sap/base/Log",
-	"sap/ui/thirdparty/jquery"
+	"sap/ui/core/theming/Parameters"
 ],
-	function(library, Core, Control, coreLibrary, ShellRenderer, Mobile, Log, jQuery) {
+	function(library, Core, Control, coreLibrary, ShellRenderer, Mobile, Log, ThemeParameters) {
 		"use strict";
 
 
@@ -35,7 +35,7 @@ sap.ui.define([
 		 * The Shell control can be used as root element of applications. It can contain an App or a <code>SplitApp</code> control.
 		 * The Shell provides some overarching functionality for the overall application and takes care of visual adaptation, such as a frame around the App, on desktop browser platforms.
 		 * @extends sap.ui.core.Control
-		 * @version 1.92.0
+		 * @version 1.95.0
 		 *
 		 * @constructor
 		 * @public
@@ -154,7 +154,7 @@ sap.ui.define([
 
 		Shell.prototype.init = function() {
 			// theme change might change the logo
-			Core.attachThemeChanged(jQuery.proxy(function(){
+			Core.attachThemeChanged(function(){
 				var $hdr = this.$("hdr"),
 					sImgSrc = this._getImageSrc();
 
@@ -162,7 +162,7 @@ sap.ui.define([
 					this._getImage().setSrc(sImgSrc);
 					this._getImage().rerender();
 				}
-			}, this));
+			}, this);
 
 
 			Mobile.init({
@@ -179,14 +179,13 @@ sap.ui.define([
 		};
 
 		Shell.prototype.onAfterRendering = function () {
-			var ref = this.getDomRef().parentNode,
-				$ref;
+			var ref = this.getDomRef().parentNode;
+
 			// set all parent elements to 100% height this *should* be done by the application in CSS, but people tend to forget it...
 			if (ref && !ref._sapui5_heightFixed) {
 				ref._sapui5_heightFixed = true;
 				while (ref && ref !== document.documentElement) {
-					$ref = jQuery(ref);
-					if ($ref.attr("data-sap-ui-root-content")) { // some parents (e.g. Unified Shell) do this already
+					if (ref.getAttribute("data-sap-ui-root-content")) { // some parents (e.g. Unified Shell) do this already
 						break;
 					}
 					if (!ref.style.height) {
@@ -265,14 +264,7 @@ sap.ui.define([
 		};
 
 		Shell.prototype._getImageSrc = function() {
-			var sImage = this.getLogo(); // configured logo
-			if (!sImage) {
-				//TODO: global jquery call found
-				jQuery.sap.require("sap.ui.core.theming.Parameters");
-				sImage = sap.ui.require("sap/ui/core/theming/Parameters")._getThemeImage(); // theme logo
-			}
-
-			return sImage;
+			return this.getLogo() ? this.getLogo() : ThemeParameters._getThemeImage();
 		};
 
 		return Shell;

package/src/sap/m/SimpleFixFlex.js

@@ -31,7 +31,7 @@ function (Control, ResizeHandler, Log /**, SimpleFixFlexRenderer */) {
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.92.0
+	 * @version 1.95.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/m/SinglePlanningCalendar.js

@@ -105,7 +105,7 @@ function(
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.92.0
+	 * @version 1.95.0
 	 *
 	 * @constructor
 	 * @public
@@ -217,6 +217,9 @@ function(
 			 * The appointments to be displayed in the grid. Appointments outside the visible time frame are not rendered.
 			 * Appointments, longer than a day, will be displayed in all of the affected days.
 			 * To display an all-day appointment, the appointment must start at 00:00 and end on any day in the future in 00:00h.
+			 *
+			 * Note: The <code>customContent</code> functionality of the <code>CalendarAppointment</code> is not available
+			 * in the <code>SinglePlanningCalendar</code>. If set, it will not make any effect.
 			 */
 			appointments : {
 				type: "sap.ui.unified.CalendarAppointment",

package/src/sap/m/SinglePlanningCalendarDayView.js

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

package/src/sap/m/SinglePlanningCalendarGrid.js

@@ -101,7 +101,7 @@ sap.ui.define([
 		 * @extends sap.ui.core.Control
 		 *
 		 * @author SAP SE
-		 * @version 1.92.0
+		 * @version 1.95.0
 		 *
 		 * @constructor
 		 * @private
@@ -587,9 +587,14 @@ sap.ui.define([
 					}
 
 					var oDragSession = oEvent.getParameter("dragSession"),
-						$SPCGridOverlay = this.$().find(".sapMSinglePCOverlay"),
+						oDragControl = oDragSession.getDragControl(),
+						oEventTarget = oEvent.getParameter("browserEvent") && oEvent.getParameter("browserEvent").target || null;
+
+					oDragControl._sAppointmentPartSuffix = oEventTarget && oEventTarget.id ? oEventTarget.id.replace(oDragControl.getId() + "-", "") : "";
+
+					var	$SPCGridOverlay = this.$().find(".sapMSinglePCOverlay"),
 						$Indicator = jQuery(oDragSession.getIndicator()),
-						$DraggedControl = oDragSession.getDragControl().$();
+						$DraggedControl = oDragControl.$();
 
 					if (this._isResizeHandleBottomMouseDownTarget) {
 						oDragSession.setComplexData("bottomHandle", "true");
@@ -640,7 +645,7 @@ sap.ui.define([
 						iVariableBoundaryY,
 						mDraggedControlConfig;
 
-					if (!oAppointmentStartingBoundaries) {
+						if (!oAppointmentStartingBoundaries) {
 						oAppointmentStartingBoundaries = {
 							top: oAppointmentRef.offsetTop,
 							bottom: oAppointmentRef.offsetTop + oAppointmentRef.getBoundingClientRect().height,
@@ -946,7 +951,7 @@ sap.ui.define([
 		 * @private
 		 */
 		SinglePlanningCalendarGrid.prototype._appFocusHandler = function(oEvent, iDirection) {
-			var oTarget = sap.ui.getCore().byId(oEvent.target.id);
+			var oTarget = sap.ui.getCore().byId(oEvent.target.id) || this._findSrcControl(oEvent);
 
 			if (oTarget && oTarget.isA("sap.ui.unified.CalendarAppointment")) {
 				this.fireAppointmentSelect({
@@ -1020,6 +1025,12 @@ sap.ui.define([
 				aVisibleAppsInDay,
 				i, j;
 
+			// directly focus appointment part, if there is any selected
+			if (this._sSelectedAppointment) {
+				this._sSelectedAppointment.focus();
+				return this;
+			}
+
 			// Search amongst the visible blockers
 			for (i = 0; i < aVisibleBlockers.length; ++i) {
 				if (aVisibleBlockers[i].getId() === oFocusInfo.id) {
@@ -1072,6 +1083,7 @@ sap.ui.define([
 		 */
 		SinglePlanningCalendarGrid.prototype._toggleAppointmentSelection = function (oAppointment, bRemoveOldSelection) {
 			var aChangedApps = [],
+				oAppointmentDomRef = oAppointment && oAppointment.getDomRef(),
 				aAppointments,
 				iAppointmentsLength,
 				i;
@@ -1091,6 +1103,9 @@ sap.ui.define([
 			if (oAppointment) {
 				oAppointment.setProperty("selected", !oAppointment.getSelected());
 				aChangedApps.push(oAppointment);
+				this._sSelectedAppointment = oAppointment.getSelected() && oAppointmentDomRef ? oAppointment : undefined;
+			} else {
+				this._sSelectedAppointment = undefined;
 			}
 
 			return aChangedApps;
@@ -1194,13 +1209,33 @@ 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,
+				sAppointmentId;
+			if (!$targetsParentElement) {
+				return oEvent.srcControl;
+			} else if ($targetsParentElement.classList.contains("sapUiCalendarRowApps")) {
+				sAppointmentId = $targetsParentElement.getAttribute("data-sap-ui-related");
+			} else {
+				sAppointmentId = $targetElement.getAttribute("data-sap-ui-related");
+			}
+
+			// finding the appointment
+			return this.getAppointments().find(function (oAppointment) {
+				return oAppointment.sId === sAppointmentId;
+			});
+		};
+
 		/**
 		 * Helper function handling <code>keydown</code> or <code>tap</code> event on the grid.
 		 *
 		 * @param {jQuery.Event} oEvent The event object.
 		 */
 		SinglePlanningCalendarGrid.prototype._fireSelectionEvent = function (oEvent) {
-			var oControl = oEvent.srcControl,
+			var oControl = this._findSrcControl(oEvent),
 				oGridCell = oEvent.target;
 
 			if (oEvent.target.classList.contains("sapMSinglePCRow") ||
@@ -1216,6 +1251,19 @@ sap.ui.define([
 					appointments: this._toggleAppointmentSelection(undefined, true)
 				});
 			} else if (oControl && oControl.isA("sap.ui.unified.CalendarAppointment")) {
+
+				// add suffix in appointment
+				if (oGridCell.parentElement && oGridCell.parentElement.getAttribute("id")) {
+					var sTargetId = oGridCell.parentElement.getAttribute("id");
+
+					// 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 sBaseIDPart = oGridCell.parentElement.getAttribute("data-sap-ui-related");
+					var sSuffix = sTargetId.replace(sBaseIDPart + "-", "");
+
+					oControl._setAppointmentPartSuffix(sSuffix);
+				}
+
 				this.fireAppointmentSelect({
 					appointment: oControl,
 					appointments: this._toggleAppointmentSelection(oControl, !(oEvent.ctrlKey || oEvent.metaKey))
@@ -1261,7 +1309,9 @@ sap.ui.define([
 			if (!this.getEndHour()) {
 				iEndHour = LAST_HOUR_OF_DAY;
 			}
-
+			if (iStartHour > iEndHour) {
+				 return iStartHour <= iHour || iHour < iEndHour;
+			}
 			return iStartHour <= iHour && iHour < iEndHour;
 		};
 

package/src/sap/m/SinglePlanningCalendarGridRenderer.js

@@ -368,7 +368,7 @@ sap.ui.define(['sap/ui/unified/calendar/CalendarDate', 'sap/ui/unified/calendar/
 				this.renderDndPlaceholders(oRm, oControl, oControl._dndPlaceholdersMap[oColumnCalDate]);
 
 				this.renderRows(oRm, oControl, sDate);
-				this.renderAppointments(oRm, oControl, oAppointmentsToRender[sDate], oColumnCalDate);
+				this.renderAppointments(oRm, oControl, oAppointmentsToRender[sDate], oColumnCalDate, i);
 				oRm.close("div"); // END .sapMSinglePCColumn
 			}
 
@@ -419,8 +419,9 @@ sap.ui.define(['sap/ui/unified/calendar/CalendarDate', 'sap/ui/unified/calendar/
 			}
 		};
 
-		SinglePlanningCalendarGridRenderer.renderAppointments = function (oRm, oControl, oAppointmentsByDate, oColumnDate) {
-			var that = this;
+		SinglePlanningCalendarGridRenderer.renderAppointments = function (oRm, oControl, oAppointmentsByDate, oColumnDate, iColumn) {
+			var that = this,
+				iIndex = 0;
 
 			if (oAppointmentsByDate) {
 				oRm.openStart("div");
@@ -435,13 +436,14 @@ sap.ui.define(['sap/ui/unified/calendar/CalendarDate', 'sap/ui/unified/calendar/
 						iWidth = oAppointmentNode.width,
 						oAppointment = oAppointmentNode.getData();
 
-					that.renderAppointment(oRm, oControl, iMaxLevel, iLevel, iWidth, oAppointment, oColumnDate);
+					that.renderAppointment(oRm, oControl, iMaxLevel, iLevel, iWidth, oAppointment, oColumnDate, iColumn, iIndex);
+					iIndex++;
 				});
 				oRm.close("div");
 			}
 		};
 
-		SinglePlanningCalendarGridRenderer.renderAppointment = function(oRm, oControl, iMaxLevel, iAppointmentLevel, iAppointmentWidth, oAppointment, oColumnDate) {
+		SinglePlanningCalendarGridRenderer.renderAppointment = function(oRm, oControl, iMaxLevel, iAppointmentLevel, iAppointmentWidth, oAppointment, oColumnDate, iColumn, iIndex) {
 			var oGridCalStart = CalendarDate.fromLocalJSDate(oControl.getStartDate()),
 				oGridCalEnd = new CalendarDate(oGridCalStart),
 				iRowHeight = oControl._getRowHeight(),
@@ -474,6 +476,7 @@ sap.ui.define(['sap/ui/unified/calendar/CalendarDate', 'sap/ui/unified/calendar/
 				iAppTop = bAppStartIsOutsideVisibleStartHour ? 0 : oControl._calculateTopPosition(oAppStartDate),
 				iAppBottom = bAppEndIsOutsideVisibleEndHour ? 0 : oControl._calculateBottomPosition(oAppEndDate),
 				iAppChunkWidth = 100 / (iMaxLevel + 1),
+				bDraggable = oAppointment.getParent().getEnableAppointmentsDragAndDrop(),
 				iStartDayDiff,
 				iEndDayDiff,
 				bArrowLeft,
@@ -509,7 +512,10 @@ sap.ui.define(['sap/ui/unified/calendar/CalendarDate', 'sap/ui/unified/calendar/
 				mAccProps["labelledby"].value = mAccProps["labelledby"].value + " " + InvisibleText.getStaticId("sap.ui.unified", "APPOINTMENT_SELECTED");
 			}
 
-			oRm.openStart("div", oAppointment);
+			oRm.openStart("div", oAppointment.getId() + "-" + iColumn + "_" + iIndex);
+			oRm.attr("draggable", bDraggable);
+			oRm.attr("data-sap-ui-draggable", bDraggable);
+			oRm.attr("data-sap-ui-related", oAppointment.getId());
 			oRm.attr("data-sap-level", iAppointmentLevel);
 			oRm.attr("data-sap-width", iAppointmentWidth);
 			oRm.attr("tabindex", 0);
@@ -649,10 +655,8 @@ sap.ui.define(['sap/ui/unified/calendar/CalendarDate', 'sap/ui/unified/calendar/
 
 			oRm.close("div");
 
-			if (oControl.getEnableAppointmentsResize()
-				&& !bAppStartIsOutsideVisibleStartHour
-				&& !bAppEndIsOutsideVisibleEndHour) {
-				this.renderResizeHandles(oRm);
+			if (oControl.getEnableAppointmentsResize()) {
+				this.renderResizeHandles(oRm, !bAppStartIsOutsideVisibleStartHour, !bAppEndIsOutsideVisibleEndHour);
 			}
 
 			oRm.close("div");
@@ -686,15 +690,19 @@ sap.ui.define(['sap/ui/unified/calendar/CalendarDate', 'sap/ui/unified/calendar/
 			oRm.close("div"); // END .sapMSinglePCNowMarker
 		};
 
-		SinglePlanningCalendarGridRenderer.renderResizeHandles = function(oRm) {
-			oRm.openStart("span");
-			oRm.class("sapMSinglePCAppResizeHandleBottom");
-			oRm.openEnd();
-			oRm.close("span");
-			oRm.openStart("span");
-			oRm.class("sapMSinglePCAppResizeHandleTop");
-			oRm.openEnd();
-			oRm.close("span");
+		SinglePlanningCalendarGridRenderer.renderResizeHandles = function(oRm, bRenderTop, bRenderBottom) {
+			if (bRenderBottom) {
+				oRm.openStart("span");
+				oRm.class("sapMSinglePCAppResizeHandleBottom");
+				oRm.openEnd();
+				oRm.close("span");
+			}
+			if (bRenderTop) {
+				oRm.openStart("span");
+				oRm.class("sapMSinglePCAppResizeHandleTop");
+				oRm.openEnd();
+				oRm.close("span");
+			}
 		};
 
 		/**