feat: replace the moment dependency with the date-fns library

BREAKING CHANGE:

1/ The `dayModifier` and `hourSegmentModifier` output objects now return pure date objects instead of moments

2/ If using the `CalendarMomentDateFormatter` you must now also provide moment to the calendar like so
```
import * as moment from 'moment';
import {
  CalendarMomentDateFormatter,
  CalendarDateFormatter,
  MOMENT
} from './../angular2-calendar';

...

providers: [
  {provide: CalendarDateFormatter, useClass: CalendarMomentDateFormatter},
  {provide: MOMENT, useValue: moment}
]

```

3/ The week start day is now no longer determined by moment. You must manually pass it to the month and week view components like so
```
// the first day of the week is Monday
[weekStartsOn]="1"
```

4/ If using this library without a module bundler you must make sure the date-fns library is included in a script tag

Closes #48

Author: Matt Lewis

README.md

@@ -25,7 +25,7 @@ A calendar component that can display events on a month, week or day view. The s
 
 Install through npm:
 ```
-npm install --save angular2-calendar moment
+npm install --save angular2-calendar
 ```
 
 For a full e2e example see the [demo source](https://github.com/mattlewis92/angular2-calendar/blob/master/demo/demo.component.ts). Better docs to follow in the future!

demo/demo.component.ts

@@ -1,6 +1,16 @@
 import {Component} from '@angular/core';
-import * as moment from 'moment';
-import {UnitOfTime, Moment} from 'moment';
+import {
+  startOfDay,
+  subDays,
+  addDays,
+  endOfMonth,
+  isSameDay,
+  isSameMonth,
+  addWeeks,
+  subWeeks,
+  addMonths,
+  subMonths
+} from 'date-fns';
 import {
   CalendarEvent,
   CalendarEventAction
@@ -83,7 +93,7 @@ const colors: any = {
 })
 export class Demo {
 
-  private view: UnitOfTime = 'month';
+  private view: string = 'month';
 
   private viewDate: Date = new Date();
 
@@ -100,47 +110,64 @@ export class Demo {
   }];
 
   private events: CalendarEvent[] = [{
-    start: moment().startOf('day').subtract(1, 'day').toDate(),
-    end: moment().add(1, 'day').toDate(),
+    start: subDays(startOfDay(new Date()), 1),
+    end: addDays(new Date(), 1),
     title: 'A 3 day event',
     color: colors.red,
     actions: this.actions
   }, {
-    start: moment().startOf('day').toDate(),
+    start: startOfDay(new Date()),
     title: 'An event with no end date',
     color: colors.yellow,
     actions: this.actions
   }, {
-    start: moment().endOf('month').subtract(3, 'days').toDate(),
-    end: moment().endOf('month').add(3, 'days').toDate(),
+    start: subDays(endOfMonth(new Date()), 3),
+    end: addDays(endOfMonth(new Date()), 3),
     title: 'A long event that spans 2 months',
     color: colors.blue
   }];
 
   private activeDayIsOpen: boolean = true;
 
   increment(): void {
-    this.viewDate = moment(this.viewDate).add(1, this.view).toDate();
+
+    const addFn: any = {
+      day: addDays,
+      week: addWeeks,
+      month: addMonths
+    }[this.view];
+
+    this.viewDate = addFn(this.viewDate, 1);
+
   }
 
   decrement(): void {
-    this.viewDate = moment(this.viewDate).subtract(1, this.view).toDate();
+
+    const subFn: any = {
+      day: subDays,
+      week: subWeeks,
+      month: subMonths
+    }[this.view];
+
+    this.viewDate = subFn(this.viewDate, 1);
+
   }
 
   today(): void {
     this.viewDate = new Date();
   }
 
-  dayClicked({date, events}: {date: Moment, events: CalendarEvent[]}): void {
-    if (moment(date).startOf('month').isSame(moment(this.viewDate).startOf('month'))) {
+  dayClicked({date, events}: {date: Date, events: CalendarEvent[]}): void {
+
+    if (isSameMonth(date, this.viewDate)) {
       if (
-        (moment(this.viewDate).startOf('day').isSame(date.clone().startOf('day')) && this.activeDayIsOpen === true) ||
+        (isSameDay(this.viewDate, date) && this.activeDayIsOpen === true) ||
         events.length === 0
       ) {
         this.activeDayIsOpen = false;
       } else {
         this.activeDayIsOpen = true;
-        this.viewDate = date.toDate();
+        this.viewDate = date;
       }
     }
   }

package.json

@@ -49,6 +49,7 @@
     "@ng-bootstrap/ng-bootstrap": "~1.0.0-alpha.1",
     "@types/chai": "~3.4.30",
     "@types/core-js": "~0.9.32",
+    "@types/date-fns": "0.0.1",
     "@types/jasmine": "~2.2.33",
     "@types/sinon": "~1.16.27",
     "@types/sinon-chai": "~2.7.26",
@@ -105,8 +106,7 @@
   "peerDependencies": {
     "@angular/core": "^2.0.0-rc.5",
     "@angular/common": "^2.0.0-rc.5",
-    "@angular/platform-browser": "^2.0.0-rc.5",
-    "moment": "^2.0.0"
+    "@angular/platform-browser": "^2.0.0-rc.5"
   },
   "files": [
     "dist",
@@ -121,6 +121,7 @@
     }
   },
   "dependencies": {
-    "calendar-utils": "0.0.25"
+    "calendar-utils": "0.0.26",
+    "date-fns": "~1.3.0"
   }
 }

src/components/day/calendarDayView.component.ts

@@ -38,7 +38,7 @@ const SEGMENT_HEIGHT: number = 30;
             *ngFor="let segment of hour.segments"
             [segment]="segment"
             [locale]="locale"
-            (click)="hourSegmentClicked.emit({date: segment.date.toDate()})">
+            (click)="hourSegmentClicked.emit({date: segment.date})">
           </mwl-calendar-day-view-hour-segment>
         </div>
       </div>

src/components/month/calendarMonthView.component.ts

@@ -11,7 +11,7 @@ import {
   LOCALE_ID,
   Inject
 } from '@angular/core';
-import * as moment from 'moment';
+import * as isSameDay from 'date-fns/is_same_day';
 import {
   CalendarEvent,
   WeekDay,
@@ -95,6 +95,11 @@ export class CalendarMonthView implements OnChanges, OnInit, OnDestroy {
    */
   @Input() tooltipPlacement: string = 'top';
 
+  /**
+   * The start number of the week
+   */
+  @Input() weekStartsOn: number;
+
   /**
    * Called when the day cell is clicked
    */
@@ -148,14 +153,16 @@ export class CalendarMonthView implements OnChanges, OnInit, OnDestroy {
 
   private refreshHeader(): void {
     this.columnHeaders = getWeekViewHeader({
-      viewDate: this.viewDate
+      viewDate: this.viewDate,
+      weekStartsOn: this.weekStartsOn
     });
   }
 
   private refreshBody(): void {
     this.view = getMonthView({
       events: this.events,
-      viewDate: this.viewDate
+      viewDate: this.viewDate,
+      weekStartsOn: this.weekStartsOn
     });
     if (this.dayModifier) {
       this.view.days.forEach(day => this.dayModifier(day));
@@ -164,7 +171,7 @@ export class CalendarMonthView implements OnChanges, OnInit, OnDestroy {
 
   private checkActiveDayIsOpen(): void {
     if (this.activeDayIsOpen === true) {
-      this.openDay = this.view.days.find(day => day.date.isSame(moment(this.viewDate).startOf('day')));
+      this.openDay = this.view.days.find(day => isSameDay(day.date, this.viewDate));
       const index: number = this.view.days.indexOf(this.openDay);
       this.openRowIndex = Math.floor(index / 7) * 7;
     } else {

src/components/week/calendarWeekView.component.ts

@@ -31,7 +31,7 @@ import {
           *ngFor="let day of days"
           [day]="day"
           [locale]="locale"
-          (click)="dayClicked.emit({date: day.date.toDate()})">
+          (click)="dayClicked.emit({date: day.date})">
         </mwl-calendar-week-view-header>
       </div>
       <div *ngFor="let eventRow of eventRows">
@@ -77,6 +77,11 @@ export class CalendarWeekView implements OnChanges, OnInit, OnDestroy {
    */
   @Input() tooltipPlacement: string = 'bottom';
 
+  /**
+   * The start number of the week
+   */
+  @Input() weekStartsOn: number;
+
   /**
    * Called when a header week day is clicked
    */
@@ -124,14 +129,16 @@ export class CalendarWeekView implements OnChanges, OnInit, OnDestroy {
 
   private refreshHeader(): void {
     this.days = getWeekViewHeader({
-      viewDate: this.viewDate
+      viewDate: this.viewDate,
+      weekStartsOn: this.weekStartsOn
     });
   }
 
   private refreshBody(): void {
     this.eventRows = getWeekView({
       events: this.events,
-      viewDate: this.viewDate
+      viewDate: this.viewDate,
+      weekStartsOn: this.weekStartsOn
     });
   }
 

src/pipes/calendarDate.pipe.ts

@@ -1,6 +1,4 @@
 import {Pipe, PipeTransform, LOCALE_ID, Inject} from '@angular/core';
-import * as moment from 'moment';
-import {Moment} from 'moment';
 import {CalendarDateFormatter} from './../providers/calendarDateFormatter.provider';
 
 @Pipe({
@@ -10,11 +8,8 @@ export class CalendarDate implements PipeTransform {
 
   constructor(private dateFormatter: CalendarDateFormatter, @Inject(LOCALE_ID) private locale: string) {}
 
-  transform(date: Date | Moment, method: string, locale: string = this.locale): string {
-
-    date = moment(date).toDate();
+  transform(date: Date, method: string, locale: string = this.locale): string {
     return this.dateFormatter[method]({date, locale});
-
   }
 
 }

src/providers/calendarMomentDateFormatter.provider.ts

@@ -1,38 +1,42 @@
-import * as moment from 'moment';
+import {OpaqueToken, Inject} from '@angular/core';
 import {CalendarDateFormatterInterface, DateFormatterParams} from './../interfaces/calendarDateFormatter.interface';
 
+export const MOMENT: OpaqueToken = new OpaqueToken('Moment');
+
 export class CalendarMomentDateFormatter implements CalendarDateFormatterInterface {
 
+  constructor(@Inject(MOMENT) private moment: any) {}
+
   public monthViewColumnHeader({date, locale}: DateFormatterParams): string {
-    return moment(date).locale(locale).format('dddd');
+    return this.moment(date).locale(locale).format('dddd');
   }
 
   public monthViewDayNumber({date, locale}: DateFormatterParams): string {
-    return moment(date).locale(locale).format('D');
+    return this.moment(date).locale(locale).format('D');
   }
 
   public monthViewTitle({date, locale}: DateFormatterParams): string {
-    return moment(date).locale(locale).format('MMMM YYYY');
+    return this.moment(date).locale(locale).format('MMMM YYYY');
   }
 
   public weekViewColumnHeader({date, locale}: DateFormatterParams): string {
-    return moment(date).locale(locale).format('dddd');
+    return this.moment(date).locale(locale).format('dddd');
   }
 
   public weekViewColumnSubHeader({date, locale}: DateFormatterParams): string {
-    return moment(date).locale(locale).format('D MMM');
+    return this.moment(date).locale(locale).format('D MMM');
   }
 
   public weekViewTitle({date, locale}: DateFormatterParams): string {
-    return moment(date).locale(locale).format('[Week] W [of] YYYY');
+    return this.moment(date).locale(locale).format('[Week] W [of] YYYY');
   }
 
   public dayViewHour({date, locale}: DateFormatterParams): string {
-    return moment(date).locale(locale).format('ha');
+    return this.moment(date).locale(locale).format('ha');
   }
 
   public dayViewTitle({date, locale}: DateFormatterParams): string {
-    return moment(date).locale(locale).format('dddd, D MMMM, YYYY');
+    return this.moment(date).locale(locale).format('dddd, D MMMM, YYYY');
   }
 
 }

src/providers/calendarNativeDateFormatter.provider.ts

@@ -1,15 +1,6 @@
+import * as getISOWeek from 'date-fns/get_iso_week';
 import {CalendarDateFormatterInterface, DateFormatterParams} from './../interfaces/calendarDateFormatter.interface';
 
-// TODO - move this into its own module that people can re-use
-const getWeekNumber: Function = (date: Date): number => {
-  // source: https://weeknumber.net/how-to/javascript
-  const dateClone: Date = new Date(date.getTime());
-  dateClone.setHours(0, 0, 0, 0);
-  dateClone.setDate(dateClone.getDate() + 3 - (dateClone.getDay() + 6) % 7);
-  const week1: Date = new Date(dateClone.getFullYear(), 0, 4);
-  return 1 + Math.round(((dateClone.getTime() - week1.getTime()) / 86400000 - 3 + (week1.getDay() + 6) % 7) / 7);
-};
-
 export class CalendarNativeDateFormatter implements CalendarDateFormatterInterface {
 
   public monthViewColumnHeader({date, locale}: DateFormatterParams): string {
@@ -37,7 +28,7 @@ export class CalendarNativeDateFormatter implements CalendarDateFormatterInterfa
 
   public weekViewTitle({date, locale}: DateFormatterParams): string {
     const year: string = new Intl.DateTimeFormat(locale, {year: 'numeric'}).format(date);
-    const weekNumber: number = getWeekNumber(date);
+    const weekNumber: number = getISOWeek(date);
     return `Week ${weekNumber} of ${year}`;
   }
 

test/calendarDate.pipe.spec.ts

@@ -6,10 +6,12 @@ import {
 } from '@angular/core/testing';
 import {expect} from 'chai';
 import {spy} from 'sinon';
+import * as moment from 'moment';
 import {
   CalendarModule,
   CalendarMomentDateFormatter,
-  CalendarDateFormatter
+  CalendarDateFormatter,
+  MOMENT
 } from './../angular2-calendar';
 
 @Component({
@@ -29,7 +31,8 @@ describe('calendarDate pipe', () => {
     TestBed.configureTestingModule({imports: [CalendarModule], declarations: [TestCmp]});
     TestBed.configureCompiler({
       providers: [
-        {provide: CalendarDateFormatter, useClass: CalendarMomentDateFormatter}
+        {provide: CalendarDateFormatter, useClass: CalendarMomentDateFormatter},
+        {provide: MOMENT, useValue: moment}
       ]
     });
   });