feat(MatCalendar): Cell data to be displayed on specific days.
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
Description
### Feature Description
### Context
- Using MatCalendar as a static calendar that is displayed in a page. The user can select a date/week/month and a more extensive calendar view is opened/updated on the page to for the specific day / week / month. We're using FullCalendar for the extensive calendar view.
- It would be awesome if the MatCalendar could display indicators, for example that a specific date (August 9) has 3 events on this day. Or that the specific date (August 10) has 10 events on this day.
### Visual example of what could be achieved


### Reasoning
- Using the dateClass input, I can somewhat achieve a similar thing. I can have an array / map of events, then when rendering the calendar I can match each cell to a list of events, then change the css class accordingly.
- But the css class is not enough to show dynamic content, such as a text, a specific matTooltip, a specific callback when the cell is hovered, etc.
- I've seem some hacks floating around that involve replacing the aria-label attribute and then adding a css class that styles the aria-label, but it seems very dirty and non flexible.
- Also, this technique does not "refresh" when changing date or if new data is available and should be shown, we have to either:
- Call `matCalendar.updateTodaysDate()` to force a refresh, even though the date may not really have been changed...
- Call `matCalendar['_getCurrentViewComponent']()['_init']()` to force a refresh, digging in the code to find private methods that seems to do what we intend to do (refresh each cells based on current dataSet).
### Feature request
#### If achievable currently, more documentation
- If what I'm trying to explain is available using renderer and dateClass, I would love to see an example or an explaination of how to do so.
#### If not achieveable currently
##### Provide data
- The calendar could allow the user to provide, in a way, an array of data or an observable of data associated to specific dates.
- Similar to the dateClass method, a method could be provided to configure how the cell should be rendered depending on the matching provided data.
- Custom components or a very generic component could be configured to map how a specific dataset should behave and be displayed in the context of a cell that has matching data.
- In my use case, for example, a colored dot that opens an Overlay Panel with details about the hovered day.
##### Customize each cell view
- The calendar could "simply" call a specific method on each cell render, just like the dateClass does.
- The callback could allow us to configure the cell, its hover behavior, tooltip, dom elements that should be displayed under the day number, etc.
### Use Case
Simple use case, only visual
1. I display the Angular MatCalendar
2. User navigates to December and sees each day of December
3. The 25th is a special day, it has a red dot under the "25" to indicate it is a busy day
Simple use case, different visual
1. I display the Angular MatCalendar
2. User navigates to December and sees each day of December
3. The 25th is a special day, it has a santa hat icon under the "25" to indicate it's christmas.
Simple use case, different visual
1. I display the Angular MatCalendar
2. User navigates to December and sees each day of December
3. The 25th is a special day, it has the label "Christmas" (depending on the current Locale) under the "25".
Complex use case
1. I display the Angular MatCalendar
2. User navigates to December and sees each day of December
3. The 25th is a special day, it has a red dot to indicate it is a busy day. When I hover the red dot, a matToolTip is shown, in the appropriate language, to show details about that day.
Complex use case
1. I display the Angular MatCalendar
2. User navigates to December and sees each day of December
3. The 25th is a special day, it has a red dot to indicate it is a busy day. When I hover the red dot, I receive a callback with the appropriate data to allow me to open an Overlay Panel next to the cell and display that 5 events, with their details, are occurring on that day.
Contributor guide
Research direction
Start with MatCalendar and its dateClass, renderer, updateTodaysDate(), and _getCurrentViewComponent()/_init() paths described in the issue to understand current cell rendering and refresh behavior. Determine whether the requested per-date content and interaction hooks fit the existing API; done should be a decided, supported approach that covers visual content, updates, and the documented use cases.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100