I have one angular
component, which shows angular-calendar
on monthly basis(Jan/2019, feb,2019...). I am showing 6 months and also have navigation
buttons to move the calendar
months back and forth. First I created one component and implemented all the logic there. but I need to create separate component for angular-calendar
and separate component for navigation
buttons.
here is the stackblitz
of working example:- https://stackblitz.com/edit/ang-c-p-7qundm
<!--code for navigation-->
<div class="display-calendar">
<button class="btn btn-sm btn-primary" (click)="getNextData()">Click next</button>
<button class="btn btn-sm btn-primary" (click)="getPreviousData()">Click previous </button>
</div>
<!--code for calendar months-->
<div class="row-items" *ngFor="let month of months">
<mat-calendar [dateClass]="dateClass()" [startAt]="month" [selected]="selectedDate"
(selectedChange)="onSelect($event)"></mat-calendar>
</div>
Ts code
ngOnInit() {
this.getMonths(this.year, this.month);
}
//show calendar in months
getMonths(year:number, month:number) {
this.months = [];
for (let i = 0; i < 6; i++) {
this.months.push(new Date(year, month++));
}
}
//navigation for next Month
getNextData() {
if(this.curMonth+1 > this.month && this.curYear+1 >= this.year){
this.month++
}
this.getMonths(this.year, this.month);
}
//Navigation for previous Months
getPreviousData(){
if(this.curMonth-12 < this.month){
this.month--
}
this.getMonths(this.year, this.month);
}
I was thinking to do with services or input method. But I am confused.
this.getMonths(this.year, this.month);
this method need to be call in navigation component as well as in calendar component
imagine you has
<navigation-control [calendar]="calendar"></navigation-control>
<multiple-calendar #calendar></multiple-calendar #calendar>
From navigation control you can
@Input() calendar:any
next()
{
this.calendar.month++;
//or this.calendar.next()
}
prev()
{
this.calendar.month--;
//or this.calendar.prev()
}
It's only a idea