React Calendar Component

Forked from https://jsfiddle.net/zinoui/ufew4pck/

by manikantag

HTML

<script src="https://fb.me/react-0.14.7.min.js"></script>
<script src="https://fb.me/react-dom-0.14.7.min.js"></script>
 <div id="calendar" style="max-width: 300px; max-height: 300px"></div>

CSS

.r-calendar{
    background-color: #eee;
    -moz-box-shadow: 0 0 5px #ccc;
    -webkit-box-shadow: 0 0 5px #ccc;
    box-shadow: 0 0 5px #ccc;
    font: normal 15px Helvetica Neue, Helvetica, Arial, sans-serif;
    min-width: 280px;
}
.r-calendar *{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    transition: all 0.3s linear;
}
.r-calendar .r-row{
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    justify-content: center;
}
.r-calendar .r-cell{
    background-color: #ffffff;
    align-items: center;
    display: flex;
    flex-flow: row nowrap;
    flex-grow: 1;
    flex-basis: 0;
    justify-content: center;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.r-calendar .r-head{
    flex-grow: 1;
    flex-basis: 0;
}
.r-calendar .r-prev,
.r-calendar .r-next{
    background-color: #ffffff;
    cursor: pointer;
    outline: none;
}
.r-calendar .r-prev:before,
.r-calendar .r-next:before{
    position: relative;
    top: 0;
    content: "";
    display: inline-block;
    width: 0.6em;
    height: 0.6em;
    border-top: 0.2em solid #222222;
    transform: rotate(-45deg);
}
.r-calendar .r-prev:before{
    border-left: 0.2em solid #222222;
    transform: rotate(-45deg);
    margin-left: 0.3em;
}
.r-calendar .r-prev:hover:before{
    border-left-color: #ffffff;
    border-top-color: #ffffff;
}
.r-calendar .r-next:before{
    border-right: 0.2em solid #222222;
    transform: rotate(45deg);
    margin-right: 0.3em;
}
.r-calendar .r-next:hover:before{
    border-right-color: #ffffff;
    border-top-color: #ffffff;
}
.r-calendar .r-prev:hover,
.r-calendar .r-next:hover{
    background-color: #0066CC;
}
.r-calendar .r-title{
    flex-grow: 5;
    flex-basis: max-content;
}
.r-calendar .r-weekdays{
    flex-grow: 1;
    flex-basis: 0;
}
.r-calendar .r-weekdays .r-cell{
    font-weight:...

JavaScript

/**
 * React Calendar Component v0.1.1
 *
 * Copyright 2016, Dimitar Ivanov
 *
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 */
var Calendar = React.createClass({
    displayName: 'Calendar',
    calc: function (year, month) {
        if (this.state.selectedElement) {
            if (this.state.selectedMonth != month || this.state.selectedYear != year) {
                this.state.selectedElement.classList.remove('r-selected');
            } else {
                this.state.selectedElement.classList.add('r-selected');
            }
        }
        return {
            firstOfMonth: new Date(year, month, 1),
            daysInMonth: new Date(year, month + 1, 0).getDate()
        };
    },
    componentWillMount: function () {
        this.setState(this.calc.call(null, this.state.year, this.state.month));
    },
    componentDidMount: function () {},
    componentDidUpdate: function (prevProps, prevState) {
        if (this.props.onSelect && prevState.selectedDt != this.state.selectedDt) {
            this.props.onSelect.call(this.getDOMNode(), this.state);
        }
    },
    getInitialState: function () {
        var date = new Date();
        return {
            year: date.getFullYear(),
            month: date.getMonth(),
            selectedYear: date.getFullYear(),
            selectedMonth: date.getMonth(),
            selectedDate: date.getDate(),
            selectedDt: new Date(date.getFullYear(), date.getMonth(), date.getDate()),
            startDay: 1,
            weekNumbers: false,
            minDate: this.props.minDate ? this.props.minDate : null,
            disablePast: this.props.disablePast ? this.props.disablePast : false,
            dayNames: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
            monthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
            monthNamesFull: ["January",...