react-calendar-material

This component borrows heavily from the material design of google. While it is not a 1-1 look, it looks very similar to the one used in Android.

Screenshots

base look

selection

no header

horizontal

Installation

npm install --save react-calendar-material

Options

The current list of propTypes.

• accentColor (String) - the theme color of the calendar
• orientation (String) - whether to show the calendar to the right of the header or below it
  • 'flex-row' show the calendar after the date
  • 'flex-col' show the calendar below the date
• showHeader (Boolean) - whether to show the header for the calendar
• onDatePicked (Function) - a callback for when a date is picked

Usage

The following example shows the simplest case with all four props passed into our Calendar component.

import React from 'react';
import ReactDOM from 'react-dom';
import Calendar from 'react-calendar-material';

ReactDOM.render(
  <Calendar
    accentColor={'blue'}
    orientation={'flex-col'}
    showHeader={false}
    onDatePicked={(d) => {
      console.log('onDatePicked', d);
    }}/>,
  document.getElementById('root')
);

Please note, this is not even version 1.0.0 so if you find bugs or want to participate please log bugs to github or fork the repo.