How to disable all the dates before current date in Angular 6.0+ Calendar week view

Question

I wanted to disable all past date before current date in Angular 6.0+ Calendar week view. 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;
}