feat: introduce angular date formatter

Closes #376

Author: Matt Lewis

src/modules/common/calendar-angular-date-formatter.provider.ts

@@ -0,0 +1,76 @@
+import {
+  CalendarDateFormatterInterface,
+  DateFormatterParams
+} from './calendar-date-formatter.interface';
+import getISOWeek from 'date-fns/get_iso_week';
+import { DatePipe, VERSION } from '@angular/common';
+
+/**
+ * This will use <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Intl" target="_blank">Intl</a> API to do all date formatting. It is the default date formatter used by the calendar.
+ *
+ * You will need to include a <a href="https://github.com/andyearnshaw/Intl.js/">polyfill</a> for older browsers.
+ */
+export class CalendarAngularDateFormatter
+  implements CalendarDateFormatterInterface {
+  /**
+   * The month view header week day labels
+   */
+  public monthViewColumnHeader({ date, locale }: DateFormatterParams): string {
+    return new DatePipe(locale).transform(date, 'EEEE', locale);
+  }
+
+  /**
+   * The month view cell day number
+   */
+  public monthViewDayNumber({ date, locale }: DateFormatterParams): string {
+    return new DatePipe(locale).transform(date, 'd', locale);
+  }
+
+  /**
+   * The month view title
+   */
+  public monthViewTitle({ date, locale }: DateFormatterParams): string {
+    return new DatePipe(locale).transform(date, 'MMMM y', locale);
+  }
+
+  /**
+   * The week view header week day labels
+   */
+  public weekViewColumnHeader({ date, locale }: DateFormatterParams): string {
+    return new DatePipe(locale).transform(date, 'EEEE', locale);
+  }
+
+  /**
+   * The week view sub header day and month labels
+   */
+  public weekViewColumnSubHeader({
+    date,
+    locale
+  }: DateFormatterParams): string {
+    return new DatePipe(locale).transform(date, 'MMM d', locale);
+  }
+
+  /**
+   * The week view title
+   */
+  public weekViewTitle({ date, locale }: DateFormatterParams): string {
+    const year: string = new DatePipe(locale).transform(date, 'y', locale);
+    const weekNumber: number = getISOWeek(date);
+    return `Week ${weekNumber} of ${year}`;
+  }
+
+  /**
+   * The time formatting down the left hand side of the day view
+   */
+  public dayViewHour({ date, locale }: DateFormatterParams): string {
+    const format = +VERSION.major === 4 ? 'j' : 'h a';
+    return new DatePipe(locale).transform(date, format, locale);
+  }
+
+  /**
+   * The day view title
+   */
+  public dayViewTitle({ date, locale }: DateFormatterParams): string {
+    return new DatePipe(locale).transform(date, 'EEEE, MMMM d, y', locale);
+  }
+}

src/modules/common/calendar-common.module.ts

@@ -26,6 +26,7 @@ export interface CalendarModuleConfig {
 export * from './calendar-event-title-formatter.provider';
 export * from './calendar-moment-date-formatter.provider';
 export * from './calendar-native-date-formatter.provider';
+export * from './calendar-angular-date-formatter.provider';
 export * from './calendar-date-formatter.provider';
 export * from './calendar-utils.provider';
 export * from './calendar-date-formatter.interface';

test/calendar-angular-date-formatter.provider.spec.ts

@@ -0,0 +1,88 @@
+import { inject, TestBed } from '@angular/core/testing';
+import { expect } from 'chai';
+import startOfDay from 'date-fns/start_of_day';
+import { CalendarAngularDateFormatter } from './../src';
+
+describe('CalendarAngularDateFormatter provider', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [CalendarAngularDateFormatter]
+    });
+  });
+
+  let dateFormatter: CalendarAngularDateFormatter;
+  beforeEach(
+    inject([CalendarAngularDateFormatter], _dateFormatter_ => {
+      dateFormatter = _dateFormatter_;
+    })
+  );
+
+  it('monthViewColumnHeader', () => {
+    expect(
+      dateFormatter.monthViewColumnHeader({
+        date: new Date('2016-01-01'),
+        locale: 'en'
+      })
+    ).to.equal('Friday');
+  });
+
+  it('monthViewDayNumber', () => {
+    expect(
+      dateFormatter.monthViewDayNumber({
+        date: new Date('2016-01-01'),
+        locale: 'en'
+      })
+    ).to.equal('1');
+  });
+
+  it('monthViewTitle', () => {
+    expect(
+      dateFormatter.monthViewTitle({
+        date: new Date('2016-01-01'),
+        locale: 'en'
+      })
+    ).to.equal('January 2016');
+  });
+
+  it('weekViewColumnHeader', () => {
+    expect(
+      dateFormatter.weekViewColumnHeader({
+        date: new Date('2016-01-01'),
+        locale: 'en'
+      })
+    ).to.equal('Friday');
+  });
+
+  it('weekViewColumnSubHeader', () => {
+    expect(
+      dateFormatter.weekViewColumnSubHeader({
+        date: new Date('2016-01-01'),
+        locale: 'en'
+      })
+    ).to.equal('Jan 1');
+  });
+
+  it('weekViewTitle', () => {
+    expect(
+      dateFormatter.weekViewTitle({
+        date: new Date('2016-01-04'),
+        locale: 'en'
+      })
+    ).to.equal('Week 1 of 2016');
+  });
+
+  it('dayViewHour', () => {
+    expect(
+      dateFormatter.dayViewHour({
+        date: startOfDay(new Date('2016-01-01')),
+        locale: 'en'
+      })
+    ).to.equal('12 AM');
+  });
+
+  it('dayViewTitle', () => {
+    expect(
+      dateFormatter.dayViewTitle({ date: new Date('2016-01-01'), locale: 'en' })
+    ).to.equal('Friday, January 1, 2016');
+  });
+});