feat(MatCalendar): Cell data to be displayed on specific days.
- 主要言語
- TypeScript
- スター
- 25k
- フォーク
- 6.8k
- 平均マージ
- 1日 8時間
- マージ済み PR(30日)
- 91
説明
### 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.
コントリビューションガイド
調査の方向性
MatCalendar と、issue で説明されている dateClass、renderer、updateTodaysDate()、および _getCurrentViewComponent()/_init() のパスから調査を始め、現在のセルのレンダリングと更新動作を理解します。日付ごとに要求されるコンテンツとインタラクションフックが既存の API に適合するかを判断します。調査完了の条件は、視覚的なコンテンツ、更新、および文書化されたユースケースをカバーする、明確に決定されたサポート可能なアプローチが定まることです。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- angular, typescript
- 領域
- frontend
- issue の種類
- 機能追加
- 難易度
- 5/5
- 見積もり時間
- 1週間以上
- 活発さ
- 停滞
- 明瞭さ
- 説明が足りない
- 初心者へのやさしさ
- 25/100