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="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>

<!-- Modal -->
<div id="timesheet_modal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">New Timesheet</h4>
      </div>
      <div class="modal-body">
        <div class="row">
						<div class="col-sm-4">
							<div class="form-group">
								<label>Started:</label>
                <input id="started" type="text" class="form-control">
							</div>
						</div>
						<div class="col-sm-4">
							<div class="form-group">
								<label>Ended:</label>
                <input id="ended" type="text" class="form-control">
							</div>
						</div>
					</div>
        <div class="row">
						<div class="col-sm-4">
							<div class="form-group">
								<label>Checklist Step:</label>
								<div>
									<select class="form-control" id="checklist_no" name="checklist_no" selected="selected">
										<option value="1">1 - Letter of engagement</option>
                    <option value="2">2 - Gathering documentation</option>
                    <option value="0">Extra Step</option>
									</select>
								</div>
							</div>
						</div>
						<div class="col-sm-4">
							<div class="form-group">
								<label>Status:</label>
								<div>
									<select class="form-control" id="state_time" name="state_time">
										<option value="P">Work in...

CSS

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
body {
  font-family: 'Open Sans', sans-serif; 
  padding: 10px 30px;
  margin: 0;
  background: #fff;
}
table {
  border-spacing: 0;
}
button {
  outline: 0;
}
.modal-backdrop {
  background: #fff;
}
.modal-footer {
  text-align: left;
}
#timesheet {
  margin: 0 auto;
}
#timesheet div,
#timesheet table,
#timesheet td {
  box-sizing: content-box;
}
#timesheet td {
  padding: 3px;
}
#timesheet_nav {
  margin-bottom: 15px;
}
#timesheet_nav div {
  text-align: center;
}
#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: 7px;
  height: 26px;
  background: rgba(36, 169, 104, 0.75);
}
.event .title {
  color: #fff;
  font-size: 12px;
  line-height: 2.1;
  left: 10px;
  position: absolute;
}
#x_guide {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  padding-left: 6px;
  border-left: 1px solid #1bffdf;
  font-size: 11px;
  line-height: 3.4;
  color: rgba(0,0,0,0.5)
}
#timesheet_cell table {
  background: #fff;
  margin: 0 auto;
}
#timesheet_cell td {
  height: 40px;
  width: 60px;
  text-align: center;
  border-left: 1px solid #ddd;
 ...

JavaScript

var count = 0,
		startX,
    currentX,
    newEvent,
    newEventWidth,
    offset,
    xGuide,
    timesheet,
    datepicker,
    dataSource = { 
      "row": [
        "1", //project step
        "This is a sample description",
        "2016-11-09 10:00:00", //start
        "2016-11-09 10:30:00" //end
      ]
    };
    
var 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();

/*
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]));
*/

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 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(w) {
    var h = Math.floor(w / 60);          
    var m = w % 60;
    if (m < 10) {
    	return h + ':' + '' + 0 + m + ' hrs'
    }
    return h + ':' + m + ' hrs'
}
function...