@openui5/sap.ui.unified 1.127.0 → 1.128.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openui5/sap.ui.unified",
-  "version": "1.127.0",
+  "version": "1.128.0",
   "description": "OpenUI5 UI Library sap.ui.unified",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -14,6 +14,6 @@
     "url": "https://github.com/SAP/openui5.git"
   },
   "dependencies": {
-    "@openui5/sap.ui.core": "1.127.0"
+    "@openui5/sap.ui.core": "1.128.0"
   }
 }

package/src/sap/ui/unified/.library

@@ -6,7 +6,7 @@
   <copyright>OpenUI5
  * (c) Copyright 2009-2024 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.</copyright>
-  <version>1.127.0</version>
+  <version>1.128.0</version>
 
   <documentation>Unified controls intended for both, mobile and desktop scenarios</documentation>
 

package/src/sap/ui/unified/Calendar.js

@@ -78,7 +78,7 @@ sap.ui.define([
 	 * Basic Calendar.
 	 * This calendar is used for DatePickers
 	 * @extends sap.ui.core.Control
-	 * @version 1.127.0
+	 * @version 1.128.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/unified/CalendarAppointment.js

@@ -43,7 +43,7 @@ sap.ui.define([
 	 *
 	 * Applications could inherit from this element to add own fields.
 	 * @extends sap.ui.unified.DateTypeRange
-	 * @version 1.127.0
+	 * @version 1.128.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/unified/CalendarDateInterval.js

@@ -59,7 +59,7 @@ sap.ui.define([
 	 * @class
 	 * <code>CalendarDateInterval</code> only visualizes the dates in a one-line interval and allows the selection of a single day.
 	 * @extends sap.ui.unified.Calendar
-	 * @version 1.127.0
+	 * @version 1.128.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/unified/CalendarLegend.js

@@ -57,7 +57,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.127.0
+	 * @version 1.128.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/unified/CalendarLegendItem.js

@@ -21,7 +21,7 @@ sap.ui.define(['sap/ui/core/Element', './library'],
 	 * @class
 	 * Item to be displayed in a CalendarLegend.
 	 * @extends sap.ui.core.Element
-	 * @version 1.127.0
+	 * @version 1.128.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/unified/CalendarMonthInterval.js

@@ -65,7 +65,7 @@ sap.ui.define([
 	 * <b>Note:</b> UI5Date or JavaScript Date objects are used to set and return the months, mark them as selected or as a special type.
 	 * But the date part of the Date object is not used. If a Date object is returned the date will be set to the 1st of the corresponding month.
 	 * @extends sap.ui.core.Control
-	 * @version 1.127.0
+	 * @version 1.128.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/unified/CalendarOneMonthInterval.js

@@ -57,7 +57,7 @@ sap.ui.define([
 		 * Navigation via year picker switches to the corresponding year and the same month as before the navigation.
 		 *
 		 * @extends sap.ui.unified.CalendarDateInterval
-		 * @version 1.127.0
+		 * @version 1.128.0
 		 *
 		 * @constructor
 		 * @private

package/src/sap/ui/unified/CalendarRow.js

@@ -84,7 +84,7 @@ sap.ui.define([
 	 * @class
 	 * A calendar row with a header and appointments. The Appointments will be placed in the defined interval.
 	 * @extends sap.ui.core.Control
-	 * @version 1.127.0
+	 * @version 1.128.0
 	 *
 	 * @constructor
 	 * @public
@@ -249,6 +249,12 @@ sap.ui.define([
 			 */
 			appointments : {type : "sap.ui.unified.CalendarAppointment", defaultClass: CalendarAppointment, multiple : true, singularName : "appointment"},
 
+			/**
+			 * Sets the provided period to be displayed as a non-working.
+			 * @since 1.128
+			 */
+			nonWorkingPeriods: {type: "sap.ui.unified.NonWorkingPeriod", multiple: true},
+
 			/**
 			 * Appointments to be displayed in the top of the intervals. The <code>intervalHeaders</code> are used to visualize
 			 * public holidays and similar things.
@@ -1680,9 +1686,10 @@ sap.ui.define([
 		var oApp;
 		var sAriaDescribedBy;
 		var sAriaDescribedByNotSelected;
-		var sAriaDescribedBySelected;
+		var sCurrentAriaDescribedBy;
+		var sCurrentAriaDescribedBySelected;
+		var sCurrentAriaDescribedByNotSelected;
 		var sSelectedTextId = InvisibleText.getStaticId("sap.ui.unified", "APPOINTMENT_SELECTED");
-		var sUnselectedTextId = InvisibleText.getStaticId("sap.ui.unified", "APPOINTMENT_UNSELECTED");
 		var bSelect = !oAppointment.getSelected();
 
 		if (bRemoveOldSelection) {
@@ -1702,24 +1709,29 @@ sap.ui.define([
 						}
 					}
 					sAriaDescribedBy = oApp.$().attr("aria-describedby");
-					sAriaDescribedByNotSelected = sAriaDescribedBy ? sAriaDescribedBy.replace(sSelectedTextId, sUnselectedTextId) : "";
+					sAriaDescribedByNotSelected = sAriaDescribedBy ? sAriaDescribedBy.replace(sSelectedTextId, "") : "";
 					oApp.$().attr("aria-describedby", sAriaDescribedByNotSelected);
 				}
 			}
 		}
 
-		sAriaDescribedBySelected = oAppointment.$().attr("aria-describedby").replace(sUnselectedTextId, sSelectedTextId).trim();
-		sAriaDescribedByNotSelected = oAppointment.$().attr("aria-describedby").replace(sSelectedTextId, sUnselectedTextId).trim();
+		sCurrentAriaDescribedBy = oAppointment.$().attr("aria-describedby");
+		sCurrentAriaDescribedByNotSelected = (sCurrentAriaDescribedBy ? sCurrentAriaDescribedBy.replace(sSelectedTextId, "") : "").trim();
+		sCurrentAriaDescribedBySelected = (sCurrentAriaDescribedByNotSelected + " " + sSelectedTextId).trim();
 
 		if (oAppointment.getSelected()) {
 			oAppointment.setProperty("selected", false, true); // do not invalidate CalendarRow
 			oAppointment.$().removeClass("sapUiCalendarAppSel");
-			oAppointment.$().attr("aria-describedby", sAriaDescribedByNotSelected);
+			if (sCurrentAriaDescribedByNotSelected) {
+				oAppointment.$().attr("aria-describedby", sCurrentAriaDescribedByNotSelected);
+			} else {
+				oAppointment.$().removeAttr("aria-describedby");
+			}
 			_removeAllAppointmentSelections(this, bRemoveOldSelection);
 		} else {
 			oAppointment.setProperty("selected", true, true); // do not invalidate CalendarRow
 			oAppointment.$().addClass("sapUiCalendarAppSel");
-			oAppointment.$().attr("aria-describedby", sAriaDescribedBySelected);
+			oAppointment.$().attr("aria-describedby", sCurrentAriaDescribedBySelected);
 			_removeAllAppointmentSelections(this, bRemoveOldSelection);
 		}
 		// removes or adds the selected appointments from this.aSelectedAppointments

package/src/sap/ui/unified/CalendarRowRenderer.js

@@ -13,7 +13,8 @@ sap.ui.define([
 	'sap/ui/Device',
 	'sap/ui/unified/library',
 	'sap/ui/core/InvisibleText',
-	"sap/ui/core/date/UI5Date",
+	'sap/ui/core/date/UI5Date',
+	'sap/ui/unified/calendar/RecurrenceUtils',
 	'sap/base/Log',
 	// side effect: required by RenderManager#icon
 	'sap/ui/core/IconPool'
@@ -28,6 +29,7 @@ sap.ui.define([
 		library,
 		InvisibleText,
 		UI5Date,
+		RecurrenceUtils,
 		Log
 	) {
 		"use strict";
@@ -264,6 +266,11 @@ sap.ui.define([
 	};
 
 	CalendarRowRenderer.renderInterval = function(oRm, oRow, iInterval, iWidth,  aIntervalHeaders, aNonWorkingItems, iStartOffset, iNonWorkingMax, aNonWorkingSubItems, iSubStartOffset, iNonWorkingSubMax, bFirstOfType, bLastOfType){
+		const oStartDateInterval = oRow.getStartDate();
+		const oEndDate = UI5Date.getInstance(oRow.getStartDate());
+		oEndDate.setDate(oEndDate.getDate() + 1);
+		const oCellStartDate = UI5Date.getInstance(oStartDateInterval);
+		oCellStartDate.setHours(iInterval + iStartOffset);
 
 		var sId = oRow.getId() + "-AppsInt" + iInterval;
 		var i;
@@ -271,6 +278,17 @@ sap.ui.define([
 		var iMonth = oRow.getStartDate().getMonth();
 		var iDaysLength = UI5Date.getInstance(oRow.getStartDate().getFullYear(), iMonth + 1, 0).getDate();
 
+		const aFilteredNonWorkingRange = oRow.getIntervalType() !== CalendarIntervalType.Hour ?
+			[] :
+			oRow.getNonWorkingPeriods().filter((oPeriod) => {
+				const hasOccurrenceOnDate = RecurrenceUtils.hasOccurrenceOnDate.bind(oPeriod);
+				return hasOccurrenceOnDate(oStartDateInterval);
+			});
+
+		const aFilteredItemsForCurrentHours = aFilteredNonWorkingRange.filter((oPeriod) => {
+			return oPeriod.hasNonWorkingAtHour(oCellStartDate);
+		});
+
 		oRm.openStart("div", sId);
 		oRm.class("sapUiCalendarRowAppsInt");
 		oRm.style("width", iWidth + "%");
@@ -298,6 +316,16 @@ sap.ui.define([
 		this.writeCustomAttributes(oRm, oRow);
 		oRm.openEnd(); // div element
 
+		if (aFilteredItemsForCurrentHours.length) {
+			RecurrenceUtils.getWorkingAndNonWorkingSegments(oCellStartDate, aFilteredItemsForCurrentHours).forEach((oHourParts) => {
+				if (oHourParts.type === "working") {
+					this.renderWorkingParts(oRm, oHourParts.duration);
+				} else {
+					this.renderNonWorkingParts(oRm, oHourParts.duration);
+				}
+			});
+		}
+
 		if (bShowIntervalHeaders) {
 			oRm.openStart("div");
 			oRm.class("sapUiCalendarRowAppsIntHead");
@@ -511,11 +539,11 @@ sap.ui.define([
 		var bAppointmentSelected = oAppointment.getSelected();
 		var mAccProps = {
 			role: "listitem",
-			labelledby: {value: InvisibleText.getStaticId("sap.ui.unified", "APPOINTMENT") + " " + sId + "-Descr", append: true},
-			describedby: {value: bAppointmentSelected
-								? InvisibleText.getStaticId("sap.ui.unified", "APPOINTMENT_SELECTED")
-								: InvisibleText.getStaticId("sap.ui.unified", "APPOINTMENT_UNSELECTED"),
-								append: true},
+			labelledby: {
+				value: `${InvisibleText.getStaticId("sap.m", "ACC_CTR_TYPE_LISTITEM")} ${InvisibleText.getStaticId("sap.ui.unified", "APPOINTMENT")} ${sId.concat("-Descr")}`,
+				append: true
+			},
+			describedby: {value: bAppointmentSelected ? InvisibleText.getStaticId("sap.ui.unified", "APPOINTMENT_SELECTED") : "", append: true},
 			selected: null
 		};
 		var iRowCount = oRow._getAppointmentRowCount(oAppointmentInfo, bReducedHeight);
@@ -881,6 +909,29 @@ sap.ui.define([
 		return aResult;
 	};
 
+	CalendarRowRenderer.renderWorkingParts = function (oRm, iDuration){
+		const iWidth = iDuration / 60 * 100;
+
+		oRm.openStart("div");
+		oRm.style("width", `${iWidth}%`);
+		oRm.style("height", "inherit" );
+		oRm.style("display","inline-block");
+		oRm.openEnd();
+		oRm.close("div");
+	};
+
+	CalendarRowRenderer.renderNonWorkingParts = function (oRm, iDuration){
+		const iWidth = iDuration / 60 * 100;
+
+		oRm.openStart("div");
+		oRm.style("width", `${iWidth}%`);
+		oRm.class("sapUiCalendarRowAppsNoWork");
+		oRm.style("height", "inherit" );
+		oRm.style("display","inline-block");
+		oRm.openEnd();
+		oRm.close("div");
+	};
+
 	/**
 	 * Retrieves text for given CalendarDayType based on given type and legend items.
 	 * @param {sap.ui.unified.CalendarDayType} sType the type to obtain information about

package/src/sap/ui/unified/CalendarTimeInterval.js

@@ -72,7 +72,7 @@ sap.ui.define([
 	 * @class
 	 * Calendar with granularity of time items displayed in one line.
 	 * @extends sap.ui.core.Control
-	 * @version 1.127.0
+	 * @version 1.128.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/unified/CalendarWeekInterval.js

@@ -39,7 +39,7 @@ sap.ui.define(['sap/ui/unified/calendar/CalendarUtils', 'sap/ui/unified/calendar
 		 * its start date to the first date of the same week as the date the user chose.
 		 *
 		 * @extends sap.ui.unified.CalendarDateInterval
-		 * @version 1.127.0
+		 * @version 1.128.0
 		 *
 		 * @constructor
 		 * @private

package/src/sap/ui/unified/ColorPicker.js

@@ -69,7 +69,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.127.0
+	 * @version 1.128.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/unified/ColorPickerPopover.js

@@ -49,7 +49,7 @@ sap.ui.define([
 		 * A thin wrapper over {@link sap.ui.unified.ColorPicker} allowing the latter to be used in a popover.
 		 *
 		 * @extends sap.ui.core.Control
-		 * @version 1.127.0
+		 * @version 1.128.0
 		 *
 		 * @constructor
 		 * @public

package/src/sap/ui/unified/ContentSwitcher.js

@@ -31,7 +31,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.127.0
+	 * @version 1.128.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/unified/Currency.js

@@ -58,7 +58,7 @@ sap.ui.define([
 		 * @extends sap.ui.core.Control
 		 *
 		 * @author SAP SE
-		 * @version 1.127.0
+		 * @version 1.128.0
 		 *
 		 * @constructor
 		 * @public

package/src/sap/ui/unified/CurrencyRenderer.js

@@ -14,7 +14,7 @@ sap.ui.define(["sap/m/library", "sap/ui/core/Lib"],
 	/**
 	 * Currency renderer.
 	 *
-	 * @version 1.127.0
+	 * @version 1.128.0
 	 * @namespace
 	 */
 	var CurrencyRenderer = {

package/src/sap/ui/unified/DateRange.js

@@ -20,7 +20,7 @@ sap.ui.define(['sap/ui/core/Element', './library', 'sap/ui/unified/calendar/Cale
 	 * @class
 	 * Date range for use in DatePicker
 	 * @extends sap.ui.core.Element
-	 * @version 1.127.0
+	 * @version 1.128.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/unified/DateTypeRange.js

@@ -25,7 +25,7 @@ sap.ui.define(['./DateRange', './library'],
 	 * @class
 	 * Date range with calendar day type information. Used to visualize special days in the Calendar.
 	 * @extends sap.ui.unified.DateRange
-	 * @version 1.127.0
+	 * @version 1.128.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/unified/FileUploader.js

@@ -73,7 +73,7 @@ sap.ui.define([
 	 * @implements sap.ui.core.IFormContent, sap.ui.unified.IProcessableBlobs
 	 *
 	 * @author SAP SE
-	 * @version 1.127.0
+	 * @version 1.128.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/unified/FileUploaderParameter.js

@@ -22,7 +22,7 @@ sap.ui.define(['sap/ui/core/Element', './library'],
 	 * @extends sap.ui.core.Element
 	 *
 	 * @author SAP SE
-	 * @version 1.127.0
+	 * @version 1.128.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/unified/FileUploaderXHRSettings.js

@@ -20,7 +20,7 @@ sap.ui.define(['sap/ui/core/Element', './library'],
 		 * @extends sap.ui.core.Element
 		 *
 		 * @author SAP SE
-		 * @version 1.127.0
+		 * @version 1.128.0
 		 *
 		 * @constructor
 		 * @since 1.52

package/src/sap/ui/unified/Menu.js

@@ -70,7 +70,7 @@ sap.ui.define([
 	 * @implements sap.ui.core.IContextMenu
 	 *
 	 * @author SAP SE
-	 * @version 1.127.0
+	 * @version 1.128.0
 	 * @since 1.21.0
 	 *
 	 * @constructor

package/src/sap/ui/unified/MenuItem.js

@@ -37,7 +37,7 @@ sap.ui.define([
 	 * @implements sap.ui.unified.IMenuItem
 	 *
 	 * @author SAP SE
-	 * @version 1.127.0
+	 * @version 1.128.0
 	 * @since 1.21.0
 	 *
 	 * @constructor

package/src/sap/ui/unified/MenuItemBase.js

@@ -23,7 +23,7 @@ sap.ui.define(['sap/ui/core/Element', './library', 'sap/ui/core/IconPool', 'sap/
 	 * @extends sap.ui.core.Element
 	 *
 	 * @author SAP SE
-	 * @version 1.127.0
+	 * @version 1.128.0
 	 * @since 1.21.0
 	 *
 	 * @constructor

package/src/sap/ui/unified/MenuItemGroup.js

@@ -30,7 +30,7 @@ sap.ui.define([
 	 * @implements sap.ui.unified.IMenuItem
 	 *
 	 * @author SAP SE
-	 * @version 1.127.0
+	 * @version 1.128.0
 	 * @since 1.127.0
 	 *
 	 * @constructor

package/src/sap/ui/unified/MenuRenderer.js

@@ -15,7 +15,7 @@ sap.ui.define(["sap/ui/core/ControlBehavior"],
 	 * Menu renderer.
 	 * @author SAP - TD Core UI&AM UI Infra
 	 *
-	 * @version 1.127.0
+	 * @version 1.128.0
 	 * @namespace
 	 */
 	var MenuRenderer = {

package/src/sap/ui/unified/MenuTextFieldItem.js

@@ -53,7 +53,7 @@ sap.ui.define([
 	 * @implements sap.ui.unified.IMenuItem
 	 *
 	 * @author SAP SE
-	 * @version 1.127.0
+	 * @version 1.128.0
 	 * @since 1.21.0
 	 *
 	 * @constructor

package/src/sap/ui/unified/NonWorkingPeriod.js

@@ -0,0 +1,110 @@
+/*!
+ * OpenUI5
+ * (c) Copyright 2009-2024 SAP SE or an SAP affiliate company.
+ * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
+ */
+//Provides control sap.ui.unified.NonWorkingPeriod.
+sap.ui.define([
+	'sap/ui/core/Element',
+	'sap/ui/core/date/UI5Date',
+	'sap/base/Log'
+],
+	function(
+		Element,
+		UI5Date,
+		Log
+		) {
+	"use strict";
+	/**
+	 * Constructor for a new NonWorkingPeriod.
+	 *
+	 * @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
+	 * NonWorkingPeriod
+	 * @extends sap.ui.core.Element
+	 * @version 1.128.0
+	 *
+	 * @constructor
+	 * @public
+	 * @since 1.27.0
+	 * @experimental Since version 1.127.0.
+	 * @alias sap.ui.unified.NonWorkingPeriod
+	 */
+	var NonWorkingPeriod = Element.extend("sap.ui.unified.NonWorkingPeriod", /** @lends sap.ui.unified.NonWorkingPeriod.prototype */ { metadata : {
+		library : "sap.ui.unified",
+		properties : {
+			/**
+			 * Determines the day to which the timeRange refers. This object must be a UI5Date or JavaScript Date object.
+			 */
+			date : {type : "object", group : "Data"}
+		},
+		defaultAggregation: "timeRange",
+		aggregations: {
+			/**
+			 * Defines the hours range for the non-working period.
+			 */
+			timeRange: {
+				type: "sap.ui.unified.TimeRange",
+				multiple: false
+			}
+		}
+	}});
+
+	/**
+	 * Returns a composed start date.
+	 * @private
+	 * @returns {Date|module:sap/ui/core/date/UI5Date} Returns a date that is composed of the start date to which the non-working period refers,
+	 * replacing the hours, minutes, and seconds, respectively with the current hours, minutes, and seconds.
+	 */
+	NonWorkingPeriod.prototype.getStartDate = function(){
+		if (!this.getDate()) {
+			return Log.error("Enter a valid date.");
+		}
+
+		const oStartDate = UI5Date.getInstance(this.getDate());
+		const oTimeRangeStartDate = this.getTimeRange().getStartDate();
+
+		oStartDate.setHours(oTimeRangeStartDate.getHours(), oTimeRangeStartDate.getMinutes(), oTimeRangeStartDate.getMilliseconds());
+		return oStartDate;
+	};
+
+	/**
+	 * Returns a composed end date.
+	 * @private
+	 * @returns {Date|module:sap/ui/core/date/UI5Date} Returns a date that is composed of the end date to which the non-working period refers,
+	 * replacing the hours, minutes, and seconds, respectively with the current hours, minutes, and seconds.
+	 */
+	NonWorkingPeriod.prototype.getEndDate = function(){
+		if (!this.getDate()) {
+			return Log.error("Enter a valid date.");
+		}
+
+		const oEndDate = UI5Date.getInstance(this.getDate());
+		const oEndDateTimeRange = this.getTimeRange().getEndDate();
+
+		oEndDate.setHours(oEndDateTimeRange.getHours(), oEndDateTimeRange.getMinutes(), oEndDateTimeRange.getMilliseconds());
+		return oEndDate;
+	};
+
+	/**
+	 * Returns the duration of the non-working period.
+	 * @public
+	 * @returns {int} returns a number that represents the duration of a calendar item in minutes
+	 */
+	NonWorkingPeriod.prototype.getDurationInMinutes = function () {
+		return Math.abs(this.getStartDate().getTime() - this.getEndDate().getTime()) / 1000 / 60;
+	};
+
+	/**
+	 * Determines whether the current instance has recurrence or not.
+	 * @return {boolean} The result is <code>false</code> when the instance has no recurrence.
+	 * @private
+	 */
+	NonWorkingPeriod.prototype.isRecurring = function () {
+		return false;
+	};
+
+	return NonWorkingPeriod;
+});

package/src/sap/ui/unified/RecurringNonWorkingPeriod.js

@@ -0,0 +1,82 @@
+/*!
+ * OpenUI5
+ * (c) Copyright 2009-2024 SAP SE or an SAP affiliate company.
+ * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
+ */
+
+// Provides control sap.ui.unified.RecurringNonWorkingPeriod.
+sap.ui.define([
+	"./NonWorkingPeriod"
+],
+	function(
+		NonWorkingPeriod
+	) {
+	"use strict";
+
+	/**
+	 * Constructor for a new <code>RecurringNonWorkingPeriod</code>.
+	 *
+	 * @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
+	 * A <code>RecurringNonWorkingPeriod</code> for use in a <code>PlanningCalendar</code> and <code>SinglePlanningCalendar</code>.
+	 *
+	 * Applications can inherit from this element to add own fields.
+	 * @extends sap.ui.unified.
+	 * @version 1.128.0
+	 *
+	 * @constructor
+	 * @public
+	 * @since 1.127.0
+	 * @experimental Since version 1.127.0.
+	 * @alias sap.ui.unified.RecurringNonWorkingPeriod
+	 */
+	var RecurringNonWorkingPeriod = NonWorkingPeriod.extend("sap.ui.unified.RecurringNonWorkingPeriod", /** @lends sap.ui.unified.RecurringNonWorkingPeriod.prototype */ { metadata : {
+
+		library : "sap.ui.unified",
+		properties : {
+			/**
+			 * The recurrenceType determines the pattern of recurrence for a given calendar item.
+			 */
+			recurrenceType: {type: "sap.ui.unified.RecurrenceType", group: "Misc"},
+
+			/**
+			 * Determines the end date of the calendar item, as a UI5Date or JavaScript Date object. It is considered as a local date.
+			 */
+			recurrenceEndDate: {type : "object", group : "Data"},
+
+			/**
+			 * The recurrencePattern is an integer value which, in combination with the recurrenceType, sets the recurrence frequency for a calendar item.
+			 * For example, if the recurrenceType is set to "Daily" and the recurrencePattern is set to 1, it signifies that repetition is set for every day.
+			 * If the recurrencePattern is set to 3, this would imply the calendar item is recurring once for every three days.
+			 */
+			recurrencePattern: {type : "int", group : "Behavior", defaultValue : 1}
+		}
+	}});
+
+	/**
+	 * Evaluates whether there is an occurrence for the given date and hours.
+	 * @param {Date|module:sap/ui/core/date/UI5Date} oDate A date instance
+	 * @return {boolean} True if there is an occurrence for these hours
+	 * @private
+	 */
+	RecurringNonWorkingPeriod.prototype.hasNonWorkingAtHour = function (oDate) {
+		const iStartHours = this.getStartDate().getHours();
+		const iTimeCalendarItem = iStartHours + (this.getStartDate().getMinutes() + this.getDurationInMinutes()) / 60;
+		const iTimeData = oDate.getHours() + oDate.getMinutes() / 60;
+
+		return oDate.getHours() === iStartHours || (iTimeCalendarItem >= iTimeData && iStartHours <= oDate.getHours());
+	};
+
+	/**
+	 * Determines whether the current instance has recurrence or not.
+	 * @return {boolean} The result is <code>true</code> when the instance has recurrence.
+	 * @private
+	 */
+	RecurringNonWorkingPeriod.prototype.isRecurring = function () {
+		return true;
+	};
+
+	return RecurringNonWorkingPeriod;
+});

package/src/sap/ui/unified/Shell.js

@@ -25,7 +25,7 @@ sap.ui.define(['./ShellHeader', './ShellLayout', './library', './ShellRenderer']
 	 * @extends sap.ui.unified.ShellLayout
 	 *
 	 * @author SAP SE
-	 * @version 1.127.0
+	 * @version 1.128.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/unified/ShellHeadItem.js

@@ -28,7 +28,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Element
 	 *
 	 * @author SAP SE
-	 * @version 1.127.0
+	 * @version 1.128.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/unified/ShellHeadUserItem.js

@@ -27,7 +27,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Element
 	 *
 	 * @author SAP SE
-	 * @version 1.127.0
+	 * @version 1.128.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/unified/ShellLayout.js

@@ -56,7 +56,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.127.0
+	 * @version 1.128.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/unified/ShellOverlay.js

@@ -46,7 +46,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.127.0
+	 * @version 1.128.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/unified/SplitContainer.js

@@ -34,7 +34,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.127.0
+	 * @version 1.128.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/unified/TimeRange.js

@@ -0,0 +1,81 @@
+
+/*!
+ * OpenUI5
+ * (c) Copyright 2009-2024 SAP SE or an SAP affiliate company.
+ * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
+ */
+//Provides control sap.ui.unified.TimeRange.
+sap.ui.define([
+	'sap/ui/core/Element',
+	'sap/ui/core/format/DateFormat',
+	'sap/ui/core/Configuration',
+	"sap/base/i18n/Formatting",
+	'sap/ui/core/Locale'
+],
+	function(Element, DateFormat, Configuration, Formatting, Locale) {
+	"use strict";
+	/**
+	 * Constructor for a new TimeRange.
+	 *
+	 * @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
+	 * Time range for use in <code>NonWorkingPeriod</code>
+	 * @extends sap.ui.core.Element
+	 * @version 1.128.0
+	 *
+	 * @constructor
+	 * @public
+	 * @since 1.127.0
+	 * @experimental Since version 1.127.0.
+	 * @alias sap.ui.unified.TimeRange
+	 */
+	var TimeRange = Element.extend("sap.ui.unified.TimeRange", /** @lends sap.ui.unified.TimeRange.prototype */ { metadata : {
+		library : "sap.ui.unified",
+		properties : {
+			/**
+			 * Start time for a time range. This must be a String.
+			 */
+			start: {type : "string", group : "Misc", defaultValue : null},
+			/**
+			 * End time  for a time range. This must be a String.
+			 */
+			end : {type : "string", group : "Misc", defaultValue : null},
+			/**
+			 * Determines the format of the startTime and endTime
+			 *
+			 * <b>Note:</b> a time pattern in LDML format. It is not verified whether the pattern only represents a time.
+			 */
+			valueFormat : {type: "string", group : "Misc", defaultValue: "hh:mm"}
+		}
+	}});
+
+
+	TimeRange.prototype._getFormatInstance = function(){
+		const oArguments = {pattern: this.getValueFormat(), strictParsing: true};
+		return DateFormat.getTimeInstance(oArguments, new Locale(Formatting.getLanguageTag()));
+	};
+
+	/**
+	 * Get start date for a time range.
+	 * From this date, only hours, minutes, seconds, and milliseconds are used.
+	 * @public
+	 * @returns {Date|module:sap/ui/core/date/UI5Date} [oDate] A date instance
+	 */
+	TimeRange.prototype.getStartDate = function () {
+		return this._getFormatInstance().parse(this.getStart());
+	};
+
+	/**
+	 * Get end date for a time range.
+	 * From this date, only hours, minutes, seconds, and milliseconds are used.
+	 * @public
+	 * @returns {Date|module:sap/ui/core/date/UI5Date} [oDate] A date instance
+	 */
+	TimeRange.prototype.getEndDate = function () {
+		return this._getFormatInstance().parse(this.getEnd());
+	};
+
+	return TimeRange;
+});

package/src/sap/ui/unified/calendar/DatesRow.js

@@ -38,7 +38,7 @@ sap.ui.define([
 	 * If used inside the calendar the properties and aggregation are directly taken from the parent
 	 * (To not duplicate and sync DateRanges and so on...)
 	 * @extends sap.ui.unified.calendar.Month
-	 * @version 1.127.0
+	 * @version 1.128.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/unified/calendar/Header.js

@@ -27,7 +27,7 @@ sap.ui.define([
 	 *
 	 * <b>Note:</b> This is used inside the calendar. Not for standalone usage
 	 * @extends sap.ui.core.Control
-	 * @version 1.127.0
+	 * @version 1.128.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/unified/calendar/IndexPicker.js

@@ -32,7 +32,7 @@ sap.ui.define([
 	 * This control serves for picking an item from a grid with items which are relative periods in Plannig Calendar.
 	 * This is used inside the sap.m.PlanningCalendar relative views. Not for stand alone usage.
 	 * @extends sap.ui.core.Control
-	 * @version 1.127.0
+	 * @version 1.128.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/unified/calendar/Month.js

@@ -83,7 +83,7 @@ sap.ui.define([
 	 * If used inside the calendar the properties and aggregation are directly taken from the parent
 	 * (To not duplicate and sync DateRanges and so on...)
 	 * @extends sap.ui.core.Control
-	 * @version 1.127.0
+	 * @version 1.128.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/unified/calendar/MonthPicker.js

@@ -55,7 +55,7 @@ sap.ui.define([
 	 * renders a MonthPicker with ItemNavigation
 	 * This is used inside the calendar. Not for stand alone usage
 	 * @extends sap.ui.core.Control
-	 * @version 1.127.0
+	 * @version 1.128.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/unified/calendar/MonthsRow.js

@@ -66,7 +66,7 @@ sap.ui.define([
 	 * The MontsRow works with UI5Date or JavaScript Date objects, but only the month and the year are used to display and interact.
 	 * As representation for a month, the 1st of the month will always be returned in the API.
 	 * @extends sap.ui.core.Control
-	 * @version 1.127.0
+	 * @version 1.128.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/unified/calendar/OneMonthDatesRow.js

@@ -34,7 +34,7 @@ sap.ui.define([
 	 * Other usages are not supported.
 	 *
 	 * @extends sap.ui.unified.calendar.DatesRow
-	 * @version 1.127.0
+	 * @version 1.128.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/unified/calendar/RecurrenceUtils.js

@@ -0,0 +1,146 @@
+/*!
+ * OpenUI5
+ * (c) Copyright 2009-2024 SAP SE or an SAP affiliate company.
+ * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
+ */
+
+// package documentation
+/**
+ * Collection of utility functions to handle recurrence related operations.
+ *
+ * @namespace
+ * @name sap.ui.unified.recurring
+ * @public
+ */
+
+// Provides class sap.ui.unified.calendar.RecurrenceUtils
+sap.ui.define([
+	'sap/ui/core/date/UI5Date'
+],
+	function(
+		UI5Date
+	) {
+		"use strict";
+
+		// Static class
+
+		/**
+		 * @alias sap.ui.unified.RecurrenceUtils
+		 * @namespace
+		 * @private
+		 */
+		var RecurrenceUtils = {};
+
+		const PERIOD_TYPE = {
+			"WORKING_PERIOD" : "working",
+			"NON_WORKING_PERIOD": "non-working"
+		};
+
+		/**
+		 * Evaluates whether there is an occurrence for a given date.
+		 * The method will be used by <code>RecurringNonWorkingPeriod</code> by changing
+		 * the context to that of <code>RecurringNonWorkingPeriod</code>
+		 * @param {Date|module:sap/ui/core/date/UI5Date} oDate A date instance
+		 * @return {boolean} True if there is an occurrence for this day
+		 * @private
+		 * @ui5-restricted sap.ui.unified.RecurringNonWorkingPeriod
+		 */
+		RecurrenceUtils.hasOccurrenceOnDate = function (oDate) {
+			if (this?.getRecurrenceType() !== "Daily") {
+				return false;
+			}
+
+			const oStartDate = UI5Date.getInstance(this.getStartDate());
+			const oCurrentDate = UI5Date.getInstance(oDate);
+			oStartDate.setHours(0,0,0);
+			oCurrentDate.setHours(0,0,0);
+
+			const iDayInMilliseconds = 24 * 60 * 60 * 1000;
+			const isDateInRange = oCurrentDate >= oStartDate && oCurrentDate <= this.getRecurrenceEndDate();
+			const isWithCorrectPattern = ((oCurrentDate.getTime() - oStartDate.getTime()) / iDayInMilliseconds) % this.getRecurrencePattern() === 0;
+
+			return  isDateInRange && isWithCorrectPattern;
+		};
+
+		RecurrenceUtils.calculateDurationInCell = function (oNonWorkingPart, oCellStartDate, iCurrentPointInMinutes){
+			const oNonWorkingPartDate = oNonWorkingPart.getStartDate();
+			const iMinutesInOneHours = 60;
+			let iDuration = oNonWorkingPart.getDurationInMinutes();
+
+			if (oNonWorkingPartDate.getHours() < oCellStartDate.getHours()) {
+				const iTimeCell = oCellStartDate.getHours() * iMinutesInOneHours + oCellStartDate.getMinutes();
+				const iTimePart = oNonWorkingPartDate.getHours() * iMinutesInOneHours + oNonWorkingPartDate.getMinutes();
+				iDuration -= (iTimeCell - iTimePart);
+			} else if (oNonWorkingPartDate.getHours() === oCellStartDate.getHours() && oNonWorkingPartDate.getMinutes() > 0) {
+				iDuration = oNonWorkingPart.getDurationInMinutes() > 60 ? iMinutesInOneHours - iCurrentPointInMinutes : oNonWorkingPart.getDurationInMinutes();
+			} else {
+				iDuration = iMinutesInOneHours - iCurrentPointInMinutes;
+			}
+
+			return iDuration;
+		};
+
+		/**
+		 * Determines what portion of a calendar cell (representing one hour) is filled with non-working time and what portion is filled with working time.
+		 * @param {Date|module:sap/ui/core/date/UI5Date} oCellStartDate A date instance for the current cell
+		 * @param {Array<sap.ui.unified.NonWorkingPeriod | sap.ui.unified.RecurringNonWorkingPeriod>} aNonWorkingForCurrentHours An array of non-working periods
+		 * @return {Array} An array of objects containing information about the type and duration of each part of the cell.
+		 * @private
+		 * @ui5-restricted sap.ui.unified.RecurringNonWorkingPeriod
+		 */
+		RecurrenceUtils.getWorkingAndNonWorkingSegments = function (oCellStartDate, aNonWorkingForCurrentHours) {
+			const aCellInfo = [];
+			const iMinutesInOneHours = 60;
+
+			let iCurrentPointInMinutes = 0;
+			let index = 0;
+
+			while (iCurrentPointInMinutes < iMinutesInOneHours) {
+				const oNonWorkingPart = aNonWorkingForCurrentHours[index];
+				const oNonWorkingPartDate = oNonWorkingPart?.getStartDate();
+
+				if (!oNonWorkingPart) {
+					const iCurrentDuration = iMinutesInOneHours - iCurrentPointInMinutes;
+					aCellInfo.push({
+						type: PERIOD_TYPE.WORKING_PERIOD,
+						duration: iCurrentDuration
+					});
+
+					return aCellInfo;
+				}
+
+				let iDuration = this.calculateDurationInCell(oNonWorkingPart, oCellStartDate, iCurrentPointInMinutes);
+				const iStartTimeInMin = oNonWorkingPartDate.getMinutes();
+
+				if (iDuration > iMinutesInOneHours && oNonWorkingPartDate.getHours() < oCellStartDate.getHours()) {
+					aCellInfo.push({
+						type: PERIOD_TYPE.NON_WORKING_PERIOD,
+						duration: iMinutesInOneHours
+					});
+
+					return aCellInfo;
+				}
+
+				if (iStartTimeInMin === iCurrentPointInMinutes || oNonWorkingPartDate.getHours() < oCellStartDate.getHours()) {
+					aCellInfo.push({
+						type: PERIOD_TYPE.NON_WORKING_PERIOD,
+						duration: iDuration
+					});
+					index++;
+				} else {
+					iDuration = iStartTimeInMin - iCurrentPointInMinutes;
+					aCellInfo.push({
+						type: PERIOD_TYPE.WORKING_PERIOD,
+						duration: iDuration
+					});
+				}
+
+				iCurrentPointInMinutes += iDuration;
+			}
+
+			return aCellInfo;
+		};
+
+		return RecurrenceUtils;
+
+	}, /* bExport= */ true);

package/src/sap/ui/unified/calendar/TimesRow.js

@@ -67,7 +67,7 @@ sap.ui.define([
 	 *
 	 * The TimesRow works with UI5Date or JavaScript Date objects.
 	 * @extends sap.ui.core.Control
-	 * @version 1.127.0
+	 * @version 1.128.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/unified/calendar/YearPicker.js

@@ -62,7 +62,7 @@ sap.ui.define([
 	 * As in all date-time controls, all pubic JS Date objects that are given (e.g. <code>setDate()</code>) or read
 	 * (e.g. <code>getFirstRenderedDate</code>) with values which are considered as date objects in browser(local) timezone.
 	 * @extends sap.ui.core.Control
-	 * @version 1.127.0
+	 * @version 1.128.0
 	 *
 	 * @constructor
 	 * @public

package/src/sap/ui/unified/calendar/YearRangePicker.js

@@ -45,7 +45,7 @@ sap.ui.define([
 	 * @extends sap.ui.unified.calendar.YearPicker
 	 *
 	 * @author SAP SE
-	 * @version 1.127.0
+	 * @version 1.128.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/unified/library.js

@@ -32,14 +32,14 @@ sap.ui.define([
 	 * @namespace
 	 * @alias sap.ui.unified
 	 * @author SAP SE
-	 * @version 1.127.0
+	 * @version 1.128.0
 	 * @since 1.28
 	 * @public
 	 */
 	var thisLib = Library.init({
 		name : "sap.ui.unified",
 		apiVersion: 2,
-		version: "1.127.0",
+		version: "1.128.0",
 		dependencies : ["sap.ui.core"],
 		designtime: "sap/ui/unified/designtime/library.designtime",
 		types: [
@@ -97,8 +97,11 @@ sap.ui.define([
 			"sap.ui.unified.MenuItemBase",
 			"sap.ui.unified.MenuItemGroup",
 			"sap.ui.unified.MenuTextFieldItem",
+			"sap.ui.unified.NonWorkingPeriod",
+			"sap.ui.unified.RecurringNonWorkingPeriod",
 			"sap.ui.unified.ShellHeadItem",
-			"sap.ui.unified.ShellHeadUserItem"
+			"sap.ui.unified.ShellHeadUserItem",
+			"sap.ui.unified.TimeRange"
 		],
 		extensions: {
 			//Configuration used for rule loading of Support Assistant
@@ -353,6 +356,42 @@ sap.ui.define([
 
 	DataType.registerEnum("sap.ui.unified.CalendarIntervalType", thisLib.CalendarIntervalType);
 
+	/**
+	 * Interval types in a <code>RecurrenceType</code>.
+	 *
+	 * @enum {string}
+	 * @public
+	 * @since 1.127.0
+	 */
+	thisLib.RecurrenceType = {
+		/**
+		 * Daily recurrence pattern
+		 *
+		 * @since 1.127.0
+		 */
+		Daily: "Daily",
+		/**
+		 * Weekly recurrence pattern.
+		 *
+		 * @since 1.127.0
+		 */
+		Weekly: "Weekly",
+		/**
+		 * Monthly recurrence pattern.
+		 *
+		 * @since 1.127.0
+		 */
+		Monthly: "Monthly",
+		/**
+		 * Yearly recurrence pattern.
+		 *
+		 * @since 1.127.0
+		 */
+		Yearly: "Yearly"
+	};
+
+	DataType.registerEnum("sap.ui.unified.RecurrenceType", thisLib.RecurrenceType);
+
 	/**
 	 * Types of a calendar appointment display mode
 	 *

package/src/sap/ui/unified/themes/base/Calendar.less

@@ -1094,7 +1094,6 @@ html.sap-phone [data-sap-ui-popup] .sapUiCal > .sapUiCalContent > .sapUiCalYearP
 	}
 	.sapUiCalHeadB1,
 	.sapUiCalHeadB2 {
-		margin: inherit;
 		width: 5.75rem;
 	}
 	&.sapUiCalIntLarge .sapUiCalHeadB1 {