Components: 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 https://github.com/angular/components/issues/14603#issuecomment-474347542

[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

[jcamargodev]

Amazing, @amadarsh.

Really, it's a much cleaner solution.

Thanks a lot!

[schoening]

Good job @amadarsh 👍🏻

And I think we should all take a moment to just appreciate how amazing the current developer experience is thanks to tools like StackBlitz 😁

[amadarsh]

@schoening Credit goes to Jie Wang, who posted this answer on StackOverflow. Agree, StackBlitz and StackOverflow provide us with amazing tools and guidance.

[mhp-borisbojic]

Hello,

we have "almost" a similar issue, but not with using the MatCalendar directly.

We're using the MatDatepicker component (which uses MatCalendar under the hood) and on clicking the next / prev month, we're loading available days (via a ajax service) and provide a filter to [matDatepickerFilter] with the available days of the month.

Our issue is that the available days aren't rerendered or refreshed in the already open MatCalendar. Only if we close and open the Calendar again, the new (available) days are visible in the month.

And since we're not using MatCalendar directly, but MatDatepicker, we can't access it via the suggested updateTodaysDate().

What can we do to achive something similar?

[danww]

@mhp-borisbojic Yes! I have this issue too!

We're lazy-loading more data when selecting next/previous month, but unable to refresh the highlighted dates on the calendar while it's open, once the new data is loaded. Currently have to navigate to a different month and back for the highlights to appear.

Would love access to refresh the MatCalendar component via MatDatePicker, in much the same way as we can pass the [dateClass] function through.

[ReneDeicker]

@danww

Any solutions found to rerender the [dateClass] function after selecting a date with MatDatePicker?