angular / angular/components

feat(MatCalendar): Cell data to be displayed on specific days.

Open
#27,611 1 comment 3 reactions 0 assignees View on GitHub
area: material/datepicker feature P4
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
![image](https://github.com/angular/components/assets/18558584/65a84681-d663-49cb-8264-81ded789c082)
![image](https://github.com/angular/components/assets/18558584/63ef573d-3a82-4a40-a82a-0bf7146bcf93)

### 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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.