0.26

README.md

@@ -34,7 +34,7 @@ A calendar component for Angular 6.0+ that can display events on a month, week o
 First install through npm:
 
 ```bash
-npm install --save angular-calendar
+npm install --save angular-calendar date-fns
 ```
 
 Next include the CSS file in the global (not component scoped) styles of your app:
@@ -49,10 +49,17 @@ Finally import the calendar module into your apps module:
 ```typescript
 import { NgModule } from '@angular/core';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { CalendarModule } from 'angular-calendar';
+import { CalendarModule, DateAdapter } from 'angular-calendar';
+import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
 
 @NgModule({
-  imports: [BrowserAnimationsModule, CalendarModule.forRoot()]
+  imports: [
+    BrowserAnimationsModule,
+    CalendarModule.forRoot({
+      provide: DateAdapter,
+      useFactory: adapterFactory
+    })
+  ]
 })
 export class MyModule {}
 ```

demos/demo-app.component.ts

@@ -64,7 +64,7 @@ const dependencyVersions: any = {
     .version,
   dateFns: require('date-fns/package.json').version,
   rxjs: require('rxjs/package.json').version,
-  bootstrap: require('bootstrap/package.json').version,
+  bootstrap: require('bootstrap-css-only/package.json').version,
   zoneJs: require('zone.js/package.json').version,
   ngBootstrap: require('@ng-bootstrap/ng-bootstrap/package.json').version,
   rrule: require('rrule/package.json').version,
@@ -125,9 +125,9 @@ export class DemoAppComponent implements OnInit {
       [path: string]: string;
     } = {
       'index.html': `
-<link href="https://unpkg.com/bootstrap@${
+<link href="https://unpkg.com/bootstrap-css-only@${
         dependencyVersions.bootstrap
-      }/dist/css/bootstrap.min.css" rel="stylesheet">
+      }/css/bootstrap.min.css" rel="stylesheet">
 <link href="https://unpkg.com/font-awesome@${
         dependencyVersions.fontAwesome
       }/css/font-awesome.css" rel="stylesheet">
@@ -206,6 +206,7 @@ platformBrowserDynamic().bootstrapModule(BootstrapModule).then(ref => {
           'angular-calendar': dependencyVersions.angularCalendar,
           '@ng-bootstrap/ng-bootstrap': dependencyVersions.ngBootstrap,
           rrule: dependencyVersions.rrule,
+          'calendar-utils': dependencyVersions.calendarUtils,
           flatpickr: dependencyVersions.flatpickr,
           'angularx-flatpickr': dependencyVersions.angularxFlatpickr
         }

demos/demo-app.module.ts

@@ -1,9 +1,9 @@
-import 'bootstrap/dist/css/bootstrap.css';
+import 'bootstrap-css-only/css/bootstrap.css';
 import 'font-awesome/css/font-awesome.css';
 import 'highlight.js/styles/github.css';
 import '../src/angular-calendar.scss';
 import { NgModule } from '@angular/core';
-import { RouterModule, PreloadAllModules } from '@angular/router';
+import { RouterModule } from '@angular/router';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgbCollapseModule } from '@ng-bootstrap/ng-bootstrap/collapse/collapse.module';
@@ -264,14 +264,20 @@ import { DemoModule as DefaultDemoModule } from './demo-modules/kitchen-sink/mod
             label: 'No events label'
           }
         },
+        {
+          path: 'moment',
+          loadChildren: './demo-modules/moment/module#DemoModule',
+          data: {
+            label: 'Use moment'
+          }
+        },
         {
           path: '**',
           redirectTo: 'kitchen-sink'
         }
       ],
       {
-        useHash: true,
-        preloadingStrategy: PreloadAllModules
+        useHash: true
       }
     )
   ],

demos/demo-modules/additional-event-properties/module.ts

@@ -1,14 +1,18 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
-import { CalendarModule } from 'angular-calendar';
+import { CalendarModule, DateAdapter } from 'angular-calendar';
+import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
 import { DemoUtilsModule } from '../demo-utils/module';
 import { DemoComponent } from './component';
 
 @NgModule({
   imports: [
     CommonModule,
-    CalendarModule.forRoot(),
+    CalendarModule.forRoot({
+      provide: DateAdapter,
+      useFactory: adapterFactory
+    }),
     DemoUtilsModule,
     RouterModule.forChild([{ path: '', component: DemoComponent }])
   ],

demos/demo-modules/all-day-events/module.ts

@@ -1,14 +1,18 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
-import { CalendarModule } from 'angular-calendar';
+import { CalendarModule, DateAdapter } from 'angular-calendar';
 import { DemoUtilsModule } from '../demo-utils/module';
 import { DemoComponent } from './component';
+import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
 
 @NgModule({
   imports: [
     CommonModule,
-    CalendarModule.forRoot(),
+    CalendarModule.forRoot({
+      provide: DateAdapter,
+      useFactory: adapterFactory
+    }),
     DemoUtilsModule,
     RouterModule.forChild([{ path: '', component: DemoComponent }])
   ],

demos/demo-modules/async-events/component.ts

@@ -22,6 +22,15 @@ interface Film {
   release_date: string;
 }
 
+const timezoneOffset = new Date().getTimezoneOffset();
+const hoursOffset = String(Math.floor(Math.abs(timezoneOffset / 60))).padStart(
+  2,
+  '0'
+);
+const minutesOffset = String(Math.abs(timezoneOffset % 60)).padEnd(2, '0');
+const direction = timezoneOffset > 0 ? '-' : '+';
+const timezoneOffsetString = `T00:00:00${direction}${hoursOffset}${minutesOffset}`;
+
 @Component({
   selector: 'mwl-demo-component',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -73,7 +82,7 @@ export class DemoComponent implements OnInit {
           return results.map((film: Film) => {
             return {
               title: film.title,
-              start: new Date(film.release_date),
+              start: new Date(film.release_date + timezoneOffsetString),
               color: colors.yellow,
               meta: {
                 film

demos/demo-modules/async-events/module.ts

@@ -2,15 +2,19 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { HttpClientModule } from '@angular/common/http';
 import { RouterModule } from '@angular/router';
-import { CalendarModule } from 'angular-calendar';
+import { CalendarModule, DateAdapter } from 'angular-calendar';
 import { DemoUtilsModule } from '../demo-utils/module';
 import { DemoComponent } from './component';
+import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
 
 @NgModule({
   imports: [
     CommonModule,
     HttpClientModule,
-    CalendarModule.forRoot(),
+    CalendarModule.forRoot({
+      provide: DateAdapter,
+      useFactory: adapterFactory
+    }),
     DemoUtilsModule,
     RouterModule.forChild([{ path: '', component: DemoComponent }])
   ],

demos/demo-modules/before-view-render/module.ts

@@ -1,14 +1,18 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
-import { CalendarModule } from 'angular-calendar';
+import { CalendarModule, DateAdapter } from 'angular-calendar';
 import { DemoUtilsModule } from '../demo-utils/module';
 import { DemoComponent } from './component';
+import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
 
 @NgModule({
   imports: [
     CommonModule,
-    CalendarModule.forRoot(),
+    CalendarModule.forRoot({
+      provide: DateAdapter,
+      useFactory: adapterFactory
+    }),
     DemoUtilsModule,
     RouterModule.forChild([{ path: '', component: DemoComponent }])
   ],

demos/demo-modules/clickable-days/module.ts

@@ -1,14 +1,18 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
-import { CalendarModule } from 'angular-calendar';
+import { CalendarModule, DateAdapter } from 'angular-calendar';
 import { DemoUtilsModule } from '../demo-utils/module';
 import { DemoComponent } from './component';
+import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
 
 @NgModule({
   imports: [
     CommonModule,
-    CalendarModule.forRoot(),
+    CalendarModule.forRoot({
+      provide: DateAdapter,
+      useFactory: adapterFactory
+    }),
     DemoUtilsModule,
     RouterModule.forChild([{ path: '', component: DemoComponent }])
   ],

demos/demo-modules/clickable-events/module.ts

@@ -1,14 +1,18 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
-import { CalendarModule } from 'angular-calendar';
+import { CalendarModule, DateAdapter } from 'angular-calendar';
 import { DemoUtilsModule } from '../demo-utils/module';
 import { DemoComponent } from './component';
+import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
 
 @NgModule({
   imports: [
     CommonModule,
-    CalendarModule.forRoot(),
+    CalendarModule.forRoot({
+      provide: DateAdapter,
+      useFactory: adapterFactory
+    }),
     DemoUtilsModule,
     RouterModule.forChild([{ path: '', component: DemoComponent }])
   ],

demos/demo-modules/context-menu/module.ts

@@ -1,15 +1,19 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
-import { CalendarModule } from 'angular-calendar';
+import { CalendarModule, DateAdapter } from 'angular-calendar';
 import { ContextMenuModule } from 'ngx-contextmenu';
 import { DemoUtilsModule } from '../demo-utils/module';
 import { DemoComponent } from './component';
+import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
 
 @NgModule({
   imports: [
     CommonModule,
-    CalendarModule.forRoot(),
+    CalendarModule.forRoot({
+      provide: DateAdapter,
+      useFactory: adapterFactory
+    }),
     ContextMenuModule.forRoot({
       useBootstrap4: true
     }),

demos/demo-modules/context-menu/template.html

@@ -49,7 +49,6 @@
       [class.cal-today]="day.isToday"
       [class.cal-future]="day.isFuture"
       [class.cal-weekend]="day.isWeekend"
-      [class.cal-drag-over]="day.dragOver"
       (click)="dayHeaderClicked.emit({day: day})"
       [contextMenu]="basicMenu"
       [contextMenuSubject]="day.date">
@@ -93,4 +92,4 @@
     [refresh]="refresh"
     [hourSegmentTemplate]="dayHourSegmentTemplate">
   </mwl-calendar-day-view>
-</div>
+</div>

demos/demo-modules/custom-event-class/module.ts

@@ -1,14 +1,18 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
-import { CalendarModule } from 'angular-calendar';
+import { CalendarModule, DateAdapter } from 'angular-calendar';
 import { DemoUtilsModule } from '../demo-utils/module';
 import { DemoComponent } from './component';
+import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
 
 @NgModule({
   imports: [
     CommonModule,
-    CalendarModule.forRoot(),
+    CalendarModule.forRoot({
+      provide: DateAdapter,
+      useFactory: adapterFactory
+    }),
     DemoUtilsModule,
     RouterModule.forChild([{ path: '', component: DemoComponent }])
   ],

demos/demo-modules/custom-templates/module.ts

@@ -1,14 +1,18 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
-import { CalendarModule } from 'angular-calendar';
+import { CalendarModule, DateAdapter } from 'angular-calendar';
 import { DemoUtilsModule } from '../demo-utils/module';
 import { DemoComponent } from './component';
+import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
 
 @NgModule({
   imports: [
     CommonModule,
-    CalendarModule.forRoot(),
+    CalendarModule.forRoot({
+      provide: DateAdapter,
+      useFactory: adapterFactory
+    }),
     DemoUtilsModule,
     RouterModule.forChild([{ path: '', component: DemoComponent }])
   ],

demos/demo-modules/customise-date-formats/module.ts

@@ -1,14 +1,18 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
-import { CalendarModule } from 'angular-calendar';
+import { CalendarModule, DateAdapter } from 'angular-calendar';
 import { DemoUtilsModule } from '../demo-utils/module';
 import { DemoComponent } from './component';
+import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
 
 @NgModule({
   imports: [
     CommonModule,
-    CalendarModule.forRoot(),
+    CalendarModule.forRoot({
+      provide: DateAdapter,
+      useFactory: adapterFactory
+    }),
     DemoUtilsModule,
     RouterModule.forChild([{ path: '', component: DemoComponent }])
   ],

demos/demo-modules/day-view-hour-split/module.ts

@@ -1,14 +1,18 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
-import { CalendarModule } from 'angular-calendar';
+import { CalendarModule, DateAdapter } from 'angular-calendar';
 import { DemoUtilsModule } from '../demo-utils/module';
 import { DemoComponent } from './component';
+import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
 
 @NgModule({
   imports: [
     CommonModule,
-    CalendarModule.forRoot(),
+    CalendarModule.forRoot({
+      provide: DateAdapter,
+      useFactory: adapterFactory
+    }),
     DemoUtilsModule,
     RouterModule.forChild([{ path: '', component: DemoComponent }])
   ],

demos/demo-modules/day-view-start-end/module.ts

@@ -1,14 +1,18 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
-import { CalendarModule } from 'angular-calendar';
+import { CalendarModule, DateAdapter } from 'angular-calendar';
 import { DemoUtilsModule } from '../demo-utils/module';
 import { DemoComponent } from './component';
+import { adapterFactory } from 'angular-calendar/date-adapters/date-fns';
 
 @NgModule({
   imports: [
     CommonModule,
-    CalendarModule.forRoot(),
+    CalendarModule.forRoot({
+      provide: DateAdapter,
+      useFactory: adapterFactory
+    }),
     DemoUtilsModule,
     RouterModule.forChild([{ path: '', component: DemoComponent }])
   ],