diff --git a/demos/demo-app.module.ts b/demos/demo-app.module.ts
index 763d8ef55..f66f38caa 100644
--- a/demos/demo-app.module.ts
+++ b/demos/demo-app.module.ts
@@ -263,6 +263,13 @@ 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'
diff --git a/demos/demo-modules/i18n/template.html b/demos/demo-modules/i18n/template.html
index 2879ee865..9c46837b3 100644
--- a/demos/demo-modules/i18n/template.html
+++ b/demos/demo-modules/i18n/template.html
@@ -27,4 +27,4 @@
[events]="events"
[locale]="locale">
-
\ No newline at end of file
+
diff --git a/demos/demo-modules/moment/component.ts b/demos/demo-modules/moment/component.ts
new file mode 100644
index 000000000..a18673c2c
--- /dev/null
+++ b/demos/demo-modules/moment/component.ts
@@ -0,0 +1,24 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { CalendarEvent, DAYS_OF_WEEK } from 'angular-calendar';
+import moment from 'moment';
+
+// weekStartsOn option is ignored when using moment, as it needs to be configured globally for the moment locale
+moment.updateLocale('en', {
+ week: {
+ dow: DAYS_OF_WEEK.MONDAY,
+ doy: 0
+ }
+});
+
+@Component({
+ selector: 'mwl-demo-component',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ templateUrl: 'template.html'
+})
+export class DemoComponent {
+ view: string = 'month';
+
+ viewDate: Date = new Date();
+
+ events: CalendarEvent[] = [];
+}
diff --git a/demos/demo-modules/moment/module.ts b/demos/demo-modules/moment/module.ts
new file mode 100644
index 000000000..8fc044aed
--- /dev/null
+++ b/demos/demo-modules/moment/module.ts
@@ -0,0 +1,43 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import {
+ CalendarDateFormatter,
+ CalendarModule,
+ CalendarMomentDateFormatter,
+ CalendarUtils,
+ MOMENT
+} from 'angular-calendar';
+import moment from 'moment';
+import { DemoUtilsModule } from '../demo-utils/module';
+import { DemoComponent } from './component';
+import { CalendarUtilsMoment } from 'angular-calendar/calendar-utils/moment';
+
+@NgModule({
+ imports: [
+ CommonModule,
+ CalendarModule.forRoot(
+ {
+ provide: CalendarUtils,
+ useClass: CalendarUtilsMoment
+ },
+ {
+ dateFormatter: {
+ provide: CalendarDateFormatter,
+ useClass: CalendarMomentDateFormatter
+ }
+ }
+ ),
+ DemoUtilsModule,
+ RouterModule.forChild([{ path: '', component: DemoComponent }])
+ ],
+ declarations: [DemoComponent],
+ exports: [DemoComponent],
+ providers: [
+ {
+ provide: MOMENT,
+ useValue: moment
+ }
+ ]
+})
+export class DemoModule {}
diff --git a/demos/demo-modules/moment/sources.ts b/demos/demo-modules/moment/sources.ts
new file mode 100644
index 000000000..f6e7fbf15
--- /dev/null
+++ b/demos/demo-modules/moment/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')
+ }
+ }
+];
diff --git a/demos/demo-modules/moment/template.html b/demos/demo-modules/moment/template.html
new file mode 100644
index 000000000..6062a7ba5
--- /dev/null
+++ b/demos/demo-modules/moment/template.html
@@ -0,0 +1,27 @@
+
+ Use this if you're already using moment heavily in your app and don't want to include date-fns in your bundle, or you need to be able to adjust dates to be in a different timezone than the users browser via moment-locale
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/calendar-utils/moment.ts b/src/calendar-utils/moment.ts
new file mode 100644
index 000000000..6cb482cff
--- /dev/null
+++ b/src/calendar-utils/moment.ts
@@ -0,0 +1,84 @@
+import { Inject, Injectable } from '@angular/core';
+import {
+ CalendarUtils,
+ MOMENT,
+ AngularCalendarDateAdapter
+} from 'angular-calendar';
+import { adapterFactory } from 'calendar-utils/date-adapters/moment';
+
+@Injectable()
+export class CalendarUtilsMoment extends CalendarUtils {
+ dateAdapter: AngularCalendarDateAdapter;
+
+ constructor(@Inject(MOMENT) moment) {
+ super();
+
+ this.dateAdapter = {
+ ...adapterFactory(moment),
+
+ addWeeks(date: Date | string | number, amount: number): Date {
+ return moment(date)
+ .add(amount, 'weeks')
+ .toDate();
+ },
+
+ addMonths(date: Date | string | number, amount: number): Date {
+ return moment(date)
+ .add(amount, 'months')
+ .toDate();
+ },
+
+ subDays(date: Date | string | number, amount: number): Date {
+ return moment(date)
+ .subtract(amount, 'days')
+ .toDate();
+ },
+
+ subWeeks(date: Date | string | number, amount: number): Date {
+ return moment(date)
+ .subtract(amount, 'weeks')
+ .toDate();
+ },
+
+ subMonths(date: Date | string | number, amount: number): Date {
+ return moment(date)
+ .subtract(amount, 'months')
+ .toDate();
+ },
+
+ getISOWeek(date: Date | string | number): number {
+ return moment(date).isoWeek();
+ },
+
+ setDate(date: Date | string | number, dayOfMonth: number): Date {
+ return moment(date)
+ .date(dayOfMonth)
+ .toDate();
+ },
+
+ setMonth(date: Date | string | number, month: number): Date {
+ return moment(date)
+ .month(month)
+ .toDate();
+ },
+
+ setYear(date: Date | string | number, year: number): Date {
+ return moment(date)
+ .year(year)
+ .toDate();
+ },
+
+ getDate(date: Date | string | number): number {
+ return moment(date).date();
+ },
+
+ getMonth(date: Date | string | number): number {
+ return moment(date).month();
+ },
+
+ getYear(date: Date | string | number): number {
+ return moment(date).year();
+ }
+ };
+ }
+}
diff --git a/tsconfig-ngc.json b/tsconfig-ngc.json
index ff6f7105d..6d690b6ac 100644
--- a/tsconfig-ngc.json
+++ b/tsconfig-ngc.json
@@ -16,7 +16,8 @@
"src/modules/day/index.ts",
"src/modules/week/index.ts",
"src/modules/month/index.ts",
- "src/calendar-utils/date-fns.ts"
+ "src/calendar-utils/date-fns.ts",
+ "src/calendar-utils/moment.ts"
],
"exclude": [
"test",
diff --git a/tsconfig.json b/tsconfig.json
index 422463deb..6e04b491d 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -10,7 +10,8 @@
"baseUrl": "./",
"paths": {
"angular-calendar": ["./src/index"],
- "angular-calendar/calendar-utils/date-fns": ["./src/calendar-utils/date-fns"]
+ "angular-calendar/calendar-utils/date-fns": ["./src/calendar-utils/date-fns"],
+ "angular-calendar/calendar-utils/moment": ["./src/calendar-utils/moment"]
},
"lib": ["es2017", "dom"],
},
diff --git a/webpack.config.ts b/webpack.config.ts
index 28f820acc..20fdd023d 100644
--- a/webpack.config.ts
+++ b/webpack.config.ts
@@ -92,6 +92,10 @@ export default (env = 'development') => {
'angular-calendar/calendar-utils/date-fns$': path.resolve(
__dirname,
'src/calendar-utils/date-fns.ts'
+ ),
+ 'angular-calendar/calendar-utils/moment$': path.resolve(
+ __dirname,
+ 'src/calendar-utils/moment.ts'
)
}
},