angular / angular/components

bug(MatCalendar): updating dateClass does not update calendar view

Open
#28,737 2 comments 3 reactions 0 assignees View on GitHub
area: material/datepicker P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

_No response_

### Description

We have displayed a calendar and when changing the month we load data from the backend to highlight certain cells.

We tried to update the `dateClass` using observables together with the async pipe which did not work since the calendar is not updating when the reference changes.

A workaround was to call `setLocale` of the date adapter which triggers a rerender.

I consider this a bug and not a feature because it is not mentioned anywhere that this cannot be done and `dateFilter` also can be updated asynchronously.

### Reproduction

StackBlitz link:
Steps to reproduce:
1.
2.

### Expected Behavior

Update calendar view on `dateClass` change

### Actual Behavior

calendar view does not update when `dateClass` changes.

### Environment

- Angular: 17.3.0
- CDK/Material: 17.3.0
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): MacOS

Contributor guide

Open the contributing guide

Research direction

Start at the MatCalendar entry point and reproduce the reported case with an asynchronously changing dateClass value. Verify that changing the value updates the rendered calendar cells without relying on the date adapter's setLocale workaround; the issue does not name a source file or test.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.