JSFiddle - React, Tailwind, and code Playground

by carsont

HTML

<div id="gridcontainer">
  <table id="cal">
    <tbody>
      <tr height="1">
        <td style="width: 60px;"></td>
        <td colspan="1">
          <div class="spanningwrapper">
            <div class="hourmarker">
              <div>
                <div class="dualmarker"></div>
              </div>
              <div>
                <div class="dualmarker"></div>
              </div>
              <div>
                <div class="dualmarker"></div>
              </div>
              <div>
                <div class="dualmarker"></div>
              </div>
              <div>
                <div class="dualmarker"></div>
              </div>
              <div>
                <div class="dualmarker"></div>
              </div>
              <div>
                <div class="dualmarker"></div>
              </div>
              <div>
                <div class="dualmarker"></div>
              </div>
              <div>
                <div class="dualmarker"></div>
              </div>
              <div>
                <div class="dualmarker"></div>
              </div>
              <div>
                <div class="dualmarker"></div>
              </div>
              <div>
                <div class="dualmarker"></div>
              </div>
              <div>
                <div class="dualmarker"></div>
              </div>
              <div>
                <div class="dualmarker"></div>
              </div>
              <div>
                <div class="dualmarker"></div>
              </div>
              <div>
                <div class="dualmarker"></div>
              </div>
              <div>
                <div class="dualmarker"></div>
              </div>
              <div>
                <div class="dualmarker"></div>
              </div>
              <div>
                <div class="dualmarker"></div>
              </div>
              <div>
                <div class="dualmarker"></div>
              </div>
             ...

CSS

html {
  padding: 0;
  margin: 0;
  font-size: 11px;
}

table {
  border-spacing: 0;
  border: 1px solid #ddd;
  width: 100%;
}

tbody {
  vertical-align: middle;
}

td,
tr {
  margin: 0;
  padding: 0
}

#gridcontainer {
  position: relative;
  margin-right: 30px;
}

#today {
  position: relative;
  height: 1008px;
  top: 0;
}

.gutter {
  position: relative;
  width: 100%;
  height: 0;
}

.event {
  position: absolute;
  border: thin solid black;
  width: 100%;
  z-index: 1;
  background-color: #E4EFF8;
  border-color: #9FC6E7;
}

.spanningwrapper {
  position: relative;
}

.hourmarker {
  position: absolute;
  z-index: -1;
  width: 100%;
}

.dualmarker {
  height: 20px;
  margin-bottom: 20x;
  border-bottom: 1px dotted #ddd;
  border-top: 1px solid #ddd;
  font-size: 1px;
}

.hourmarker > div {
  height: 42px;
  border-collapse: separate;
  backround-color: rgba(0, 0, 0, 0);
}

.times {
  border-left: 1px solid #ddd;
}

.times > div {
  height: 41px;
  line-height: normal;
  text-align: right;
  vertical-align: top;
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
  border-collapse: separate;
  background-color: white;
  color: #555;
}

.times > div > span {
  margin-right: 2px;
}

JavaScript

function Calendar() {
  var $cal = $('#today');
  var width = $cal.width();
  var height = $cal.height();

  function ti(val) {
    var hours = Math.floor(val * 24);
    var minutes = Math.round((((val * 24) - Math.floor(val * 24)) * 60) / 15) * 15;
    return ('0' + hours).slice(-2) + ':' + ('0' + minutes).slice(-2);
  }

  return {
    renderEvent: (start, end) => {
      $('<div/>', {
          'class': 'event'
        })
        .css({
          'top': (start * height) + 'px',
          'height': ((end - start) * height) + 'px',
        })
        .text('Event #1: ' + ti(start) + ' - ' + ti(end))
        .appendTo('#today .gutter');
    }
  };
}

var cal = new Calendar();

cal.renderEvent(.32, .95);