JSFiddle - React, Tailwind, and code Playground
by fizerkhan
HTML
<div class="white">
<div id="timesheet-default"></div>
</div>CSS
.white .timesheet{width:720px;height:292px;margin:0 auto}.white .timesheet{border-top:1px solid rgba(60,60,60,0.3);background-color:#fbfbfb;position:relative}.white .timesheet.color-scheme-default .bubble-default{background-color:RGBA(252, 70, 74, 1)}.white .timesheet.color-scheme-default .bubble-lorem{background-color:RGBA(154, 202, 39, 1)}.white .timesheet.color-scheme-default .bubble-ipsum{background-color:RGBA(60, 182, 227, 1)}.white .timesheet.color-scheme-default .bubble-dolor{background-color:RGBA(244, 207, 48, 1)}.white .timesheet.color-scheme-default .bubble-sit{background-color:RGBA(169, 105, 202, 1)}.white .timesheet.color-scheme-alternative .bubble-default{background-color:#f3552e}.white .timesheet.color-scheme-alternative .bubble-lorem{background-color:#88c33a}.white .timesheet.color-scheme-alternative .bubble-ipsum{background-color:#436ae0}.white .timesheet.color-scheme-alternative .bubble-dolor{background-color:#f4d234}.white .timesheet.color-scheme-alternative .bubble-sit{background-color:#707d86}.white .timesheet .scale{height:100%;position:absolute;top:0;left:0;float:left}.white .timesheet .scale section{float:left;width:59px;color:rgba(50,50,50,0.8);font-family:"Signika Negative";font-size:13px;line-height:24px;font-weight:300;border-left:1px dashed rgba(50,50,50,0.1);height:100%}.white .timesheet .data{margin:28px 0 0 0;padding:0;text-align:left;list-style-type:none;color:rgba(250,250,250,0.8);font-family:"Signika Negative";font-size:13px;overflow:hidden}.white .timesheet .data li{margin:0 0 3px 0;line-height:22px;height:21px;display:block;cursor:pointer;clear:both;position:relative;white-space:nowrap}.white .timesheet .data li:hover .bubble{opacity:1}.white .timesheet .data li .date{color:#797979;font-size:14px}.white .timesheet .data li .label{font-weight:lighter;font-size:14px;padding-left:5px;line-height:21px;color:#333332;white-space:nowrap}.white .timesheet .data li...JavaScript
!function(){"use strict";var Timesheet=function(container,min,max,data){this.data=[],this.year={min:min,max:max},this.parse(data||[]),"undefined"!=typeof document&&(this.container="string"==typeof container?document.querySelector("#"+container):container,this.drawSections(),this.insertData())};Timesheet.prototype.insertData=function(){for(var html=[],widthMonth=this.container.querySelector(".scale section").offsetWidth,n=0,m=this.data.length;m>n;n++){var cur=this.data[n],bubble=this.createBubble(widthMonth,this.year.min,cur.start,cur.end),line=['<span style="margin-left: '+bubble.getStartOffset()+"px; width: "+bubble.getWidth()+'px;" class="bubble bubble-'+(cur.type||"default")+'" data-duration="'+(cur.end?Math.round((cur.end-cur.start)/1e3/60/60/24/39):"")+'"></span>','<span class="date">'+bubble.getDateLabel()+"</span> ",'<span class="label">'+cur.label+"</span>"].join("");html.push("<li>"+line+"</li>")}this.container.innerHTML+='<ul class="data">'+html.join("")+"</ul>"},Timesheet.prototype.drawSections=function(){for(var html=[],c=this.year.min;c<=this.year.max;c++)html.push("<section>"+c+"</section>");this.container.className="timesheet color-scheme-default",this.container.innerHTML='<div class="scale">'+html.join("")+"</div>"},Timesheet.prototype.parseDate=function(date){return-1===date.indexOf("/")?(date=new Date(parseInt(date,10),0,1),date.hasMonth=!1):(date=date.split("/"),date=new Date(parseInt(date[1],10),parseInt(date[0],10)-1,1),date.hasMonth=!0),date},Timesheet.prototype.parse=function(data){for(var n=0,m=data.length;m>n;n++){var...