Nobody Pays (for) Magazines

    react-calendar-material

    0.1.11 • Public • Published

    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

    Base look

    selection

    Selection

    no header

    No header

    horizontal

    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.

    Install

    npm i react-calendar-material

    DownloadsWeekly Downloads

    12

    Version

    0.1.11

    License

    Apache-2.0

    Unpacked Size

    271 kB

    Total Files

    16

    Last publish

    Collaborators

    • alexey_dmitriev