feat(calendar): Add start of week implementation and update locale based on new one.

Author: skrustev

projects/igniteui-angular/src/lib/calendar/calendar-base.ts

@@ -3,15 +3,14 @@ import { WEEKDAYS, IFormattingOptions, IFormattingViews, IViewDateChangeEventArg
 import { ControlValueAccessor } from '@angular/forms';
 import { DateRangeDescriptor } from '../core/dates';
 import { noop, Subject } from 'rxjs';
-import { isDate, isEqual, PlatformUtil } from '../core/utils';
+import { getLocaleFirstDayOfWeek, isDate, isEqual, PlatformUtil } from '../core/utils';
 import { CalendarResourceStringsEN, ICalendarResourceStrings } from '../core/i18n/calendar-resources';
 import { DateTimeUtil } from '../date-common/util/date-time.util';
-import { getLocaleFirstDayOfWeek } from "@angular/common";
 import { getCurrentResourceStrings } from '../core/i18n/resources';
 import { KeyboardNavigationService } from './calendar.services';
 import { getYearRange, isDateInRanges } from './common/helpers';
 import { CalendarDay } from './common/model';
-import { getI18nManager } from 'igniteui-i18n-core';
+import { getCurrentI18n, getI18nManager, ResourceChangeEventArgs } from 'igniteui-i18n-core';
 
 /** @hidden @internal */
 @Directive({
@@ -290,13 +289,6 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
     public set locale(value: string) {
         this._locale = value;
 
-        // if value is not a valid BCP 47 tag, set it back to _localeId
-        try {
-            getLocaleFirstDayOfWeek(this._locale);
-        } catch (e) {
-            this._locale = this._localeId;
-        }
-
         // changing locale runtime needs to update the `weekStart` too, if `weekStart` is not explicitly set
         if (!this.weekStart) {
             this.weekStart = getLocaleFirstDayOfWeek(this._locale);
@@ -657,11 +649,12 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
         protected keyboardNavigation?: KeyboardNavigationService,
         protected cdr?: ChangeDetectorRef,
     ) {
-        this.locale = _localeId;
+        this.locale = getCurrentI18n() || _localeId;
         this.viewDate = this.viewDate ? this.viewDate : new Date();
         this.initFormatters();
 
-        getI18nManager().onResourceChange(() => {
+        getI18nManager().onResourceChange((args: ResourceChangeEventArgs) => {
+            this.locale = args.newLocale;
             this._resourceStrings = getCurrentResourceStrings(CalendarResourceStringsEN, false);
         });
     }

projects/igniteui-angular/src/lib/core/utils.ts

@@ -1,4 +1,4 @@
-import { formatDate as _formatDate, getLocaleCurrencyCode, isPlatformBrowser } from '@angular/common';
+import { formatDate as _formatDate, getLocaleCurrencyCode, getLocaleFirstDayOfWeek as ngGetLocaleFirstDayOfWeek, isPlatformBrowser } from '@angular/common';
 import { Inject, Injectable, InjectionToken, PLATFORM_ID, inject } from '@angular/core';
 import { mergeWith } from 'lodash-es';
 import { NEVER, Observable } from 'rxjs';
@@ -681,6 +681,13 @@ export function getCurrencySymbol(currencyCode: string, currencyDisplay?: keyof
     return getI18nManager().getCurrencySymbol(currencyCode, currencyDisplay, locale);
 }
 
+export function getLocaleFirstDayOfWeek(locale?: string) {
+    try {
+        return ngGetLocaleFirstDayOfWeek(locale);
+    } catch {}
+    return getI18nManager().getFirstDayOfWeek(locale);
+}
+
 /** Converts pixel values to their rem counterparts for a base value */
 export const rem = (value: number | string) => {
     const base = parseFloat(globalThis.window?.getComputedStyle(globalThis.document?.documentElement).getPropertyValue('--ig-base-font-size'))