Angular 在mat日历中突出显示日期

Angular 在mat日历中突出显示日期,angular,typescript,calendar,angular-material,angular5,Angular,Typescript,Calendar,Angular Material,Angular5,我使用的是棱角材质日历(即)mat日历。我试图突出日历中的一些日期。但我看不到任何关于这方面的文件。有人能帮我吗 HTML <mat-card> <mat-calendar name="appoinment_date" [selected]="selectedDate (selectedChange)="onSelect($event)"></mat-calendar> </mat-card> 我得到的//只能选择日期 我想要的是//应该能够突

我使用的是棱角材质日历(即)mat日历。我试图突出日历中的一些日期。但我看不到任何关于这方面的文件。有人能帮我吗

HTML

<mat-card>
<mat-calendar name="appoinment_date" [selected]="selectedDate (selectedChange)="onSelect($event)"></mat-calendar>
</mat-card>
我得到的//只能选择日期

我想要的是//应该能够突出显示日期


我想这就是你想要的。您可以突出显示日期,但不能显示事件。我也在寻找替代品。

2019年。对于任何仍在寻找答案的人

<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 ''
  }


};

}

日期类(){
返回(日期:date):MatCalendarCellCssClasses=>{
const highlightDate=this.datesToMark//日期数组
.map(strDate=>new Date(strDate))//如果不在
日期对象
.some(d=>d.getDate()==date.getDate()&&d.getMonth()==
date.getMonth()和&d.getFullYear()==date.getFullYear());
console.log(highlightDate);
const highlightCurrentDate=this.upcomingCalendarEvents
.map(标准日期=>新日期(+标准日期))
.some(d=>d.getDate()==date.getDate()&¤tDate.getDate()==
d、 getDate()&&d.getMonth()==date.getMonth()&&d.getFullYear()==
date.getFullYear());
console.log(highlightDate);
如果(highlightCurrentDate){
返回“突出显示当前日期类”
}else if(高亮显示日期){
返回“突出显示日期类”
}否则{
返回“”
}
};
}
<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 ''
  }


};

}