react-md-calendar

React Component Material Design Calendar.

Screenshots

base look

selection

no header

horizontal

Installation

yarn add react-md-calendar

Options

The current list of propTypes.

• locale (String) - the locale [en, es]
• 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-md-material';
 
ReactDOM.render(
  <Calendar
    locale="en"
    accentColor={'blue'}
    orientation={'flex-col'}
    showHeader={false}
    onDatePicked={(d) => {
      console.log('onDatePicked', d);
    }}/>,
  document.getElementById('root')
);
 

This is a fork from: https://github.com/icarus-sullivan/react-calendar-material