@openui5/sap.m 1.108.2 → 1.110.0

package/src/sap/m/PlanningCalendar.js

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2009-2022 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2009-2023 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 
@@ -31,6 +31,10 @@ sap.ui.define([
 	'sap/ui/core/dnd/DropInfo',
 	'sap/ui/core/dnd/DragDropInfo',
 	'sap/ui/core/format/DateFormat',
+	'sap/ui/core/Configuration',
+	'sap/ui/core/date/CalendarWeekNumbering',
+	'sap/ui/core/date/CalendarUtils',
+	'sap/ui/core/Locale',
 	'sap/m/Toolbar',
 	'sap/m/Table',
 	'sap/m/Column',
@@ -73,6 +77,10 @@ sap.ui.define([
 	DropInfo,
 	DragDropInfo,
 	DateFormat,
+	Configuration,
+	CalendarWeekNumbering,
+	CalendarDateUtils,
+	Locale,
 	Toolbar,
 	Table,
 	Column,
@@ -185,7 +193,7 @@ sap.ui.define([
 	 * {@link sap.m.PlanningCalendarView PlanningCalendarView}'s properties.
 	 *
 	 * @extends sap.ui.core.Control
-	 * @version 1.108.2
+	 * @version 1.110.0
 	 *
 	 * @constructor
 	 * @public
@@ -377,12 +385,27 @@ sap.ui.define([
 				 */
 				firstDayOfWeek : {type : "int", group : "Appearance", defaultValue : -1},
 
+				/**
+				 * If set, the calendar week numbering is used for display.
+				 * If not set, the calendar week numbering of the global configuration is used.
+				 * @since 1.110.0
+				 */
+				calendarWeekNumbering : { type : "sap.ui.core.date.CalendarWeekNumbering", group : "Appearance", defaultValue: null},
+
 				/**
 				 * If set, the calendar type is used for display.
 				 * If not set, the calendar type of the global configuration is used.
 				 * @since 1.108.0
 				 */
-				primaryCalendarType : {type : "sap.ui.core.CalendarType", group : "Appearance", defaultValue : null},
+				primaryCalendarType : {type : "sap.ui.core.CalendarType", group : "Appearance"},
+
+				/**
+				 * If set, the days are also represented in this calendar type.
+				 * If not set, the dates are only represented in the primary calendar type.
+				 * Note: The second calendar type won't be represented in the DOM when this property is not set explicitly.
+				 * @since 1.109.0
+				 */
+				secondaryCalendarType : {type : "sap.ui.core.CalendarType", group : "Appearance"},
 
 				/**
 				 * Determines whether the selection of multiple appointments is enabled.
@@ -759,7 +782,7 @@ sap.ui.define([
 			},
 			onAfterRendering: function () {
 				this._rowHeaderClickEvent = oTable.$().find(".sapMPlanCalRowHead > div.sapMLIB").on("click", function (oEvent) {
-					var oRowHeader = jQuery(oEvent.currentTarget).control(0),
+					var oRowHeader = Element.closestTo(oEvent.currentTarget),
 						oRow = getRow(oRowHeader.getParent()),
 						sRowHeaderId = oRowHeader.getId();
 
@@ -825,8 +848,7 @@ sap.ui.define([
 	PlanningCalendar.prototype.onBeforeRendering = function(){
 
 		this._bBeforeRendering = true;
-
-		this._getHeader().setProperty("_primaryCalendarType", this.getPrimaryCalendarType());
+		this._updateHeader();
 
 		// init interval if default one is used
 		this._adjustViewKey();
@@ -849,6 +871,16 @@ sap.ui.define([
 
 	};
 
+	PlanningCalendar.prototype._updateHeader = function () {
+		this._getHeader().setProperty("_primaryCalendarType", this.getPrimaryCalendarType());
+		if (this._getSecondaryCalendarType()) {
+			this.setShowDayNamesLine(true);
+			this._getHeader().setProperty("_secondaryCalendarType", this.getSecondaryCalendarType());
+		}
+
+		return this;
+	};
+
 	PlanningCalendar.prototype.attachEvent = function (eventId, data, functionToCall, listener) {
 		Control.prototype.attachEvent.call(this, eventId, data, functionToCall, listener);
 		if (this.hasListeners("intervalSelect")) {
@@ -858,6 +890,7 @@ sap.ui.define([
 				}
 			}, this);
 		}
+
 		return this;
 	};
 
@@ -880,7 +913,9 @@ sap.ui.define([
 	 * @private
 	 */
 	PlanningCalendar.prototype._createHeader = function () {
-		var oHeader = new PlanningCalendarHeader(this.getId() + "-Header");
+		var oHeader = new PlanningCalendarHeader(this.getId() + "-Header", {
+			calendarWeekNumbering: this.getCalendarWeekNumbering()
+		});
 
 		oHeader._getRelativeInfo = this._getRelativeInfo.bind(this);
 
@@ -950,13 +985,14 @@ sap.ui.define([
 	};
 
 	/**
-	 * Creates and formats a string to be displayed in the picker button from the _header aggregation.
+	 * Creates and formats the strings to be displayed in the picker button from the _header aggregation.
 	 * If the date part of the start and end range of the showed view are different, the string contains
 	 * info about the current date. Otherwise, the result string shows info about a date range.
-	 * @returns {string} The concatenated string to be displayed
+	 * @returns {Object} The concatenated strings to be displayed
 	 * @private
 	 */
 	PlanningCalendar.prototype._formatPickerText = function () {
+
 		var oRangeDates = this._getFirstAndLastRangeDate(),
 			oStartDate = CalendarUtils._createLocalDate(oRangeDates.oStartDate, true),
 			oEndDate = CalendarUtils._createLocalDate(oRangeDates.oEndDate, true),
@@ -966,7 +1002,15 @@ sap.ui.define([
 			oDateFormat,
 			sResult,
 			sBeginningResult,
-			sEndResult;
+			sEndResult,
+			oDateFormatInSecType,
+			sBeginnigDateResultInSecType,
+			sEndResultInSecType,
+			sResultInSecType;
+
+		if (this._getSecondaryCalendarType()) {
+			oDateFormatInSecType = DateFormat.getDateInstance({ format: "yMMMMd", calendarType: this.getSecondaryCalendarType() });
+		}
 
 		switch (sViewType) {
 			case CalendarIntervalType.Hour:
@@ -975,21 +1019,35 @@ sap.ui.define([
 				if (oStartDate.getDate() !== oEndDate.getDate()) {
 					sEndResult = oDateFormat.format(oEndDate);
 				}
+
+				if (this._getSecondaryCalendarType()){
+					sBeginnigDateResultInSecType = oDateFormatInSecType.format(oStartDate);
+					if (oStartDate.getDate() !== oEndDate.getDate()) {
+						sEndResultInSecType = oDateFormatInSecType.format(oEndDate);
+					}
+				}
+
 				break;
 
 			case CalendarIntervalType.Day:
 			case CalendarIntervalType.Week:
-				var fnIntervalLabelFormatter = this._getView(sViewKey).getIntervalLabelFormatter();
+				var fnIntervalLabelFormatter = this._getRelativeInfo().intervalLabelFormatter;
 
 				if (this.isRelative()) {
 					var iBeginning = this.calcIntervalOffset(this.getStartDate());
 					var iEnding = this.calcIntervalOffset(this.getEndDate()) - this.calcIntervalOffset(this.getStartDate());
 					sBeginningResult = fnIntervalLabelFormatter ? fnIntervalLabelFormatter(iBeginning) : iBeginning;
-					sEndResult = fnIntervalLabelFormatter ? fnIntervalLabelFormatter(iBeginning + iEnding - 1) : iBeginning + iEnding;
+					var iEndingParameter = this._getRelativeInfo().iIntervalSize === 1 ? iBeginning + iEnding : iBeginning + iEnding - 1;
+					sEndResult = fnIntervalLabelFormatter ? fnIntervalLabelFormatter(iEndingParameter) : iBeginning + iEnding;
 				} else {
 					oDateFormat = DateFormat.getDateInstance({ format: "yMMMMd", calendarType: this.getPrimaryCalendarType() });
 					sBeginningResult = oDateFormat.format(oStartDate);
 					sEndResult = oDateFormat.format(oEndDate);
+					if (this._getSecondaryCalendarType()) {
+						sBeginnigDateResultInSecType = oDateFormatInSecType.format(oStartDate);
+						sEndResultInSecType = oDateFormatInSecType.format(oEndDate);
+					}
+
 				}
 
 				break;
@@ -998,13 +1056,26 @@ sap.ui.define([
 			case "OneMonth":
 				oDateFormat = DateFormat.getDateInstance({format: "yMMMM", calendarType: this.getPrimaryCalendarType()});
 				sBeginningResult = oDateFormat.format(oStartDate);
+				if (this._getSecondaryCalendarType()) {
+					oDateFormatInSecType = DateFormat.getDateInstance({format: "yMMMM", calendarType: this.getSecondaryCalendarType()});
+					sBeginnigDateResultInSecType = oDateFormatInSecType.format(oStartDate);
+				}
 				break;
 
 			case CalendarIntervalType.Month:
 				oDateFormat = DateFormat.getDateInstance({format: "y", calendarType: this.getPrimaryCalendarType()});
 				sBeginningResult = oDateFormat.format(oStartDate);
+
+				if (this._getSecondaryCalendarType()) {
+					oDateFormatInSecType = DateFormat.getDateInstance({format: "y", calendarType: this.getSecondaryCalendarType()});
+					sBeginnigDateResultInSecType = oDateFormatInSecType.format(oStartDate);
+				}
+
 				if (oStartDate.getFullYear() !== oEndDate.getFullYear()) {
 					sEndResult = oDateFormat.format(oEndDate);
+					if (this._getSecondaryCalendarType()) {
+						sEndResultInSecType = oDateFormatInSecType.format(oEndDate);
+					}
 				}
 
 				if (sBeginningResult === sEndResult) {
@@ -1018,18 +1089,28 @@ sap.ui.define([
 
 		if (!bRTL) {
 			sResult = sBeginningResult;
+			sResultInSecType = sBeginnigDateResultInSecType;
 			if (sEndResult) {
 				sResult += " - " + sEndResult;
 			}
+
+			if (this._getSecondaryCalendarType() && sEndResultInSecType) {
+				sResultInSecType += " - " + sEndResultInSecType;
+			}
 		} else {
 			if (sEndResult) {
 				sResult = sEndResult + " - " + sBeginningResult;
 			} else {
 				sResult = sBeginningResult;
 			}
+			if (this._getSecondaryCalendarType() && sEndResultInSecType) {
+				sResultInSecType = sBeginnigDateResultInSecType + " - " + sEndResultInSecType;
+			} else if (this._getSecondaryCalendarType()) {
+				sResultInSecType = sBeginnigDateResultInSecType;
+			}
 		}
 
-		return sResult;
+		return { primaryType: sResult, secondaryType: sResultInSecType };
 	};
 
 	/**
@@ -1438,6 +1519,51 @@ sap.ui.define([
 		return this;
 	};
 
+	PlanningCalendar.prototype._getSecondaryCalendarType = function() {
+		var sSecondaryCalendarType;
+
+		if (this._bSecondaryCalendarTypeSet) {
+			sSecondaryCalendarType = this.getSecondaryCalendarType();
+
+			if (sSecondaryCalendarType === this.getPrimaryCalendarType()) {
+				sSecondaryCalendarType = undefined;
+			}
+		}
+
+		return sSecondaryCalendarType;
+	};
+
+	/**
+	 * Sets the secondaryCalendarType.
+	 * @param {sap.ui.core.CalendarType} sSecondaryCalendarType the <code>sap.ui.core.CalendarType</code> to set as <code>sap.m.PlanningCalendar</code> <code>secondaryCalendarType</code>.
+	 * @returns {this} <code>this</code> to allow method chaining
+	 * @public
+	 */
+	PlanningCalendar.prototype.setSecondaryCalendarType = function (sSecondaryCalendarType) {
+		this.setProperty("secondaryCalendarType", sSecondaryCalendarType);
+		this._bSecondaryCalendarTypeSet = true;
+		if (this._getHeader()) {
+			this._getHeader().setProperty("_secondaryCalendarType", sSecondaryCalendarType);
+		}
+		if (this._oTimesRow) {
+			this._oTimesRow.setProperty("secondaryCalendarType", sSecondaryCalendarType);
+		}
+		if (this._oDatesRow) {
+			this._oDatesRow.setSecondaryCalendarType(sSecondaryCalendarType);
+		}
+		if (this._oMonthsRow) {
+			this._oMonthsRow.setSecondaryCalendarType(sSecondaryCalendarType);
+		}
+		if (this._oWeeksRow) {
+			this._oWeeksRow.setSecondaryCalendarType(sSecondaryCalendarType);
+		}
+		if (this._oOneMonthsRow) {
+			this._oOneMonthsRow.setSecondaryCalendarType(sSecondaryCalendarType);
+		}
+
+		return this;
+	};
+
 	PlanningCalendar.prototype.setMinDate = function(oDate){
 
 		if (deepEqual(oDate, this.getMinDate())) {
@@ -1477,7 +1603,7 @@ sap.ui.define([
 				Log.warning("StartDate < minDate -> StartDate set to minDate", this);
 				oStartDate = new Date(oDate.getTime());
 				this.setStartDate(oStartDate);
-				oHeader.setPickerText(this._formatPickerText());
+				oHeader.updatePickerText(this._formatPickerText());
 			}
 		} else {
 			this.setProperty("minDate", undefined, true);
@@ -1541,7 +1667,7 @@ sap.ui.define([
 					oStartDate.setFullYear(1);
 				}
 				this.setStartDate(oStartDate);
-				oHeader.setPickerText(this._formatPickerText());
+				oHeader.updatePickerText(this._formatPickerText());
 			}
 		} else {
 			this.setProperty("maxDate", undefined, true);
@@ -1562,6 +1688,26 @@ sap.ui.define([
 
 	};
 
+	PlanningCalendar.prototype.setCalendarWeekNumbering = function(sCalendarWeekNumbering) {
+		var oHeader = this._getHeader(),
+			oCalendarPicker = oHeader._oPopup && oHeader._oPopup.getContent()[0],
+			sLocale = Configuration.getFormatSettings().getFormatLocale().toString(),
+			oWeekConfiguration = CalendarDateUtils.getWeekConfigurationValues(sCalendarWeekNumbering, new Locale(sLocale)),
+			key;
+
+		this.setProperty("calendarWeekNumbering", sCalendarWeekNumbering);
+
+		this._dateNav.setWeekConfiguration(oWeekConfiguration);
+		oHeader.setCalendarWeekNumbering(sCalendarWeekNumbering);
+		oCalendarPicker && oCalendarPicker.setCalendarWeekNumbering(sCalendarWeekNumbering);
+		for (key in INTERVAL_METADATA) {
+			this[INTERVAL_METADATA[key].sInstanceName] && this[INTERVAL_METADATA[key].sInstanceName].setCalendarWeekNumbering(sCalendarWeekNumbering);
+		}
+		this.setStartDate(this.getStartDate());
+
+		return this;
+	};
+
 	PlanningCalendar.prototype.removeIntervalInstanceFromInfoToolbar = function () {
 		var aInfoToolbarContent = this._oInfoToolbar.getContent();
 		aInfoToolbarContent.forEach(function (oControl) {
@@ -1597,6 +1743,7 @@ sap.ui.define([
 		var oMaxDate = this.getMaxDate();
 		var oView = this._getView(sKey, !this._bBeforeRendering);
 		var oAssociation;
+		var sSecondaryCalendarType = this._getSecondaryCalendarType();
 
 		if (!oView) {
 			this._bCheckView = true;
@@ -1654,7 +1801,8 @@ sap.ui.define([
 							days: iIntervals,
 							showDayNamesLine: this.getShowDayNamesLine(),
 							legend: this.getLegend(),
-							showWeekNumbers: this.getShowWeekNumbers()
+							showWeekNumbers: this.getShowWeekNumbers(),
+							calendarWeekNumbering: this.getCalendarWeekNumbering()
 						});
 
 						oInterval.isRelative = this.isRelative.bind(this);
@@ -1680,6 +1828,7 @@ sap.ui.define([
 					}
 					this._insertInterval(oInterval);
 					this[oIntervalMetadata.sInstanceName] = oInterval;
+
 					if ((sIntervalType === CalendarIntervalType.OneMonth || sIntervalType === "OneMonth")) {
 						oAssociation = oHeader.getAggregation("_monthPicker") ? oHeader.getAggregation("_monthPicker") : oHeader._oPopup.getContent()[0];
 						oHeader.setAssociation("currentPicker", oAssociation);
@@ -1716,6 +1865,9 @@ sap.ui.define([
 							legend: this.getLegend()
 						});
 						this._oMonthsRow.setProperty("primaryCalendarType", this.getPrimaryCalendarType());
+						if (sSecondaryCalendarType) {
+							this._oMonthsRow.setProperty("secondaryCalendarType", sSecondaryCalendarType);
+						}
 						this._setAriaRole(this._oMonthsRow);
 						this._oMonthsRow._setLegendControlOrigin(this);
 						this._oMonthsRow.attachEvent("focus", this._handleFocus, this);
@@ -1749,6 +1901,12 @@ sap.ui.define([
 				oContent.setPrimaryCalendarType(this.getPrimaryCalendarType());
 			}
 
+			if (sSecondaryCalendarType && oContent.getMetadata().hasProperty("_secondaryCalendarType") ) {
+				oContent.setProperty("_secondaryCalendarType", sSecondaryCalendarType);
+			} else if (sSecondaryCalendarType && oContent.getMetadata().hasProperty("secondaryCalendarType") ) {
+				oContent.setSecondaryCalendarType(sSecondaryCalendarType);
+			}
+
 			if (this._oOneMonthsRow) {
 				this._oOneMonthsRow.setPrimaryCalendarType(this.getPrimaryCalendarType());
 			}
@@ -1930,12 +2088,14 @@ sap.ui.define([
 	 */
 	PlanningCalendar.prototype._shiftStartDate = function(oStartDate){
 		if (this.getViewKey() === PlanningCalendarBuiltInView.Week) {
-			/* Calculates the first week's datei for the given oStartDate. Have in mind that the oStartDate is the date that
+			/* Calculates the first week's date for the given oStartDate. Have in mind that the oStartDate is the date that
 			 * the user sees in the UI, thus - local one. As CalendarUtils.getFirstDateOfWeek works with UTC dates (this
 			 * is because the dates are timezone irrelevant), it should be called with the local datetime values presented
 			 * as UTC ones(e.g. if oStartDate is 21 Dec 1981, 13:00 GMT+02:00, it will be converted to 21 Dec 1981, 13:00 GMT+00:00)
 			 */
-			var oFirstDateOfWeek = CalendarUtils.getFirstDateOfWeek(CalendarUtils._createUniversalUTCDate(oStartDate, undefined, true)),
+			var sLocale = Configuration.getFormatSettings().getFormatLocale().toString(),
+				oWeekConfigurationValues = CalendarDateUtils.getWeekConfigurationValues(this.getCalendarWeekNumbering(), new Locale(sLocale)),
+				oFirstDateOfWeek = CalendarUtils.getFirstDateOfWeek(CalendarUtils._createUniversalUTCDate(oStartDate, undefined, true), oWeekConfigurationValues),
 				//CalendarUtils.getFirstDateOfWeek works with UTC based date values, restore the result back in local timezone.
 				oLocalDate = CalendarUtils._createLocalDate(oFirstDateOfWeek, true);
 			if (this.getFirstDayOfWeek() > -1) {
@@ -1985,7 +2145,7 @@ sap.ui.define([
 			oPicker.addSelectedDate(oSelectedRange);
 		}
 
-		this._getHeader().setPickerText(this._formatPickerText());
+		this._getHeader().updatePickerText(this._formatPickerText());
 		this._updateTodayButtonState();
 	};
 
@@ -2958,7 +3118,7 @@ sap.ui.define([
 					var oFocusedDate = new Date(oEvtSelectedStartCalendarDate.toLocalJSDate().getTime());
 					if (CalendarUtils.monthsDiffer(this.getStartDate(), oEvtSelectedStartCalendarDate.toLocalJSDate())) {
 						this.setStartDate(oEvtSelectedStartCalendarDate.toLocalJSDate());
-						this._getHeader().setPickerText(this._formatPickerText());
+						this._getHeader().updatePickerText(this._formatPickerText());
 					}
 					this._setRowsStartDate(oFocusedDate);
 					this._oOneMonthsRow._focusDate(CalendarDate.fromLocalJSDate(oFocusedDate, this.getPrimaryCalendarType()), true);
@@ -3442,10 +3602,10 @@ sap.ui.define([
 		oRowTimeline.setLegend(this.getLegend());
 		oRowTimeline.setAppointmentsVisualization(this.getAppointmentsVisualization());
 		oRowTimeline.setAppointmentHeight(this.getAppointmentHeight());
-		oRowTimeline.attachEvent("select", handleAppointmentSelect, this);
-		oRowTimeline.attachEvent("startDateChange", this._handleStartDateChange, this);
-		oRowTimeline.attachEvent("leaveRow", handleLeaveRow, this);
-		oRowTimeline.attachEvent("intervalSelect", handleIntervalSelect, this);
+		oRowTimeline.detachEvent("select", handleAppointmentSelect, this).attachEvent("select", handleAppointmentSelect, this);
+		oRowTimeline.detachEvent("startDateChange", this._handleStartDateChange, this).attachEvent("startDateChange", this._handleStartDateChange, this);
+		oRowTimeline.detachEvent("leaveRow", handleLeaveRow, this).attachEvent("leaveRow", handleLeaveRow, this);
+		oRowTimeline.detachEvent("intervalSelect", handleIntervalSelect, this).attachEvent("intervalSelect", handleIntervalSelect, this);
 
 		updateSelectAllCheckBox.call(this);
 
@@ -3628,8 +3788,8 @@ sap.ui.define([
 	};
 
 	/**
-	 * Detaches the attached functions from the PlanningCalendarRowTimeline instance that corresponts to the row and
-	 * destorys the corresponding PlanningCalendarRowListItem.
+	 * Detaches the attached functions from the PlanningCalendarRowTimeline instance that corresponds to the row and
+	 * destroys the corresponding PlanningCalendarRowListItem.
 	 *
 	 * @param oRow
 	 * @private
@@ -3792,7 +3952,7 @@ sap.ui.define([
 	};
 
 	/**
-	 * Represents timeline that holds the appointments and intervals indide the PlanningCalendarRowListItem
+	 * Represents timeline that holds the appointments and intervals inside the PlanningCalendarRowListItem
 	 */
 	var PlanningCalendarRowTimeline = CalendarRow.extend("sap.m._PlanningCalendarRowTimeline", {
 		metadata: {

package/src/sap/m/PlanningCalendarHeader.js

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2009-2022 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2009-2023 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 
@@ -12,6 +12,7 @@ sap.ui.define([
 	'./Toolbar',
 	'./AssociativeOverflowToolbar',
 	'./Button',
+	'./AdditionalTextButton',
 	'./Popover',
 	'./Title',
 	'./ToolbarSpacer',
@@ -21,6 +22,7 @@ sap.ui.define([
 	'sap/ui/unified/calendar/CustomYearPicker',
 	'sap/ui/unified/calendar/IndexPicker',
 	'sap/ui/core/Configuration',
+	'sap/ui/core/date/CalendarWeekNumbering',
 	'sap/ui/unified/calendar/CalendarDate',
 	'sap/ui/core/IconPool',
 	'sap/ui/core/InvisibleText',
@@ -34,6 +36,7 @@ function(
 	Toolbar,
 	AssociativeOverflowToolbar,
 	Button,
+	AdditionalTextButton,
 	Popover,
 	Title,
 	ToolbarSpacer,
@@ -43,6 +46,7 @@ function(
 	CustomYearPicker,
 	IndexPicker,
 	Configuration,
+	CalendarWeekNumbering,
 	CalendarDate,
 	IconPool,
 	InvisibleText,
@@ -92,7 +96,7 @@ function(
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.108.2
+	 * @version 1.110.0
 	 *
 	 * @constructor
 	 * @private
@@ -123,13 +127,33 @@ function(
 				 */
 				pickerText : { type : "string", group : "Data" },
 
+				/**
+				 * Determines the additional text of the button which opens the calendar picker.
+				 */
+				pickerTextInSecondaryType : { type : "string", group : "Data" },
+
+				/**
+				 * Defines the calendar week numbering used for display.
+				 * @private
+				 * @since 1.110.0
+				 */
+				calendarWeekNumbering : { type : "sap.ui.core.date.CalendarWeekNumbering", group : "Appearance", defaultValue: null},
+
 				/**
 				 * If set, the calendar type is used for display.
 				 * If not set, the calendar type of the global configuration is used.
 				 * @private
 				 * @since 1.108.0
 				 */
-				_primaryCalendarType : {type : "sap.ui.core.CalendarType", group : "Appearance", defaultValue : null}
+				_primaryCalendarType : {type : "sap.ui.core.CalendarType", group : "Appearance"},
+
+				/**
+				 * If set, the days are also displayed in this calendar type
+				 * If not set, the dates are only displayed in the primary calendar type
+				 * @privates
+				 * @since 1.109.0
+				 */
+				_secondaryCalendarType : {type : "sap.ui.core.CalendarType", group : "Appearance"}
 
 			},
 
@@ -293,6 +317,7 @@ function(
 		});
 		oCalendarPicker = new Calendar(sOPHId + "-Cal", {
 			ariaLabelledBy: InvisibleText.getStaticId("sap.m", "PCH_RANGE_PICKER"),
+			calendarWeekNumbering: this.getCalendarWeekNumbering(),
 			primaryCalendarType: sCalendarType
 		});
 		oCalendarPicker.attachEvent("select", this._handlePickerDateSelect, this);
@@ -333,8 +358,9 @@ function(
 		this.setAggregation("_indexPicker", oIndexPicker);
 		this._oIndexPicker = oIndexPicker;
 
-		this._oPickerBtn = new Button(sNavToolbarId + "-PickerBtn", {
+		this._oPickerBtn = new AdditionalTextButton(sNavToolbarId + "-PickerBtn", {
 			text: this.getPickerText(),
+			additionalText: this.getPickerTextInSecondaryType(),
 			ariaHasPopup: coreLibrary.aria.HasPopup.Dialog,
 			ariaLabelledBy: InvisibleText.getStaticId("sap.m", "PCH_SELECT_RANGE"),
 			press: function () {
@@ -345,6 +371,7 @@ function(
 					if (oPicker.displayDate) {
 						oPicker.displayDate(oDate);
 					}
+					oPicker.setCalendarWeekNumbering && oPicker.setCalendarWeekNumbering(this.getCalendarWeekNumbering());
 					this._openCalendarPickerPopup(oPicker);
 				}
 			}.bind(this)
@@ -395,10 +422,13 @@ function(
 
 	PlanningCalendarHeader.prototype.onBeforeRendering = function () {
 		var bVisible = !!this.getActions().length || !!this.getTitle() || this._getOrCreateViewSwitch().getItems().length > 1;
-
+		var sSecondaryCalendarType = this.getProperty("_secondaryCalendarType");
 		this._getActionsToolbar().setProperty("visible", bVisible, true);
 
 		this.setPrimaryCalendarTypeToPickers(this.getProperty("_primaryCalendarType"));
+		if (sSecondaryCalendarType){
+			this.setSecondaryCalendarTypeToPickers(sSecondaryCalendarType);
+		}
 	};
 
 	PlanningCalendarHeader.prototype.setTitle = function (sTitle) {
@@ -458,7 +488,26 @@ function(
 		return this;
 	};
 
+	PlanningCalendarHeader.prototype.updatePickerText = function (oPickerTextInfo) {
+		if (!oPickerTextInfo) {
+			return this;
+		}
+		this.setPickerText(oPickerTextInfo.primaryType);
+		this.setPickerTextInSecondaryType(oPickerTextInfo.secondaryType);
+
+		return true;
+	};
+
+	PlanningCalendarHeader.prototype.setPickerTextInSecondaryType = function (sAdditionalText){
+		this.setProperty("pickerTextInSecondaryType", sAdditionalText);
+		this._oPickerBtn.setAdditionalText(sAdditionalText);
+		return this;
+	};
+
 	PlanningCalendarHeader.prototype.setPickerText = function (sText) {
+		if (!sText) {
+			return this;
+		}
 		this.setProperty("pickerText", sText);
 		this._oPickerBtn.setText(sText);
 
@@ -471,6 +520,12 @@ function(
 		this._oYearPicker.setPrimaryCalendarType(sCalendarType);
 	};
 
+	PlanningCalendarHeader.prototype.setSecondaryCalendarTypeToPickers = function (sCalendarType) {
+		this._oCalendar.setSecondaryCalendarType(sCalendarType);
+		this._oMonthPicker.setSecondaryCalendarType(sCalendarType);
+		this._oYearPicker.setSecondaryCalendarType(sCalendarType);
+	};
+
 	/**
 	 * If not existing yet, creates the inner Title control.
 	 * Otherwise just returns it.

package/src/sap/m/PlanningCalendarHeaderRenderer.js

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2009-2022 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2009-2023 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 sap.ui.define([],

package/src/sap/m/PlanningCalendarLegend.js

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2009-2022 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2009-2023 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 
@@ -23,7 +23,7 @@ sap.ui.define(['sap/ui/unified/CalendarLegend', 'sap/ui/unified/CalendarAppointm
 		 * @extends sap.ui.unified.CalendarLegend
 		 *
 		 * @author SAP SE
-		 * @version 1.108.2
+		 * @version 1.110.0
 		 *
 		 * @constructor
 		 * @public

package/src/sap/m/PlanningCalendarLegendRenderer.js

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2009-2022 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2009-2023 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 

package/src/sap/m/PlanningCalendarRenderer.js

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2009-2022 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2009-2023 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 sap.ui.define([

package/src/sap/m/PlanningCalendarRow.js

@@ -1,6 +1,6 @@
 /*!
  * OpenUI5
- * (c) Copyright 2009-2022 SAP SE or an SAP affiliate company.
+ * (c) Copyright 2009-2023 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 
@@ -35,7 +35,7 @@ sap.ui.define([
 	 * The <code>sap.m.PlanningCalendarRow</code> allows you to modify appointments at row level.
 	 *
 	 * @extends sap.ui.core.Element
-	 * @version 1.108.2
+	 * @version 1.110.0
 	 *
 	 * @constructor
 	 * @public