JSFiddle - React, Tailwind, and code Playground

by Alexey Zakharov

HTML

<script src="https://momentjs.com/downloads/moment-with-locales.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.1/vis.min.css">
<div id="visualization"></div>

CSS

#visualization {
      box-sizing: border-box;
    width: 100%;
    height: 300px;
}
.vis-group {
  /*min-height: 36px;*/
}
.vis-grid {
  background: #fff;
}
.vis-grid.vis-saturday,.vis-grid.vis-sunday {
  background: #f7f8f8;
}

.vis-grid {
  border: 1px solid red;
}
.vis-foreground .vis-group  {
      border-bottom: 1px solid red;
}
.vis-foreground .vis-group:last-child {
  border-bottom: 1px solid red;
}
.vis-nested-group {
  background: #fff;
}
.vis-item.vis-range {
  border: none;
  border-radius: 18px;
  padding: 0 9px;
  color:#fff;
  font-size: 11px;
  top: 50%!important;
  transform: translateY(-50%);
}
/* .vis-label.vis-nested-group {
  min-height:36px;
} */
.succes {
  background: #9dce71;
}
.red{
  background: #ff3a15;
}
.yellow {
  background: #ffd64c;
}
.blue {
  background: #82d3f4;
}

JavaScript

(function(){
  var json = '[\
                { \
                  "id":"1","name":"Отдел документооборота","items":[\
                    {"id":"11","name":"Круг-Тихомирова Елизавета Еливстратовна 1","start":"1493611200000","end":"1494129600000","status":"Подписан"},\
                    {"id":"12","name":"Круг-Тихомирова Елизавета Еливстратовна 2","start":"1493611200000","end":"1494129600000","status":"Отклонен"},\
                    {"id":"13","name":"Круг-Тихомирова Елизавета Еливстратовна 3","start":"1494302400000","end":"1494820800000","status":"Ознакомлен"}\
                  ] \
                },\
                { \
                  "id": "3","name":"Отдел вендорских продуктов","items":[\
                    {"id":"14","name":"Круг-Тихомирова Елизавета Еливстратовна 4","start":"1494907200000","end":"1495944000000","status":"Отклонен"},\
                    {"id":"15","name":"Круг-Тихомирова Елизавета Еливстратовна 5","start":"1494820800000","end":"1495339200000","status":"Подписан"},\
                    {"id":"16","name":"Круг-Тихомирова Елизавета Еливстратовна 6","start":"1495425600000","end":"1496548800000","status":"Подписать до 15.05.17"}\
                  ]\
                }\
              ]';


  var elements = JSON.parse(json);

  var now = moment().minutes(0).seconds(0).milliseconds(0);
  var itemCount = 5;

  // create a data set with groups
  var classes = ['succes', 'red', 'blue', 'yellow'];
  var groups = new vis.DataSet();
  var items = new vis.DataSet();
  for (var i = 0; i < elements.length; i++) {
    var subGroup = [];
    if(elements[i].items.length > 0) {
      for (var j = 0; j < elements[i].items.length; j++) {

        subGroup.push(+elements[i].items[j].id);

        groups.add({
          id: elements[i].items[j].id,
          content: elements[i].items[j].name,
        });

        var start = now.clone().add(2, 'days');
        var end = start.clone().add(2, 'days');
        var randomClass =...