Submit Search
Upload
Time sheet
•
0 likes
•
657 views
Douglas Lira
Follow
Criando um timesheet com jQuery + FullCalendar + TimerPicker
Read less
Read more
Technology
Design
Report
Share
Report
Share
1 of 4
Download now
Download to read offline
Recommended
JavaScript Dynamic Loading
JavaScript Dynamic Loading
Tomokazu Kiyohara
Discover Service Worker: a few use cases of this upcoming game changer
Discover ServiceWorker
Discover ServiceWorker
Sandro Paganotti
Reklam Planlaması
Reklam Planlaması
Burhan Kadakal
Neste tutorial não pretendo detalhar as tecnologias envolvidas, tentarei explicar o mais breve possível sobre cada um deles e por a mão na massa.
AngularJS com NODE.JS e Socket.IO
AngularJS com NODE.JS e Socket.IO
Douglas Lira
Reklamın Etkinliği
Reklamın Etkinliği
Burhan Kadakal
Advertising History 16292
Advertising History 16292
Burhan Kadakal
Prueba
Prueba
Lorena Gonzales
rdt
rdt
mariona10
Recommended
JavaScript Dynamic Loading
JavaScript Dynamic Loading
Tomokazu Kiyohara
Discover Service Worker: a few use cases of this upcoming game changer
Discover ServiceWorker
Discover ServiceWorker
Sandro Paganotti
Reklam Planlaması
Reklam Planlaması
Burhan Kadakal
Neste tutorial não pretendo detalhar as tecnologias envolvidas, tentarei explicar o mais breve possível sobre cada um deles e por a mão na massa.
AngularJS com NODE.JS e Socket.IO
AngularJS com NODE.JS e Socket.IO
Douglas Lira
Reklamın Etkinliği
Reklamın Etkinliği
Burhan Kadakal
Advertising History 16292
Advertising History 16292
Burhan Kadakal
Prueba
Prueba
Lorena Gonzales
rdt
rdt
mariona10
Uma pequena apresentação desmisficando o AngularJS e algumas dicas na hora de desenvolver qualquer aplicativo.
AngularJS sem medo
AngularJS sem medo
Douglas Lira
A ideia é bem simplesmente criar um componente de busca que seja utilizado com qualquer controller.
Criando um componente de busca com AngularJS
Criando um componente de busca com AngularJS
Douglas Lira
Criar um datepicker, simples, fácil e que possa ser utilizado sem precisar identificar o ID que o mesmo atuará. Então criei uma directive.
Directive com AngularJS - Datepicker
Directive com AngularJS - Datepicker
Douglas Lira
Neste tutorial irei criar uma autenticação utilizando AngularJS e loadOnDemand.
Autenticação com AngularJS e loadOnDemand
Autenticação com AngularJS e loadOnDemand
Douglas Lira
Nada mais do que um simples plug-in para carregar controllers e views sob demanda escrito com AngularJS.
AngularJS com loadOnDemand
AngularJS com loadOnDemand
Douglas Lira
Mude seu jeito de pensar com MongoDB
Mude seu jeito de pensar com MongoDB
Douglas Lira
Criando um menu dinâmico com KendoUI + PHP
Menu dinâmico com kendoUI
Menu dinâmico com kendoUI
Douglas Lira
Tutorial explicando como funciona o Zend_ACL
Plugin zend acl
Plugin zend acl
Douglas Lira
More Related Content
More from Douglas Lira
Uma pequena apresentação desmisficando o AngularJS e algumas dicas na hora de desenvolver qualquer aplicativo.
AngularJS sem medo
AngularJS sem medo
Douglas Lira
A ideia é bem simplesmente criar um componente de busca que seja utilizado com qualquer controller.
Criando um componente de busca com AngularJS
Criando um componente de busca com AngularJS
Douglas Lira
Criar um datepicker, simples, fácil e que possa ser utilizado sem precisar identificar o ID que o mesmo atuará. Então criei uma directive.
Directive com AngularJS - Datepicker
Directive com AngularJS - Datepicker
Douglas Lira
Neste tutorial irei criar uma autenticação utilizando AngularJS e loadOnDemand.
Autenticação com AngularJS e loadOnDemand
Autenticação com AngularJS e loadOnDemand
Douglas Lira
Nada mais do que um simples plug-in para carregar controllers e views sob demanda escrito com AngularJS.
AngularJS com loadOnDemand
AngularJS com loadOnDemand
Douglas Lira
Mude seu jeito de pensar com MongoDB
Mude seu jeito de pensar com MongoDB
Douglas Lira
Criando um menu dinâmico com KendoUI + PHP
Menu dinâmico com kendoUI
Menu dinâmico com kendoUI
Douglas Lira
Tutorial explicando como funciona o Zend_ACL
Plugin zend acl
Plugin zend acl
Douglas Lira
More from Douglas Lira
(8)
AngularJS sem medo
AngularJS sem medo
Criando um componente de busca com AngularJS
Criando um componente de busca com AngularJS
Directive com AngularJS - Datepicker
Directive com AngularJS - Datepicker
Autenticação com AngularJS e loadOnDemand
Autenticação com AngularJS e loadOnDemand
AngularJS com loadOnDemand
AngularJS com loadOnDemand
Mude seu jeito de pensar com MongoDB
Mude seu jeito de pensar com MongoDB
Menu dinâmico com kendoUI
Menu dinâmico com kendoUI
Plugin zend acl
Plugin zend acl
Time sheet
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
Download now