Time sheet

  • 278 views
Uploaded on

Criando um timesheet com jQuery + FullCalendar + TimerPicker

Criando um timesheet com jQuery + FullCalendar + TimerPicker

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
278
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
3
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Criando um TimeSheetjQuery + FullCalendar + Timepicker Autor: Douglas Lira
  • 2. 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.
  • 3. 4 – Código <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>FullCalendar - Douglas Lira</title> <!-- CSS --> <!-- incluir os CSS --> <!-- JS --> <!-- incluir os javascripts --> <!-- --> <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;
  • 4. } 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 --> <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