fix: allow user to set any day as starting day of week (#772)

* allow user to set any day as starting day of week, also add input to datepicker and datetimepicker * startingDayOfWeek must be between 0 and 6 * create type to enforce range * fix bug where prev month last day would not display
SAP · May 3, 2019 · 42e4b36 · 42e4b36
1 parent 81d1d29
commit 42e4b36
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 11 deletions.
diff --git a/docs/modules/documentation/containers/calendar/calendar-docs.component.html b/docs/modules/documentation/containers/calendar/calendar-docs.component.html
@@ -24,7 +24,7 @@ <h2>Range Selection Calendar</h2>
 <code-example [code]="calendarRangeSource" [language]="'typescript'"></code-example>
 
 <h2>Monday Start Calendar</h2>
-<description>Simply changes the order in which the days of the week appear.</description>
+<description>Use the <code>startingDayOfWeek</code> input to change the order in which the days of the week appear. 1 is Monday, 2 is Tuesday, etc.</description>
 <component-example [name]="'ex3'">
     <fd-calendar-monday-start-example></fd-calendar-monday-start-example>
 </component-example>

diff --git a/...les/documentation/containers/calendar/examples/calendar-monday-start-example.component.ts b/...les/documentation/containers/calendar/examples/calendar-monday-start-example.component.ts
@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
 
 @Component({
     selector: 'fd-calendar-monday-start-example',
-    template: `<fd-calendar [calType]="'single'" [(ngModel)]="selectedDay" [mondayStartOfWeek]="true"></fd-calendar>`
+    template: `<fd-calendar [calType]="'single'" [(ngModel)]="selectedDay" [startingDayOfWeek]="1"></fd-calendar>`
 })
 export class CalendarMondayStartExampleComponent {
     selectedDay = {

diff --git a/library/src/lib/calendar/calendar.component.spec.ts b/library/src/lib/calendar/calendar.component.spec.ts
@@ -588,4 +588,15 @@ describe('CalendarComponent', () => {
         expect(component.init).toBeTruthy();
     });
 
+    it('should properly rearrange days when different startingDayOfWeek is used', () => {
+        component.setWeekDaysOrder();
+        expect(component.weekDays).toEqual(['S', 'M', 'T', 'W', 'T', 'F', 'S']);
+        component.startingDayOfWeek = 1;
+        component.setWeekDaysOrder();
+        expect(component.weekDays).toEqual(['M', 'T', 'W', 'T', 'F', 'S', 'S']);
+        component.startingDayOfWeek = 2;
+        component.setWeekDaysOrder();
+        expect(component.weekDays).toEqual(['T', 'W', 'T', 'F', 'S', 'S', 'M']);
+    });
+
 });
diff --git a/library/src/lib/calendar/calendar.component.ts b/library/src/lib/calendar/calendar.component.ts
@@ -19,6 +19,7 @@ import { Subject } from 'rxjs';
 
 export type CalendarType = 'single' | 'range';
 export type MonthStatus = 'previous' | 'current' | 'next';
+export type WeekDaysNumberRange = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 
 export interface CalendarDay {
     date: Date;
@@ -73,7 +74,7 @@ export class CalendarComponent implements OnInit, OnDestroy, AfterViewChecked, C
     calType: CalendarType = 'single';
 
     @Input()
-    mondayStartOfWeek: boolean = false;
+    startingDayOfWeek: WeekDaysNumberRange = 0;
 
     @Output()
     isInvalidDateInput: EventEmitter<any> = new EventEmitter();
@@ -115,6 +116,7 @@ export class CalendarComponent implements OnInit, OnDestroy, AfterViewChecked, C
         'November',
         'December'
     ];
+
     weekDays: string[];
     daysPerMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
 
@@ -190,18 +192,24 @@ export class CalendarComponent implements OnInit, OnDestroy, AfterViewChecked, C
         }
     };
 
+    setWeekDaysOrder() {
+        this.weekDays = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
+        if (this.startingDayOfWeek <= 6 && this.startingDayOfWeek >= 0) {
+            for (let i = this.startingDayOfWeek; i > 0; i--) {
+                this.weekDays.push(this.weekDays.shift());
+            }
+        }
+    }
+
     getPreviousMonthDays(calendarMonth) {
         // Previous month days
         let prevMonthLastDate;
-        if (this.mondayStartOfWeek) {
-            prevMonthLastDate = new Date(this.date.getFullYear(), this.date.getMonth(), -1);
-        } else {
-            prevMonthLastDate = new Date(this.date.getFullYear(), this.date.getMonth(), 0);
-        }
+        this.setWeekDaysOrder();
+        prevMonthLastDate = new Date(this.date.getFullYear(), this.date.getMonth(), 0);
         const prevMonth: number = prevMonthLastDate.getMonth();
         const prevMonthYear: number = prevMonthLastDate.getFullYear();
         const prevMonthLastDay = prevMonthLastDate.getDate();
-        let prevMonthLastWeekDay = prevMonthLastDate.getDay();
+        let prevMonthLastWeekDay = prevMonthLastDate.getDay() - this.startingDayOfWeek;
 
         if (prevMonthLastWeekDay < 6) {
             while (prevMonthLastWeekDay >= 0) {

diff --git a/library/src/lib/date-picker/date-picker.component.html b/library/src/lib/date-picker/date-picker.component.html
@@ -29,6 +29,7 @@
                      [(selectedDay)]="selectedDay"
                      [(selectedRangeFirst)]="selectedRangeFirst" [(selectedRangeLast)]="selectedRangeLast"
                      (isInvalidDateInput)="isInvalidDateInputHandler($event)"
-                     [dateFromDatePicker]="dateFromDatePicker"></fd-calendar>
+                     [dateFromDatePicker]="dateFromDatePicker"
+                     [startingDayOfWeek]="startingDayOfWeek"></fd-calendar>
     </fd-popover-body>
 </fd-popover>
diff --git a/library/src/lib/date-picker/date-picker.component.ts b/library/src/lib/date-picker/date-picker.component.ts
@@ -70,6 +70,9 @@ export class DatePickerComponent implements OnInit, OnDestroy, ControlValueAcces
     @Output()
     selectedRangeLastChange = new EventEmitter();
 
+    @Input()
+    startingDayOfWeek: number = 0;
+
     @Input()
     disableFunction = function(d): boolean {
         return false;

diff --git a/library/src/lib/datetime-picker/datetime-picker.component.html b/library/src/lib/datetime-picker/datetime-picker.component.html
@@ -33,7 +33,8 @@
                              [(selectedDay)]="selectedDay"
                              (isInvalidDateInput)="isInvalidDateInputHandler($event)"
                              [dateFromDatePicker]="dateFromInput"
-                             [isDateTimePicker]="true"></fd-calendar>
+                             [isDateTimePicker]="true"
+                             [startingDayOfWeek]="startingDayOfWeek"></fd-calendar>
                 <div class="fd-datetime__separator"></div>
                 <fd-time [disabled]="disabled" [ngClass]="{'fd-time-container': !meridian}"
                          [meridian]="meridian"

diff --git a/library/src/lib/datetime-picker/datetime-picker.component.ts b/library/src/lib/datetime-picker/datetime-picker.component.ts
@@ -61,6 +61,9 @@ export class DatetimePickerComponent implements OnInit, ControlValueAccessor {
     @ViewChild(TimeComponent)
     timeComponent;
 
+    @Input()
+    startingDayOfWeek: number = 0;
+
     @Input()
     disableFunction = function(d): boolean {
         return false;