Issue
I'm trying to make a calendar where multiple date selections are possible. I found this source on StackBlitz
My code is the following for AppComponent:
isSelected = (event: any) => {
const date = event as moment.Moment
return (this.dates.find(x => x.isSame(date))) ? "selected": null;
};
select(event: any, calendar: any) {
const date: moment.Moment = event
const index = this.dates.findIndex(x => x.isSame(date));
if (index < 0) this.dates.push(date);
else this.dates.splice(index, 1);
calendar.updateTodaysDate();
}
And for my html :
<div class="col mx-3">
<mat-card class="demo-inline-calendar-card">
<h2 class="text-center">Reserveerbare datums</h2>
<mat-calendar #calendar (selectedChange)="select($event,calendar)" [dateClass]="isSelected"></mat-calendar>
</mat-card>
</div>
I get the following error at [dateClass]:
"Type '(event: any) => "selected" | null' is not assignable to type 'MatCalendarCellClassFunction<any>'"
When I click some date on my calendar another error pops up:
"x.isSame is not a function"
Any help is appreciated. Or if anyone got another approach to make this!
Thanks in advance!
Solution
Use it like this:
return (this.dates.find(x => x.isSame(date))) ? "selected" : "";
https://stackblitz.com/edit/angular-multi-date-picker-c6kwgo?file=src/app/app.component.ts
Answered By - Behram Bazo
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.