calendar.jsx

// these are labels for the days of the week
var cal_days_labels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];

// these are human-readable month name labels, in order
var cal_months_labels = ['January', 'February', 'March', 'April',
                     'May', 'June', 'July', 'August', 'September',
                     'October', 'November', 'December'];

// these are the days of the week for each month, in order
var cal_days_in_month = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];


var TimeSheet = React.createClass({
    getInitialState: function () {
        return {
            data: new Date()
        };
    },
    handleThisWeek: function(event) {
        this.setState({data: new Date()});
        console.log(this.state.data);
    },
    handlePreviousWeek: function(event) {
        var currentDate = this.state.data;
        currentDate.setDate(currentDate.getDate() - 7);
        this.setState({data: currentDate});
        console.log(currentDate);
    },
    handleNextWeek: function(event) {
        var currentDate = this.state.data;
        currentDate.setDate(currentDate.getDate() + 7);
        this.setState({data: currentDate});
        console.log(currentDate);
    },
  render: function() {
      var date = this.state.data;
      console.log(date);
      var first = date.getDate() - date.getDay(); // First day is the day of the month - the day of the week
      var last = first + 7;
      var month = cal_months_labels[date.getMonth()];
      var year = date.getFullYear();

      var firstday = new Date(date.setDate(first)).toUTCString();
      var lastday = new Date(date.setDate(last)).toUTCString();
      return (
        <div className="row">
            <div className="col-md-12">
                <div className="box">
                    <div className="box-body">
                        <div className="row">
                            <div className="col-md-4">
                                <h2>{ first } - { last } { month } { year }</h2>
                            </div>
                            <div className="col-md-3 bottom">
                                <div className="btn-group" role="group" aria-label="...">
                                    <button type="button" className="btn btn-default" onClick={this.handlePreviousWeek}><i className="fa fa-chevron-left" aria-hidden="true"></i></button>
                                    <button type="button" className="btn btn-default" onClick={this.handleThisWeek}>This Week</button>
                                    <button type="button" className="btn btn-default" onClick={this.handleNextWeek}><i className="fa fa-chevron-right" aria-hidden="true"></i></button>
                                </div>
                            </div>

                            <div className="col-md-2 bottom">
                                <a href="#" className="btn btn-default"><i className="fa fa-calendar" aria-hidden="true"></i></a>
                            </div>
                            <div className="col-md-3 bottom">
                                <div className="btn-group" role="group" aria-label="...">
                                    <a href="#" className="btn btn-default">Day</a>
                                    <a href="#" className="btn btn-default active">Week</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
      );
  }
});

ReactDOM.render(
    <TimeSheet />,
    document.getElementById('my_timesheet')
);