feat: add configuration for first day of the week (#627)

Author: MapTo0

docs/Configuration.md

@@ -9,16 +9,23 @@ There are several configuration settings that affect all UI5 Web Components glob
 ------------ | ----------------------------------------------- | ------------- | -------------------------------------------------------------
 theme        | sap_fiori_3, sap_belize, sap_belize_hcb         | sap_fiori_3   | Visual theme
 language     | en, de, es, etc...                              | en            | Language to be used for translatable texts
-RTL*         | true, false                                     | false         | When true, sets global text direction to right-to-left
+[RTL](#rtl)          | true, false                                     | false         | When true, sets global text direction to right-to-left
 compactSize  | true, false                                     | false         | When set, enforces compact density (smaller margins/paddings)
 calendarType | Gregorian, Islamic, Buddhist, Japanese, Persian | Gregorian     | Default calendar type for date-related web components
-noConflict** | true, false | Object                            | false         | When set to true, all events will be fired with a "ui5-" prefix only
+[noConflict](#noConflict)  | true, false | Object                            | false         | When set to true, all events will be fired with a "ui5-" prefix only
+[formatSettings](#formatSettings)| See the [Format settings](#formatSettings) section below		| Empty object | Allows to override locale-specific configuration
 
-`*` When the `rtl` setting is set to `true`, UI5 Web Components will adjust their styling accordingly.
+<a name="rtl"></a>
+###RTL
+ 
+When the `rtl` setting is set to `true`, UI5 Web Components will adjust their styling accordingly.
 However, you should also set the HTML attribute `dir` to `rtl` on the `body` or `html` or any other relevant region of your application
 so that the rest of your application is also affected. 
 
-`**` By default UI5 Web Components fire all custom events twice - once with the documented name (f.e. `change`), and once more with a `ui5-` prefix (f.e. `ui5-change`).
+<a name="noConflict"></a>
+### No conflict
+
+By default UI5 Web Components fire all custom events twice - once with the documented name (f.e. `change`), and once more with a `ui5-` prefix (f.e. `ui5-change`).
 For example, when the `ui5-switch` is toggled, it fires a `change` event, but also a `ui5-change` event.
 
 The `noConflict` configuration setting allows certain control over this behavior:
@@ -39,6 +46,24 @@ The `noConflict` configuration setting allows certain control over this behavior
  You can still use them by listening to `ui5-selectionChange` and `ui5-headerClick`, but the names `selectionChange` and `headerClick` will be
  free for use by other UI components and libraries without name collision.
 
+<a name="formatSettings"></a>
+### Format settings
+
+For example, to force the first day of week to Sunday, no matter the locale:
+
+```json
+{
+	"formatSettings": {
+		"firstDayOfWeek": 0
+	}
+}
+```
+
+  Setting    |                     Values                      | Default value |                          Description
+------------ | ----------------------------------------------- | ------------- | -------------------------------------------------------------
+firstDayOfWeek | 0 (Sunday) through 6 (Saturday) | *depends on locale*     | When set, overrides the locale's default value
+
+
 ## Configuration script
 
 In order to provide configuration settings, include the following ```<script>``` element in your HTML page:
@@ -50,6 +75,9 @@ In order to provide configuration settings, include the following ```<script>```
 	"compactSize": true,
 	"language": "ja",
 	"calendarType": "Japanese",
+	"formatSettings": {
+		"firstDayOfWeek": 0
+	},
 	"theme": "sap_belize_hcb",
 	"noConflict": {
 		"events": ["selectionChange", "headerClick"]
@@ -74,4 +102,5 @@ import { getCompactSize } from "@ui5/webcomponents-base/dist/config/CompactSize.
 import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js";
 import { getLanguage } from "@ui5/webcomponents-base/dist/config/Language.js";
 import { getCalendarType } from "@ui5/webcomponents-base/dist/config/CalendarType.js";
+import { getFirstDayOfWeek } from "@ui5/webcomponents-base/dist/config/FormatSettings.js";
 ```

packages/base/src/InitialConfiguration.js

@@ -7,6 +7,7 @@ const initialConfig = {
 	compactSize: false,
 	calendarType: null,
 	noConflict: false, // no URL
+	formatSettings: {},
 };
 
 /* General settings */
@@ -40,6 +41,11 @@ const getCalendarType = () => {
 	return initialConfig.calendarType;
 };
 
+const getFormatSettings = () => {
+	initConfiguration();
+	return initialConfig.formatSettings;
+};
+
 const booleanMapping = new Map();
 booleanMapping.set("true", true);
 booleanMapping.set("false", false);
@@ -109,4 +115,5 @@ export {
 	getCompactSize,
 	getNoConflict,
 	getCalendarType,
+	getFormatSettings,
 };

packages/base/src/config/FormatSettings.js

@@ -0,0 +1,9 @@
+import { getFormatSettings } from "../InitialConfiguration.js";
+
+const formatSettings = getFormatSettings();
+
+const getFirstDayOfWeek = () => {
+	return formatSettings.firstDayOfWeek;
+};
+
+export { getFirstDayOfWeek }; // eslint-disable-line

packages/base/src/dates/CalendarUtils.js

@@ -1,11 +1,13 @@
 import UniversalDate from "@ui5/webcomponents-core/dist/sap/ui/core/date/UniversalDate.js";
 import Locale from "@ui5/webcomponents-core/dist/sap/ui/core/Locale.js";
 import LocaleData from "@ui5/webcomponents-core/dist/sap/ui/core/LocaleData.js";
+import { getFirstDayOfWeek } from "../config/FormatSettings.js";
 
 const calculateWeekNumber = (oDate, iYear, oLocale, oLocaleData) => {
 	let iWeekNum = 0;
 	let iWeekDay = 0;
-	const iFirstDayOfWeek = oLocaleData.getFirstDayOfWeek();
+	const confFirstDayOfWeek = getFirstDayOfWeek();
+	const iFirstDayOfWeek = Number.isInteger(confFirstDayOfWeek) ? confFirstDayOfWeek : oLocaleData.getFirstDayOfWeek();
 
 	// search Locale for containing "en-US", since sometimes
 	// when any user settings have been defined, subtag "sapufmt" is added to the locale name
@@ -53,7 +55,8 @@ const calculateWeekNumber = (oDate, iYear, oLocale, oLocaleData) => {
 const getFirstDateOfWeek = oDate => {
 	const oUniversalDate = new UniversalDate(oDate.getTime()),
 		oLocaleData = LocaleData.getInstance(new Locale("en")),
-		iCLDRFirstWeekDay = oLocaleData.getFirstDayOfWeek();
+		confFirstDayOfWeek = getFirstDayOfWeek(),
+		iCLDRFirstWeekDay = Number.isInteger(confFirstDayOfWeek) ? confFirstDayOfWeek : oLocaleData.getFirstDayOfWeek();
 
 
 	const oWeek = UniversalDate.getWeekByDate(oUniversalDate.getCalendarType(), oUniversalDate.getUTCFullYear(),

packages/base/src/shims/Core-shim.js

@@ -2,6 +2,7 @@ import { inject as injectCore } from "@ui5/webcomponents-core/dist/sap/ui/core/C
 import * as FormatSettings from "../FormatSettings.js";
 import { getLanguage } from "../config/Language.js";
 import { getCalendarType } from "../config/CalendarType.js";
+import { getFirstDayOfWeek } from "../config/FormatSettings.js";
 import getDesigntimePropertyAsArray from "../util/getDesigntimePropertyAsArray.js";
 
 /**
@@ -12,6 +13,7 @@ import getDesigntimePropertyAsArray from "../util/getDesigntimePropertyAsArray.j
 const Configuration = {
 	getLanguage,
 	getCalendarType,
+	getFirstDayOfWeek,
 	getSupportedLanguages: () => {
 		return getDesigntimePropertyAsArray("$core-i18n-locales:,ar,bg,ca,cs,da,de,el,en,es,et,fi,fr,hi,hr,hu,it,iw,ja,ko,lt,lv,nl,no,pl,pt,ro,ru,sh,sk,sl,sv,th,tr,uk,vi,zh_CN,zh_TW$");
 	},

packages/core/overlay/sap/ui/core/date/UniversalDate.js

@@ -258,7 +258,7 @@ sap.ui.define(['sap/ui/base/Object', 'sap/ui/core/LocaleData', 'sap/ui/core/date
 		var oLocale = sap.ui.getCore().getFormatSettings().getFormatLocale(),
 			oLocaleData = LocaleData.getInstance(oLocale),
 			iMinDays = oLocaleData.getMinimalDaysInFirstWeek(),
-			iFirstDayOfWeek = oLocaleData.getFirstDayOfWeek(),
+			iFirstDayOfWeek = sap.ui.getConfiguration().getFirstDateOfWeek() || oLocaleData.getFirstDayOfWeek(),
 			oFirstDay = new clDate(clDate.UTC(iYear, 0, 1)),
 			iDayCount = 7;
 		// Find the first day of the first week of the year

packages/core/overlay/sap/ui/core/format/DateFormat.js

@@ -2180,7 +2180,7 @@ sap.ui.define([
 	DateFormat.prototype._adaptDayOfWeek = function(iDayOfWeek) {
 		// day of week depends on the format locale
 		// the DateFormat's locale is independent
-		var iFirstDayOfWeek = LocaleData.getInstance(sap.ui.getCore().getFormatSettings().getFormatLocale()).getFirstDayOfWeek();
+		var iFirstDayOfWeek =  sap.ui.getCore().getConfiguration().getFirstDayOfWeek() || LocaleData.getInstance(sap.ui.getCore().getFormatSettings().getFormatLocale()).getFirstDayOfWeek();
 		var iDayNumberOfWeek = iDayOfWeek - (iFirstDayOfWeek - 1);
 
 		if (iDayNumberOfWeek <= 0) {

packages/main/src/DayPicker.js

@@ -1,6 +1,7 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { getLocale } from "@ui5/webcomponents-base/dist/LocaleProvider.js";
+import { getFirstDayOfWeek } from "@ui5/webcomponents-base/dist/config/FormatSettings.js";
 import { getCalendarType } from "@ui5/webcomponents-base/dist/config/CalendarType.js";
 import { getFormatLocale } from "@ui5/webcomponents-base/dist/FormatSettings.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
@@ -433,7 +434,8 @@ class DayPicker extends UI5Element {
 	}
 
 	_getFirstDayOfWeek() {
-		return this._oLocaleData.getFirstDayOfWeek();
+		const confFirstDayOfWeek = getFirstDayOfWeek();
+		return Number.isInteger(confFirstDayOfWeek) ? confFirstDayOfWeek : this._oLocaleData.getFirstDayOfWeek();
 	}
 
 	get styles() {

packages/main/test/sap/ui/webcomponents/main/pages/DatePicker.html

@@ -18,6 +18,16 @@
 	integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
 	crossorigin="anonymous"></script>
 
+	<script data-id="sap-ui-config" type="application/json">
+		{
+			"rtl": false,
+			"compactSize": false,
+			"formatSettings": {
+                "firstDayOfWeek": 0
+            }
+		}
+	</script>
+
 	<style>
 		.sapUiTheme-sap_fiori3 body {
 			background: #f7f7f7;
@@ -126,4 +136,4 @@ <h3>japanese calendar type</h3>
 		});
 	</script>
 </body>
-</html>
+</html>