JSFiddle - React, Tailwind, and code Playground

HTML

<div class="gantChart">
            <div class="gantChartArea"></div>    
        </div>

CSS

.gantChart {
    width: 90%;
    height:  90vh;
    border: double grey;
	overflow-x:scroll;
}
.gantChartArea{
    background:lightgrey;	
	height:100%;
	position:relative;
}

.gantChartBar{
    background:lightgreen;
	position:absolute;
}

JavaScript

$(document).ready(function(){
	$(document).dblclick(function(){
		if (scale<9) {scale++;} else {scale=0;}
		showScale(scale,chartStartDateF,chartEndDateF);		
	});
	
	var scale=0;
	var daysOfWeek=["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
	var months=["January", "February", "March", "April", "May", "June","July","August","September","October","November","December"];

	var chartStartDateF=new Date("Jan 1, 2013 03:50:00");
	var chartEndDateF=new Date("Jul 1, 2013");

	//список задач
	var activities = [
		{startDate:"Jan 01, 2013 03:50:00",
		endDate:"Jan 01, 2013 07:00:00"},
		{startDate:"Jan 02, 2013 00:00:00",
		endDate:"Jan 03, 2013 00:07:00"},
		{startDate:"Feb 01, 2013",
		endDate:"Feb 28, 2013"},
		{startDate:"Jan 04, 2013",
		endDate:"Apr 3, 2013"}
	];

	
	Date.prototype.getDaysInYear = function(){
	    var y = this.getFullYear();
	    return (y % 4 == 0 && y % 100 != 0 || y % 400 == 0)?366:365;
	}; 
	Date.prototype.getDaysInMonth = function()
	{
	    return arguments.callee[this.getDaysInYear()==366 ? 'L' : 'R'][this.getMonth()];
	};
	// durations of months for the regular year
	Date.prototype.getDaysInMonth.R = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
	// durations of months for the leap year
	Date.prototype.getDaysInMonth.L = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
	

	function monthUnitLength(myDate){		
		var k=24*60*60*1000*myDate.getDaysInMonth()/this.mainUnitMilliSec;		
		var p=this.mainUnitLength*k+(k-1)*1;		
		return Math.round(p);
	}
	function mostUnitLength(myDate){
		var k=this.unitMilliSec/this.mainUnitMilliSec;		
		return Math.round(this.mainUnitLength*k+(k-1)*1);
	}

	function mostPrevNextPeriod(myDate, dir, milliSecPeriod){
		var PeriodDate=new Date("Jan 01, "+myDate.getFullYear()); //пока здесь хранится начало года
		var k=(myDate.getTime()-PeriodDate.getTime())/milliSecPeriod;
		
		if (k-Math.floor(k)==0&&(dir=="prev"||dir=="next")) {						
			PeriodDate.setTime(myDate.getTime());
		}...