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>
</div>

CSS

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
body {
  padding: 10px 30px;
  margin: 0;
  background: #fff;
}
#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;
  width: 100%;
}
#timesheet_header > div > div {
  display: table-cell;
  text-align: center;
  font-size: 12px;
  vertical-align: middle;
}
#timesheet_header > div > div:last-child {
  border-right: 1px solid #ddd;
}
#timesheet_header > div > div > div {
  border-left: 1px solid #ddd;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  padding: 4px 0;
}
.event-wrap {
  min-height: 40px !important;
  background: #fff !important;
  position: relative;
}

.event {
  position: absolute;
  min-width: 30px;
  height: 30px;
  background: rgba(150,200,200,.5);
}

#timesheet_cell table {
  background: #fff;
  border-spacing: 0;
  border-collapse: separate;
  table-layout: fixed;
}

#timesheet_cell td {
  height: 40px;
  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 timesheet
var datepicker
var windowsize = $(window).width() - 60;
var records = ["800,830", "1200,1530"]

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



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>')
    	}
    	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>')
  	this.elem.innerHTML = this.table.join('\n')
  }  
}

var Timesheet = function(records, date) {
  this.startHour = 8
  this.endHour = 20
  this.hours = this.endHour - this.startHour + 1
  this.date = new Date().toDateString()
  if (!date === "") {
    this.date = date
  }

  this.nav = ["<div>"]
  this.header = ["<div>"]
  this.cell = ['<div class="event-wrap"><table>']
  this.get_cell_width = function(hours) {
    return Math.ceil(windowsize / hours)
  }
  this.set_size = function() {
    $("#timesheet > div").width(windowsize);
    $("#timesheet_cell table").width(windowsize);
    /*
    $("#timesheet_header > div > div").width(this.get_cell_width(this.hours));
    $("#timesheet_cell td > div").width(this.get_cell_width(this.hours))*/
  }
  this.create = function() {

    // 로그된 시간범위을 정수로 변환
    /*
    for (var i = 0; i < records.length; i++) {
    	records[i]
    }
    */
    for (var i = this.startHour; i <= this.endHour; i++) {
      this.header.push('<div class="' + i + '"><div>' + i + ':00</div></div>')
      this.cell.push('<td class="' + i + '"><div></div></td>')
    }

    this.nav.push("<label>" + this.date + "</label></div>")
...