@openui5/sap.ui.unified 1.148.0 → 1.149.0

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

@@ -15,6 +15,49 @@ sap.ui.define([
 
 	var MAX_HEADER_BUTTONS = 5;
 
+	// Header button slots rendered by renderCalendarButtons (B0..B4)
+	var HEADER_BUTTONS = {
+		// Optional first text button (normally day label in consumers that use it)
+		DAY: 0,
+		// Primary month and year buttons of the currently focused month
+		PRIMARY_MONTH: 1,
+		PRIMARY_YEAR: 2,
+		// Secondary month and year buttons (used when showing multiple months)
+		SECONDARY_MONTH: 3,
+		SECONDARY_YEAR: 4
+	};
+
+	// Render order for button groups by locale/date-order convention and month layout.
+	// CJK locales use year-month-day order; non-CJK locales use day-month-year order.
+	var HEADER_BUTTON_GROUPS = {
+		// Japanese/Chinese: year appears before month in header button sequence
+		CJK: {
+			TWO_MONTHS: {
+				// Left = primary month/year content, Right = secondary month/year content
+				LEFT: [HEADER_BUTTONS.PRIMARY_YEAR, HEADER_BUTTONS.PRIMARY_MONTH],
+				RIGHT: [HEADER_BUTTONS.SECONDARY_YEAR, HEADER_BUTTONS.SECONDARY_MONTH]
+			},
+			DEFAULT: {
+				// Single-content layout in CJK order: secondary year/month, primary year/month, optional day
+				LEFT: [HEADER_BUTTONS.SECONDARY_YEAR, HEADER_BUTTONS.SECONDARY_MONTH, HEADER_BUTTONS.PRIMARY_YEAR, HEADER_BUTTONS.PRIMARY_MONTH, HEADER_BUTTONS.DAY],
+				RIGHT: []
+			}
+		},
+		// Non-CJK locales: day-month-year order
+		DEFAULT: {
+			TWO_MONTHS: {
+				// Left = optional day + primary month/year, Right = secondary month/year
+				LEFT: [HEADER_BUTTONS.DAY, HEADER_BUTTONS.PRIMARY_MONTH, HEADER_BUTTONS.PRIMARY_YEAR],
+				RIGHT: [HEADER_BUTTONS.SECONDARY_MONTH, HEADER_BUTTONS.SECONDARY_YEAR]
+			},
+			DEFAULT: {
+				// Single-content layout in non-CJK order
+				LEFT: [HEADER_BUTTONS.DAY, HEADER_BUTTONS.PRIMARY_MONTH, HEADER_BUTTONS.PRIMARY_YEAR, HEADER_BUTTONS.SECONDARY_MONTH, HEADER_BUTTONS.SECONDARY_YEAR],
+				RIGHT: []
+			}
+		}
+	};
+
 	/**
 	 * Header renderer.
 	 * @namespace
@@ -92,58 +135,101 @@ sap.ui.define([
 		oRm.icon("sap-icon://slim-arrow-left", null, { title: null });
 		oRm.close("button");
 
+		// Determine content-button groups and order.
+		// Prev/next/today are rendered separately and are not part of these groups.
+		var bIsCJK = sLanguage.toLowerCase() === "ja" || sLanguage.toLowerCase() === "zh";
+		var bIsTwoMonths = this._isTwoMonthsCalendar(oHead);
+		var aLeftButtons, aRightButtons;
+
+		var oGroupConfig = bIsCJK ? HEADER_BUTTON_GROUPS.CJK : HEADER_BUTTON_GROUPS.DEFAULT;
+		var oLayoutGroup = bIsTwoMonths ? oGroupConfig.TWO_MONTHS : oGroupConfig.DEFAULT;
+		aLeftButtons = oLayoutGroup.LEFT;
+		aRightButtons = oLayoutGroup.RIGHT;
+
+		// Compute first/last visible button across all groups
 		var iFirst = -1;
 		var iLast = -1;
-		var i = 0;
-		var iBtn;
-		for (i = 0; i < MAX_HEADER_BUTTONS; i++) {
-			if (this.getVisibleButton(oHead, i)) {
+		var j;
+		var aAllButtons = aLeftButtons.concat(aRightButtons);
+		for (j = 0; j < aAllButtons.length; j++) {
+			if (this.getVisibleButton(oHead, aAllButtons[j])) {
 				if (iFirst < 0) {
-					iFirst = i;
+					iFirst = aAllButtons[j];
 				}
-				iLast = i;
+				iLast = aAllButtons[j];
 			}
 		}
+		if (bIsTwoMonths) {
+			iFirst = HEADER_BUTTONS.PRIMARY_YEAR;
+			iLast = HEADER_BUTTONS.SECONDARY_MONTH;
+		}
 
-		for (i = 0; i < MAX_HEADER_BUTTONS; i++) {
-			// for Chinese and Japanese the date should be displayed in year, month, day order
-			if (sLanguage.toLowerCase() === "ja" || sLanguage.toLowerCase() === "zh") {
-				iBtn = MAX_HEADER_BUTTONS - 1 - i;
-				// when we have two months displayed next to each other, we have 4 buttons
-				// and they should be arranged in order to show year, first month, year, second month
-				// this is why the numbers of the buttons are hard-coded
-				if (this._isTwoMonthsCalendar(oHead)) {
-					switch (i) {
-						case 0:
-							iBtn = 2;
-							break;
-						case 2:
-							iBtn = 4;
-							break;
-						case 1:
-							iBtn = 1;
-							break;
-						case 3:
-							iBtn = 3;
-							break;
-					}
-				}
-			} else {
-				iBtn = i;
+		// Check if right content has visible buttons
+		var bHasRightContent = false;
+		for (j = 0; j < aRightButtons.length; j++) {
+			if (this.getVisibleButton(oHead, aRightButtons[j])) {
+				bHasRightContent = true;
+				break;
 			}
-			if (this._isTwoMonthsCalendar(oHead)) {
-				iFirst = 2;
-				iLast = 3;
+		}
+
+		// Left content container
+		var sAlignLeft = oHead.getProperty("_alignLeft") || "Center";
+		oRm.openStart("div", sId + "-contentLeft");
+		oRm.class("sapUiCalHeadContent");
+		oRm.class("sapUiCalHeadAlign" + sAlignLeft);
+		oRm.openEnd();
+
+		for (j = 0; j < aLeftButtons.length; j++) {
+			this.renderCalendarButtons(oRm, oHead, sId, iFirst, iLast, aLeftButtons[j]);
+		}
+
+		// Placeholder when no buttons are visible
+		var bAnyVisible = false;
+		for (j = 0; j < MAX_HEADER_BUTTONS; j++) {
+			if (this.getVisibleButton(oHead, j)) {
+				bAnyVisible = true;
+				break;
 			}
-			this.renderCalendarButtons(oRm, oHead, sId, iFirst, iLast, iBtn);
 		}
-		if (!oHead.getVisibleButton0() && !oHead.getVisibleButton1() && !oHead.getVisibleButton2() && !oHead._getVisibleButton3() && !oHead._getVisibleButton4()) {
+		if (!bAnyVisible) {
 			oRm.openStart("div", sId + '-B' + "-Placeholder");
 			oRm.class("sapUiCalHeadBPlaceholder");
-			oRm.openEnd(); // span element
-			oRm.close("span");
+			oRm.openEnd();
+			oRm.close("div");
+		}
+
+		oRm.close("div"); // contentLeft
+
+		// Right content container (only if visible buttons exist)
+		if (bHasRightContent) {
+			var sAlignRight = oHead.getProperty("_alignRight") || "Center";
+			oRm.openStart("div", sId + "-contentRight");
+			oRm.class("sapUiCalHeadContent");
+			oRm.class("sapUiCalHeadAlign" + sAlignRight);
+			oRm.openEnd();
+
+			for (j = 0; j < aRightButtons.length; j++) {
+				this.renderCalendarButtons(oRm, oHead, sId, iFirst, iLast, aRightButtons[j]);
+			}
+
+			oRm.close("div"); // contentRight
 		}
 
+		// Today button
+		if (oHead.getVisibleCurrentDateButton()) {
+			oRm.openStart("button", sId + '-today');
+			oRm.attr("title", sLabelToday);
+			oRm.accessibilityState(null, { label: sLabelToday});
+
+			oRm.class("sapUiCalHeadB");
+			oRm.class("sapUiCalHeadToday");
+			oRm.openEnd(); // button element
+			oRm.icon("sap-icon://appointment", null, { title: null });
+			oRm.close("button");
+		}
+
+		// Next button
 		oRm.openStart("button", sId + '-next');
 		oRm.attr("title", sNextBtnTitle);
 		oRm.accessibilityState(null, {
@@ -163,18 +249,6 @@ sap.ui.define([
 		oRm.icon("sap-icon://slim-arrow-right", null, { title: null });
 		oRm.close("button");
 
-		if (oHead.getVisibleCurrentDateButton()) {
-			oRm.openStart("button", sId + '-today');
-			oRm.attr("title", sLabelToday);
-			oRm.accessibilityState(null, { label: sLabelToday});
-
-			oRm.class("sapUiCalHeadB");
-			oRm.class("sapUiCalHeadToday");
-			oRm.openEnd(); // button element
-			oRm.icon("sap-icon://appointment", null, { title: null });
-			oRm.close("button");
-		}
-
 		oRm.close("div");
 
 	};

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.148.0
+	 * @version 1.149.0
 	 *
 	 * @constructor
 	 * @private

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

@@ -78,7 +78,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.148.0
+	 * @version 1.149.0
 	 *
 	 * @constructor
 	 * @public

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

@@ -57,7 +57,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.148.0
+	 * @version 1.149.0
 	 *
 	 * @constructor
 	 * @public

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

@@ -68,7 +68,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.148.0
+	 * @version 1.149.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.148.0
+	 * @version 1.149.0
 	 *
 	 * @constructor
 	 * @private