JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css">
<div class="dayHeaderContainer">
    <div class="dayHeader">Monday</div>
    <div class="dayHeader">Tuesday</div>
    <div class="dayHeader">Wednesday</div>
    <div class="dayHeader">Thursday</div>
    <div class="dayHeader">Friday</div>
</div>
<div class="gantt"></div>

CSS

.gantt {
    width: 600px;
    border: 1px solid #7C7A88;
    background: #B6B7B8;
    padding: 4px;
}
.barWrap {
    margin: 3px;
    height: 30px;
    position: relative;
}
.bar {
    height: 30px;
    width: 0px;
}
.bar .actual {
    float: left;
    position: relative;
    height: 30px;
    background: #009999;
}
.bar .expected {
    float: left;
    height: 30px;
    background: #9E9D9C;
}
.bar.paleblue {
    background: #5CCCCC;
}
.ui-sortable-placeholder {
    height: 30px !important;
}

.dayHeaderContainer {
    width: 600px;
    height: 30px;
    padding: 4px;
}
.dayHeader {
    float: left;
    width: 120px;
    text-align: center;  
}

JavaScript

var UTIL = {
    /* expected input: '2011-09-24T19:08:44Z' */
    cleanDate : function(dirtyDate) {
        var year,
            month,
            day,
            hour,
            minute;
    
        if (dirtyDate.length < 16) {
            return false;
        }
    
        year = dirtyDate.substr(0, 4);
        month = dirtyDate.substr(5, 2);
        day = dirtyDate.substr(8, 2);
        hour = dirtyDate.substr(11, 2);
        minute = dirtyDate.substr(14, 2);
    
        return Date(year, month, day, hour, minute);
    },
    diffDate: function(dateA, dateB) {
        var da, db, diffDate;
        //alert('DateA : ' + new Date(dateA));
        //alert('DateB : ' + new Date(dateB));
        
        da = new Date(dateA).getTime();
        db = new Date(dateB).getTime();
        alert(da + ' - ' + db);
        try {
            diffDate = da - db;
        } catch (e) {
            return false;
        }
        
        return diffDate;
    }
};

var UTIL = UTIL || {};

var tasks = [
    {
        expected_start: 0,
        expected_end: 300,
        actual_start: 50,
        actual_end: null
    },
    {
        expected_start: 50,
        expected_end: 200,
        actual_start: 50,
        actual_end: 200
    },
    {
        expected_start: 100,
        expected_end: 200,
        actual_start: 100,
        actual_end: 200
    },
    {
        expected_start: 300,
        expected_end: 500,
        actual_start: null,
        actual_end: null
    }
];

var real_tasks = [
    {
        "assigned_date": "2011-09-23T19:08:00Z",
        "closed_date": "",
        "created_at": "2011-09-24T19:08:44Z",
        "expectation_date": "2011-09-25T19:08:00Z",
        "id": 1,
        "name": "Test",
        "opened_date": "2011-09-23T19:08:00Z",
        "updated_at": "2011-09-24T19:08:44Z",
        "user_id": 1
    },
    {
        "assigned_date": "2011-09-24T19:34:00Z",
        "closed_date": "2011-09-28T19:34:00Z",
        "created_at":...