docs(demos): fix i18n demo to use 24 hour format

Closes #943

Author: mattlewis92

projects/demos/app/demo-modules/i18n/component.ts

@@ -1,10 +1,22 @@
 import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { CalendarEvent, CalendarView, DAYS_OF_WEEK } from 'angular-calendar';
+import {
+  CalendarDateFormatter,
+  CalendarEvent,
+  CalendarView,
+  DAYS_OF_WEEK
+} from 'angular-calendar';
+import { CustomDateFormatter } from './custom-date-formatter.provider';
 
 @Component({
   selector: 'mwl-demo-component',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  templateUrl: 'template.html'
+  templateUrl: 'template.html',
+  providers: [
+    {
+      provide: CalendarDateFormatter,
+      useClass: CustomDateFormatter
+    }
+  ]
 })
 export class DemoComponent {
   view: CalendarView = CalendarView.Month;

projects/demos/app/demo-modules/i18n/custom-date-formatter.provider.ts

@@ -0,0 +1,14 @@
+import { CalendarDateFormatter, DateFormatterParams } from 'angular-calendar';
+import { DatePipe } from '@angular/common';
+
+export class CustomDateFormatter extends CalendarDateFormatter {
+  // you can override any of the methods defined in the parent class
+
+  public dayViewHour({ date, locale }: DateFormatterParams): string {
+    return new DatePipe(locale).transform(date, 'HH:mm', locale);
+  }
+
+  public weekViewHour({ date, locale }: DateFormatterParams): string {
+    return this.dayViewHour({ date, locale });
+  }
+}

projects/demos/app/demo-modules/i18n/sources.ts

@@ -6,6 +6,13 @@ export const sources = [
       highlighted: require('!!raw-loader!highlightjs-loader?lang=typescript!./component')
     }
   },
+  {
+    filename: 'custom-date-formatter.provider.ts',
+    contents: {
+      raw: require('!!raw-loader!./custom-date-formatter.provider'),
+      highlighted: require('!!raw-loader!highlightjs-loader?lang=typescript!./custom-date-formatter.provider')
+    }
+  },
   {
     filename: 'template.html',
     contents: {