Calendar component

[kpyszkowski]

Overview:

Calendar component with month switching

6

Structure schema:

Features

• Month switching
• Variable week start day
• Conditionally append previous/next months days to fill days grid
• Flexible and customizable component API
• Accessible (aria attributes, keyboard support)
• Optionally controlled to be used as a DatePicker
• Day button render function to provide custom behavior implementation possibility

[kpyszkowski]

To do:

• [x] implement component
• [ ] research and implement accessibility features (semantics, aria-attributes, keyboard support)
• [x] improve and cleanup component API
• [ ] improve Storybook story, add story variants (Default, Controlled)

Chores:

• [ ] add JSDoc
• [ ] add Storybook docs page

[kpyszkowski]

Accessibility notes:

Keyboard support

- struggling with problem of last day element index predicting (focus candidate) - it's impossible to know the number elements before they are rendered - possible fix: use memoized daysData to calculate index of first and last day elements

Semantics

• since component API is meant do be flexible it's impossible to cover elements semantics since it's fully controlled by developer

  Aria attributes

• Component should mimic W3C guidelines about DatePicker/Calendar component: https://w3c.github.io/aria-practices/examples/dialog-modal/datepicker-dialog.html