angular - 如何在Angular 6.0+日历周视图中禁用当前日期之前的所有日期

Question

我想在 Angular 6.0+ 日历周视图中禁用当前日期之前的所有过去日期。 https://stackblitz.com/edit/angular6-calendar

Answer 1

Late and probably unneeded answer for OP at this point, but in case someone stumbles upon this answer on Google like me and still needs help, I found a solution on GitHub

The comment provided this solution:

In template.html add this

<mwl-calendar-week-view
  // ...
  (beforeViewRender)="beforeViewRender($event)"
>
</mwl-calendar-week-view>

In component.ts (put everything within the class):

// Define a minimum date (to disable everything in the past you can just write this)
minDate: Date = new Date();


// Validator function
dateIsValid(date: Date): boolean {
  return date >= this.minDate;
}

// Event handler which you bind to the `<mwl-calendar-week-view>` component in the html template
beforeViewRender(body: CalendarWeekViewBeforeRenderEvent): void {
  body.hourColumns.forEach(hourCol => {     
    hourCol.hours.forEach(hour => {
      hour.segments.forEach(segment => {
        if (!this.dateIsValid(segment.date)) {
          segment.cssClass = 'cal-disabled';
        }
      });
    });
  });
}

In component.css

.cal-disabled {
  background-color: #eee;
  pointer-events: none;
}