React Calendar Month Component

React Calendar Month Component renders a calendar panel where you can
put individual components on each day cell. It includes basic styling
using flexbox css to layout the elements on the calendar.

Usage

Empty calendar panel

``

`

Calendar panel with daily data

`
const data = {
1: {component: Jane},
3: {component: Jon},
7: {component: Max},
8: {component: Lorraine},
9: {component: Patrick, className: 'today'},
12: {component: Sam},
20: {component: Vera},
23: {component: Loise}
};


`

Calendar panel with custom styling

`
// Styles
.MyMonth { background-color: #ddd; color: black; }
.MyMonth .Week .Day > .Day__number { font-size: 20px; color: #aaa; bottom: 4px; top: auto; }
.MyMonth .Week .EmptyCell { background-color: white; }

// JS

`

Styles

react-calendar-month includes the styling necessary to properly render the month calendar panel. But you have to include it.

`
import 'react-calendar-month/dist/styles.css';
``

Storyboard and code examples

https://ernestofreyreg.github.io/react-calendar-month/

Next

- More tests needed
- Flag to render week day names
- Other ideas, write me at @efreyreg