Fixed #9635 - Globally configure p-calendar firstDayOfWeek and Fixed #…

…10574 - calendar firstDayOfWeek won't change dinamically
primefaces · Dec 28, 2021 · 9c6682c · 9c6682c
1 parent 0be00b2
commit 9c6682c
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 5 deletions.
diff --git a/src/app/components/api/primengconfig.ts b/src/app/components/api/primengconfig.ts
@@ -70,6 +70,7 @@ export class PrimeNGConfig {
         monthNames: ["January","February","March","April","May","June","July","August","September","October","November","December"],
         monthNamesShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
         dateFormat: 'mm/dd/yy',
+        firstDayOfWeek: 0,
         today: 'Today',
         weekHeader: 'Wk',
         weak: 'Weak',

diff --git a/src/app/components/api/translation.ts b/src/app/components/api/translation.ts
@@ -35,6 +35,7 @@ export interface Translation {
     monthNames?: string[];
     monthNamesShort?: string[];
     dateFormat?: string;
+    firstDayOfWeek?: number;
     today?: string;
     weekHeader?: string;
     weak?: string;

diff --git a/src/app/components/api/translationkeys.ts b/src/app/components/api/translationkeys.ts
@@ -30,6 +30,7 @@ export class TranslationKeys {
     public static readonly DAY_NAMES_MIN = 'dayNamesMin';
     public static readonly MONTH_NAMES = 'monthNames';
     public static readonly MONTH_NAMES_SHORT = 'monthNamesShort';
+    public static readonly FIRST_DAY_OF_WEEK = 'firstDayOfWeek';
     public static readonly TODAY = 'today';
     public static readonly WEEK_HEADER = 'weekHeader';
     public static readonly WEAK = 'weak';
@@ -38,4 +39,4 @@ export class TranslationKeys {
     public static readonly PASSWORD_PROMPT = 'passwordPrompt';
     public static readonly EMPTY_MESSAGE = 'emptyMessage';
     public static readonly EMPTY_FILTER_MESSAGE = 'emptyFilterMessage';
-}
+}
diff --git a/src/app/components/calendar/calendar.ts b/src/app/components/calendar/calendar.ts
@@ -300,8 +300,6 @@ export class Calendar implements OnInit,OnDestroy,ControlValueAccessor {
 
     @Input() focusTrap: boolean = true;
 
-    @Input() firstDayOfWeek: number = 0;
-
     @Input() showTransitionOptions: string = '.12s cubic-bezier(0, 0, 0.2, 1)';
 
     @Input() hideTransitionOptions: string = '.1s linear';
@@ -460,6 +458,8 @@ export class Calendar implements OnInit,OnDestroy,ControlValueAccessor {
 
     _numberOfMonths: number = 1;
 
+    _firstDayOfWeek: number;
+
     _view: string = 'date';
 
     preventFocus: boolean;
@@ -596,6 +596,16 @@ export class Calendar implements OnInit,OnDestroy,ControlValueAccessor {
         this.createResponsiveStyle();
     }
 
+    @Input() get firstDayOfWeek(): number {
+        return this._numberOfMonths;
+    }
+
+    set firstDayOfWeek(firstDayOfWeek: number) {
+        this._firstDayOfWeek = firstDayOfWeek;
+
+        this.createWeekDays();
+    }
+
     @Input()
     set locale(newLocale: LocaleSettings) {
         console.warn("Locale property has no effect, use new i18n API instead.");
@@ -682,7 +692,7 @@ export class Calendar implements OnInit,OnDestroy,ControlValueAccessor {
 
     createWeekDays() {
         this.weekDays = [];
-        let dayIndex = this.firstDayOfWeek;
+        let dayIndex = this.getFirstDateOfWeek();
         let dayLabels = this.getTranslation(TranslationKeys.DAY_NAMES_MIN);
         for (let i = 0; i < 7; i++) {
             this.weekDays.push(dayLabels[dayIndex]);
@@ -1178,7 +1188,9 @@ export class Calendar implements OnInit,OnDestroy,ControlValueAccessor {
     }
 
     getSundayIndex() {
-        return this.firstDayOfWeek > 0 ? 7 - this.firstDayOfWeek : 0;
+        let firstDayOfWeek = this.getFirstDateOfWeek();
+
+        return firstDayOfWeek > 0 ? 7 - firstDayOfWeek : 0;
     }
 
     isSelected(dateMeta): boolean {
@@ -2503,6 +2515,10 @@ export class Calendar implements OnInit,OnDestroy,ControlValueAccessor {
         return this.dateFormat||this.getTranslation('dateFormat');
     }
 
+    getFirstDateOfWeek() {
+        return this._firstDayOfWeek||this.getTranslation(TranslationKeys.FIRST_DAY_OF_WEEK);
+    }
+
     // Ported from jquery-ui datepicker formatDate
     formatDate(date, format) {
         if (!date) {

diff --git a/src/app/showcase/components/i18n/i18n.component.html b/src/app/showcase/components/i18n/i18n.component.html
@@ -72,6 +72,7 @@ <h5>en.json</h5>
         "monthNames": ["January","February","March","April","May","June","July","August","September","October","November","December"],
         "monthNamesShort": ["Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
         "dateFormat": "mm/dd/yy",
+        "firstDayOfWeek": 0,
         "today": "Today",
         "weekHeader": "Wk",
         "weak": 'Weak',
@@ -264,6 +265,10 @@ <h5>Translation</h5>
                         <td>dateFormat</td>
                         <td>mm/dd/yy</td>
                     </tr>
+                    <tr>
+                        <td>firstDayOfWeek</td>
+                        <td>0</td>
+                    </tr>
                     <tr>
                         <td>today</td>
                         <td>Today</td>