React Easy Calendar

React Easy Calendar demo

by kdepp

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-0.14.6.js"></script>
<script src="https://fb.me/react-dom-0.14.6.js"></script>
<script src="https://cdn.rawgit.com/kdepp/react-easy-calendar/40dec65b1e51abd294360a71cd5dc1124ae40d12/dist/calendar.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript 1.7

var SimpleCalendar = ReactEasyCalendar.SimpleCalendar;
var SingleRangeCalendar = ReactEasyCalendar.SingleRangeCalendar;
var DoubleRangeCalendar = ReactEasyCalendar.DoubleRangeCalendar;
var utils = ReactEasyCalendar.utils;


var Demo = React.createClass({
  render: function() {
    return (
    <div>
    	<div>
    		<h2> Simple Calendar </h2>
        <div className='container'>
        	<SimpleCalendar selectMode = {0} />
        </div>
      </div>
      
      <div>
    		<h2> Single Range Calendar </h2>
        <div className='container'>
        	<SingleRangeCalendar />
        </div>
      </div>
      
      <div>
    		<h2> Double Range Calendar </h2>
        <div className='container'>
        	<DoubleRangeCalendar />
        </div>
      </div>
    </div>
    );
  }
});

ReactDOM.render(
  <Demo />,
  document.getElementById('container')
);