fix(ui5-calendar): show correct year range when secondaryCalendarType…

packages/main/cypress/specs/CalendarConfig.cy.tsx

@@ -1,4 +1,5 @@
 import Calendar from "../../src/Calendar.js";
+import YearPicker from "../../src/YearPicker.js";
 import "@ui5/webcomponents-localization/dist/features/calendar/Islamic.js";
 import "@ui5/webcomponents-localization/dist/features/calendar/Gregorian.js";
 import { resetConfiguration } from "@ui5/webcomponents-base/dist/InitialConfiguration.js";
@@ -47,4 +48,81 @@ describe("Calendar general interaction", () => {
 		cy.get("[ui5-calendar]")
 			.should("have.prop", "_secondaryCalendarType", "Gregorian");
 	});
-});
+});
+
+describe("Calendar with secondary calendar type configured globally", () => {
+	before(() => {
+		cy.window()
+			.then($el => {
+				const scriptElement = document.createElement("script");
+				scriptElement.type = "application/json";
+				scriptElement.setAttribute("data-ui5-config", "true");
+				scriptElement.innerHTML = JSON.stringify({
+					"calendarType": "Gregorian",
+					"secondaryCalendarType": "Islamic"
+				});
+
+				return $el.document.head.append(scriptElement);
+			})
+
+		cy.wrap({ resetConfiguration })
+			.invoke("resetConfiguration", true);
+	});
+
+	after(() => {
+		cy.window()
+			.then($el => {
+				const scriptElement = $el.document.head.querySelector("script[data-ui5-config]");
+
+				scriptElement?.remove();
+			})
+
+		cy.wrap({ resetConfiguration })
+			.invoke("resetConfiguration", true);
+	})
+
+	it("Year Picker shows correct range when secondary calendar type is configured globally", () => {
+		cy.mount(<Calendar timestamp={Date.UTC(2024, 5, 1) / 1000}></Calendar>);
+
+		cy.get<Calendar>("[ui5-calendar]")
+			.as("calendar");
+
+		// Secondary type is resolved from the global config, not from an attribute
+		cy.get("@calendar")
+			.should("not.have.prop", "secondaryCalendarType");
+
+		cy.get("@calendar")
+			.should("have.prop", "_secondaryCalendarType", "Islamic");
+
+		cy.get<Calendar>("@calendar")
+			.shadow()
+			.find(".ui5-calheader")
+			.find("[data-ui5-cal-header-btn-year]")
+			.realClick();
+
+		cy.get<Calendar>("@calendar")
+			.shadow()
+			.find("[ui5-yearpicker]")
+			.as("yearPicker");
+
+		// The two-calendar-type grid renders 8 years
+		cy.get<YearPicker>("@yearPicker")
+			.shadow()
+			.find(".ui5-yp-item")
+			.should("have.length", 8);
+
+		// The currently selected year (2024) must be present in the grid
+		cy.get<YearPicker>("@yearPicker")
+			.shadow()
+			.find(".ui5-yp-item .ui5-dp-yeartext")
+			.should("contain.text", "2024");
+
+		// The first rendered year is 2022 (selected year is the 3rd cell)
+		cy.get<YearPicker>("@yearPicker")
+			.shadow()
+			.find(".ui5-yp-item")
+			.first()
+			.find(".ui5-dp-yeartext")
+			.should("have.text", "2022");
+	});
+});

packages/main/src/DateComponentBase.ts

@@ -176,7 +176,7 @@ class DateComponentBase extends UI5Element {
 	}
 
 	get hasSecondaryCalendarType() {
-		return !!this.secondaryCalendarType && this.secondaryCalendarType !== this.primaryCalendarType;
+		return !!this._secondaryCalendarType && this._secondaryCalendarType !== this._primaryCalendarType;
 	}
 
 	_getMinMaxCalendarDateFromString(date: string) {

packages/main/src/YearPicker.ts

@@ -160,7 +160,7 @@ class YearPicker extends CalendarPart implements ICalendarPicker {
 	_buildYears() {
 		const pageSize = this._getPageSize();
 		const oYearFormat = DateFormat.getDateInstance({ format: "y", calendarType: this._primaryCalendarType });
-		const oYearFormatInSecType = DateFormat.getDateInstance({ format: "y", calendarType: this.secondaryCalendarType });
+		const oYearFormatInSecType = DateFormat.getDateInstance({ format: "y", calendarType: this._secondaryCalendarType });
 
 		const calendarDate = this._calendarDate; // store the value of the expensive getter
 		const minDate = this._minDate; // store the value of the expensive getter