Выделить дату в мат-календаре - PullRequest
Новая
       19

Выделить дату в мат-календаре

0 голосов
/ 26 сентября 2018

Я использую угловой календарь материалов (т.е.) mat-calendar .Я пытаюсь выделить некоторые даты в календаре.Но я не мог видеть никакой документации по этому вопросу.Может ли кто-нибудь помочь мне в этом.

HTML 

<mat-card>
<mat-calendar name="appoinment_date" [selected]="selectedDate (selectedChange)="onSelect($event)"></mat-calendar>
</mat-card>

TS 

  onSelect(event){
    this.selectedDate= event;
  }

Что яЯ получаю // Могу выбирать только даты My output

Что я хочу, это // Должен иметь возможность выделить даты

enter image description here

Ответы [ 2 ]

0 голосов
/ 27 июля 2019

Это 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 ''
  }


};

}
0 голосов
/ 14 ноября 2018

Календарь событий в Angular Material Design

Я думаю, это то, что вы хотели.Вы можете выделить дату, но невозможно показать события.Я также ищу альтернативы.

...