feat: add secondaryCalendarType global config (#7547)

docs/2-advanced/01-configuration.md

@@ -12,6 +12,8 @@ There are several configuration settings that affect all UI5 Web Components glob
 | [language](#language)                         | `ar`, `bg`, `ca`, `cs`, `cy`, `da`, `de`, `el`, `en`, `en_GB`, `es`, `es_MX`, `et`, `fi`, `fr`, `fr_CA`, `hi`, `hr`, `hu`, `in`, `it`, `iw`, `ja`, `kk`, `ko`, `lt`, `lv`, `ms`, `nl`, `no`, `pl`, `pt_PT`, `pt`, `ro`, `ru`, `sh`, `sk`, `sl`, `sv`, `th`, `tr`, `uk`, `vi`, `zh_CN`, `zh_TW` | N/A (`null`)  | Language to be used for translatable texts                           | Components and icons with translatable texts                     |
 | [animationMode](#animationMode)               | `full`, `basic`, `minimal`, `none`                                                                                                                                                                                                                                                             | `full`        | Amount/intensity of animations to be played for some components      | Components with animations (`ui5-panel`, `ui5-carousel`, etc.) |
 | [calendarType](#calendarType)                 | `Gregorian`, `Islamic`, `Buddhist`, `Japanese`, `Persian`                                                                                                                                                                                                                                      | `Gregorian`   | Default calendar type to be used for date-related components         | Date/time components (`ui5-date-picker`, etc.)                 |
+| [secondaryCalendarType](#calendarType)                 | `Gregorian`, `Islamic`, `Buddhist`, `Japanese`, `Persian`                                                                                                                                                                                                                                      | `undefined`   | Default secondary calendar type to be used for date-related components         | Date/time components (`ui5-date-picker`, etc.)                 |
+
 | [noConflict](#noConflict)                     | `true`, `false`                                                                                                                                                                                                                                                                                | `false`       | When set to true, all events will be fired with a `ui5-` prefix only | Components that fire events (most do)                            |
 | [formatSettings](#formatSettings)             | See the [Format settings](#formatSettings) section below                                                                                                                                                                                                                                       | `{}`          | Allows to override locale-specific configuration                     | Date/time components (`ui5-date-picker`, etc.)                 |
 | [fetchDefaultLanguage](#fetchDefaultLanguage) | `true`, `false`                                                                                                                                                                                                                                                                                | `false`       | Whether to fetch assets even for the default language                | Framework                                                        |

packages/base/src/InitialConfiguration.ts

@@ -17,6 +17,7 @@ type InitialConfig = {
 	rtl: boolean | undefined,
 	language: string | undefined,
 	calendarType: CalendarType | undefined,
+	secondaryCalendarType: CalendarType | undefined,
 	timezone: string | undefined,
 	noConflict: boolean,
 	formatSettings: FormatSettings,
@@ -31,6 +32,7 @@ let initialConfig: InitialConfig = {
 	language: undefined,
 	timezone: undefined,
 	calendarType: undefined,
+	secondaryCalendarType: undefined,
 	noConflict: false, // no URL
 	formatSettings: {},
 	fetchDefaultLanguage: false,
@@ -86,6 +88,11 @@ const getCalendarType = () => {
 	return initialConfig.calendarType;
 };
 
+const getSecondaryCalendarType = () => {
+	initConfiguration();
+	return initialConfig.secondaryCalendarType;
+};
+
 /**
  * Returns the configured IANA timezone ID.
  * @returns { String } the configured IANA timezone ID, e.g. "America/New_York"
@@ -214,6 +221,7 @@ export {
 	getFetchDefaultLanguage,
 	getNoConflict,
 	getCalendarType,
+	getSecondaryCalendarType,
 	getTimezone,
 	getFormatSettings,
 };

packages/base/src/config/CalendarType.ts

@@ -1,7 +1,11 @@
 import CalendarType from "../types/CalendarType.js";
-import { getCalendarType as getConfiguredCalendarType } from "../InitialConfiguration.js";
+import {
+	getCalendarType as getConfiguredCalendarType,
+	getSecondaryCalendarType as getConfiguredSecondaryCalendarType,
+} from "../InitialConfiguration.js";
 
 let calendarType: CalendarType | undefined;
+let secondaryCalendarType: CalendarType | undefined;
 
 /**
  * Returns the configured or default calendar type.
@@ -20,4 +24,25 @@ const getCalendarType = (): CalendarType => {
 	return CalendarType.Gregorian;
 };
 
-export { getCalendarType }; // eslint-disable-line
+/**
+ * Returns the configured secondary calendar type.
+ * @public
+ * @returns { CalendarType | undefined } the effective calendar type
+ * @since 1.18.0
+ */
+const getSecondaryCalendarType = (): CalendarType | undefined => {
+	if (secondaryCalendarType === undefined) {
+		secondaryCalendarType = getConfiguredSecondaryCalendarType();
+	}
+
+	if (secondaryCalendarType && secondaryCalendarType in CalendarType) {
+		return secondaryCalendarType;
+	}
+
+	return secondaryCalendarType;
+};
+
+export {
+	getCalendarType,
+	getSecondaryCalendarType,
+};

packages/main/src/Calendar.hbs

@@ -10,7 +10,7 @@
 			.selectedDates="{{_selectedDatesTimestamps}}"
 			._hidden="{{_isDayPickerHidden}}"
 			.primaryCalendarType="{{_primaryCalendarType}}"
-			.secondaryCalendarType="{{secondaryCalendarType}}"
+			.secondaryCalendarType="{{_secondaryCalendarType}}"
 			.selectionMode="{{selectionMode}}"
 			.minDate="{{minDate}}"
 			.maxDate="{{maxDate}}"
@@ -27,7 +27,7 @@
 			.selectedDates="{{_selectedDatesTimestamps}}"
 			._hidden="{{_isMonthPickerHidden}}"
 			.primaryCalendarType="{{_primaryCalendarType}}"
-			.secondaryCalendarType="{{secondaryCalendarType}}"
+			.secondaryCalendarType="{{_secondaryCalendarType}}"
 			.minDate="{{minDate}}"
 			.maxDate="{{maxDate}}"
 			timestamp="{{_timestamp}}"
@@ -42,7 +42,7 @@
 			.selectedDates="{{_selectedDatesTimestamps}}"
 			._hidden="{{_isYearPickerHidden}}"
 			.primaryCalendarType="{{_primaryCalendarType}}"
-			.secondaryCalendarType="{{secondaryCalendarType}}"
+			.secondaryCalendarType="{{_secondaryCalendarType}}"
 			.minDate="{{minDate}}"
 			.maxDate="{{maxDate}}"
 			timestamp="{{_timestamp}}"
@@ -55,7 +55,7 @@
 	<ui5-calendar-header
 			id="{{_id}}-head"
 			.primaryCalendarType="{{_primaryCalendarType}}"
-			.secondaryCalendarType="{{secondaryCalendarType}}"
+			.secondaryCalendarType="{{_secondaryCalendarType}}"
 			.buttonTextForSecondaryCalendarType="{{secondaryCalendarTypeButtonText}}"
 			timestamp="{{_timestamp}}"
 			.isPrevButtonDisabled="{{_previousButtonDisabled}}"

packages/main/src/Calendar.ts

@@ -337,7 +337,7 @@ class Calendar extends CalendarPart {
 			this._headerYearButtonText = String(yearFormat.format(this._localDate, true));
 		}
 
-		this.secondaryCalendarType && this._setSecondaryCalendarTypeButtonText();
+		this._secondaryCalendarType && this._setSecondaryCalendarTypeButtonText();
 	}
 
 	/**
@@ -378,17 +378,17 @@ class Calendar extends CalendarPart {
 	}
 
 	_setSecondaryCalendarTypeButtonText() {
-		const yearFormatSecType = DateFormat.getDateInstance({ format: "y", calendarType: this.secondaryCalendarType });
+		const yearFormatSecType = DateFormat.getDateInstance({ format: "y", calendarType: this._secondaryCalendarType });
 
 		if (this._currentPicker === "year") {
 			const rangeStart = new CalendarDate(this._calendarDate, this._primaryCalendarType);
 			const rangeEnd = new CalendarDate(this._calendarDate, this._primaryCalendarType);
 			rangeStart.setYear(this._currentPickerDOM._firstYear!);
 			rangeEnd.setYear(this._currentPickerDOM._lastYear!);
 
-			const rangeStartSecType = transformDateToSecondaryType(this.primaryCalendarType, this.secondaryCalendarType, rangeStart.valueOf() / 1000, true)
+			const rangeStartSecType = transformDateToSecondaryType(this.primaryCalendarType, this._secondaryCalendarType, rangeStart.valueOf() / 1000, true)
 				.firstDate;
-			const rangeEndSecType = transformDateToSecondaryType(this.primaryCalendarType, this.secondaryCalendarType, rangeEnd.valueOf() / 1000, true)
+			const rangeEndSecType = transformDateToSecondaryType(this.primaryCalendarType, this._secondaryCalendarType, rangeEnd.valueOf() / 1000, true)
 				.lastDate;
 			this._headerYearButtonTextSecType = `${yearFormatSecType.format(rangeStartSecType.toLocalJSDate(), true)} - ${yearFormatSecType.format(rangeEndSecType.toLocalJSDate(), true)}`;
 		} else {
@@ -397,14 +397,14 @@ class Calendar extends CalendarPart {
 	}
 
 	get secondaryCalendarTypeButtonText() {
-		if (!this.secondaryCalendarType) {
+		if (!this._secondaryCalendarType) {
 			return;
 		}
 
 		const localDate = new Date(this._timestamp * 1000);
-		const secondYearFormat = DateFormat.getDateInstance({ format: "y", calendarType: this.secondaryCalendarType });
-		const dateInSecType = transformDateToSecondaryType(this._primaryCalendarType, this.secondaryCalendarType, this._timestamp);
-		const secondMonthInfo = convertMonthNumbersToMonthNames(dateInSecType.firstDate.getMonth(), dateInSecType.lastDate.getMonth(), this.secondaryCalendarType);
+		const secondYearFormat = DateFormat.getDateInstance({ format: "y", calendarType: this._secondaryCalendarType });
+		const dateInSecType = transformDateToSecondaryType(this._primaryCalendarType, this._secondaryCalendarType, this._timestamp);
+		const secondMonthInfo = convertMonthNumbersToMonthNames(dateInSecType.firstDate.getMonth(), dateInSecType.lastDate.getMonth(), this._secondaryCalendarType);
 		const secondYearText = secondYearFormat.format(localDate, true);
 
 		return {

packages/main/src/DateComponentBase.ts

@@ -5,7 +5,7 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import { fetchCldr } from "@ui5/webcomponents-base/dist/asset-registries/LocaleData.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import { getCalendarType } from "@ui5/webcomponents-base/dist/config/CalendarType.js";
+import { getCalendarType, getSecondaryCalendarType } from "@ui5/webcomponents-base/dist/config/CalendarType.js";
 import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
 import getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js";
 import CalendarType from "@ui5/webcomponents-base/dist/types/CalendarType.js";
@@ -114,6 +114,10 @@ class DateComponentBase extends UI5Element {
 		return this.primaryCalendarType || getCalendarType() || localeData.getPreferredCalendarType();
 	}
 
+	get _secondaryCalendarType() {
+		return this.secondaryCalendarType || getSecondaryCalendarType();
+	}
+
 	get _minDate() {
 		let minDate;
 

packages/main/test/pages/CalendarConfig.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<title>Calendar Type Configuration</title>
+
+	<script src="../../bundle.esm.js" type="module"></script>
+
+	<script data-ui5-config type="application/json">
+        {
+            "calendarType": "Islamic",
+			"secondaryCalendarType": "Gregorian"
+        }
+    </script>
+
+</head>
+
+<body>
+		<section>
+			<ui5-title> Global config: "calendarType": "Islamic", "secondaryCalendarType": "Gregorian"</ui5-title>
+			<br><br>
+			<ui5-date-picker></ui5-date-picker>
+			<ui5-datetime-picker ></ui5-datetime-picker>
+			<ui5-daterange-picker></ui5-daterange-picker>
+			<br><br>
+			<ui5-calendar id="cal1"></ui5-calendar>
+		</section>
+
+		<section>
+			<br><br>
+			<ui5-title>  primary-calendar-type="Gregorian" secondary-calendar-type="Islamic"</ui5-title>
+			<ui5-date-picker id="dp1" primary-calendar-type="Gregorian" secondary-calendar-type="Islamic"></ui5-date-picker>
+
+			<br><br>
+			<ui5-title>  primary-calendar-type="Islamic" secondary-calendar-type="Gregorian"</ui5-title>
+			<ui5-date-picker primary-calendar-type="Islamic" secondary-calendar-type="Gregorian"></ui5-date-picker>
+
+			<br><br>
+			<ui5-title>  primary-calendar-type="Japanese" secondary-calendar-type="Islamic"</ui5-title>
+			<ui5-date-picker primary-calendar-type="Japanese" secondary-calendar-type="Islamic"></ui5-date-picker>
+
+			<br><br>
+			<ui5-title>  primary-calendar-type="Islamic" secondary-calendar-type="Japanese"</ui5-title>
+			<ui5-date-picker primary-calendar-type="Islamic" secondary-calendar-type="Japanese"></ui5-date-picker>
+		</section>
+</body>
+</html>

packages/main/test/specs/CalendarConfig.spec.js

@@ -0,0 +1,23 @@
+import { assert } from "chai";
+
+describe("Calendar general interaction", () => {
+	before(async () => {
+		await browser.url(`test/pages/CalendarConfig.html`);
+	});
+
+	it("Calendar type configured", async () => {
+		const calendar = await browser.$("#cal1");
+
+		// Component primaryCalendarType and secondaryCalendarType are not set
+		assert.strictEqual(await calendar.getProperty("primaryCalendarType"), null, 
+			"Primary calendar type is not set.");
+		assert.strictEqual(await calendar.getProperty("secondaryCalendarType"),null,
+			"Secondary calendar type is not set.");
+
+		// Configured calendar types are effectively used
+		assert.strictEqual(await calendar.getProperty("_primaryCalendarType"), "Islamic", 
+			"Primary calendar configured.");
+		assert.strictEqual(await calendar.getProperty("_secondaryCalendarType"), "Gregorian",
+			"Secondary calendar configured.");
+	});
+});