Skip to content

Commit

Permalink
feat: allow moment to be used as a replacement to date-fns
Browse files Browse the repository at this point in the history
  • Loading branch information
mattlewis92 committed Jun 13, 2018
1 parent e05a115 commit 1c5d32f
Show file tree
Hide file tree
Showing 10 changed files with 217 additions and 3 deletions.
7 changes: 7 additions & 0 deletions demos/demo-app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down
2 changes: 1 addition & 1 deletion demos/demo-modules/i18n/template.html
Original file line number Diff line number Diff line change
Expand Up @@ -27,4 +27,4 @@
[events]="events"
[locale]="locale">
</mwl-calendar-day-view>
</div>
</div>
24 changes: 24 additions & 0 deletions demos/demo-modules/moment/component.ts
Original file line number Diff line number Diff line change
@@ -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[] = [];
}
43 changes: 43 additions & 0 deletions demos/demo-modules/moment/module.ts
Original file line number Diff line number Diff line change
@@ -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';

This comment has been minimized.

Copy link
@AhHa45

AhHa45 Aug 6, 2018

I get: Can't resolve '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 {}
23 changes: 23 additions & 0 deletions demos/demo-modules/moment/sources.ts
Original file line number Diff line number Diff line change
@@ -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')
}
}
];
27 changes: 27 additions & 0 deletions demos/demo-modules/moment/template.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<div class="alert alert-info">
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
</div>

<mwl-demo-utils-calendar-header
[(view)]="view"
[(viewDate)]="viewDate"
[locale]="locale">
</mwl-demo-utils-calendar-header>

<div [ngSwitch]="view">
<mwl-calendar-month-view
*ngSwitchCase="'month'"
[viewDate]="viewDate"
[events]="events">
</mwl-calendar-month-view>
<mwl-calendar-week-view
*ngSwitchCase="'week'"
[viewDate]="viewDate"
[events]="events">
</mwl-calendar-week-view>
<mwl-calendar-day-view
*ngSwitchCase="'day'"
[viewDate]="viewDate"
[events]="events">
</mwl-calendar-day-view>
</div>
84 changes: 84 additions & 0 deletions src/calendar-utils/moment.ts
Original file line number Diff line number Diff line change
@@ -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();
}
};
}
}
3 changes: 2 additions & 1 deletion tsconfig-ngc.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
3 changes: 2 additions & 1 deletion tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"],
},
Expand Down
4 changes: 4 additions & 0 deletions webpack.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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'
)
}
},
Expand Down

0 comments on commit 1c5d32f

Please sign in to comment.