feat: allow calendar-utils functions to be overridden

BREAKING CHANGE: if not using `CalendarModule.forRoot()` you must explicitly add the `CalendarUtils`
provider to your module declaration

Closes #199

Author: Matt Lewis

demos/demo-app.module.ts

@@ -42,6 +42,7 @@ import * as customTemplates from './demo-modules/custom-templates';
 import * as groupMonthViewEvents from './demo-modules/group-month-view-events';
 import * as contextMenu from './demo-modules/context-menu';
 import * as weekViewMinutePrecision from './demo-modules/week-view-minute-precision';
+import * as extraMonthViewWeeks from './demo-modules/extra-month-view-weeks';
 
 @NgModule({
   declarations: [DemoAppComponent],
@@ -81,6 +82,7 @@ import * as weekViewMinutePrecision from './demo-modules/week-view-minute-precis
     groupMonthViewEvents.DemoModule,
     contextMenu.DemoModule,
     weekViewMinutePrecision.DemoModule,
+    extraMonthViewWeeks.DemoModule,
     RouterModule.forRoot([{
       path: 'kitchen-sink',
       component: kitchenSink.DemoComponent,
@@ -261,6 +263,12 @@ import * as weekViewMinutePrecision from './demo-modules/week-view-minute-precis
       data: {
         label: 'Week view minute precision'
       }
+    }, {
+      path: 'extra-month-view-weeks',
+      component: extraMonthViewWeeks.DemoComponent,
+      data: {
+        label: 'Extra month view weeks'
+      }
     }, {
       path: '**',
       redirectTo: 'kitchen-sink'

demos/demo-modules/extra-month-view-weeks/component.ts

@@ -0,0 +1,30 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { CalendarEvent, CalendarUtils } from 'angular-calendar';
+import { addDays, addHours, startOfDay, subWeeks, startOfMonth, endOfMonth, addWeeks } from 'date-fns';
+import { GetMonthViewArgs, MonthView, getMonthView } from 'calendar-utils';
+
+class MyCalendarUtils extends CalendarUtils {
+  getMonthView(args: GetMonthViewArgs): MonthView {
+    args.viewStart = subWeeks(startOfMonth(args.viewDate), 1);
+    args.viewEnd = addWeeks(endOfMonth(args.viewDate), 1);
+    return getMonthView(args);
+  }
+}
+
+@Component({
+  selector: 'mwl-demo-component',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: 'template.html',
+  providers: [{
+    provide: CalendarUtils,
+    useClass: MyCalendarUtils
+  }]
+})
+export class DemoComponent {
+
+  viewDate: Date = new Date();
+
+  events: CalendarEvent[] = [];
+
+}
+

demos/demo-modules/extra-month-view-weeks/index.ts

@@ -0,0 +1,2 @@
+export * from './module';
+export * from './component';

demos/demo-modules/extra-month-view-weeks/module.ts

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

demos/demo-modules/extra-month-view-weeks/template.html

@@ -0,0 +1,4 @@
+<mwl-calendar-month-view
+  [viewDate]="viewDate"
+  [events]="events">
+</mwl-calendar-month-view>

package.json

@@ -144,7 +144,7 @@
   "dependencies": {
     "angular-draggable-droppable": "^1.0.1",
     "angular-resizable-element": "^1.0.0",
-    "calendar-utils": "0.0.47",
+    "calendar-utils": "0.0.48",
     "date-fns": "^1.15.1",
     "positioning": "^1.0.4"
   }

src/calendar.module.ts

@@ -24,6 +24,7 @@ import { CalendarDatePipe } from './pipes/calendarDate.pipe';
 import { CalendarEventTitlePipe } from './pipes/calendarEventTitle.pipe';
 import { CalendarEventTitleFormatter } from './providers/calendarEventTitleFormatter.provider';
 import { CalendarDateFormatter } from './providers/calendarDateFormatter.provider';
+import { CalendarUtils } from './providers/calendarUtils.provider';
 
 /**
  * The main module of this library. Example usage:
@@ -105,7 +106,8 @@ export class CalendarModule {
       providers: [
         CalendarEventTitleFormatter,
         CalendarDateFormatter,
-        DraggableHelper
+        DraggableHelper,
+        CalendarUtils
       ]
     };
 

src/components/day/calendarDayView.component.ts

@@ -12,8 +12,6 @@ import {
   TemplateRef
 } from '@angular/core';
 import {
-  getDayView,
-  getDayViewHourGrid,
   CalendarEvent,
   DayView,
   DayViewHour,
@@ -27,6 +25,7 @@ import addMinutes from 'date-fns/add_minutes';
 import { CalendarDragHelper } from '../../providers/calendarDragHelper.provider';
 import { CalendarResizeHelper } from '../../providers/calendarResizeHelper.provider';
 import { CalendarEventTimesChangedEvent } from '../../interfaces/calendarEventTimesChangedEvent.interface';
+import { CalendarUtils } from '../../providers/calendarUtils.provider';
 
 /**
  * @hidden
@@ -248,7 +247,7 @@ export class CalendarDayViewComponent implements OnChanges, OnInit, OnDestroy {
   /**
    * @hidden
    */
-  constructor(private cdr: ChangeDetectorRef, @Inject(LOCALE_ID) locale: string) {
+  constructor(private cdr: ChangeDetectorRef, private utils: CalendarUtils, @Inject(LOCALE_ID) locale: string) {
     this.locale = locale;
   }
 
@@ -373,7 +372,7 @@ export class CalendarDayViewComponent implements OnChanges, OnInit, OnDestroy {
   }
 
   private refreshHourGrid(): void {
-    this.hours = getDayViewHourGrid({
+    this.hours = this.utils.getDayViewHourGrid({
       viewDate: this.viewDate,
       hourSegments: this.hourSegments,
       dayStart: {
@@ -393,7 +392,7 @@ export class CalendarDayViewComponent implements OnChanges, OnInit, OnDestroy {
   }
 
   private refreshView(): void {
-    this.view = getDayView({
+    this.view = this.utils.getDayView({
       events: this.events,
       viewDate: this.viewDate,
       hourSegments: this.hourSegments,

src/components/month/calendarMonthView.component.ts

@@ -15,8 +15,6 @@ import {
   CalendarEvent,
   WeekDay,
   MonthView,
-  getWeekViewHeader,
-  getMonthView,
   MonthViewDay
 } from 'calendar-utils';
 import { Subject } from 'rxjs/Subject';
@@ -31,6 +29,7 @@ import getYear from 'date-fns/get_year';
 import differenceInSeconds from 'date-fns/difference_in_seconds';
 import addSeconds from 'date-fns/add_seconds';
 import { CalendarEventTimesChangedEvent } from '../../interfaces/calendarEventTimesChangedEvent.interface';
+import { CalendarUtils } from '../../providers/calendarUtils.provider';
 
 /**
  * Shows all events on a given month. Example usage:
@@ -189,7 +188,7 @@ export class CalendarMonthViewComponent implements OnChanges, OnInit, OnDestroy
   /**
    * @hidden
    */
-  constructor(private cdr: ChangeDetectorRef, @Inject(LOCALE_ID) locale: string) {
+  constructor(private cdr: ChangeDetectorRef, private utils: CalendarUtils, @Inject(LOCALE_ID) locale: string) {
     this.locale = locale;
   }
 
@@ -262,15 +261,15 @@ export class CalendarMonthViewComponent implements OnChanges, OnInit, OnDestroy
   }
 
   private refreshHeader(): void {
-    this.columnHeaders = getWeekViewHeader({
+    this.columnHeaders = this.utils.getWeekViewHeader({
       viewDate: this.viewDate,
       weekStartsOn: this.weekStartsOn,
       excluded: this.excludeDays
     });
   }
 
   private refreshBody(): void {
-    this.view = getMonthView({
+    this.view = this.utils.getMonthView({
       events: this.events,
       viewDate: this.viewDate,
       weekStartsOn: this.weekStartsOn,

src/components/week/calendarWeekView.component.ts

@@ -17,15 +17,14 @@ import {
   WeekDay,
   CalendarEvent,
   WeekViewEvent,
-  WeekViewEventRow,
-  getWeekViewHeader,
-  getWeekView
+  WeekViewEventRow
 } from 'calendar-utils';
 import { ResizeEvent } from 'angular-resizable-element';
 import addDays from 'date-fns/add_days';
 import { CalendarDragHelper } from '../../providers/calendarDragHelper.provider';
 import { CalendarResizeHelper } from '../../providers/calendarResizeHelper.provider';
 import { CalendarEventTimesChangedEvent } from '../../interfaces/calendarEventTimesChangedEvent.interface';
+import { CalendarUtils } from '../../providers/calendarUtils.provider';
 
 /**
  * Shows all events on a given week. Example usage:
@@ -185,7 +184,7 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
   /**
    * @hidden
    */
-  constructor(private cdr: ChangeDetectorRef, @Inject(LOCALE_ID) locale: string) {
+  constructor(private cdr: ChangeDetectorRef, private utils: CalendarUtils, @Inject(LOCALE_ID) locale: string) {
     this.locale = locale;
   }
 
@@ -314,15 +313,15 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
   }
 
   private refreshHeader(): void {
-    this.days = getWeekViewHeader({
+    this.days = this.utils.getWeekViewHeader({
       viewDate: this.viewDate,
       weekStartsOn: this.weekStartsOn,
       excluded: this.excludeDays
     });
   }
 
   private refreshBody(): void {
-    this.eventRows = getWeekView({
+    this.eventRows = this.utils.getWeekView({
       events: this.events,
       viewDate: this.viewDate,
       weekStartsOn: this.weekStartsOn,

src/index.ts

@@ -2,10 +2,11 @@ export * from './providers/calendarEventTitleFormatter.provider';
 export * from './providers/calendarMomentDateFormatter.provider';
 export * from './providers/calendarNativeDateFormatter.provider';
 export * from './providers/calendarDateFormatter.provider';
+export * from './providers/calendarUtils.provider';
 export * from './interfaces/calendarDateFormatter.interface';
 export * from './interfaces/calendarEventTimesChangedEvent.interface';
 export * from './calendar.module';
 export * from './components/day/calendarDayView.component';
 export * from './components/month/calendarMonthView.component';
 export * from './components/week/calendarWeekView.component';
-export {CalendarEvent, EventAction as CalendarEventAction, MonthViewDay as CalendarMonthViewDay} from 'calendar-utils';
+export { CalendarEvent, EventAction as CalendarEventAction, MonthViewDay as CalendarMonthViewDay } from 'calendar-utils';

src/providers/calendarUtils.provider.ts

@@ -0,0 +1,43 @@
+import { Injectable } from '@angular/core';
+import {
+  getMonthView,
+  GetMonthViewArgs,
+  MonthView,
+  getWeekViewHeader,
+  GetWeekViewHeaderArgs,
+  WeekDay,
+  getWeekView,
+  GetWeekViewArgs,
+  WeekViewEventRow,
+  getDayView,
+  GetDayViewArgs,
+  DayView,
+  getDayViewHourGrid,
+  GetDayViewHourGridArgs,
+  DayViewHour
+} from 'calendar-utils';
+
+@Injectable()
+export class CalendarUtils {
+
+  getMonthView(args: GetMonthViewArgs): MonthView {
+    return getMonthView(args);
+  }
+
+  getWeekViewHeader(args: GetWeekViewHeaderArgs): WeekDay[] {
+    return getWeekViewHeader(args);
+  }
+
+  getWeekView(args: GetWeekViewArgs): WeekViewEventRow[] {
+    return getWeekView(args);
+  }
+
+  getDayView(args: GetDayViewArgs): DayView {
+    return getDayView(args);
+  }
+
+  getDayViewHourGrid(args: GetDayViewHourGridArgs): DayViewHour[] {
+    return getDayViewHourGrid(args);
+  }
+
+}

test/calendarDayView.component.spec.ts

@@ -15,7 +15,8 @@ import {
   CalendarDateFormatter,
   CalendarModule,
   MOMENT,
-  CalendarEventTimesChangedEvent
+  CalendarEventTimesChangedEvent,
+  CalendarUtils
 } from './../src';
 import { CalendarDayViewComponent } from './../src/components/day/calendarDayView.component';
 import { Subject } from 'rxjs/Rx';
@@ -34,6 +35,7 @@ describe('CalendarDayViewComponent component', () => {
         ExternalEventComponent
       ],
       providers: [
+        CalendarUtils,
         DraggableHelper,
         CalendarEventTitleFormatter,
         {provide: CalendarDateFormatter, useClass: CalendarMomentDateFormatter},

test/calendarMonthView.component.spec.ts

@@ -14,7 +14,8 @@ import {
   CalendarMomentDateFormatter,
   CalendarDateFormatter,
   CalendarModule,
-  MOMENT
+  MOMENT,
+  CalendarUtils
 } from './../src';
 import { CalendarMonthViewComponent } from './../src/components/month/calendarMonthView.component';
 import { Subject } from 'rxjs/Subject';
@@ -27,6 +28,7 @@ describe('calendarMonthView component', () => {
     TestBed.configureTestingModule({
       imports: [BrowserAnimationsModule, CalendarModule],
       providers: [
+        CalendarUtils,
         DraggableHelper,
         CalendarEventTitleFormatter,
         {provide: CalendarDateFormatter, useClass: CalendarMomentDateFormatter},

test/calendarWeekView.component.spec.ts

@@ -12,7 +12,8 @@ import {
   CalendarDateFormatter,
   CalendarModule,
   MOMENT,
-  CalendarEventTimesChangedEvent
+  CalendarEventTimesChangedEvent,
+  CalendarUtils
 } from '../src';
 import { CalendarWeekViewComponent } from '../src/components/week/calendarWeekView.component';
 import { DraggableHelper, DragAndDropModule } from 'angular-draggable-droppable';
@@ -32,6 +33,7 @@ describe('calendarWeekView component', () => {
         ExternalEventComponent
       ],
       providers: [
+        CalendarUtils,
         CalendarEventTitleFormatter,
         DraggableHelper,
         {provide: CalendarDateFormatter, useClass: CalendarMomentDateFormatter},

yarn.lock

@@ -778,9 +778,9 @@ cachedir@^1.1.0:
   dependencies:
     os-homedir "^1.0.1"
 
-[email protected].47:
-  version "0.0.47"
-  resolved "https://registry.yarnpkg.com/calendar-utils/-/calendar-utils-0.0.47.tgz#5e0ca2a0a74afb838c4303ada111cb62dcabbe1c"
+[email protected].48:
+  version "0.0.48"
+  resolved "https://registry.yarnpkg.com/calendar-utils/-/calendar-utils-0.0.48.tgz#10c17ac0bab4a2f95700d99cef328baf85fe846d"
 
 [email protected]:
   version "1.0.0"