[Calendar] Development

[jpzwarte]

Provide a general summary of the issue here

Link to research https://www.figma.com/design/PGb66fVN325tu0IngRka66/SL-Component-Research?node-id=1925-37932&t=wfJPuQUCukAdnJVX-0

Design Singe Date Component: https://www.figma.com/design/CHpKrPIdXdbV2u7X8vizKI/Components-2.0?node-id=7135-30617&t=xUxXVhXswVRdqEix-4 Range Component: https://www.figma.com/design/CHpKrPIdXdbV2u7X8vizKI/Components-2.0?node-id=7361-120220&t=xUxXVhXswVRdqEix-11 Layout Diagrams: https://www.figma.com/design/CHpKrPIdXdbV2u7X8vizKI/Components-2.0?node-id=7180-42628&t=xUxXVhXswVRdqEix-11 Button Day Diagram: https://www.figma.com/design/CHpKrPIdXdbV2u7X8vizKI/Components-2.0?node-id=7147-234131&t=xUxXVhXswVRdqEix-11

Default view & modes

• [x] Opens to today in month view (one month displayed)
• [x] Supports day ⇄ month ⇄ year views (header click cycles)

Navigation

• [x] Arrow keys move focus between days;
• [ ] ~~Esc closes the dropdown.~~
• [x] Using < / > keys on the edges of the month moves to the next/previous month.

Selection & limits

• [ ] ~~Selecting a day writes the value and closes the picker~~
• [x] Honour min/max props to disable out-of-range dates
• [x] Highlight styles for today, selected(s), and range start / end
• [x] Optional week-number column
• [x] It is possible to select a date from the previous/next month in the month view. The calendar will remain in the current month, even when clicking on a date outside it.

Quick actions & extras

• [ ] ~~Optional footer with “Today”, “Clear”, etc. (visible if slot provided)~~

Jeroen's points

• [x] Add ability to use arrow keys to navigate to other months/years in <sl-select-month> and <sl-select-year>, similar to what is in <sl-select-day>
• [x] Announce (where necessary) when the day, month, or year changes indirectly
• [x] Implement workaround for lack of scrollsnapchange and scrollsnapchanging events in Safari & FF
• [x] Calendar doesn't respond when you click the previous month/next month buttons quickly
• [ ] Investigate sizing: how responsive is the calendar component? Does it work when it should fill more space than it needs?
• [ ] ~~Add ability to show/hide weekends???~~
• [x] Add ability to disable certain dates
• [x] Write unit tests

👤 Your name

Jeroen

🧢 Your Product/Team

SLDS

[DanielleRameau]

Which element should be focused when the current day is outside the preset range?

[Diaan]

@arecuenco-dsgn Regarding this navigation:

from the calendar view you can also directly click on the year, which will bring you to the right panel. Will clicking a year then bring you back on the calendar view (left) or the select month view (middle)

[Diaan]

Showing of the selected/focused/today styling:

• Selected is only for the current view. Navigating another month or year doesn't change the selected date. The user must to select a date to confirm the new date.
• Currently selected day/month/year is only visible when the entire date matches. (for example: when i have selected 10-09-2024, and navigate to pick a month in 2025, september will not be selected), same goes for the 'today' indicator
• when a select month or select year view is opened the focus should be on the month/year that was in shown before the new view was opened

[Diaan]

There is an issue where the calendar scrolls back to whatever is set in this.month when a date is selected.

[anna-lach]

Requirements:

and

and

should be done as part of the date field component #1863 .

[anna-lach]

Requirement:

should be done as part of #2729