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 >
    <mat-card >
      <h2 >Reserveerbare datums</h2>
      <mat-calendar #calendar (selectedChange)="select($event,calendar)" [dateClass]="isSelected"></mat-calendar>
    </mat-card>
  </div>

1. I get the following error at [dateClass]:

   "Type '(event: any) => "selected" | null' is not assignable to type 'MatCalendarCellClassFunction<any>'"
   

2. 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!

CodePudding user response：

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