Tengo un control de calendario mat que está abierto siempre. En la carga inicial, destaco una serie de fechas que pude hacer después de esto: Resaltado ciertas fechas en mat-calendar. Ahora tengo que resaltar el día de hoy (o la fecha seleccionada) con un clic de botón. El resaltado funciona solo cuando cambio a un mes diferente y luego vuelvo a la vista del mes actual. ¿Hay alguna manera de actualizar el calendario mat dinámicamente? Por favor avise.

https://am-all-imports-zwnjbd.stackblitz.io

0
adarsh 10 may. 2019 a las 22:31

3 respuestas

La mejor respuesta

Simplemente puede usar MatCalendar.updateTodaysDate() para volver a representarlo.

@ViewChild(MatCalendar) calendar: MatCalendar<Date>;

someEvent(){
    this.calendar.updateTodaysDate();
}
5
Jie Wang 15 jul. 2019 a las 14:28

No he encontrado un método nativo.

Aquí está mi solución:

Coloque el componente mat-calendar dentro de un div con la condición de que la matriz de fechas destacadas no esté indefinida

<mat-card *ngIf="datesToHighlight">
  <mat-calendar [dateClass]="dateClass()" [selected]="selectedDate" (selectedChange)="onSelect($event)"></mat-calendar>
</mat-card>

Cuando desee actualizar mat-calendar, configure la matriz como nula y luego llénela con los datos actualizados

 this.datesToHighlight = null;
 this.datesToHighlight = getMyNewArray();

De esa forma, el componente se cargará nuevamente con la nueva matriz

1
María Teresa 5 jun. 2019 a las 17:27

Estoy usando el material 7.2 y para mover el foco funcionó actualizando la propiedad activeDate:

<mat-calendar
    #myCalendar
    [startAt]="startDate"
    [selected]="selectedDate">
</mat-calendar>

<div>
    <button mat-button (click)="addThreeDays()">
        Add 3 days
    </button>
</div>

Luego en la lógica del componente

@ViewChild('myCalendar') myCalendar;
startDate = '2019-08-26';
selectedDate = '2019-08-26';

addThreeDays() {
   this.myCalendar.activeDate = '2019-08-29';
}
1
Esteban Arredondo 26 ago. 2019 a las 16:29