angular / angular/components

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

Ouverte
#27,611 1 commentaire 3 réactions 0 personnes assignées Voir sur GitHub
area: material/datepicker feature P4
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
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.

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par MatCalendar et les chemins dateClass, renderer, updateTodaysDate() et _getCurrentViewComponent()/_init() décrits dans l’issue afin de comprendre le rendu actuel des cellules et le comportement d’actualisation. Déterminez si le contenu demandé pour chaque date et les hooks d’interaction s’intègrent à l’API existante ; le travail sera terminé lorsqu’une approche décidée et prise en charge couvrira le contenu visuel, les mises à jour et les cas d’utilisation documentés.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
frontend
Type d'issue
Fonctionnalité
Difficulté
5/5
Temps estimé
Plus d'une semaine
Activité
À l'abandon
Clarté
À clarifier
Accessibilité débutants
25/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.