diff --git a/packages/main/cypress/specs/CalendarConfig.cy.tsx b/packages/main/cypress/specs/CalendarConfig.cy.tsx
index a27f06f50d4c5..ecdb8a1673ae0 100644
--- a/packages/main/cypress/specs/CalendarConfig.cy.tsx
+++ b/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");
});
-});
\ No newline at end of file
+});
+
+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();
+
+ cy.get("[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")
+ .shadow()
+ .find(".ui5-calheader")
+ .find("[data-ui5-cal-header-btn-year]")
+ .realClick();
+
+ cy.get("@calendar")
+ .shadow()
+ .find("[ui5-yearpicker]")
+ .as("yearPicker");
+
+ // The two-calendar-type grid renders 8 years
+ cy.get("@yearPicker")
+ .shadow()
+ .find(".ui5-yp-item")
+ .should("have.length", 8);
+
+ // The currently selected year (2024) must be present in the grid
+ cy.get("@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")
+ .shadow()
+ .find(".ui5-yp-item")
+ .first()
+ .find(".ui5-dp-yeartext")
+ .should("have.text", "2022");
+ });
+});
diff --git a/packages/main/src/DateComponentBase.ts b/packages/main/src/DateComponentBase.ts
index edf1ca43b70ff..069f8a95607ce 100644
--- a/packages/main/src/DateComponentBase.ts
+++ b/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) {
diff --git a/packages/main/src/YearPicker.ts b/packages/main/src/YearPicker.ts
index 2c67d4d60cafd..ffae354e6f77b 100644
--- a/packages/main/src/YearPicker.ts
+++ b/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