A cross-platform React calendar component

• Flexbox layout
• Inline styles using styled-components 💅
• Theming support
• Localisation support
• Storybook browsing
• Monorepo project structure
• React Native component (coming soon)

This project is organised into multi-package repositories, a.k.a monorepo.

Lerna is the tool used to create and manage this monorepo.

1. First, clone the repo, then install all the package dependencies and link any cross-dependencies using the lerna bootsrap command:

git clone https://github.com/johnwakley/react-calendar
cd react-calendar
yarn install
yarn bootstrap

2. Preview the calendar component using Storybook

cd packages/react-calendar
yarn storybook

Run lint, flow, unit and snapshot tests across all packages (execute from root package level)

yarn test

Theming support is provided by styled-components ThemeProvider wrapper

Use the default theme structure defined in /packages/react-calendar/src/themes/ical.js as the basis for custom styles.

Supported locales are listed here: https://github.com/moment/moment/tree/develop/locale

To display the calendar for a specific locale, pass the locale value to the locale prop of either the CalendarYear or CalendarMonth component.