自定义垫日历中选定的日期(Angular material )

您的代码需要进行一些更改才能按预期工作:

1. Use an arrow function个

   You're currently using a regular function. Inside it, this is the function's scope, not the class instance.
   For access to the class instance via this, you have to use an arrow function ¹:

export class MyComponent {
  @Input() tasks: any[];

  dateClass = (date: Date): MatCalendarCellCssClasses => {
    console.log(this.tasks) // inside your function was `undefined`
    if (someCondition) {
      return 'some-class'
    }
    return ''
  }
}

2. You probably don't want to style the <button />
   The class returned by the above function will be applied to button.mat-calendar-body-cell. If you style those buttons, two adjacent dates will touch each other. I suggest you style the inner cell content (.mat-calendar-body-cell-content):

.test-class .mat-calendar-body-cell-content {
  border-color: red;
}

• 如果您决定设置按钮的样式，而不是单元格内容的样式，请注意它们当前的样式为border: none，这意味着您需要设置border-color以上的值才能使边框变为可见(border: 1px solid red;就可以了)；此外，您可能希望添加一些border-radius(默认情况下它们是方框).

3. Un-scope your (S)CSS,
   ... because you're not styling your component's DOM elements, but inner DOM elements of <mat-calendar>. To remove the CSS scoping, use ViewEncapsulation.None (or add your styles to an un-scoped stylesheet):

@Component({
  encapsulation: ViewEncapsulation.None
})

101.

¹ - The function should be modified to return a string according to your business logic.
² - The more verbose version of dateClass in the example would be:

dateClass = (date: Date): MatCalendarCellCssClasses => {
  if (
    this.tasks
      .map((t) => t.date_required)
      .find((d) => moment(d).isSame(date, 'day'))
  ) {
    return 'test-class'
  }
  return ''
}

102-或者，您可以键入dateClass作为MatCalendarCellClassFunction<Date>:

dateClass: MatCalendarCellClassFunction<Date> = (date) =>
  (this.tasks
    .map((t) => t.date_required)
    .find((d) => moment(d).isSame(date, 'day')) &&
    'test-class') ||
  '';