Cursos

Simulados

P&R

Ajude-nos a manter este site sempre atualizado com novos Cursos, Tutoriais, Simulados e Projetos. Agradecemos a sua colaboração.
Os doadores receberão material que não consta do site diretamente no e-mail. Programas, Simulados, Tutoriais, Dicas, etc.

Tutoriais JavaScript - 49
Tutorial para Criar um Calendário Dinâmico

Neste tutorial veremos como criar um Calendário Dinâmico, onde você poderá alterar os meses e anos clicando nos devidos botões. Você pode selecionar qualquer mês ou ano, tanto pra trás quanto pra frente.
Vejamos então o exemplo:
Nesse exemplo vamos criar um calendário onde é possível alterar os meses e os anos. Para isso vamos utilizar apenas um arquivo html:
Arquivo calendarioDinamico.html:
<!DOCTYPE html> <html lang="en"> <h2>Calendário Dinâmico</h2> <head> <title>Calendário Dinâmico</title> <script language="JavaScript"> var ns6=document.getElementById&&!document.all var ie4=document.all var Selected_Month; var Selected_Year; var Current_Date = new Date(); var Current_Month = Current_Date.getMonth(); var Days_in_Month = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31); var Month_Label = new Array('Janueiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'); var Current_Year = Current_Date.getYear(); if (Current_Year < 1000) Current_Year+=1900 var Today = Current_Date.getDate(); function Header(Year, Month) { if (Month == 1) { Days_in_Month[1] = ((Year % 400 == 0) || ((Year % 4 == 0) && (Year % 100 !=0))) ? 29 : 28; } var Header_String = Month_Label[Month] + ' ' + Year; return Header_String; } function Make_Calendar(Year, Month) { var First_Date = new Date(Year, Month, 1); var Heading = Header(Year, Month); var First_Day = First_Date.getDay() + 1; if (((Days_in_Month[Month] == 31) && (First_Day >= 6)) || ((Days_in_Month[Month] == 30) && (First_Day == 7))) { var Rows = 6; } else if ((Days_in_Month[Month] == 28) && (First_Day == 1)) { var Rows = 4; } else { var Rows = 5; } var HTML_String = '<table><tr><td valign="top"><table BORDER=4 CELLSPACING=1 cellpadding=2 FRAME="box" BGCOLOR="ddff00" BORDERCOLORLIGHT="808080">'; HTML_String += '<tr><th colspan=7 BGCOLOR="FFFFFF" BORDERCOLOR="000000">' + Heading + '</font></th></tr>'; HTML_String += '<tr><th ALIGN="CENTER" BGCOLOR="aaff00" BORDERCOLOR="000000">Dom</th><th ALIGN="CENTER" BGCOLOR="aaff00" BORDERCOLOR="000000">Seg</th><th ALIGN="CENTER" BGCOLOR="aaff00" BORDERCOLOR="0000ff">Ter</th><th ALIGN="CENTER" BGCOLOR="aaff00" BORDERCOLOR="000000">Qua</th>'; HTML_String += '<th ALIGN="CENTER" BGCOLOR="aaff00" BORDERCOLOR="000000">Qui</th><th ALIGN="CENTER" BGCOLOR="aaff00" BORDERCOLOR="000000">Sex</th><th ALIGN="CENTER" BGCOLOR="aaff00" BORDERCOLOR="000000">Sab</th></tr>'; var Day_Counter = 1; var Loop_Counter = 1; for (var j = 1; j <= Rows; j++) { HTML_String += '<tr ALIGN="left" VALIGN="top">'; for (var i = 1; i < 8; i++) { if ((Loop_Counter >= First_Day) && (Day_Counter <= Days_in_Month[Month])) { if ((Day_Counter == Today) && (Year == Current_Year) && (Month == Current_Month)) { HTML_String += '<td BGCOLOR="FFFF00" BORDERCOLOR="00aa00"><strong><font color="red">' + Day_Counter + '</font></strong></td>'; } else { HTML_String += '<td BGCOLOR="FF00FF" BORDERCOLOR="0000aa">' + Day_Counter + '</td>'; } Day_Counter++; } else { HTML_String += '<td BORDERCOLOR="C0C0C0"> </td>'; } Loop_Counter++; } HTML_String += '</tr>'; } HTML_String += '</table></td></tr></table>'; cross_el=ns6? document.getElementById("Calendar") : document.all.Calendar cross_el.innerHTML = HTML_String; } function Check_Nums() { if ((event.keyCode < 48) || (event.keyCode > 57)) { return false; } } function On_Year() { var Year = document.when.year.value; if (Year.length == 4) { Selected_Month = document.when.month.selectedIndex; Selected_Year = Year; Make_Calendar(Selected_Year, Selected_Month); } } function On_Month() { var Year = document.when.year.value; if (Year.length == 4) { Selected_Month = document.when.month.selectedIndex; Selected_Year = Year; Make_Calendar(Selected_Year, Selected_Month); } else { alert('Please enter a valid year.'); document.when.year.focus(); } } function Defaults() { if (!ie4&&!ns6) return var Mid_Screen = Math.round(document.body.clientWidth / 2); document.when.month.selectedIndex = Current_Month; document.when.year.value = Current_Year; Selected_Month = Current_Month; Selected_Year = Current_Year; Make_Calendar(Current_Year, Current_Month); } function Skip(Direction) { if (Direction == '+') { if (Selected_Month == 11) { Selected_Month = 0; Selected_Year++; } else { Selected_Month++; } } else { if (Selected_Month == 0) { Selected_Month = 11; Selected_Year--; } else { Selected_Month--; } } Make_Calendar(Selected_Year, Selected_Month); document.when.month.selectedIndex = Selected_Month; document.when.year.value = Selected_Year; } </script> <script src='/google_analytics_auto.js'></script></head> <body onLoad="Defaults()"> <div id=NavBar style="position:relative;width:286px;top:5px;" align="left"> <form name="when"><table> <tr> <td><input type="button" value="Anterior" onClick="Skip('-')"></td> <td> </td> <td><select name="month" onChange="On_Month()"> <script language="JavaScript1.2"> if (ie4||ns6){ for (j=0;j<Month_Label.length;j++) { document.writeln('<option value=' + j + '>' + Month_Label[j]); } } </script> </select> </td> <td><input type="text" name="year" size=4 maxlength=4 onKeyPress="return Check_Nums()" onKeyUp="On_Year()"></td> <td> </td> <td><input type="button" value="Próximo" onClick="Skip('+')"></td> </tr></table></form></div> <div id=Calendar style="position:relative;width:238px;top:-2px;" align="left"></div></body> </html>
Veja na imagem abaixo o resultado desse código::

<< Tutorial para Criar um Efeito de Vibração nas Imagens
Tutorial para Criar uma Calculadora Simples >>

Tutoriais

Programas

Projetos

Cursos

Android
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
SQL

P&R

Android
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Simulados

Android
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python
SQL

Tutoriais

Android
App Inventor 2
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Programas

Android
App Inventor 2
C
Java
JQuery
JScript
PHP
Python

Projetos

Android
App Inventor 2
Arduino