4
votes

Comment actualiser le calendrier du tapis après avoir changé l'arrière-plan des dates en surbrillance

J'ai un contrôle mat-calendar qui est toujours ouvert. Lors du chargement initial, je mets en évidence un tableau de dates que j'ai pu faire à la suite de ceci: Mise en évidence certaines dates dans mat-calendrier . Maintenant, je dois mettre en évidence le jour d'aujourd'hui (ou la date sélectionnée) en cliquant sur un bouton. La mise en évidence ne fonctionne que lorsque je passe à un mois différent, puis que je reviens à la vue du mois en cours. Existe-t-il un moyen d'actualiser dynamiquement le calendrier du tapis? S'il vous plaît aviser.

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

angular css angular6 angular-material-7

0 commentaires

3 Réponses :

1
votes

je n'ai pas trouvé de méthode native.

voici ma solution de contournement:

mettre le composant mat-calendar dans un div avec la condition que le tableau des dates de surbrillance ne soit pas indéfini p >

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

lorsque vous souhaitez actualiser mat-calendar, définissez le tableau sur null puis remplissez-le avec les données mises à jour

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

Que la façon dont le composant se chargera à nouveau avec le nouveau tableau

0 commentaires

9
votes

Vous pouvez simplement utiliser MatCalendar.updateTodaysDate () pour le restituer.

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

someEvent(){
    this.calendar.updateTodaysDate();
}

0 commentaires

3
votes

J'utilise le matériel 7.2 et pour moi, pour déplacer le focus, cela a fonctionné en mettant à jour la propriété activeDate:

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

addThreeDays() {
   this.myCalendar.activeDate = '2019-08-29';
}

Puis dans la logique du composant

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

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

0 commentaires