Skip to content

Commit df398cb

Browse files
author
Matt Lewis
committed
feat: add helper directives for changing the current view
See the documentation or the kitchen sink demo to see usage Closes #124
1 parent e469810 commit df398cb

11 files changed

+372
-83
lines changed

‎demos/demo-modules/demo-utils/calendar-header.component.ts

+32-42
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,29 @@
11
import { Component, Input, Output, EventEmitter } from '@angular/core';
2-
import {
3-
subDays,
4-
addDays,
5-
addWeeks,
6-
subWeeks,
7-
addMonths,
8-
subMonths
9-
} from 'date-fns';
102

113
@Component({
124
selector: 'mwl-calendar-header',
135
template: `
146
<div class="row text-center">
157
<div class="col-md-4">
168
<div class="btn-group">
17-
<div class="btn btn-primary" (click)="decrement()">
9+
<div
10+
class="btn btn-primary"
11+
mwlCalendarPreviousView
12+
[view]="view"
13+
[(viewDate)]="viewDate">
1814
Previous
1915
</div>
20-
<div class="btn btn-secondary" (click)="today()">
16+
<div
17+
class="btn btn-secondary"
18+
mwlCalendarToday
19+
[(viewDate)]="viewDate">
2120
Today
2221
</div>
23-
<div class="btn btn-primary" (click)="increment()">
22+
<div
23+
class="btn btn-primary"
24+
mwlCalendarNextView
25+
[view]="view"
26+
[(viewDate)]="viewDate">
2427
Next
2528
</div>
2629
</div>
@@ -30,9 +33,24 @@ import {
3033
</div>
3134
<div class="col-md-4">
3235
<div class="btn-group">
33-
<div class="btn btn-primary" (click)="viewChange.emit('month')" [class.active]="view === 'month'">Month</div>
34-
<div class="btn btn-primary" (click)="viewChange.emit('week')" [class.active]="view === 'week'">Week</div>
35-
<div class="btn btn-primary" (click)="viewChange.emit('day')" [class.active]="view === 'day'">Day</div>
36+
<div
37+
class="btn btn-primary"
38+
(click)="viewChange.emit('month')"
39+
[class.active]="view === 'month'">
40+
Month
41+
</div>
42+
<div
43+
class="btn btn-primary"
44+
(click)="viewChange.emit('week')"
45+
[class.active]="view === 'week'">
46+
Week
47+
</div>
48+
<div
49+
class="btn btn-primary"
50+
(click)="viewChange.emit('day')"
51+
[class.active]="view === 'day'">
52+
Day
53+
</div>
3654
</div>
3755
</div>
3856
</div>
@@ -51,32 +69,4 @@ export class CalendarHeaderComponent {
5169

5270
@Output() viewDateChange: EventEmitter<Date> = new EventEmitter();
5371

54-
increment(): void {
55-
56-
const addFn: any = {
57-
day: addDays,
58-
week: addWeeks,
59-
month: addMonths
60-
}[this.view];
61-
62-
this.viewDateChange.emit(addFn(this.viewDate, 1));
63-
64-
}
65-
66-
decrement(): void {
67-
68-
const subFn: any = {
69-
day: subDays,
70-
week: subWeeks,
71-
month: subMonths
72-
}[this.view];
73-
74-
this.viewDateChange.emit(subFn(this.viewDate, 1));
75-
76-
}
77-
78-
today(): void {
79-
this.viewDateChange.emit(new Date());
80-
}
81-
8272
}

‎demos/demo-modules/kitchen-sink/component.ts

-32
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,6 @@ import {
77
endOfMonth,
88
isSameDay,
99
isSameMonth,
10-
addWeeks,
11-
subWeeks,
12-
addMonths,
13-
subMonths,
1410
addHours
1511
} from 'date-fns';
1612
import { Subject } from 'rxjs/Subject';
@@ -103,34 +99,6 @@ export class DemoComponent {
10399

104100
constructor(private modal: NgbModal) {}
105101

106-
increment(): void {
107-
108-
const addFn: any = {
109-
day: addDays,
110-
week: addWeeks,
111-
month: addMonths
112-
}[this.view];
113-
114-
this.viewDate = addFn(this.viewDate, 1);
115-
116-
}
117-
118-
decrement(): void {
119-
120-
const subFn: any = {
121-
day: subDays,
122-
week: subWeeks,
123-
month: subMonths
124-
}[this.view];
125-
126-
this.viewDate = subFn(this.viewDate, 1);
127-
128-
}
129-
130-
today(): void {
131-
this.viewDate = new Date();
132-
}
133-
134102
dayClicked({date, events}: {date: Date, events: CalendarEvent[]}): void {
135103

136104
if (isSameMonth(date, this.viewDate)) {

‎demos/demo-modules/kitchen-sink/template.html

+32-6
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,24 @@ <h5 class="modal-title">Event action occurred</h5>
2525
<div class="row text-center">
2626
<div class="col-md-4">
2727
<div class="btn-group">
28-
<div class="btn btn-primary" (click)="decrement()">
28+
<div
29+
class="btn btn-primary"
30+
mwlCalendarPreviousView
31+
[view]="view"
32+
[(viewDate)]="viewDate">
2933
Previous
3034
</div>
31-
<div class="btn btn-secondary" (click)="today()">
35+
<div
36+
class="btn btn-secondary"
37+
mwlCalendarToday
38+
[(viewDate)]="viewDate">
3239
Today
3340
</div>
34-
<div class="btn btn-primary" (click)="increment()">
41+
<div
42+
class="btn btn-primary"
43+
mwlCalendarNextView
44+
[view]="view"
45+
[(viewDate)]="viewDate">
3546
Next
3647
</div>
3748
</div>
@@ -41,9 +52,24 @@ <h3>{{ viewDate | calendarDate:(view + 'ViewTitle'):'en' }}</h3>
4152
</div>
4253
<div class="col-md-4">
4354
<div class="btn-group">
44-
<div class="btn btn-primary" (click)="view = 'month'" [class.active]="view === 'month'">Month</div>
45-
<div class="btn btn-primary" (click)="view = 'week'" [class.active]="view === 'week'">Week</div>
46-
<div class="btn btn-primary" (click)="view = 'day'" [class.active]="view === 'day'">Day</div>
55+
<div
56+
class="btn btn-primary"
57+
(click)="view = 'month'"
58+
[class.active]="view === 'month'">
59+
Month
60+
</div>
61+
<div
62+
class="btn btn-primary"
63+
(click)="view = 'week'"
64+
[class.active]="view === 'week'">
65+
Week
66+
</div>
67+
<div
68+
class="btn btn-primary"
69+
(click)="view = 'day'"
70+
[class.active]="view === 'day'">
71+
Day
72+
</div>
4773
</div>
4874
</div>
4975
</div>

‎src/calendar.module.ts

+13-2
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,9 @@ import { CalendarAllDayEventComponent } from './components/day/calendarAllDayEve
1515
import { CalendarDayViewHourSegmentComponent } from './components/day/calendarDayViewHourSegment.component';
1616
import { CalendarDayViewEventComponent } from './components/day/calendarDayViewEvent.component';
1717
import { CalendarTooltipWindowComponent, CalendarTooltipDirective } from './directives/calendarTooltip.directive';
18+
import { CalendarPreviousViewDirective } from './directives/calendarPreviousView.directive';
19+
import { CalendarNextViewDirective } from './directives/calendarNextView.directive';
20+
import { CalendarTodayDirective } from './directives/calendarToday.directive';
1821
import { CalendarDatePipe } from './pipes/calendarDate.pipe';
1922
import { CalendarEventTitlePipe } from './pipes/calendarEventTitle.pipe';
2023
import { CalendarEventTitleFormatter } from './providers/calendarEventTitle.provider';
@@ -51,6 +54,9 @@ import { CalendarDateFormatter } from './providers/calendarDateFormatter.provide
5154
CalendarDayViewEventComponent,
5255
CalendarTooltipWindowComponent,
5356
CalendarTooltipDirective,
57+
CalendarPreviousViewDirective,
58+
CalendarNextViewDirective,
59+
CalendarTodayDirective,
5460
CalendarDatePipe,
5561
CalendarEventTitlePipe
5662
],
@@ -63,9 +69,14 @@ import { CalendarDateFormatter } from './providers/calendarDateFormatter.provide
6369
CalendarDayViewComponent,
6470
CalendarWeekViewComponent,
6571
CalendarMonthViewComponent,
66-
CalendarDatePipe
72+
CalendarDatePipe,
73+
CalendarPreviousViewDirective,
74+
CalendarNextViewDirective,
75+
CalendarTodayDirective
6776
],
68-
entryComponents: [CalendarTooltipWindowComponent]
77+
entryComponents: [
78+
CalendarTooltipWindowComponent
79+
]
6980
})
7081
export class CalendarModule {
7182

‎src/directives/calendarNextView.directive.ts

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { Directive, HostListener, Input, Output, EventEmitter } from '@angular/core';
2+
import addDays from 'date-fns/add_days';
3+
import addWeeks from 'date-fns/add_weeks';
4+
import addMonths from 'date-fns/add_months';
5+
6+
/**
7+
* Change the view date to the next view. For example:
8+
*
9+
* ```
10+
* &lt;button
11+
* mwlCalendarNextView
12+
* [(viewDate)]="viewDate"
13+
* [view]="view"&gt;
14+
* Next
15+
* &lt;/button&gt;
16+
* ```
17+
*/
18+
@Directive({
19+
selector: '[mwlCalendarNextView]'
20+
})
21+
export class CalendarNextViewDirective {
22+
23+
/**
24+
* The current view
25+
*/
26+
@Input() view: string;
27+
28+
/**
29+
* The current view date
30+
*/
31+
@Input() viewDate: Date;
32+
33+
/**
34+
* Called when the view date is changed
35+
*/
36+
@Output() viewDateChange: EventEmitter<Date> = new EventEmitter();
37+
38+
/**
39+
* @hidden
40+
*/
41+
@HostListener('click')
42+
onClick(): void {
43+
44+
const addFn: any = {
45+
day: addDays,
46+
week: addWeeks,
47+
month: addMonths
48+
}[this.view];
49+
50+
this.viewDateChange.emit(addFn(this.viewDate, 1));
51+
52+
}
53+
54+
}

‎src/directives/calendarPreviousView.directive.ts

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { Directive, HostListener, Input, Output, EventEmitter } from '@angular/core';
2+
import subDays from 'date-fns/sub_days';
3+
import subWeeks from 'date-fns/sub_weeks';
4+
import subMonths from 'date-fns/sub_months';
5+
6+
/**
7+
* Change the view date to the previous view. For example:
8+
*
9+
* ```
10+
* &lt;button
11+
* mwlCalendarPreviousView
12+
* [(viewDate)]="viewDate"
13+
* [view]="view"&gt;
14+
* Previous
15+
* &lt;/button&gt;
16+
* ```
17+
*/
18+
@Directive({
19+
selector: '[mwlCalendarPreviousView]'
20+
})
21+
export class CalendarPreviousViewDirective {
22+
23+
/**
24+
* The current view
25+
*/
26+
@Input() view: string;
27+
28+
/**
29+
* The current view date
30+
*/
31+
@Input() viewDate: Date;
32+
33+
/**
34+
* Called when the view date is changed
35+
*/
36+
@Output() viewDateChange: EventEmitter<Date> = new EventEmitter();
37+
38+
/**
39+
* @hidden
40+
*/
41+
@HostListener('click')
42+
onClick(): void {
43+
44+
const subFn: any = {
45+
day: subDays,
46+
week: subWeeks,
47+
month: subMonths
48+
}[this.view];
49+
50+
this.viewDateChange.emit(subFn(this.viewDate, 1));
51+
52+
}
53+
54+
}

‎src/directives/calendarToday.directive.ts

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { Directive, HostListener, Input, Output, EventEmitter } from '@angular/core';
2+
import startOfToday from 'date-fns/start_of_today';
3+
4+
/**
5+
* Change the view date to the current day. For example:
6+
*
7+
* ```
8+
* &lt;button
9+
* mwlCalendarToday
10+
* [(viewDate)]="viewDate"&gt;
11+
* Today
12+
* &lt;/button&gt;
13+
* ```
14+
*/
15+
@Directive({
16+
selector: '[mwlCalendarToday]'
17+
})
18+
export class CalendarTodayDirective {
19+
20+
/**
21+
* The current view date
22+
*/
23+
@Input() viewDate: Date;
24+
25+
/**
26+
* Called when the view date is changed
27+
*/
28+
@Output() viewDateChange: EventEmitter<Date> = new EventEmitter();
29+
30+
/**
31+
* @hidden
32+
*/
33+
@HostListener('click')
34+
onClick(): void {
35+
this.viewDateChange.emit(startOfToday());
36+
}
37+
38+
}

0 commit comments

Comments
 (0)