diff --git a/packages/main/cypress/specs/Calendar.cy.tsx b/packages/main/cypress/specs/Calendar.cy.tsx
index f8527984d2b7..47141ef325ef 100644
--- a/packages/main/cypress/specs/Calendar.cy.tsx
+++ b/packages/main/cypress/specs/Calendar.cy.tsx
@@ -6,6 +6,8 @@ import YearRangePicker from "../../src/YearRangePicker.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";
+import { getFirstDayOfWeek } from "@ui5/webcomponents-base/dist/config/FormatSettings.js";
const getDefaultCalendar = (date: Date) => {
const calDate = new Date(date);
@@ -1434,3 +1436,40 @@ describe("Day Picker Tests", () => {
});
});
});
+
+describe("Calendar Global Configuration", () => {
+ it("Should respect firstDayOfWeek from global formatSettings configuration", () => {
+ const configurationObject = {
+ "formatSettings": {
+ "firstDayOfWeek": 6 // Saturday
+ }
+ };
+
+ cy.window()
+ .then($el => {
+ const scriptElement = $el.document.createElement("script");
+ scriptElement.type = "application/json";
+ scriptElement.setAttribute("data-ui5-config", "true");
+ scriptElement.innerHTML = JSON.stringify(configurationObject);
+ $el.document.head.appendChild(scriptElement);
+ });
+
+ cy.wrap({ resetConfiguration })
+ .invoke("resetConfiguration", true);
+
+ cy.wrap({ getFirstDayOfWeek })
+ .invoke("getFirstDayOfWeek")
+ .should("equal", 6);
+
+ const date = new Date(Date.UTC(2023, 0, 1, 0, 0, 0)); // January 1, 2023
+ cy.mount();
+
+ cy.get("#calendar1")
+ .shadow()
+ .find("[ui5-daypicker]")
+ .shadow()
+ .find(".ui5-dp-firstday")
+ .first()
+ .should("have.text", "Sat");
+ });
+});
diff --git a/packages/main/src/DayPicker.ts b/packages/main/src/DayPicker.ts
index d8adcc0e7d0c..01f66f00e0be 100644
--- a/packages/main/src/DayPicker.ts
+++ b/packages/main/src/DayPicker.ts
@@ -31,6 +31,7 @@ import {
isPageDownAlt,
isPageDownShiftCtrl,
} from "@ui5/webcomponents-base/dist/Keys.js";
+import { getFirstDayOfWeek } from "@ui5/webcomponents-base/dist/config/FormatSettings.js";
import CalendarDate from "@ui5/webcomponents-localization/dist/dates/CalendarDate.js";
import CalendarType from "@ui5/webcomponents-base/dist/types/CalendarType.js";
import UI5Date from "@ui5/webcomponents-localization/dist/dates/UI5Date.js";
@@ -853,10 +854,22 @@ class DayPicker extends CalendarPart implements ICalendarPicker {
}
_getFirstDayOfWeek(): number {
+ const localeData = getCachedLocaleDataInstance(getLocale());
+ let firstDayOfWeek;
+
+ if (getFirstDayOfWeek() !== undefined) {
+ firstDayOfWeek = getFirstDayOfWeek()!;
+ } else {
+ firstDayOfWeek = localeData.getFirstDayOfWeek();
+ }
+
const result = CalendarUtils.getWeekConfigurationValues(this.calendarWeekNumbering);
- const localeData = getCachedLocaleDataInstance(getLocale());
- return result?.firstDayOfWeek ? result.firstDayOfWeek : localeData.getFirstDayOfWeek();
+ if (result?.firstDayOfWeek !== undefined && this.calendarWeekNumbering !== "Default") {
+ return result.firstDayOfWeek;
+ }
+
+ return firstDayOfWeek;
}
get styles() {
diff --git a/packages/main/test/pages/Calendar.html b/packages/main/test/pages/Calendar.html
index a79dd84e08ec..213ff4d72c51 100644
--- a/packages/main/test/pages/Calendar.html
+++ b/packages/main/test/pages/Calendar.html
@@ -10,10 +10,18 @@
// delete Document.prototype.adoptedStyleSheets;
- -->
+