Your SlideShare is downloading. ×
Time sheet
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Time sheet

310
views

Published on

Criando um timesheet com jQuery + FullCalendar + TimerPicker

Criando um timesheet com jQuery + FullCalendar + TimerPicker

Published in: Technology, Design

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
310
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
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