Skip to content

Instantly share code, notes, and snippets.

@pedroresende
Created May 18, 2016 15:01
Show Gist options
  • Save pedroresende/353f0ac4b58ff838f94dad5e6ceb174f to your computer and use it in GitHub Desktop.
Save pedroresende/353f0ac4b58ff838f94dad5e6ceb174f to your computer and use it in GitHub Desktop.
// 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')
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment