Skip to content

[Calendar] Development #1862

@jpzwarte

Description

@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

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

Navigation

  • Arrow keys move focus between days;
  • Esc closes the dropdown.
  • 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
  • Honour min/max props to disable out-of-range dates
  • Highlight styles for today, selected(s), and range start / end
  • Optional week-number column
  • 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

  • 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>
  • Announce (where necessary) when the day, month, or year changes indirectly
  • Implement workaround for lack of scrollsnapchange and scrollsnapchanging events in Safari & FF
  • 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???
  • Add ability to disable certain dates
  • Write unit tests

👤 Your name

Jeroen

🧢 Your Product/Team

SLDS

Metadata

Metadata

Type

Projects

Status

⚒️ In progress

Relationships

None yet

Development

No branches or pull requests

Issue actions