From 314df38352da085ede9086b33d0592b3884356dd Mon Sep 17 00:00:00 2001 From: tsanislavgatev Date: Tue, 11 Nov 2025 22:48:29 +0200 Subject: [PATCH 1/5] fix(ui5-calendar): use global configuration for first day of week --- packages/main/src/DayPicker.ts | 17 +++++++++++++++-- packages/main/test/pages/Calendar.html | 10 +++++++++- 2 files changed, 24 insertions(+), 3 deletions(-) diff --git a/packages/main/src/DayPicker.ts b/packages/main/src/DayPicker.ts index d8adcc0e7d0c..6c9fe48a0206 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"; 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; - From aa4c4cf474e9448930d0f13ddf5ce24e5f34f37b Mon Sep 17 00:00:00 2001 From: tsanislavgatev Date: Wed, 12 Nov 2025 17:46:36 +0200 Subject: [PATCH 2/5] fix(ui5-calendar): add test --- packages/main/cypress/specs/Calendar.cy.tsx | 72 +++++++++++++++++++++ 1 file changed, 72 insertions(+) diff --git a/packages/main/cypress/specs/Calendar.cy.tsx b/packages/main/cypress/specs/Calendar.cy.tsx index f8527984d2b7..bc4f6020d155 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,73 @@ describe("Day Picker Tests", () => { }); }); }); + +describe("Calendar Global Configuration", () => { + beforeEach(() => { + // Reload the page to ensure completely clean state + cy.reload(); + + // Clean up any existing configuration scripts first + cy.window().then($el => { + const existingScripts = $el.document.head.querySelectorAll("script[data-ui5-config]"); + existingScripts.forEach(script => script.remove()); + }); + + // Reset configuration to ensure clean state + cy.wrap({ resetConfiguration }) + .invoke("resetConfiguration", true); + }); + + afterEach(() => { + // Clean up configuration scripts + cy.window().then($el => { + const scriptElements = $el.document.head.querySelectorAll("script[data-ui5-config]"); + scriptElements.forEach(script => script.remove()); + }); + + // Reset configuration to default state + cy.wrap({ resetConfiguration }) + .invoke("resetConfiguration", true); + }); + + it("Should respect firstDayOfWeek from global formatSettings configuration", () => { + const configurationObject = { + "formatSettings": { + "firstDayOfWeek": 6 // Saturday + } + }; + + // Set up configuration script + 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); + }); + + // Reset configuration to trigger parsing of the new script + cy.wrap({ resetConfiguration }) + .invoke("resetConfiguration", true); + + // Verify configuration is applied + cy.wrap({ getFirstDayOfWeek }) + .invoke("getFirstDayOfWeek") + .should("equal", 6); + + // Mount a calendar with calendarWeekNumbering="Default" + // so it uses the global configuration + const date = new Date(Date.UTC(2023, 0, 1, 0, 0, 0)); // January 1, 2023 + cy.mount(); + + // Verify that Saturday (Sat) is now the first day of the week + cy.get("#calendar1") + .shadow() + .find("[ui5-daypicker]") + .shadow() + .find(".ui5-dp-firstday") + .first() + .should("have.text", "Sat"); + }); +}); From 1724794c38e8d4716e64f1224966bce113921397 Mon Sep 17 00:00:00 2001 From: tsanislavgatev Date: Thu, 13 Nov 2025 10:33:29 +0200 Subject: [PATCH 3/5] fix(ui5-calendar): clean up test --- packages/main/cypress/specs/Calendar.cy.tsx | 33 --------------------- 1 file changed, 33 deletions(-) diff --git a/packages/main/cypress/specs/Calendar.cy.tsx b/packages/main/cypress/specs/Calendar.cy.tsx index bc4f6020d155..47141ef325ef 100644 --- a/packages/main/cypress/specs/Calendar.cy.tsx +++ b/packages/main/cypress/specs/Calendar.cy.tsx @@ -1438,33 +1438,6 @@ describe("Day Picker Tests", () => { }); describe("Calendar Global Configuration", () => { - beforeEach(() => { - // Reload the page to ensure completely clean state - cy.reload(); - - // Clean up any existing configuration scripts first - cy.window().then($el => { - const existingScripts = $el.document.head.querySelectorAll("script[data-ui5-config]"); - existingScripts.forEach(script => script.remove()); - }); - - // Reset configuration to ensure clean state - cy.wrap({ resetConfiguration }) - .invoke("resetConfiguration", true); - }); - - afterEach(() => { - // Clean up configuration scripts - cy.window().then($el => { - const scriptElements = $el.document.head.querySelectorAll("script[data-ui5-config]"); - scriptElements.forEach(script => script.remove()); - }); - - // Reset configuration to default state - cy.wrap({ resetConfiguration }) - .invoke("resetConfiguration", true); - }); - it("Should respect firstDayOfWeek from global formatSettings configuration", () => { const configurationObject = { "formatSettings": { @@ -1472,7 +1445,6 @@ describe("Calendar Global Configuration", () => { } }; - // Set up configuration script cy.window() .then($el => { const scriptElement = $el.document.createElement("script"); @@ -1482,21 +1454,16 @@ describe("Calendar Global Configuration", () => { $el.document.head.appendChild(scriptElement); }); - // Reset configuration to trigger parsing of the new script cy.wrap({ resetConfiguration }) .invoke("resetConfiguration", true); - // Verify configuration is applied cy.wrap({ getFirstDayOfWeek }) .invoke("getFirstDayOfWeek") .should("equal", 6); - // Mount a calendar with calendarWeekNumbering="Default" - // so it uses the global configuration const date = new Date(Date.UTC(2023, 0, 1, 0, 0, 0)); // January 1, 2023 cy.mount(); - // Verify that Saturday (Sat) is now the first day of the week cy.get("#calendar1") .shadow() .find("[ui5-daypicker]") From 6d3c470f2e74257c72b1fe7ea1a1c43e89d4011e Mon Sep 17 00:00:00 2001 From: tsanislavgatev Date: Fri, 14 Nov 2025 16:37:48 +0200 Subject: [PATCH 4/5] fix(ui5-calendar): fix import to fix test --- packages/main/src/DayPicker.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/main/src/DayPicker.ts b/packages/main/src/DayPicker.ts index 6c9fe48a0206..01f66f00e0be 100644 --- a/packages/main/src/DayPicker.ts +++ b/packages/main/src/DayPicker.ts @@ -31,7 +31,7 @@ import { isPageDownAlt, isPageDownShiftCtrl, } from "@ui5/webcomponents-base/dist/Keys.js"; -import { getFirstDayOfWeek } from "@ui5/webcomponents-base"; +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"; From dffd23f4783f6d44ba2f40249844fb9c019b1e8e Mon Sep 17 00:00:00 2001 From: tsanislavgatev Date: Fri, 21 Nov 2025 14:49:13 +0200 Subject: [PATCH 5/5] fix(ui5-calendar): extract function call result in variable --- packages/main/src/DayPicker.ts | 5 +++-- packages/main/test/pages/Calendar.html | 2 +- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/main/src/DayPicker.ts b/packages/main/src/DayPicker.ts index 01f66f00e0be..c0306233661d 100644 --- a/packages/main/src/DayPicker.ts +++ b/packages/main/src/DayPicker.ts @@ -856,9 +856,10 @@ class DayPicker extends CalendarPart implements ICalendarPicker { _getFirstDayOfWeek(): number { const localeData = getCachedLocaleDataInstance(getLocale()); let firstDayOfWeek; + const configurationFirstDayOfWeek = getFirstDayOfWeek(); - if (getFirstDayOfWeek() !== undefined) { - firstDayOfWeek = getFirstDayOfWeek()!; + if (configurationFirstDayOfWeek !== undefined) { + firstDayOfWeek = configurationFirstDayOfWeek; } else { firstDayOfWeek = localeData.getFirstDayOfWeek(); } diff --git a/packages/main/test/pages/Calendar.html b/packages/main/test/pages/Calendar.html index 213ff4d72c51..e088e99d0e72 100644 --- a/packages/main/test/pages/Calendar.html +++ b/packages/main/test/pages/Calendar.html @@ -19,7 +19,7 @@ { "rtl": false, "formatSettings": { - "firstDayOfWeek": 1 + "firstDayOfWeek": 0 } }