"Timesheet (needs work)"
Bootstrap 3.3.0 Snippet by icepicker

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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%;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
$(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;
}
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Rubik Presentation Page

Questions / Comments: