fix(ui5-calendar): use global configuration for first day of week (#12665)

fixes: #12426

Author: tsanislavgatev

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(<Calendar id="calendar1" timestamp={date.valueOf() / 1000} calendarWeekNumbering="Default" />);
+
+		cy.get<Calendar>("#calendar1")
+			.shadow()
+			.find("[ui5-daypicker]")
+			.shadow()
+			.find(".ui5-dp-firstday")
+			.first()
+			.should("have.text", "Sat");
+	});
+});

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,23 @@ class DayPicker extends CalendarPart implements ICalendarPicker {
 	}
 
 	_getFirstDayOfWeek(): number {
+		const localeData = getCachedLocaleDataInstance(getLocale());
+		let firstDayOfWeek;
+		const configurationFirstDayOfWeek = getFirstDayOfWeek();
+
+		if (configurationFirstDayOfWeek !== undefined) {
+			firstDayOfWeek = configurationFirstDayOfWeek;
+		} 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() {

packages/main/test/pages/Calendar.html

@@ -10,10 +10,18 @@
 		// delete Document.prototype.adoptedStyleSheets;
 	</script>
 
-	<script data-ui5-config type="application/json">
+	<!-- <script data-ui5-config type="application/json">
 		{
 			"language": "EN"
 		}
+	</script> -->
+	<script data-id="sap-ui-config" type="application/json">
+		{
+			"rtl": false,
+			"formatSettings": {
+                "firstDayOfWeek": 0
+            }
+		}
 	</script>
 
 	<script src="%VITE_BUNDLE_PATH%" type="module"></script>