JSFiddle - React, Tailwind, and code Playground

by sungsoonz

HTML

<div id="datepicker">
</div>
<div id="timesheet">
  <div id="timesheet_nav"></div>
  <div id="timesheet_header"></div>
  <div id="timesheet_cell">
    <div id="event_canvas"></div>
  </div>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
body {
  font-family: 'Open Sans', sans-serif; 
  padding: 10px 30px;
  margin: 0;
  background: #fff;
}
table {
  border-spacing: 0;
}
#timesheet_nav div {
  text-align: center;
  height: 30px;
}
#timesheet_nav,
#timesheet_header,
#timesheet_cell {
  position: relative;
}
#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;
}
#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;
}
#event_canvas {
  min-height: 40px !important;
  background: #fff !important;
  position: relative;
}
.event {
  position: absolute;
  top: 5px;
  height: 30px;
  background: rgba(27,164,97,0.75);
}
#x_guide {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  padding-top: 12px;
  padding-left: 6px;
  border-left: 1px solid blue;
  font-size: 11px;
}
#timesheet_cell table {
  background: #fff;
  margin: 0 auto;
}
#timesheet_cell td {
  height: 40px;
  width: 60px;
  text-align: center;
  border-left: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  margin: 0;
  padding: 0;
}
#timesheet_cell td:last-child {
  border-right: 1px solid #ddd;
}

JavaScript

var count = 0,
		startX,
    currentX,
    newEventWidth,
    offset,
    newEvent,
    xGuide,
    timesheet,
    datepicker,
    dataSource = { 
      "row": [
        "1",
        "This is a sample description",
        "2016-11-09 10:00:00",
        "2016-11-09 10:30:00"
      ]
    };

/*
var t = dataSource['start'][0].split(/[- :]/);
var d = new Date(Date.UTC(t[0], t[1]-1, t[2], t[3], t[4], t[5]));
*/

$(window).resize(function() {
  //windowsize = $(window).width() - 60;
  //timesheet.set_size()
});

function find_pos(obj) {
    var offsetX = 0;
    if (obj.offsetParent) {
        do {
            offsetX += obj.offsetLeft;
        } while (obj = obj.offsetParent);
        return offsetX;
    } else {
        return false;
    }
}
function get_coords(e) {
    e = e || window.event;
    if (e.pageX) {
        return { 
          x: e.pageX 
         }
    }
    return {
        x: e.clientX + document.body.scrollLeft - document.body.clientLeft
    }
}
function pixel_to_time(x) {
    if(x < 60) {
    	if (x < 10) {
      	return timesheet.startHour + ':' + '' + 0 + x;
      }	
    	return timesheet.startHour + ':' + x;
    }
    var h = Math.floor(x / 60); 
    var m = x % 60; 
    if (m < 10) {
    	return (timesheet.startHour + h) + ':' + '' + 0 + m;
    }
    return (timesheet.startHour + h) + ':' + m;
}
function width_to_time(width) {
    var h = Math.floor(width / 60);          
    var m = width % 60;
    return h + ':' + m
}
  
function time_to_width() {
}


var Datepicker = function(year, month) {
	this.elem = document.getElementById("datepicker")
  this.m = month - 1
  this.d = new Date(year, this.m)
  this.table = ['<table><tr>']
  this.create = function() {
  	for (var i=0; i<this.d.getDay(); i++) {
    	this.table.push('<td></td>')
  	}
    while(this.d.getMonth() == this.m) {
    	this.table.push('<td>'+this.d.getDate()+'</td>')
    	if (this.d.getDay() % 7 == 6) {
      	this.table.push('</tr><tr>')
    	}
   ...