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; -