0.23

README.md

@@ -1,4 +1,4 @@
-# angular 4.0+ calendar
+# angular 5.0+ calendar
 
 [![Build Status](https://travis-ci.org/mattlewis92/angular-calendar.svg?branch=master)](https://travis-ci.org/mattlewis92/angular-calendar)
 [![codecov](https://codecov.io/gh/mattlewis92/angular-calendar/branch/master/graph/badge.svg)](https://codecov.io/gh/mattlewis92/angular-calendar)
@@ -25,7 +25,7 @@ https://mattlewis92.github.io/angular-calendar/
 
 ## About
 
-A calendar component for Angular 4.0+ that can display events on a month, week or day view. The successor of [angular-bootstrap-calendar](https://github.com/mattlewis92/angular-bootstrap-calendar).
+A calendar component for Angular 5.0+ that can display events on a month, week or day view. The successor of [angular-bootstrap-calendar](https://github.com/mattlewis92/angular-bootstrap-calendar).
 
 ## Getting started
 
@@ -65,19 +65,6 @@ Once you are up and running, to access a full list of options for each component
 
 You can find quick start examples for all common module bundlers in the [build-tool-examples](https://github.com/mattlewis92/angular-calendar/tree/master/build-tool-examples) folder.
 
-### Usage without a module bundler
-
-```html
-<script src="node_modules/angular-calendar/umd/angular-calendar.js"></script>
-<script>
-    // everything is exported angularCalendar namespace
-</script>
-```
-
-### Usage with Angular Universal
-
-See [this comment](https://github.com/mattlewis92/angular-calendar/issues/158#issuecomment-285330700) for how to use with Universal.
-
 ## Documentation
 
 To see all available API options, take a look at the auto generated [documentation](https://mattlewis92.github.io/angular-calendar/docs/). You may find it helpful to view the examples on the demo page.
@@ -88,14 +75,17 @@ Where possible this library will strictly adhere to [semver](http://semver.org/)
 
 ## FAQ
 
-### Is this library AoT compatible?
+### Is this library AoT and universal compatible?
 
 Yes.
 
 ### Does this library work with angular 2.x?
 
 The last version of this library that supports 2.x is `0.9.1`. However the upgrade from angular 2.x to 4.x is just a matter of [changing the dependencies in your package.json](https://github.com/mattlewis92/angular2-tv-tracker/commit/9439e3cec40293b2a86bc2222f610ee6ad4b5229) and [adding the `angular/animations` module](https://github.com/mattlewis92/angular2-tv-tracker/commit/9fe0e3158290c2612d20e4c0f54d2204fb70791e)
 
+### Does this library work with angular 4.x?
+The last version of this library that supports 4.x is `0.22.3`.
+
 ### How do I use this with my favourite module bundler?
 
 See the [examples list](https://github.com/mattlewis92/angular-calendar/tree/master/build-tool-examples).

demos/demo-app.component.ts

@@ -73,7 +73,8 @@ const dependencyVersions: any = {
   ngBootstrap: require('@ng-bootstrap/ng-bootstrap/package.json').version,
   rrule: require('rrule/package.json').version,
   ngxContextmenu: require('ngx-contextmenu/package.json').version,
-  fontAwesome: require('font-awesome/package.json').version
+  fontAwesome: require('font-awesome/package.json').version,
+  angularCdk: require('@angular/cdk/package.json').version
 };
 
 @Component({

demos/demo-app.html

@@ -2,7 +2,7 @@
 
 <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top" role="navigation">
 
-  <a class="navbar-brand" href="#">Angular 4.0+ calendar</a>
+  <a class="navbar-brand" href="#">Angular 5.0+ calendar</a>
 
   <button
     type="button"
@@ -112,4 +112,4 @@ <h4>Demos</h4>
       </div>
     </div>
   </div>
-</div>
+</div>

demos/demo-app.module.ts

@@ -256,6 +256,13 @@ import { DemoModule as DefaultDemoModule } from './demo-modules/kitchen-sink/mod
             label: 'Disable slide animation'
           }
         },
+        {
+          path: 'no-events-label',
+          loadChildren: './demo-modules/no-events-label/module#DemoModule',
+          data: {
+            label: 'No events label'
+          }
+        },
         {
           path: '**',
           redirectTo: 'kitchen-sink'

demos/demo-modules/customise-date-formats/custom-date-formatter.provider.ts

@@ -1,27 +1,22 @@
 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 monthViewColumnHeader({ date, locale }: DateFormatterParams): string {
-    return new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(date);
+    return new DatePipe(locale).transform(date, 'EEE', locale);
   }
 
   public monthViewTitle({ date, locale }: DateFormatterParams): string {
-    return new Intl.DateTimeFormat(locale, {
-      year: 'numeric',
-      month: 'short'
-    }).format(date);
+    return new DatePipe(locale).transform(date, 'MMM y', locale);
   }
 
   public weekViewColumnHeader({ date, locale }: DateFormatterParams): string {
-    return new Intl.DateTimeFormat(locale, { weekday: 'short' }).format(date);
+    return new DatePipe(locale).transform(date, 'EEE', locale);
   }
 
   public dayViewHour({ date, locale }: DateFormatterParams): string {
-    return new Intl.DateTimeFormat(locale, {
-      hour: 'numeric',
-      minute: 'numeric'
-    }).format(date);
+    return new DatePipe(locale).transform(date, 'HH:mm', locale);
   }
 }

demos/demo-modules/demo-utils/date-time-picker.component.ts

@@ -102,6 +102,7 @@ export class DateTimePickerComponent implements ControlValueAccessor {
       ),
       this.dateStruct.year
     );
+    this.writeValue(newDate);
     this.onChangeCallback(newDate);
   }
 
@@ -113,6 +114,7 @@ export class DateTimePickerComponent implements ControlValueAccessor {
       ),
       this.timeStruct.hour
     );
+    this.writeValue(newDate);
     this.onChangeCallback(newDate);
   }
 }

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

@@ -1,11 +1,10 @@
 import { CalendarDateFormatter, DateFormatterParams } from 'angular-calendar';
 import { getISOWeek } from 'date-fns';
+import { DatePipe } from '@angular/common';
 
 export class CustomDateFormatter extends CalendarDateFormatter {
   public weekViewTitle({ date, locale }: DateFormatterParams): string {
-    const year: string = new Intl.DateTimeFormat(locale, {
-      year: 'numeric'
-    }).format(date);
+    const year: string = new DatePipe(locale).transform(date, 'y', locale);
     const weekNumber: number = getISOWeek(date);
     return `Semaine ${weekNumber} en ${year}`;
   }

demos/demo-modules/i18n/module.ts

@@ -1,10 +1,14 @@
+import { registerLocaleData } from '@angular/common';
+import localeFr from '@angular/common/locales/fr';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
 import { CalendarModule } from 'angular-calendar';
 import { DemoUtilsModule } from '../demo-utils/module';
 import { DemoComponent } from './component';
 
+registerLocaleData(localeFr);
+
 @NgModule({
   imports: [
     CommonModule,

demos/demo-modules/no-events-label/component.ts

@@ -0,0 +1,46 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef
+} from '@angular/core';
+import {
+  CalendarEvent,
+  CalendarViewPeriod,
+  CalendarMonthViewBeforeRenderEvent,
+  CalendarWeekViewBeforeRenderEvent,
+  CalendarDayViewBeforeRenderEvent
+} from 'angular-calendar';
+import { colors } from '../demo-utils/colors';
+
+@Component({
+  selector: 'mwl-demo-component',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: 'template.html'
+})
+export class DemoComponent {
+  view: string = 'month';
+
+  viewDate: Date = new Date();
+
+  events: CalendarEvent[] = [
+    {
+      title: 'Event 1',
+      color: colors.yellow,
+      start: new Date()
+    }
+  ];
+
+  period: CalendarViewPeriod;
+
+  constructor(private cdr: ChangeDetectorRef) {}
+
+  beforeViewRender(
+    event:
+      | CalendarMonthViewBeforeRenderEvent
+      | CalendarWeekViewBeforeRenderEvent
+      | CalendarDayViewBeforeRenderEvent
+  ) {
+    this.period = event.period;
+    this.cdr.detectChanges();
+  }
+}

demos/demo-modules/no-events-label/module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { CalendarModule } from 'angular-calendar';
+import { DemoUtilsModule } from '../demo-utils/module';
+import { DemoComponent } from './component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    CalendarModule.forRoot(),
+    DemoUtilsModule,
+    RouterModule.forChild([{ path: '', component: DemoComponent }])
+  ],
+  declarations: [DemoComponent],
+  exports: [DemoComponent]
+})
+export class DemoModule {}

demos/demo-modules/no-events-label/sources.ts

@@ -0,0 +1,23 @@
+export const sources = [
+  {
+    filename: 'component.ts',
+    contents: {
+      raw: require('!!raw-loader!./component'),
+      highlighted: require('!!raw-loader!highlightjs-loader?lang=typescript!./component')
+    }
+  },
+  {
+    filename: 'template.html',
+    contents: {
+      raw: require('!!raw-loader!./template.html'),
+      highlighted: require('!!raw-loader!highlightjs-loader?lang=xml!./template.html')
+    }
+  },
+  {
+    filename: 'module.ts',
+    contents: {
+      raw: require('!!raw-loader!./module'),
+      highlighted: require('!!raw-loader!highlightjs-loader?lang=typescript!./module')
+    }
+  }
+];

demos/demo-modules/no-events-label/template.html

@@ -0,0 +1,30 @@
+<mwl-demo-utils-calendar-header
+  [(view)]="view"
+  [(viewDate)]="viewDate">
+</mwl-demo-utils-calendar-header>
+
+<div class="alert alert-warning" *ngIf="period?.events.length === 0">
+  There are no events on this {{ view }}
+</div>
+
+<div [ngSwitch]="view">
+  <mwl-calendar-month-view
+    *ngSwitchCase="'month'"
+    [viewDate]="viewDate"
+    [events]="events"
+    [activeDayIsOpen]="true"
+    (beforeViewRender)="beforeViewRender($event)">
+  </mwl-calendar-month-view>
+  <mwl-calendar-week-view
+    *ngSwitchCase="'week'"
+    [viewDate]="viewDate"
+    [events]="events"
+    (beforeViewRender)="beforeViewRender($event)">
+  </mwl-calendar-week-view>
+  <mwl-calendar-day-view
+    *ngSwitchCase="'day'"
+    [viewDate]="viewDate"
+    [events]="events"
+    (beforeViewRender)="beforeViewRender($event)">
+  </mwl-calendar-day-view>
+</div>

demos/demo-modules/selectable-period/template.html

@@ -22,7 +22,7 @@
     *ngSwitchCase="'day'"
     [viewDate]="viewDate"
     [events]="events"
-    (beforeViewRender)="beforeDayViewRender($event.body)"
+    (beforeViewRender)="beforeDayViewRender($event.body.hourGrid)"
     (hourSegmentClicked)="hourSegmentClicked($event.date)">
   </mwl-calendar-day-view>
-</div>
+</div>

demos/demo-modules/show-dates-on-titles/custom-event-title-formatter.provider.ts

@@ -1,5 +1,6 @@
 import { LOCALE_ID, Inject } from '@angular/core';
 import { CalendarEventTitleFormatter, CalendarEvent } from 'angular-calendar';
+import { DatePipe } from '@angular/common';
 
 export class CustomEventTitleFormatter extends CalendarEventTitleFormatter {
   constructor(@Inject(LOCALE_ID) private locale: string) {
@@ -9,23 +10,26 @@ export class CustomEventTitleFormatter extends CalendarEventTitleFormatter {
   // you can override any of the methods defined in the parent class
 
   month(event: CalendarEvent): string {
-    return `<b>${new Intl.DateTimeFormat(this.locale, {
-      hour: 'numeric',
-      minute: 'numeric'
-    }).format(event.start)}</b> ${event.title}`;
+    return `<b>${new DatePipe(this.locale).transform(
+      event.start,
+      'h:m a',
+      this.locale
+    )}</b> ${event.title}`;
   }
 
   week(event: CalendarEvent): string {
-    return `<b>${new Intl.DateTimeFormat(this.locale, {
-      hour: 'numeric',
-      minute: 'numeric'
-    }).format(event.start)}</b> ${event.title}`;
+    return `<b>${new DatePipe(this.locale).transform(
+      event.start,
+      'h:m a',
+      this.locale
+    )}</b> ${event.title}`;
   }
 
   day(event: CalendarEvent): string {
-    return `<b>${new Intl.DateTimeFormat(this.locale, {
-      hour: 'numeric',
-      minute: 'numeric'
-    }).format(event.start)}</b> ${event.title}`;
+    return `<b>${new DatePipe(this.locale).transform(
+      event.start,
+      'h:m a',
+      this.locale
+    )}</b> ${event.title}`;
   }
 }

demos/entry.ts

@@ -16,8 +16,6 @@ import 'core-js/es6/reflect';
 import 'core-js/es7/reflect';
 import 'zone.js/dist/zone';
 import 'hammerjs';
-import 'intl';
-import 'intl/locale-data/jsonp/en';
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { DemoAppModule } from './demo-app.module';
@@ -31,15 +29,6 @@ if (ENV === 'production') {
 
 const dynamicPolyfills = [];
 
-if (typeof Intl === 'undefined') {
-  dynamicPolyfills.push(
-    Promise.all([
-      import(/* webpackChunkName: "intl" */ 'intl'),
-      import(/* webpackChunkName: "intl" */ 'intl/locale-data/jsonp/en')
-    ])
-  );
-}
-
 if (
   typeof Object.entries === 'undefined' ||
   typeof Object.values === 'undefined'

demos/index.ejs

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <title>Angular 4.0+ calendar</title>
+    <title>Angular 5.0+ calendar</title>
   </head>
   <body>
     <mwl-demo-app>Loading demo...</mwl-demo-app>