JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<div id="gantt-holder">
  <div id="gantt">

  </div>
</div>

CSS

body{
  margin: 150px;
}
#gantt-holder{
  margin:0px;
}
#gantt>table>caption{
  background-color: #356db0;
  color: #fff;
  padding:10px;
  text-align: left;
}
#gantt>table {
  font-family: helvetica;
    border-spacing: 0px;
    border: none;
}
#gantt>table>tbody.days-of-week>tr>th {
    background-color: #eee;
    padding: 5px;
    font-weight: bold;
    font-size: 12px;
    width: 50px;
}
#gantt>table>tbody.event-loader>tr>td{
  background-color: #999;
}
#gantt>table>tbody.event-loader>tr>td:empty:before{
  content: "No Events Found";
  display: block;
  color: #666;
  font-size: 21px;
  padding: 20px;
}
#gantt>table>tbody.days-of-week>tr>th.weekend {
    background-color: #80a2cc;
    color: #fff;
}
#gantt>table tr>td {
    background-color: #fff;
    padding: 5px;
    font-size: 12px;
    width: 60px;
    border: solid 1px #eee;
    vertical-align: top;
    position: relative;
}
#gantt>table tr>td>.calendar-events{
    width: 40px;
}
#gantt .gantt-bar{
  border: solid 1px #356db0;
  
  padding: 10px;
  margin-bottom: 4px;
  background-color: #fff;
  position: relative;
}
#gantt .gantt-bar.reminder{
  padding-left: 32px;
}
#gantt .gantt-bar.reminder:before{
    content: "";
    display: block;
    position: absolute;
    top: 8px;
    left: 8px;
    width: 16px;
    height: 16px;
    background-size: 100%;
    background-image:...

JavaScript

window.calendar_element = null;
window.calendar_year = '';
window.calendar_month = '';

function Gantt(elem, year, month, clear){

	if(typeof(clear) == 'undefined'){
  
  	clear = true;
  
  }
	
	window.calendar_element = elem;
	window.calendar_year = year;
	window.calendar_month = month;
	
  var t = this;
  
  t.month_labels = ["January","February","March","April","May","June","July","August","September","October","November","December"];
  t.day_labels = ["M","T","W","T","F","S","S"];
	
	t.getDay = function(date) { // get day number from 0 (monday) to 6 (sunday)
      let day = date.getDay();
      if (day == 0) day = 7; // make Sunday (0) the last day
      return day - 1;
    }
	t.year = year;
	t.mon = month - 1; // months in JS are 0..11, not 1..12
    t.d = new Date(t.year, t.mon);
    
  t.tableStart = '<table><caption>' + t.month_labels[t.mon] + ' ' + year + '</caption><tbody><tr>';

	t.headings = '<tbody class="days-of-week"><tr>';

    t.table = '';

      // spaces for the first row
      // from Monday till the first day of the month
      // * * * 1  2  3  4
      for (let i = 0; i < t.getDay(t.d); i++) {
        //t.table += '<td></td>';
      }
      
      

      // <td> with actual dates
      
      var ll = '';
      var cls = '';
      
      var cellsTotal = 0;
      
      while (t.d.getMonth() == t.mon) {
      
      	ll = t.day_labels[t.getDay(t.d)];
        
        cls = '';
        
        if(ll == 'S'){
        
        	cls = ' class="weekend"';
        
        }
        
        cellsTotal++;
      
      	t.headings += '<th' + cls + '>' + ll + '</th>';
        
        
        t.table += '<td data-date-day="' + t.d.getDate() + '" data-date-month="' + parseInt(t.d.getMonth()+1) + '" data-date-year="' + t.d.getFullYear() + '">' + t.d.getDate() + '<div class="calendar-events"></div></td>';
        
        //if (t.getDay(t.d) % 7 == 6) { // sunday, last day of week - newline
          //t.table += '</tr></tbody><tbody...