JSFiddle - React, Tailwind, and code Playground

Calendar

by Ttt Yyy

HTML

<div class='calendar'>
  <div class='labels'>
    <div class='label'>
      0
    </div>
     <div class='label'>
      5
    </div>
     <div class='label'>
      10
    </div>
     <div class='label'>
      15
    </div>
     <div class='label'>
      20
    </div>
  </div>
  <div class='meetings'>
  
  </div>
</div>

CSS

.calendar {
  display: flex;
  position: relative;
}

.label {
  height: 50px;
  border-top: 1px solid black
}

.meetings {
  /* margin-top: 5px; */
  /* display: flex; */
  /* flex-wrap: wrap; */
  /* width: 100px; */
  position: relative;
}

.meeting {
  /* position: relative; */
  position: absolute;
  border: 1px solid blue;
  /* flex: 1 0 auto; */
  /* width: 100%; */
  width: 100px;
}

JavaScript

let meetings = [
{name: 'meeting0', start: 0, end: 5},
{name: 'meeting1', start: 5, end: 15}, 
{name: 'meeting2', start: 10, end: 20}]
let meetingsContainer = document.getElementsByClassName('meetings')[0]

const book = (meetings) => {
	const timeBlocks = {
  
  }
  meetings.forEach(meeting => {
  	for(let i = meeting.start; i < meeting.end; i += 5) {
    	/* timeBlocks[i] ? timeBlocks[i]++ : timeBlocks[i] = 1; */
      if(timeBlocks[i] != null) {
      	timeBlocks[i].concurrent++;
      } else {
      	timeBlocks[i] = {concurrent: 1, count: 0}
      }
    }
  })
  
	meetings.forEach(meeting => {
  	let concurrentMeetings = 1;
    let count = 0;
  	for(let i = meeting.start; i < meeting.end; i+=5) {
 /*    	concurrentMeetings = Math.max(timeBlocks[i].concurrent, concurrentMeetings) */
      if(timeBlocks[i].concurrent > concurrentMeetings) {
      	concurrentMeetings = timeBlocks[i].concurrent;
        count = timeBlocks[i].count++;
      }
    }
  	let meet = document.createElement('div');
    meet.className = 'meeting';
    meet.innerHTML = meeting.name;
    meet.style.height = `${(meeting.end - meeting.start)*10}px`
    meet.style.top = `${meeting.start*10}px`
    meet.style.width = `${100/concurrentMeetings}px`
    meet.style.left = `${count*100/concurrentMeetings}px`
    meetingsContainer.appendChild(meet);
  })
}

book(meetings);