-
-
Notifications
You must be signed in to change notification settings - Fork 868
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: allow moment to be used as a replacement to date-fns
- Loading branch information
1 parent
e05a115
commit 1c5d32f
Showing
10 changed files
with
217 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -27,4 +27,4 @@ | |
[events]="events" | ||
[locale]="locale"> | ||
</mwl-calendar-day-view> | ||
</div> | ||
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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[] = []; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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.
Sorry, something went wrong. |
||
|
||
@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 {} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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') | ||
} | ||
} | ||
]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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(); | ||
} | ||
}; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
I get:
Can't resolve 'angular-calendar/calendar-utils/moment'