JSFiddle - React, Tailwind, and code Playground

by Muhammad Aref

CSS

.slot {
  position: absolute;
  height: 30px;
  background: red;
}

.group {
  position: absolute;
  top: 0;
  bottom: 0;
  background: cyan;
  opacity: 0.3;
}

JavaScript

var timeSlots = [
	{start: 0, end: 3},
  {start: 1, end: 2},
  {start: 2, end: 4},
  {start: 4, end: 6},
  {start: 4, end: 8},
  {start: 5, end: 6},
  {start: 3, end: 4},
  {start: 0, end: 1},
  {start: 6, end: 9},
  {start: 12, end: 15},
  {start: 14, end: 15}
];

timeSlots.forEach((slot, index) => {
	var slotElem = document.createElement('div');
  
  slotElem.classList.add('slot');
  slotElem.style.top = index * 35 + 'px';
  slotElem.style.left = slot.start * 40 + 'px';
  slotElem.style.width = (slot.end - slot.start) * 40 + 'px';
  
  document.body.appendChild(slotElem);
});

var groups = [];

timeSlots.forEach(slot => {
	added = false;
	
  if (groups.length) {
  	var index = 0;
    
  	do {
      group = groups[index];
      
  		if (slot.start >= group.start && slot.start < group.end ||
          slot.end <= group.end && slot.end > group.start
      ) {
        group.slots.push(slot);

        group.start = Math.min(slot.start, group.start);
        group.end = Math.max(slot.end, group.end);
        
        added = true;
      }
    } while (!added && ++index < groups.length);
    
    if (!added) {
	    groups.push({start: slot.start, end: slot.end, slots: [slot]});
    }
  } else {
  	groups.push({start: slot.start, end: slot.end, slots: [slot]});
  }
})

groups.forEach(group => {
	var groupElem = document.createElement('div');
  
  groupElem.classList.add('group');
  groupElem.style.left = group.start * 40 + 'px';
  groupElem.style.width = (group.end - group.start) * 40 - 2 + 'px';
  
  document.body.appendChild(groupElem);
})