react-calendar-components

A project exploring composing UI and behavior in React for a customizable calendar component using higher order components.

Live demo: https://erikthedeveloper.github.io/react-calendar-components/

Summary

To summarize the overall approach used:

1. Enhance Calendar with desired features via applying related higher order components. These can be applied either singly (example) or by combining multiple (example)
2. Each Calendar higher order component is intended to be composable. This is primarily enabled through treating Day as a Component as prop...
3. ...and having each Calendar HoC "enhance" its own props.DayComponent (also via composing higher order components) see this usage
4. The EnhanceDay render callback component ensures that each Calendar's props.DayComponent is only enhanced as-needed. More generally this enables deriving/computing properties from props while avoiding the computed values becoming stale.

If you're curious to learn more, poke around src/components/, src/stories/ and play with the live examples via Storybook: https://erikthedeveloper.github.io/react-calendar-components/

Accessibility

The calendar UI is built with accessibility in mind. This includes things like accounting for keyboard navigation and providing appropriate aria labels.

Example: Navigating months and selecting a date range using only the keyboard.

For a quality dive into accessibility specific to calendars see this great write up: https://www.24a11y.com/2018/a-new-day-making-a-better-calendar/

React Concepts

• Higher order components
• Composing behavior from multiple higher order components
• Render callbacks
• Built with create-react-app
• Writing UI stories with Storybook

Other Concepts

• Working with Javascript's Date API
• Writing tests with Jest
• BEM
• Flexbox (on a basic level)

Development

📝 yarn is interchangeable with npm.

git clone git@github.com:erikthedeveloper/react-calendar-components.git
cd react-calendar-components
yarn install
yarn start

You should now be able to view the Storybook on your localhost.

Have fun! 😃