Time sheet

Criando
um
TimeSheetjQuery + FullCalendar + Timepicker
Autor: Douglas Lira

1 – Nível
Básico
2 – Itens utilizados
jQuery – http://www.jquery.com
FullCalendar – http://arshaw.com/fullcalendar/
Timepicker - http://trentrichardson.com/examples/timepicker/
3 – Lógica
Criar um input em cada data e inserir horas de trabalho.

4 – Código
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>FullCalendar - Douglas Lira</title>





<script type="text/javascript">
var hourList = {};
$(document).ready(function(){
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title'
},
dayRender: function(date,element,view) {
var elObj = $(element); dateOther = elObj.hasClass("fc-other-month");
hObj = $("#sumHours");
var fullDate = (date.getDate() < 10 ? "0"+date.getDate()
+"-"+date.getMonth()+"-"+date.getFullYear() : +date.getDate()+"-"+date.getMonth()
+"-"+date.getFullYear());
var contentDate = "<input class='inputCalendarFull' type='text'
name='date_"+fullDate+"' id='date_"+fullDate+"'/>";
hObj.empty().text("00:00");
if(!dateOther) {
elObj.find(".fc-day-content").append(contentDate);
$.each(hourList,function(x,y){
if(x == fullDate) {
$("#date_"+fullDate).val(y);
elObj.css({'background-color':'#75B94E'});
}
});
$('#date_'+fullDate).timepicker({
hourMin: 0,
hourMax: 8,
onSelect: function(datetimeText, datepickerInstance){
var hourB = "00:00";
//-------------------------------------------------------
$('.inputCalendarFull').each(function(){
var hourA = $(this).val(); tempHour = 0; tempHourYear = 0;
newHour = 0; newMin = 0; hora1 = 0; hora2 = 0; minu1 = 0; minu2 = 0;
if(hourA != "") {
hora1 = parseFloat(hourA.split(":")[0]) * 1;
hora2 = parseFloat(hourB.split(":")[0]) * 1;
minu1 = parseFloat(hourA.split(":")[1]) * 1;
minu2 = parseFloat(hourB.split(":")[1]) * 1;
tempHour = minu1 + minu2;
while(tempHour > 59) {
newHour++;
tempHour = tempHour – 60;
}
newMin = tempHour.toString().length == 1 ? "0"+tempHour :
tempHour;
tempHour = hora1 + hora2 + newHour;
while(tempHour > 23 & false) {
tempHour = tempHour – 24;

}
newHour = tempHour.toString().length == 1 ? "0"+tempHour :
tempHour;
hourB = newHour + ":" + newMin;
elObj.css({'background-color':'#75B94E'});
}
});
//-------------------------------------------------------
hObj.text(hourB);
if(datetimeText == "00:00") {
delete hourList[fullDate];
if(elObj.hasClass("fc-today")) {
elObj.css({'background-color':'#FCF8E3'});
} else {
elObj.css({'background-color':'#FFFFFF'});
}
$(this).val("");
} else {
hourList[fullDate] = datetimeText;
}
console.log(hourList);
}
});
}
}
});
});
</script>

<style type="text/css">
body {
margin-top: 40px;
text-align: center;
font-size: 13px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
.inputCalendarFull {
width: 105px;
}
#calendar {
width: 800px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="calendar"></div>
<div id="sumHoursCalendar">
<p>Total de horas no mês: <span id="sumHours">00:00</span></p>
</div>
</body>
</html>
Bom... Tá ai agora é só implementar ideias e melhorias. “)
douglas.lira.web@gmail.com

Time sheet

Recomendados

Recomendados

Más contenido relacionado

Más de Douglas Lira

Más de Douglas Lira (8)

Time sheet