projects/angular-calendar/src/modules/common/calendar-next-view/calendar-next-view.directive.ts
Change the view date to the next view. For example:
<button
mwlCalendarNextView
[(viewDate)]="viewDate"
[view]="view">
Next
</button>
Selector | [mwlCalendarNextView] |
Inputs |
Outputs |
HostListeners |
constructor(dateAdapter: DateAdapter)
|
||||||
Parameters :
|
daysInWeek | |
Type : number
|
|
The number of days in a week. If set will add this amount of days instead of 1 week |
excludeDays | |
Type : number[]
|
|
Default value : []
|
|
Days to skip when going forward by 1 day |
view | |
Type : CalendarView | "month" | "week" | "day"
|
|
The current view |
viewDate | |
Type : Date
|
|
The current view date |
viewDateChange | |
Type : EventEmitter<Date>
|
|
Called when the view date is changed |
click |
|
import {
Directive,
EventEmitter,
HostListener,
Input,
Output,
} from '@angular/core';
import { DateAdapter } from '../../../date-adapters/date-adapter';
import { CalendarView } from '../calendar-view/calendar-view.enum';
import { addDaysWithExclusions } from '../util/util';
/**
* Change the view date to the next view. For example:
*
* ```typescript
* <button
* mwlCalendarNextView
* [(viewDate)]="viewDate"
* [view]="view">
* Next
* </button>
* ```
*/
@Directive({
selector: '[mwlCalendarNextView]',
})
export class CalendarNextViewDirective {
/**
* The current view
*/
@Input() view: CalendarView | 'month' | 'week' | 'day';
/**
* The current view date
*/
@Input() viewDate: Date;
/**
* Days to skip when going forward by 1 day
*/
@Input() excludeDays: number[] = [];
/**
* The number of days in a week. If set will add this amount of days instead of 1 week
*/
@Input() daysInWeek: number;
/**
* Called when the view date is changed
*/
@Output() viewDateChange: EventEmitter<Date> = new EventEmitter();
constructor(private dateAdapter: DateAdapter) {}
/**
* @hidden
*/
@HostListener('click')
onClick(): void {
const addFn: any = {
day: this.dateAdapter.addDays,
week: this.dateAdapter.addWeeks,
month: this.dateAdapter.addMonths,
}[this.view];
if (this.view === CalendarView.Day) {
this.viewDateChange.emit(
addDaysWithExclusions(
this.dateAdapter,
this.viewDate,
1,
this.excludeDays
)
);
} else if (this.view === CalendarView.Week && this.daysInWeek) {
this.viewDateChange.emit(
addDaysWithExclusions(
this.dateAdapter,
this.viewDate,
this.daysInWeek,
this.excludeDays
)
);
} else {
this.viewDateChange.emit(addFn(this.viewDate, 1));
}
}
}