Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

kioshy

Calendário

Por , em Javascript

Recommended Posts

kioshy    0

kioshy
Postado

Salve galera!

 

Para todos aqueles que tem problemas em ficar configuranda data ai vai um script para criar um calendario.

 

<% Session.LCID = 1033 %><html><head><title>Calendário</title><meta http-equiv="Content-Type" content="no-cache"><meta http-equiv="Expires" content="0"><style type="text/css"><!--	body{  font-family: Verdana, sans-serif;  font-size: 10px;	}	.linkDias{    font-family: Verdana, sans-serif;  font-size: 10px;  color: #7F7B7B;	}	a.linkDias:link {  font-family: Verdana, sans-serif;  font-size: 10px;  color: #7F7B7B;  text-decoration: none;	}	a.linkDias:visited {  font-family: Verdana, sans-serif;  font-size: 10px;  color: #7F7B7B;  text-decoration: none;	}	a.linkDias:hover {  font-family: Verdana, sans-serif;  font-size: 10px;  color: #36738D;  text-decoration: underline;	}	a.linkDias:active {  font-family: Verdana, sans-serif;  font-size: 10px;  color: #7F7B7B;  text-decoration: none;	}		.CxTxt{  font-family: Verdana, sans-serif;  font-size: 10px;  color: #2B5582;  font-weight: normal;  border: 1px solid #7F9DBD;	}	.FundoTabCalendario{  background-attachment: fixed;  background-color: #FFFFFF;  background-image: url(imgsCalendario/fundo.jpg);  background-repeat: repeat-x;  background-position: top;	}	.tdDias{  font-family: Verdana, sans-serif;  font-size: 10px;  color: #7F7B7B;   text-align:center;	}	.DiaSemana{  font-family: Verdana, sans-serif;  font-size: 10px;  color: #336699;  text-align:center;	}--></style><script>	function NavCalendar(Quando){  var Mes, Ano  Hoje = new Date(FormCalendario.Data.value);  switch(Quando){ 	 case "AnoAnterior":    Mes = parseInt(Hoje.getMonth())+1;    Ano = parseInt(Hoje.getFullYear())-1;    break;     	 case "MesAnterior":    Ano = Hoje.getFullYear();    Mes = parseInt(Hoje.getMonth());    break;     	 case "ProximoMes":    Ano = Hoje.getFullYear();    Mes = parseInt(Hoje.getMonth())+2;    break;     	 case "ProximoAno":    Mes = parseInt(Hoje.getMonth())+1;    Ano = parseInt(Hoje.getFullYear())+1;    break;     	 case "ProximosDezAnos":    Mes = parseInt(Hoje.getMonth())+1;    Ano = parseInt(Hoje.getFullYear())+10;    break; 	 case "DezAnosAnteriores":    Mes = parseInt(Hoje.getMonth())+1;    Ano = parseInt(Hoje.getFullYear())-10;    break;  }  FormCalendario.Data.value = Mes + "/" + Hoje.getDate() + "/" + Ano;  Calendario(FormCalendario.Data.value,'FormCalendario.aData');	}			function ShowCalendar(objCampo){  divCalendario.style.left=event.clientX //posição vetorial x do mouse  divCalendario.style.top=event.clientY //posição vetorial y do mouse  if(document.getElementById("divCalendario").style.display=="none"){ 	 Calendario(FormCalendario.Data.value, objCampo); 	 document.getElementById("divCalendario").style.display=""  }else{ 	 document.getElementById("divCalendario").style.display="none";  }	}		function clickDia(dia, mes, ano, objCampo){  document.getElementById("divCalendario").style.display="none";  if(dia<10) dia = "0"+dia;  if(mes<10) mes = "0"+mes;  objCampo.value = dia+"/"+mes+"/"+ano;  FormCalendario.Data.value = mes+"/"+dia+"/"+ano;	}			function Calendario(Data, objCampo){  var Cabecalho="", Dias="", Rodape="";  monthnames = new Array("Jan","Fev","Mar","Abr","Mai","Jun","Jul","Ago","Set","Out","Nov","Dez");  var linkcount=0;  function addlink(month, day, href){ 	 var entry = new Array(3); 	 entry[0] = month; 	 entry[1] = day; 	 entry[2] = href; 	 this[linkcount++] = entry;  }  Array.prototype.addlink = addlink;  linkdays = new Array();  monthdays = new Array(31,28,31,30,31,30,31,31,30,31,30,31);      Data = new Date(Data); 	   thisday=Data.getDay();  thismonth=Data.getMonth();  thisdate=Data.getDate();  thisyear=Data.getYear();  thisyear = thisyear % 100; //para definir o ano mínimo e o ano máximo do calendário  thisyear = ((thisyear < 25) ? (2000 + thisyear) : (1900 + thisyear));  if (	(	(thisyear % 4 == 0) && !(thisyear % 100 == 0)	)	||	(thisyear % 400 == 0)	) monthdays[1]++;  startspaces=thisdate;  while (startspaces > 7) startspaces-=7;  startspaces = thisday - startspaces + 1;  if (startspaces < 0) startspaces+=7;  Cabecalho = ""+    "<table width=\"160\"  border=\"0\" cellpadding=\"0\" cellspacing=\"0\" class=\"FundoTabCalendario\" style=\"border: 1px solid #BBBBBB;\">"+String.fromCharCode(13)+String.fromCharCode(13)+ 	 "<tr>"+String.fromCharCode(13)+String.fromCharCode(13)+     "<td><table width=\"100%\"  border=\"0\" cellspacing=\"0\" cellpadding=\"0\">"+String.fromCharCode(13)+      "<tr>"+String.fromCharCode(13)+   	 "<td><table width=\"100%\"  border=\"0\" cellspacing=\"0\" cellpadding=\"0\">"+String.fromCharCode(13)+      "<tr>"+String.fromCharCode(13)+        "<td width=\"12\" class=\"tdDias\" align=\"left\"><a href=\"#\" onClick=\"NavCalendar('DezAnosAnteriores');\" onMouseOver=\"document.Setas10Esq.src='imgsCalendario/Setas10EsqOver.gif';\" onMouseOut=\"document.Setas10Esq.src='imgsCalendario/Setas10Esq.gif';\"><img src=\"imgsCalendario/Setas10Esq.gif\" alt=\"10 anos anteriores\" name=\"Setas10Esq\" width=\"12\" height=\"16\" border=\"0\" id=\"Setas10Esq\"></a></td>"+String.fromCharCode(13)+        "<td width=\"12\" class=\"tdDias\" align=\"left\"><a href=\"#\" onClick=\"NavCalendar('AnoAnterior');\" onMouseOver=\"document.SetasEsq.src='imgsCalendario/SetasEsqOver.gif';\" onMouseOut=\"document.SetasEsq.src='imgsCalendario/SetasEsq.gif';\"><img src=\"imgsCalendario/SetasEsq.gif\" alt=\"ano anterior\" name=\"SetasEsq\" width=\"9\" height=\"16\" border=\"0\" id=\"SetasEsq\"></a></td>"+String.fromCharCode(13)+        "<td width=\"9\" class=\"tdDias\" align=\"left\"><a href=\"#\" onClick=\"NavCalendar('MesAnterior');\" onMouseOver=\"document.SetaEsq.src='imgsCalendario/SetaEsqOver.gif'\" onMouseOut=\"document.SetaEsq.src='imgsCalendario/SetaEsq.gif'\"><img src=\"imgsCalendario/SetaEsq.gif\" alt=\"mês anterior\" name=\"SetaEsq\" width=\"6\" height=\"16\" border=\"0\" id=\"SetaEsq\"></a></td>"+String.fromCharCode(13)+        "<td align=\"center\" class=\"tdDias\">"+String.fromCharCode(13)+monthnames[thismonth]+" - "+thisyear+"</td>"+String.fromCharCode(13)+        "<td width=\"9\" class=\"tdDias\" align=\"right\"><a href=\"#\" onClick=\"NavCalendar('ProximoMes');\" onMouseOver=\"document.SetaDir.src='imgsCalendario/SetaDirOver.gif'\" onMouseOut=\"document.SetaDir.src='imgsCalendario/SetaDir.gif'\"><img src=\"imgsCalendario/SetaDir.gif\" alt=\"próximo mês\" name=\"SetaDir\" width=\"6\" height=\"16\" border=\"0\" id=\"SetaDir\"></a></td>"+String.fromCharCode(13)+        "<td width=\"12\" class=\"tdDias\" align=\"right\"><a href=\"#\" onClick=\"NavCalendar('ProximoAno');\" onMouseOver=\"document.SetasDir.src='imgsCalendario/SetasDirOver.gif'\" onMouseOut=\"document.SetasDir.src='imgsCalendario/SetasDir.gif'\"><img src=\"imgsCalendario/SetasDir.gif\" alt=\"próximo ano\" name=\"SetasDir\" width=\"9\" height=\"16\" border=\"0\" id=\"SetasDir\"></a></td>"+String.fromCharCode(13)+        "<td width=\"12\" class=\"tdDias\" align=\"right\"><a href=\"#\" onClick=\"NavCalendar('ProximosDezAnos');\" onMouseOver=\"document.Setas10Dir.src='imgsCalendario/Setas10DirOver.gif'\" onMouseOut=\"document.Setas10Dir.src='imgsCalendario/Setas10Dir.gif'\"><img src=\"imgsCalendario/Setas10Dir.gif\" alt=\"10 próximos anos\" name=\"Setas10Dir\" width=\"12\" height=\"16\" border=\"0\" id=\"Setas10Dir\"></a></td>"+String.fromCharCode(13)+      "</tr>"+String.fromCharCode(13)+   	 "</table></td>"+String.fromCharCode(13)+      "</tr>"+String.fromCharCode(13)+      "<tr>"+String.fromCharCode(13)+   	 "<td height=\"18\" background=\"imgsCalendario/FundoDias.jpg\"><table width=\"100%\"  border=\"0\" cellspacing=\"0\" cellpadding=\"0\">"+String.fromCharCode(13)+      "<tr>"+String.fromCharCode(13)+        "<td width=\"3\"></td>"+String.fromCharCode(13)+        "<td width=\"22\" class=\"DiaSemana\" align=\"center\">D</td>"+String.fromCharCode(13)+        "<td width=\"22\" class=\"DiaSemana\" align=\"center\">S</td>"+String.fromCharCode(13)+        "<td width=\"22\" class=\"DiaSemana\" align=\"center\">T</td>"+String.fromCharCode(13)+        "<td width=\"22\" class=\"DiaSemana\" align=\"center\">Q</td>"+String.fromCharCode(13)+        "<td width=\"22\" class=\"DiaSemana\" align=\"center\">Q</td>"+String.fromCharCode(13)+        "<td width=\"22\" class=\"DiaSemana\" align=\"center\">S</td>"+String.fromCharCode(13)+        "<td width=\"22\" class=\"DiaSemana\" align=\"center\">S</td>"+String.fromCharCode(13)+        "<td width=\"3\"></td>"+String.fromCharCode(13)+      "</tr>"+String.fromCharCode(13)+   	 "</table></td>"+String.fromCharCode(13)+      "</tr>"+String.fromCharCode(13)+      "<tr>"+String.fromCharCode(13)+   	 "<td><table width=\"100%\"  border=\"0\" cellspacing=\"0\" cellpadding=\"0\">"+String.fromCharCode(13)+      "<tr>"+String.fromCharCode(13)+	        "<td><table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">"+String.fromCharCode(13)+     	 "<tr>"+String.fromCharCode(13)+         "<td width=\"22\" align=\"center\"></td>"+String.fromCharCode(13)+         "<td width=\"22\" align=\"center\"></td>"+String.fromCharCode(13)+         "<td width=\"22\" align=\"center\"></td>"+String.fromCharCode(13)+         "<td width=\"22\" align=\"center\"></td>"+String.fromCharCode(13)+         "<td width=\"22\" align=\"center\"></td>"+String.fromCharCode(13)+         "<td width=\"22\" align=\"center\"></td>"+String.fromCharCode(13)+         "<td width=\"22\" align=\"center\"></td>"+String.fromCharCode(13)+     	 "</tr>"+String.fromCharCode(13)+     	 "<tr>";	    for (s=0;s<startspaces;s++) { 	 Dias += "<td height=\"13\"> </td>"+String.fromCharCode(13)  }  count=1;  while (count <= monthdays[thismonth]) { 	 for (b = startspaces;b<7;b++) {    linktrue=false;    Dias += "<td class=\"tdDias\"><a href=\"#\" onClick=\"clickDia("+count+","+(parseInt(thismonth)+1)+","+thisyear+","+objCampo+");\" class=\"linkDias\">"    for (c=0;c<linkdays.length;c++) {   	 if (linkdays[c] != null) {      if ((linkdays[c][0]==thismonth + 1) && (linkdays[c][1]==count)) {     	 Dias += "<a href=\"" + linkdays[c][2] + "\">"     	 linktrue=true;      }   	 }    }    if (count==thisdate) {   	 Dias += "<span class=\"DiaSemana\">"    }    if (count <= monthdays[thismonth]) {   	 Dias += count    }else {   	 Dias += " "    }    if (count==thisdate) {   	 Dias += "</span>"    }    if (linktrue){   	 Dias += "</a>"    }    Dias += "</a></td>"+String.fromCharCode(13)    count++; 	 } 	 Dias += "</tr><tr>"+String.fromCharCode(13); 	 startspaces=0;  }    Rodape = "  <tr>"+String.fromCharCode(13)+        "<td height=\"5\"></td>"+String.fromCharCode(13)+        "<td></td>"+String.fromCharCode(13)+        "<td></td>"+String.fromCharCode(13)+        "<td></td>"+String.fromCharCode(13)+        "<td></td>"+String.fromCharCode(13)+        "<td></td>"+String.fromCharCode(13)+        "<td></td>"+String.fromCharCode(13)+      "</tr>"+String.fromCharCode(13)+         	       "</table></td>"+String.fromCharCode(13)+       "<td width=\"2\"></td>"+String.fromCharCode(13)+   	 "</tr>"+String.fromCharCode(13)+   	 "</table>"+String.fromCharCode(13)+   	 "<table width=\"100%\"  border=\"0\" cellspacing=\"0\" cellpadding=\"0\">"+String.fromCharCode(13)+       "<tr>"+String.fromCharCode(13)+      "<td height=\"16\" background=\"imgsCalendario/FundoHoje.jpg\" class=\"tdDias\"><a href=\"#\" onClick=\"Calendario(FormCalendario.DataInicial.value,'FormCalendario.aData');FormCalendario.Data.value=FormCalendario.DataInicial.value;\" class=\"linkDias\">ir para data de hoje</a></td>"+String.fromCharCode(13)+       "</tr>"+String.fromCharCode(13)+   	 "</table>"+String.fromCharCode(13)+   	 "</td>"+String.fromCharCode(13)+      "</tr>"+String.fromCharCode(13)+     "</table></td>"+String.fromCharCode(13)+ 	 "</tr>"+String.fromCharCode(13)+    "</table>";        divCalendario.innerHTML = Cabecalho + Dias + Rodape;	}</script></head><body><div id="divCalendario" style="position:absolute; width:134px; z-index:1; display:none;"></div><form action="" method="post" name="FormCalendario" id="FormCalendario">  <input name="Data" type="hidden" value="<%=date()%>">  <input name="DataInicial" type="hidden" value="<%=date()%>">  <table  border="0" cellspacing="0" cellpadding="0">    <tr>      <td width="75"><input name="aData" type="text" class="CxTxt" style="width:75px;text-align:center;" readonly></td>      <td width="24" align="right"><a href="#" onClick="ShowCalendar('FormCalendario.aData');"><img src="imgsCalendario/Btn_Calendario2.gif" width="20" height="15" border="0" id="IcnCalendario"></a></td>      <td width="260" align="right"><a href="CalendarioPronto.html" class="linkDias"><span class="DiaSemana">Clique aqui para ver o efeito que buscamos </span></a></td>    </tr>  </table>  <br>  <br>  <br>  <table  border="0" cellspacing="0" cellpadding="0">    <tr>       <td width="75">        <input name="bData" type="text" class="CxTxt" style="width:75px;text-align:center;" readonly>      </td>      <td width="24" align="right"><a href="#" onClick="ShowCalendar('FormCalendario.bData');"><img src="imgsCalendario/Btn_Calendario2.gif" width="20" height="15" border="0" id="IcnCalendario"></a></td>      <td width="260" align="right"><a href="CalendarioPronto.html" class="linkDias"><span class="DiaSemana">Clique         aqui para ver o efeito que buscamos </span></a></td>    </tr>  </table></form><%=FormatDateTime(now(),1)%> </body></html>

Ae galera teve um cara aki no fórum q estava pedindo um caledário com esse só não lembro o nome dele e qual era o post dele mas está ai.

 

Bom podem se divetir com o calendário.

 

Flws

Compartilhar este post

Link para o post
Compartilhar em outros sites

kioshy    0

kioshy
Postado

Ops só lembrando a primeira linha é asp então essa pagina deve ser salva como .asp, isso é utilizado pq o calendário utiliza a data em Inglês para se formar.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bart    0

Bart
Postado

Fala galera.... eu sou o cara q tinha postado o calendário.

Coloquei o código que nosso amigo desenvolveu no ar pra quem quiser dar uma olhada.

http://www.agcase.com.br/calendario/newCalendario.html

 

Tem um bug'zinho no link "10 próximos anos" quando você passa do ano 2015.

 

De qualquer maneira, eu consegui aprimorar o que eu tava tentando fazer e ficou bacana também. Se alguém quiser é só me mandar uma mensagem privada aki pelo fórum ou então pedir pelo MSN (brunocbs@msn.com).

 

Valew pela força Kioshy, falow

Compartilhar este post

Link para o post
Compartilhar em outros sites

kioshy    0

kioshy
Postado

e ai bart certinho???bom sobre o erro q você falou, na verdade o que acontece no script existe uma parte que estipula um limitenesta parte aqui: thisyear = thisyear % 100; //para definir o ano mínimo e o ano máximo do calendário thisyear = ((thisyear < 25) ? (2000 + thisyear) : (1900 + thisyear));Esta função permite apenas que seja utilizado 100 anos de diferença, ou seja, se neste ponto (thisyear < 25) eu alterar o 25 para 50 o calendário irá iniciar no ano de 1950 e terminar em 2049.ou quer dizer isso não é bug, simplismente ele só usa 100 anos.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito