react-numpad-calendar v0.1.1

React calendar

A calendar for React. It's written with the extensibility in mind. The idea of this project is to cover the majority of input types in a form.

Installation

To use React-Calendar, install it from NPM and include it in your own React build process (using Webpack, etc).

npm install --save react-numpad-calendar

At this point you can import react-numpad-calendar in your application

import Calendar from 'react-numpad-calendar';

Usage

React-Calendar generates an input field containing the selected value, so you can submit it as part of a standard form. You can also listen for changes with the onChange event property. When the value is changed, onChange(selectedValue) will fire.

Following the higher-order component technique, is possible to create new components by simply overriding few common properties.

Calendar.Date

CurrentDate must be provided as moment date. The default value is the local current date time.

<Calendar.Date 
      onChange={(value) => console.log('changed', value)}
      label={'Data di nascita'}
      locale='it'
      dateFormat='DD.MM.YYYY' />

Properties

Themes

There are themes available you can choose from. If none is defined through props, a default theme is used. Any css style is customizable using styled components. To install style components

    npm install styled-components

Usage example

    import styled from 'styled-components';
    import {NumPad} from 'react-numpad';    

    const Styled = styled(NumPad)`
        ${InputField} {
            background: red;
        }
    `

Demo / Examples

Developing

Here's a brief intro about what a developer must do in order to start developing the project further:

git clone https://github.com/gpietro/react-calendar
cd react-calendar/
npm install
npm start
npm run storybook

Visit localhost:6006 to see the NumPad components available so far. Storybook is helpful during development to see how the components behaves and looks.

Build

npm run build

A bundle will be created in the dist directory.

Contribute

If you'd like to contribute, please fork the repository and use a feature branch. Pull requests are warmly welcome.

See our CONTRIBUTING.md for information on how to contribute.

License

MIT Licensed. Copyright (c) Pietro Ghezzi 2018.