<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="hidden-xs col-sm-2 col-md-2 day-legend"> <div class="day"> Monday </div> <div class="day"> Tuesday </div> <div class="day"> Wednesday </div> <div class="day"> Thursday </div> <div class="day"> Friday </div> </div> <div class="hidden-sm hidden-md hidden-lg col-xs-1"> <div class="day"> M </div> <div class="day"> T </div> <div class="day"> W </div> <div class="day"> T </div> <div class="day"> F </div> </div> <div class="col-sm-10 col-sm-offset-1 col-md-6 col-md-offset-3"> <div class="timesheet"> <div class="legend"> <div class="item"> <h4>Early Morning</h4> </div> <div class="item"> <h4>Morning</h4> </div> <div class="item text-right"> <h4>Afternoon</h4> </div> <div class="item text-right"> <h4>Evening</h4> </div> </div> <div class="chart clearfix"> <div class="day"> <div class="bar" data-starttime="9:00" data-endtime="10:00"> <span class="start-time">9:00</span> <span class="end-time">10:00</span> </div> <div class="bar" data-starttime="10:15" data-endtime="11:30"> <span class="start-time">10:15</span> <span class="end-time">11:30</span> </div> <div class="bar" data-starttime="12:30" data-endtime="15:30"> <span class="start-time">12:30</span> <span class="end-time">15:30</span> </div> <div class="bar" data-starttime="15:30" data-endtime="18:30"> <span class="start-time">15:30</span> <span class="end-time">18:30</span> </div> </div> <div class="day"> <div class="bar" data-starttime="1:00" data-endtime="5:00"> <span class="start-time">1:00</span> <span class="end-time">5:00</span> </div> <div class="bar" data-starttime="10:15" data-endtime="11:30"> <span class="start-time">10:15</span> <span class="end-time">11:30</span> </div> <div class="bar" data-starttime="22:30" data-endtime="23:30"> <span class="start-time">22:30</span> <span class="end-time">23:30</span> </div> </div> <div class="day"> <div class="bar" data-starttime="1:00" data-endtime="5:00"> <span class="start-time">1:00</span> <span class="end-time">5:00</span> </div> <div class="bar" data-starttime="10:15" data-endtime="11:30"> <span class="start-time">10:15</span> <span class="end-time">11:30</span> </div> <div class="bar" data-starttime="22:30" data-endtime="23:30"> <span class="start-time">22:30</span> <span class="end-time">23:30</span> </div> </div> <div class="day"> <div class="bar" data-starttime="1:00" data-endtime="5:00"> <span class="start-time">1:00</span> <span class="end-time">5:00</span> </div> <div class="bar" data-starttime="10:15" data-endtime="11:30"> <span class="start-time">10:15</span> <span class="end-time">11:30</span> </div> <div class="bar" data-starttime="22:30" data-endtime="23:30"> <span class="start-time">22:30</span> <span class="end-time">23:30</span> </div> </div> <div class="day"> <div class="bar" data-starttime="1:00" data-endtime="5:00"> <span class="start-time">1:00</span> <span class="end-time">5:00</span> </div> <div class="bar" data-starttime="10:15" data-endtime="11:30"> <span class="start-time">10:15</span> <span class="end-time">11:30</span> </div> <div class="bar" data-starttime="22:30" data-endtime="23:30"> <span class="start-time">22:30</span> <span class="end-time">23:30</span> </div> </div> </div> </div> </div> </div> </div>

body { background-color: #f2f2f2; color: #000; font-family: 'Roboto', sans-serif; } .timesheet { position:relative; width:100%; margin-top: 15px; } .row > .day-legend > .day { position: relative; width: 100%; height: 40px; margin-bottom: 10px; } /* legend */ .timesheet > .legend { position: absolute; bottom: 0; left: 0; width: 100%; height: 40px; margin-bottom: -45px; border-top: 1px solid #000; } .timesheet > .legend > .item { position: relative; display: inline-block; float: left; width: 25%; } .timesheet > .legend > .item:before { display: block; position: absolute; top: 0; left: 0; content: ''; width: 1px; height: 8px; background-color: #000; margin-top: -8px; } .timesheet > .legend > .item.text-right:before { right: 0; left: auto; } .timesheet > .legend > .item h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; } /* /legend */ .timesheet > .chart { position:relative; width:100%; } .timesheet > .chart > .day { position: relative; width: 100%; height: 40px; margin-bottom: 10px; color: #fff; background-color:#446DC1; /* break colour */ } .timesheet > .chart > .day > .bar { position: absolute; width:60px; height:100%; background-color:#43C159; /* work colour */ } .timesheet > .chart > .day > .bar > .start-time { font-size:8pt; } .timesheet > .chart > .day > .bar > .start-time::after { content:"-"; } .timesheet > .chart > .day > .bar > .end-time { font-size:8pt; }

$(document).ready(function() { drawChart(); $(window).resize(function() { drawChart(); }); function drawChart() { $('.timesheet').find('.bar').each(function() { var bar = $(this); var startMins = convertTimeToMins(bar.data('starttime')); var endMins = convertTimeToMins(bar.data('endtime')); var totalMins = endMins - startMins; //1440 = 24 * 60 var dayWidth = bar.parent().width(); var minWidth = dayWidth / 1440; bar.css('width', minWidth * totalMins); bar.css('left', minWidth * startMins); }); } function convertTimeToMins(time) { var colonPos = time.indexOf(':'); var mins = (+time.substring(0, colonPos) * 60) + +time.substring(colonPos + 1); return mins; } });