angular - Resaltar fecha en mat-calendar
Estoy usando el calendario de Angular Material (es decir) mat-calendar. Estoy tratando de resaltar algunas de las fechas en el calendario. Pero no pude encontrar ninguna documentación al respecto. ¿Alguien puede ayudarme con eso?
HTML
<mat-card>
<mat-calendar name="appoinment_date" [selected]="selectedDate (selectedChange)="onSelect($event)"></mat-calendar>
</mat-card>
TS
onSelect(event){
this.selectedDate= event;
}
Lo que estoy recibiendo //Solo se pueden seleccionar fechas
Lo que quiero es/Debe poder resaltar fechas
Respuesta #1
Es 2019. para cualquiera que todavía busque una respuesta
<mat-calendar [dateClass]="dateClass()"
(selectedChange)="getDayRequestsList($event)"> </mat-calendar>
dateClass() {
return (date: Date): MatCalendarCellCssClasses => {
const highlightDate = this.datesToMark // array of dates
.map(strDate => new Date(strDate)) // wrap with new Date if not in
date object
.some(d => d.getDate() === date.getDate() && d.getMonth() ===
date.getMonth() && d.getFullYear() === date.getFullYear());
console.log(highlightDate);
const highlightCurrentDate = this.upcomingCalendarEvents
.map(strDate => new Date(+strDate.date))
.some(d => d.getDate() === date.getDate() && currentDate.getDate() ===
d.getDate() && d.getMonth() === date.getMonth() && d.getFullYear() ===
date.getFullYear());
console.log(highlightDate);
if(highlightCurrentDate) {
return 'highlight-current-date-class'
} else if(highlightDate) {
return 'highlight-date-class'
} else {
return ''
}
};
}
Respuesta #2
Calendario de eventos en Angular Material Design
Creo que esto es lo que querías. Puedes resaltar la fecha, pero no es posible mostrar eventos. También estoy buscando alternativas.

