rbc

react-bootstrap-calendar

Calendar component for react using react-bootstrap

Showing:

Popularity

Downloads/wk

8

GitHub Stars

15

Maintenance

Last Commit

7yrs ago

Contributors

0

Package

Dependencies

2

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

React Calendar

Readme

react-bootstrap-calendar

A calendar component with built-in styles for bootstrap

Live demo: http://cdn.rawgit.com/nnarhinen/react-bootstrap-calendar/master/example/index.html Source of demo: example.js

Installation

npm install react-bootstrap-calendar

Usage

Please use only the npm-installed version for now. I'm having troubles building an umdjs bundle: node-browserify/#939

var Calendar = require('react-bootstrap-calendar').Calendar,
    React = require('react');

var daySelected = function(m) {
  // m is a moment object
  alert(m.toString());
};

React.renderComponent(<Calendar onDaySelected={daySelected} />, document.body);

If you need a more "traditional" datepicker you can make one using react-bootstraps <OverlayTrigger> and <Popover>:

var Calendar = require('react-bootstrap-calendar').Calendar,
    React = require('react'),
    ReactBootstrap = require('react-bootstrap'),
    OverlayTrigger = ReactBootstrap.OverlayTrigger,
    Popover = ReactBootstrap.Popover;

var App = React.createClass({
  render: function() {
    return (
        <div>
          <OverlayTrgger trigger="click" overlay={<Popover placement="top"><Calendar /></Popover>}>
            <Button>Open datepicker</Button>
          </OverlayTrigger>
        </div>
        );
  }
});
React.renderComponent(<App />, documen.body);

Author

Niklas Närhinen niklas@narhinen.net

License

The MIT license

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial