-1

A problem with refresh the mat-calendar image. an initial current month of the calendar was displayed, but if I select any date of next month then the mat-calendar will not update with the next month.

expected result: select any date, mat calendar jump, or shows to the selected date

I try How to refresh mat-calendar after changing the background of highlighted dates also but still phasing with the above problem.

shrutika gaikwad
  • 1
  • 2

1 Answers1

0

I also encountered this problem. Here is a solution (here I use moment.js. Date works just as well)

HTML

<mat-calendar #smallCalendar
    [startAt]="smallCalendarStartAt"
    [selected]="smallCalendarSelected">
</mat-calendar>

Typescript

// Small calendar properties
@ViewChild('smallCalendar', { static: false }) smallCalendar: MatCalendar<Date>;
smallCalendarStartAt: Date;  
smallCalendarSelected: any;

// Refresh the small calendar
this.smallCalendarStartAt = new Date(moment().year(), +moment().format('MM'), +moment().format('DD'));
this.smallCalendarSelected = this.smallCalendarStartAt; // Update the selected day in mat-calendar
this.smallCalendar._goToDateInView(this.smallCalendarStartAt, 'month'); // Update the month in the mat-calendar

You can adapt the variable smallCalendarStartAt. Here, for the example, it will only switch to the next month with the day of the actual month

Here is a demo with the Date function: DEMO

PROTOKOLL Studio
  • 163
  • 1
  • 1
  • 8