JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

    <head>

        <link rel="Stylesheet" href="gStyle.css" />
        
        <script type="text/javascript" src="gMain.js"></script>
        <script type="text/javascript" language="javascript">

           // Your chart object(s)
            var myChart;
                   
            // Function to hold all chart creation
            function initCharts() {

                myChart = new ganttChart("chart1");
                
                myChart.gAddBar("Dynamic!", "22/3/2010", "3/4/2010");
                
                myChart.gLoadData("Going to the shop*4/3/2010*19/3/2010*Watching TV*9/3/2010*23/3/2010*Watching TV*1/3/2010*23/3/2010*Watching TV*18/3/2010*28/3/2010*END INPUT*1/3/2010*9/3/2010");
                                
                myChart.gDraw();

                myChart.gChangeBarColour(1, "#000000");

            }

        </script>
        
    </head>

    <body onload="initCharts()">


    

        <div id="chart1" class="gContainer">     
        
          
        </div>
        
    </body>

</html>

CSS

/* The outer container for the chart */
div.gContainer
{
    width:700px;
    position:relative;
    left:150px;
}

/* Year pannels wrapper */
div.gYearWrapper{

}

/* Standard year pannel */
div.gYear
{
    -moz-user-select:none;
    -khtml-user-select: none;
    float:left;
    text-align:center;
    font-size:18px;
    font-family:Arial;
    font-weight:bold;
    overflow: hidden;
    padding-top:5px;
    padding-bottom:5px;
}
/* When a month is hovered, the related year pannel goes to this class */
div.gYearHover
{
    background-color:#ffee99;
    border:1px solid #c0c0c0;
    margin-bottom:-1px;
    margin-top:-1px;
    margin-left:-1px;
    margin-right:-1px;
}
/* When the year is hovered, the year pannel goes to this */
div.gYearHoverY
{
    background-color:#ffee99;
}

/* When the years are too short, they go onto two lines, this is the style for top line */
.topDigits
{
    position:relative;
    top:7px;
    color:#c0c0c0;
}

/* Month pannels wrapper */
div.gMonthWrapper{

}
/* Standard month pannel */
div.gMonth
{
    -moz-user-select:none;
    -khtml-user-select: none;
    float:left;
    text-align:center;
    font-size:15px;
    font-family:Arial;
    font-weight:bold;
    overflow: hidden;
    padding-top:5px;
    padding-bottom:5px;
}

/* When the month is hovered, the month pannel goes to this */
div.gMonthHover{
    background-color:#ffee99;
    border-bottom:1px solid #c0c0c0;
    border-left:1px solid #c0c0c0;
    border-right:1px solid #c0c0c0;
    margin-bottom:-1px;
    margin-left:-1px;
    margin-right:-1px;
}

/* When the year pannel is hovered, the related month pannels go to this */
div.gMonthHoverY{
    background-color:#ffee99;
}

/* Day pannel wrappers */
div.gDayWrapper{

    border:1px solid #c0c0c0;
    margin-left:-1px;
    margin-right:-1px;
    background-image: url(images/daysBG.jpg);

}

/* Standard day pannel */
div.gDay
{
    -moz-user-select:none;
    -khtml-user-select: none;
    float:left;
    text-align:center;
   ...

JavaScript

function ganttChart(gContainerID) {

    // Settings
    var gDefaultBarColor = "#6699FF";

    // Properties of gantt chart
    this.gParseChar = "*";                                      // Character to parse data on
    this.gContainer = document.getElementById(gContainerID);    // The container the chart is built inside
    this.gDebugPannel;                                          // Debug pannel
    this.gContainerLeft; this.gContainerTop;                    // Dimensions of pannel etc.
    this.gContainerWidth; this.gContainerHeight;
    this.gData = new Array();
    this.gDataCells = 3;                                        // Number of cells in each data row
    this.gMinDate = new Date("1900","0","1");                   // The earliest date found
    this.gMaxDate = new Date("1900", "0", "1");                 // The latest date found
    this.gColours = new Array();                                // Holds bar colours
    this.gTotalRows = 0;
    this.gDisplayFrom = "";
    this.gDisplayTo = "";
    this.gCustomDateRange = false;
    this.gMonthsDisplayed = 0;
    this.gYearsDisplayed = 0;
    this.gFirstMonth;
    this.gFirstYear;
    this.gMinYearPannelWidth = 75;                              // How small the year pannel needs to before shrinking to short years
    this.gHasDayPanels = false;
    this.gCurrentDragBar = -1;
    this.gIsDraggingBar = false;
    this.gMouseStartX = 0;
    this.gMouseStartY = 0;
    this.gBarStartX = 0;
    this.gBarStartY = 0;
    this.gBarBeingDragged;
    this.gCurrentMouseX;
    this.gCurrentMouseY;
    this.gIsCurrentlyOverBar = false;
    this.gCurrentlyOverBarID = -1;
    this.gCurrBigDate1 = new Date();
    this.gCurrBigDate2 = new Date();
    
    // Initialise
    this.gContainerLeft = this.gContainer.offsetLeft;
    this.gContainerTop = this.gContainer.offsetTop;
    this.gContainerWidth = this.gContainer.offsetWidth;
    this.gContainerHeight = this.gContainer.offsetHeight;

    // Given a position get the...