Calendar with MomentJS & ReactJS

A date picker calendar demo using moment.js and ReactJS

by Kevin Mwangi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-range/2.0.3/moment-range.min.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>

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

CSS

body{
    font-size: 13px;
    font-family: Helvetica, sans-serif;
}
.calendar{

}
.calendar__day{
    display: block;
    color: #333;
    text-decoration: none;
    text-align: center;
    padding: 4px;
}
.calendar__day:hover{
    background-color: #eee;
}
.calendar__day--muted{
    color: #999;
}
.calendar__day--selected{
    background-color: #666;
    color: #fff;
}
.calendar__day--selected:hover{
    background-color: #999;
    color: #fff;
}

.calendar__day--today{
    background-color: blue;
    color: #fff;
}
.calendar__day--today:hover{
    background-color: #666;
    color: #fff;
}
.calendar__selected-date{
    display: block;
    text-align: center;
}
.calendar__nav{
    display: block;
    text-decoration: none;
    text-align: center;
    color: #333;
}
.calendar__nav:hover{
    background-color: #eee;
}

JavaScript 1.7

var calendar, endDay, firstDay, firstWeekDay, headerRow, i, j, lastWeekDay, len, len1, month, monthRange, row, startDate, week, weekRange, weeks, year,
  indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };

function get_calendar(year, month){

    startDate = moment([year, month]);
    firstDay = moment(startDate).startOf('month');
    endDay = moment(startDate).endOf('month');
    monthRange = moment.range(firstDay, endDay);
    
    weeks = [];

    monthRange.by('days', function(moment) {
      var ref;
      if (ref = moment.week(), indexOf.call(weeks, ref) < 0) {
        return weeks.push(moment.week());
      }
    });
   
    calendar = [];

    for (i = 0, len = weeks.length; i < len; i++) {
      week = weeks[i];
      if (i > 0 && week < weeks[i-1]){
      	// We have switched to the next year
        
      	firstWeekDay = moment([year, month]).add(1, "year").week(week).day(1);
      	lastWeekDay = moment([year, month]).add(1, "year").week(week).day(7);
      }
      else{
      	firstWeekDay = moment([year, month]).week(week).day(1);
      	lastWeekDay = moment([year, month]).week(week).day(7);
      }
      weekRange = moment.range(firstWeekDay, lastWeekDay);
      calendar.push(weekRange);
    }
	
    return calendar;
}

var Calendar = React.createClass({
	
    getDefaultProps: function(){
    	return {
        	date: moment()
        }
    },
    getInitialState: function(){
    	month = moment().month();
        year = moment().year();
    	return {
        	date: this.props.date,
        	month: month,
            year: year,
        	calendar: get_calendar(year, month)
        }
    },
    setDate: function(day, e){
    	e.preventDefault();
        console.log(day);
    	this.setState({
        	date: day
        })
    },
    nextMonth: function(e){
    	e.preventDefault();
        if (this.state.month == 11){
        	month = 0;
            year =...