Clicking on next or previous month in Angular Material Calendar (mat-calendar) closes the calendar w-CodePudding

I'm using Angular Material calendar (mat-calendar) within a mat-menu. Clicking on the calendar icon and selecting a date works fine.

However when I want to go to the next month (or previous one) the whole calendar window closes. When I open the calendar again the month has indeed changed inside of the mat-calendar. But this is obviously not how I want it to work.

I suspect the issue is caused somehow by the fact that I'm using a function for the [dateFilter] attribute. The function tells the mat-calendar which dates are available.

HTML template code: `

<button  mat-icon-button [matMenuTriggerFor]="appMenu">
            <mat-icon >date_range</mat-icon>
          </button>
          <mat-menu #appMenu="matMenu"  >
                <mat-calendar  [dateFilter]="filterDates" style="width:15rem"  #calendar [selected]="selectedDate"
                    (selectedChange)="setSelectedDate($event)">
                </mat-calendar>
          </mat-menu>

.ts code:

selectedDate: Date;


filterDates = (d: Date): boolean => {
    for (let i = 0; i < this.validDates.length; i  ) {
      const date = this.validDates[i];
      if(date.getTime() == d.getTime()){
        return true;
      }
    }
    return false;
  }

  setSelectedDate(event) {
    this.selectedDate = event;
    for (let i = 0; i < this.gamesInOneDate.length; i  ) {
      const date = this.gamesInOneDate[i];
      if(date.dateTime.getTime() == event.getTime()){
        this.currentDateIndex = i;
        return;
      }
    }
  }

So my question is how do I find the event that fires when the next month button is clicked and how do I stop the datepicker from closing when this happens?

Thanks so much

I've implemented a mat-calendar in my angular application, and I want to be able to change months without the calendar closing. The calendar should only close when a date is chosen.

CodePudding user response：

Alfred. The problem is not about a calendar, it's about mat-menu behaviour that close it by click on it or outside of this menu(when it's opened). Check this topic - How to prevent angular material mat-menu from closing? I hope it will help you.