-
-
Notifications
You must be signed in to change notification settings - Fork 866
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add helper directives for changing the current view
See the documentation or the kitchen sink demo to see usage Closes #124
- Loading branch information
Matt Lewis
committed
Jan 28, 2017
1 parent
e469810
commit df398cb
Showing
11 changed files
with
372 additions
and
83 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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| import { Directive, HostListener, Input, Output, EventEmitter } from '@angular/core'; | ||
| import addDays from 'date-fns/add_days'; | ||
| import addWeeks from 'date-fns/add_weeks'; | ||
| import addMonths from 'date-fns/add_months'; | ||
|
|
||
| /** | ||
| * Change the view date to the next view. For example: | ||
| * | ||
| * ``` | ||
| * <button | ||
| * mwlCalendarNextView | ||
| * [(viewDate)]="viewDate" | ||
| * [view]="view"> | ||
| * Next | ||
| * </button> | ||
| * ``` | ||
| */ | ||
| @Directive({ | ||
| selector: '[mwlCalendarNextView]' | ||
| }) | ||
| export class CalendarNextViewDirective { | ||
|
|
||
| /** | ||
| * The current view | ||
| */ | ||
| @Input() view: string; | ||
|
|
||
| /** | ||
| * The current view date | ||
| */ | ||
| @Input() viewDate: Date; | ||
|
|
||
| /** | ||
| * Called when the view date is changed | ||
| */ | ||
| @Output() viewDateChange: EventEmitter<Date> = new EventEmitter(); | ||
|
|
||
| /** | ||
| * @hidden | ||
| */ | ||
| @HostListener('click') | ||
| onClick(): void { | ||
|
|
||
| const addFn: any = { | ||
| day: addDays, | ||
| week: addWeeks, | ||
| month: addMonths | ||
| }[this.view]; | ||
|
|
||
| this.viewDateChange.emit(addFn(this.viewDate, 1)); | ||
|
|
||
| } | ||
|
|
||
| } |
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,54 @@ | ||
| import { Directive, HostListener, Input, Output, EventEmitter } from '@angular/core'; | ||
| import subDays from 'date-fns/sub_days'; | ||
| import subWeeks from 'date-fns/sub_weeks'; | ||
| import subMonths from 'date-fns/sub_months'; | ||
|
|
||
| /** | ||
| * Change the view date to the previous view. For example: | ||
| * | ||
| * ``` | ||
| * <button | ||
| * mwlCalendarPreviousView | ||
| * [(viewDate)]="viewDate" | ||
| * [view]="view"> | ||
| * Previous | ||
| * </button> | ||
| * ``` | ||
| */ | ||
| @Directive({ | ||
| selector: '[mwlCalendarPreviousView]' | ||
| }) | ||
| export class CalendarPreviousViewDirective { | ||
|
|
||
| /** | ||
| * The current view | ||
| */ | ||
| @Input() view: string; | ||
|
|
||
| /** | ||
| * The current view date | ||
| */ | ||
| @Input() viewDate: Date; | ||
|
|
||
| /** | ||
| * Called when the view date is changed | ||
| */ | ||
| @Output() viewDateChange: EventEmitter<Date> = new EventEmitter(); | ||
|
|
||
| /** | ||
| * @hidden | ||
| */ | ||
| @HostListener('click') | ||
| onClick(): void { | ||
|
|
||
| const subFn: any = { | ||
| day: subDays, | ||
| week: subWeeks, | ||
| month: subMonths | ||
| }[this.view]; | ||
|
|
||
| this.viewDateChange.emit(subFn(this.viewDate, 1)); | ||
|
|
||
| } | ||
|
|
||
| } |
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,38 @@ | ||
| import { Directive, HostListener, Input, Output, EventEmitter } from '@angular/core'; | ||
| import startOfToday from 'date-fns/start_of_today'; | ||
|
|
||
| /** | ||
| * Change the view date to the current day. For example: | ||
| * | ||
| * ``` | ||
| * <button | ||
| * mwlCalendarToday | ||
| * [(viewDate)]="viewDate"> | ||
| * Today | ||
| * </button> | ||
| * ``` | ||
| */ | ||
| @Directive({ | ||
| selector: '[mwlCalendarToday]' | ||
| }) | ||
| export class CalendarTodayDirective { | ||
|
|
||
| /** | ||
| * The current view date | ||
| */ | ||
| @Input() viewDate: Date; | ||
|
|
||
| /** | ||
| * Called when the view date is changed | ||
| */ | ||
| @Output() viewDateChange: EventEmitter<Date> = new EventEmitter(); | ||
|
|
||
| /** | ||
| * @hidden | ||
| */ | ||
| @HostListener('click') | ||
| onClick(): void { | ||
| this.viewDateChange.emit(startOfToday()); | ||
| } | ||
|
|
||
| } |
Oops, something went wrong.