Highlight dates in mat-calendar

[karthickms]

What is the expected behavior?

If given dates in array or something, we should highlights those dates.

What is the current behavior?

Can't do this.

Providing a StackBlitz reproduction is the best way to share your issue.

StackBlitz starter: https://goo.gl/wwnhMV

How to highlights some dates. Help me thanks.

[julianobrasil]

Hey, @karthickms, have you taken a look at the @Input() dateClass at the docs?

If I got right what you're asking for, I'm almost sure it already does what you want if the function is provided the array of possible dates.

Edit: On the overview page you have a simple example of this feature.

[julianobrasil]

Here you have an example: https://stackblitz.com/edit/angular-date-class-filter?file=app%2Fdatepicker-date-class-example.html

[karthickms]

Yeah. Thanks @julianobrasil. I have gotten on the docs.

And one more thing is, when we click those special dates, just show the popup.

I mean how to add event (click) to the special dates.

[julianobrasil]

Just observe the dates changes and do whatever you want when the date is one of the list (for example, open your custom popup). If you want to keep the calendar opened while your custom popup is shown, you'll have to do some tests (not sure whether it's possible possible at all but who knows...).

[usamasarfraz143]

I there a way to update date dynamically in dateClass and still keep showing the view .
i m basiclly using mat-calendar with multiple date selection with dateClass attribute but dateClass just trigger only once. only for first time. not even i update the dateclass in mehtod where i want to click to reinit the dateClass but its not work

[omotayo89]

@usamasarfraz143 did you get any help with this #14603 (comment)

[amadarsh]

@usamasarfraz143 @omotayo89 any update on the issue you are facing? I am facing the same problem, where the Dates are not getting highlighted dynamically.

[robertsmith2]

I am having the same issue, looks like the dateClass as well as the dateFilter is just an input passed in and there is no functionality to update the date classes in the MonthView class dynamically. This is really helpful if you are making a call on month change to get valid dates or dates you want to apply styles to dynamically.
https://github.com/angular/components/blob/master/src/material/datepicker/month-view.ts#L265

[joerno]

I have the same problem and changed the original example, the datepicker works so far:
stackblitz But only because it is new rendered with every new popup I think.

When I try the same with mat-calendar, the selected days dont change:
stackblitz

[jcamargodev]

@joerno

Analyzing the @input that can be passed in the MatCalendar component and their respective behaviors inside it I figured out a way to force the rendering of all the cells and causing the DateClass to be processed again.

Take a look at that fork I made of your stackblitz project with a possible fix. I know it's not the most beautiful way to do it, but maybe you can work it out until we find a more definitive solution to that.

[schoening]

@jcamargodev thats a great solution. Thanks a lot!

It also works to just set the date back to the minDate you require inside the timeout rather than setting it to null. So no functionality is lost.

[amadarsh]

@schoening , @jcamargodev , @joerno
I got a more cleaner solution to this problem. Use the updateTodaysDate() built-in function of the Mat-calendar control. I forked @joerno 's project - https://stackblitz.com/edit/am-all-imports-metad3

reference - https://stackoverflow.com/questions/56083815/how-to-refresh-mat-calendar-after-changing-the-background-of-highlighted-dates