Disabling future days using Angular mwl-calendar-month-view

Question

Is it possible to disable a day on Mat-Calendar? Our project allows the employee to set a Time Entry on the actual and past days, but he or she cannot do it on future days...

Like this... Today is 27th and tomorrow he can`t open the 28th day

Edit: Sorry, I was checking the code, and isn't a mat-calendar... it´s a mwl-calendar-month-view

Does this answer your question? [Angular Mat Calendar Disable date based on Rest result](https://stackoverflow.com/questions/57978516/angular-mat-calendar-disable-date-based-on-rest-result) — Powkachu, Jan 27 '20 at 13:19
Please, also update the title of your question, it will be helpful for other users :) — WSD, Jan 27 '20 at 17:14

score 3 · Answer 1 · answered Jan 27 '20 at 13:26

3

Add a function fo filter dates in your component. This function returns true to enable the date and false to disable it.

filterDates = (date: Date): boolean => {
  let today = new Date();
  return date < today;
}

And bind it to your mat-calendar:

<mat-calendar ... [dateFilter]="filterDates"></mat-calendar>

answered Jan 27 '20 at 13:26

Powkachu

2,170
2
26
36

I, need to check because isn't a mat-calendar... it's a mwl-month-view, and I don't know if this interferes – Ravel Sbrissa Okada Jan 27 '20 at 13:58
1

I tried this yesterday, and was a good start point for me! Thanks – Ravel Sbrissa Okada Jan 28 '20 at 10:27

score 2 · Answer 2 · answered Jan 27 '20 at 14:53

2

It may be possible if you hook on to beforeViewRender and apply some CSS rules

Template:

<mwl-calendar-month-view (beforeViewRender)="applyDateSelectionPolicy($event)">
</mwl-calendar-month-view>

TS:

  dateIsValid(date: Date): boolean {
    return date.getTime() < new Date().getTime();
  }

  applyDateSelectionPolicy({ body }: { body: CalendarMonthViewDay[] }): void {
    body.forEach(day => {
      if (!this.dateIsValid(day.date)) {
        day.cssClass = 'disabled-date';
      }
    });
  }

CSS:

.disabled-date{
 opacity: .5;
 pointer-events: none;
}

answered Jan 27 '20 at 14:53

WSD

3,243
26
38

I tried something similar but your code has the same problem that mine. We block the future days, like 29th... but 1st March isn't blocked, just 27th March... I'm thinking how can I cover this part – Ravel Sbrissa Okada Jan 28 '20 at 10:26
Do a console.log in the dateIsValid method to see if the problem is there, maybe the comparison is not working as it should be – WSD Jan 28 '20 at 11:37
and if i want to disable some hours in week view? – Sunil Garg Nov 08 '20 at 07:45

Disabling future days using Angular mwl-calendar-month-view

2 Answers2