add option for calendar weeks to start on Monday instead of Sunday

docs/modules/documentation/containers/calendar/calendar-docs.component.html

@@ -10,6 +10,7 @@ <h1>&lt;fd-calendar&gt;</h1>
 <properties [properties]="{
   inputs: [
     { name: 'calType',  description: 'Options include \'single\' for a date picker field populated with one date, and \'range\' for a date picker field populated with date range.'},
+    { name: 'mondayStartOfWeek', description: 'Set this boolean to \'true\' to have the calendar week start on Monday instead of Sunday.'},
     { name: 'disableFunction', description: 'A user defined function that specifies the days that should be disabled.'},
     { name: 'blockFunction', description: 'A user defined function that specifies the days that should be blocked.'},
     { name: 'selectedDay', description: 'A CalendarDay object, containing the property \'date\', a native JavaScript Date object for setting the selected day on \'single\' type calendars.'},
@@ -30,13 +31,19 @@ <h2>Calendar with single selection, disabled and blocked days</h2>
 <component-example [name]="'ex1'">
   <fd-calendar-single-example></fd-calendar-single-example>
 </component-example>
-<pre><code mwlHighlightJs [language]="'JavaScript'" [source]="calendarSingleSource"></code></pre>
+<pre><code mwlHighlightJs [language]="'typescript'" [source]="calendarSingleSource"></code></pre>
 <separator></separator>
-<pre><code mwlHighlightJs [language]="'JavaScript'" [source]="exampleFunctionsHtml"></code></pre>
+<pre><code mwlHighlightJs [language]="'typescript'" [source]="exampleFunctionsHtml"></code></pre>
 <separator></separator>
 
 <h2>Calendar with range selection, selectedRangeFirst and selectedRangeLast</h2>
 <component-example [name]="'ex2'">
   <fd-calendar-range-example></fd-calendar-range-example>
 </component-example>
-<pre><code mwlHighlightJs [language]="'JavaScript'" [source]="calendarRangeSource"></code></pre>
+<pre><code mwlHighlightJs [language]="'typescript'" [source]="calendarRangeSource"></code></pre>
+
+<h2>Calendar with Monday start of week</h2>
+<component-example [name]="'ex3'">
+    <fd-calendar-monday-start-example></fd-calendar-monday-start-example>
+</component-example>
+<pre><code mwlHighlightJs [language]="'typescript'" [source]="calendarMondayStartSource"></code></pre>

docs/modules/documentation/containers/calendar/calendar-docs.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 
 import * as calendarRangeSrc from '!raw-loader!./examples/calendar-range-example.component.ts';
 import * as calendarSingleSrc from '!raw-loader!./examples/calendar-single-example.component.ts';
+import * as calendarMondayStartSrc from '!raw-loader!./examples/calendar-monday-start-example.component.ts';
 
 @Component({
     selector: 'app-calendar',
@@ -11,6 +12,7 @@ export class CalendarDocsComponent implements OnInit {
 
     calendarSingleSource = calendarSingleSrc;
     calendarRangeSource = calendarRangeSrc;
+    calendarMondayStartSource = calendarMondayStartSrc;
 
     exampleFunctionsHtml = `Example Disable and Block Functions: 
 

docs/modules/documentation/containers/calendar/examples/calendar-monday-start-example.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'fd-calendar-monday-start-example',
+    template: `<fd-calendar [calType]="'single'" [(selectedDay)]="selectedDay" [mondayStartOfWeek]="true"></fd-calendar>`
+})
+export class CalendarMondayStartExampleComponent {
+    selectedDay = {
+        date: new Date()
+    };
+}

docs/modules/documentation/documentation.module.ts

@@ -89,6 +89,7 @@ import {
 } from './containers/button-group/examples/button-group-examples.component';
 import { CalendarRangeExampleComponent } from './containers/calendar/examples/calendar-range-example.component';
 import { CalendarSingleExampleComponent } from './containers/calendar/examples/calendar-single-example.component';
+import { CalendarMondayStartExampleComponent } from './containers/calendar/examples/calendar-monday-start-example.component';
 import { DatePickerRangeExampleComponent } from './containers/date-picker/examples/date-picker-range-example.component';
 import { DatePickerSingleExampleComponent } from './containers/date-picker/examples/date-picker-single-example.component';
 import {
@@ -308,6 +309,7 @@ const ROUTES: Routes = [
         ButtonGroupDefaultExampleComponent,
         CalendarRangeExampleComponent,
         CalendarSingleExampleComponent,
+        CalendarMondayStartExampleComponent,
         DatePickerRangeExampleComponent,
         DatePickerSingleExampleComponent,
         DropdownContextualMenuExampleComponent,

library/src/lib/calendar/calendar.component.ts

@@ -61,6 +61,9 @@ export class CalendarComponent implements OnInit, OnChanges, AfterViewChecked {
         return false;
     };
 
+    @Input()
+    mondayStartOfWeek: boolean = false;
+
     @Output()
     updateDatePickerInput: EventEmitter<any> = new EventEmitter();
     @Output()
@@ -100,7 +103,7 @@ export class CalendarComponent implements OnInit, OnChanges, AfterViewChecked {
         'November',
         'December'
     ];
-    weekDays: string[] = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
+    weekDays: string[];
     daysPerMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
 
     calendarGrid: CalendarDay[][] = [];
@@ -166,7 +169,12 @@ export class CalendarComponent implements OnInit, OnChanges, AfterViewChecked {
         let calendarMonth: CalendarDay[] = [];
 
         //Previous month days
-        let prevMonthLastDate: Date = new Date(this.date.getFullYear(), this.date.getMonth(), 0);
+        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);
+        }
         let prevMonth: number = prevMonthLastDate.getMonth();
         let prevMonthYear: number = prevMonthLastDate.getFullYear();
         let prevMonthLastDay = prevMonthLastDate.getDate();
@@ -694,6 +702,7 @@ export class CalendarComponent implements OnInit, OnChanges, AfterViewChecked {
             this.constructCalendar();
             this.constructCalendarYearsList();
         }
+        this.weekDays = this.mondayStartOfWeek ? ['M', 'T', 'W', 'T', 'F', 'S', 'S'] : ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
     }
 
     ngOnInit() {