JSFiddle - React, Tailwind, and code Playground

by sungsoonz

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="timesheet">

</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
body {
  font-family: 'Open Sans', sans-serif; 
  padding: 30px;
  margin: 0;
  background: #fff;
}
table {
  border-spacing: 0;
}
button {
  outline: 0;
}
#timesheet_nav .btn-toggle .btn:focus {
  outline: 0;
}
#timesheet_nav .btn-toggle .active {
  background: #0E68C5;
  border-color: #0E68C5;
  color: #fff;
  box-shadow: none;
}
#timesheet_nav .active-date {
  font-size: 15px;
  font-weight: 600;
}
#datepicker_toggle {
  background: none;
  border: none;
  margin-right: 4px;
  color: #999;
}
#datepicker_toggle .fa {
  font-size: 16px;
}
#prev_date,
#next_date,
#prev_month, 
#next_month {
  background: none;
  border: 0;
  border: 1px solid #ddd;
  border-radius: 2px;
  margin: 0 20px;
  height: 34px;
  width: 34px;
  line-height: 1;
}
#prev_date .fa,
#next_date .fa,
#prev_month .fa, 
#next_month .fa {
  font-size: 20px;
}
#datepicker {
  margin-bottom: 30px;
  margin-top: 10px;
}
#datepicker table {
  margin: 0 auto;
  border-collapse: collapse;
}
#datepicker table td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
  font-size: 12px;
  vertical-align: top;
}
#timesheet_nav,
#timesheet_header,
#timesheet_cell {
  position: relative;
}
#timesheet_header {
  clear: both;
}
#timesheet_header > div {
  display: table;
  table-layout: fixed;
  border-spacing: 0;
  border-collapse: separate;
  margin: 0 auto;
}
#timesheet_header > div > div {
  display: table-cell;
  text-align: center;
  font-size: 12px;
  vertical-align: middle;
  border-left: 1px solid #ddd;
  border-top: 1px solid #ddd;
  width: 60px;
  padding: 4px 0;
}
#timesheet_header > div > div:last-child {
  border-right: 1px solid #ddd;
}
#event_canvas {
  min-height: 40px !important;
  background: #fff !important;
  position: relative;
}
.event {
  position: absolute;
  top: 7px;
  height: 26px;
  background: rgba(36, 169, 104, 0.75);
}
.event .title {
  color: #fff;
  font-size: 12px;
  line-height: 2.1;
  left: 10px;
 ...

JavaScript

var datepicker,
    d = new Date(),
		months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
		year = d.getFullYear(),
    month = d.getMonth()+1,
    date = d.getDate();
 

function next_date() {
	d.setDate(d.getDate()+1);
  year = d.getFullYear();
  month = d.getMonth()+1;
  date = d.getDate();
  timesheet = new Timesheet(dataSource);
}

function prev_date() {
	d.setDate(d.getDate()-1);
  year = d.getFullYear();
  month = d.getMonth()+1;
  date = d.getDate();
  timesheet = new Timesheet(dataSource);
}

function next_month() {
  d.setMonth(d.getMonth()+1);
	year = d.getFullYear();
 	month = d.getMonth()+1;
  datepicker = new Datepicker(year,month);
}

function prev_month() {
  d.setMonth(d.getMonth()-1);
	year = d.getFullYear();
 	month = d.getMonth()+1;
  datepicker = new Datepicker(year,month);
}

var Datepicker = function(y, m) {
  this.table = ['<table><tr>']
  this.d = new Date(y,m-1);
  this.create = function() {
  	this.table.push('<td colspan=7><button id="prev_month" onclick="prev_month()"><i class="fa fa-caret-left"></i></button>' + months[m-1] + " " + y + '<button id="next_month" onclick="next_month()"><i class="fa fa-caret-right"></i></button></td></tr><tr><td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td></tr>'); 
  	for (var i=0; i<this.d.getDay(); i++) {
    	this.table.push('<td></td>')
  	}
    while(this.d.getMonth() == m-1) {
    	this.table.push('<td>'+this.d.getDate()+'</td>')
    	if (this.d.getDay() % 7 == 6) {
      	this.table.push('</tr><tr>')
    	}
    	this.d.setDate(this.d.getDate()+1) 
  	}
    for (var i=this.d.getDay(); i<7; i++) {
    	this.table.push('<td></td>')
  	}
  	this.table.push('</tr></table>')
    document.getElementById('timesheet').innerHTML = this.table.join('\n')
  }  
  this.init = function() {
  	this.create()
  }
  this.init()
}

$(document).ready(function() {
  datepicker = new Datepicker(year,month);

});