Ir para conteúdo

POWERED BY:

Arquivado

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

Daniel Emiliano

Como validar e formatar esse calendario em java script ?

Por , em Desenvolvimento frontend

Recommended Posts

Daniel Emiliano    0

Daniel Emiliano
Postado

Olá pessoal, olha eu aqui novamente com uma duvida.

Desculpa se to enxendo o saco, é que é primeira vez que to tentando fazer um site validado, e estou encontrando problemas.

Dessa fez meu problema é o seguinte:

No site que estou fazendo, preciso colocar um calendario.

Como não intendo nada de JavaScript, peguei um exemplo pronto que era semelhante com o que eu queria.

Porém não tô conseguindo editar ele exatamente como eu gostaria.

E fui validar ele , e vi que também ocorrem muitos erros.

Alguém poderia me ajudar, por favor ?

 

Eu queria que ele ficasse exatamente assim:

 

Imagem Postada

 

A imagem de fundo está hospedada nesse endereço:

http://www.danielemiliano.com.br/calendari..._calendario.gif

 

Está é a página com o calendario:

http://www.danielemiliano.com.br/calendario/index.htm

 

Vejam como eu deixei o código até o momento.

Ps: sei que está cheio de erros, mas não sei arrumalos http://forum.imasters.com.br/public/style_emoticons/default/upset.gif

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Calendario</title>

<style type="text/css">

<!--

body { font-family: Arial; font-size: 11px; color: #637B5B }

-->

</style>

</head>

<body>

<script language="Javascript">

<!--

now = new Date();

nowDay = now.getDay();

nowDate = now.getDate();

nowMonth = now.getMonth() + 1;

nowYear = new String(now.getYear());

nowyearLen = nowYear.length

nowYear = nowYear.split("")

nowYear = nowYear[nowyearLen - 2] + nowYear[nowyearLen - 1]

j = 31;

startDate = 1;

tmpDate = nowDate;

tmpDay = nowDay;

start = false;

end = false;

 

monthName = new Array();

monthName[1] = "Janeiro";

monthName[2] = "Fevereiro";

monthName[3] = "Março";

monthName[4] = "Abril";

monthName[5] = "Maio";

monthName[6] = "Junho";

monthName[7] = "Julho";

monthName[8] = "Agosto";

monthName[9] = "Setembro";

monthName[10] = "Outubro";

monthName[11] = "Novembro";

monthName[12] = "Dezembro";

 

monthLen = new Array();

monthLen[1] = "31";

monthLen[2] = "28";

monthLen[3] = "31";

monthLen[4] = "30";

monthLen[5] = "31";

monthLen[6] = "30";

monthLen[7] = "31";

monthLen[8] = "31";

monthLen[9] = "30";

monthLen[10] = "31";

monthLen[11] = "30";

monthLen[12] = "31";

 

for (i = 0; i < j; i++){

tmpDate--;

tmpDay--;

if (tmpDay < 0){

tmpDay = 6;

}

if (tmpDate == 1){

i = 31;

}

}

 

document.write("<table border=0 bgcolor='white'><tr><td><table><tr>")

document.write("<td>" + monthName[nowMonth] + ' ' + nowYear + "</td>")

document.write("</tr></table><table><tr>")

document.write("<td>D</td><td>S</td><td>T</td><td>Q</td><td>Q</td><td>S</td><td>S</td></tr><tr>")

 

for (i = 0; i < 7; i++){

for (week = 0; week <= 6; week++){

if (startDate == nowDate){

document.write("<td bgcolor='8BA384'><font color='ffffff'><b>")

}

else{

document.write("<td>")

}

if (week == tmpDay){

start = true

}

if ((start == true)&&(end == false)){

document.write(startDate)

startDate++

}

if (startDate == nowDate){

document.write("</font></b>")

}

document.write("</td>")

if (startDate > monthLen[nowMonth]){

end = true

}

}

document.write("</tr>")

}

document.write("</tr></table></td></tr></table>")

// -->

</script>

</body>

</html>

Ps: Eu fiquei em dúvida se postava isso aqui ou na parte de JavaScript.

Como minha dúvida é com respeito a formatação e validação do código e não com o funcionamento do script, achei que era mais correto postar aqui mesmo.

Qualquer coisa me avisem se eu estiver errado.

Abraço a todos !

Compartilhar este post

Link para o post
Compartilhar em outros sites

Nícolas    4

Nícolas
Postado

Cara se caiu do céu com esse script pra mim, hehehe

 

Da pra fazer uma coisa que eu tava louco pra fazer =)

 

Até perdi meu tempo (que ta apertado) e fiz ele fica valido porque eu ia precisar tb né, hehehe

 

 

Esse fiz com gosto.

 

Só aumenta um pouco o fundo pra quando tiver mais uma linha na data se não a do dia 31 vai ultrapassar o limite.

(Não esquece de alterar no estilo a altura do id calendário tb hehhe)

 

Porque como se pode ver, tem 5 linhas de semana na imagem que você passou e no mes atual, porem se esse mes tivesse 31 dias, ou dia primeiro caisse no sabado, o dia 31 ficaria pra fora da imagem.

 

Mas aee é boiada, só se aumentar um pouco a imagem do fundo do calendário que ta tranquilo...

 

Mas ta aeee http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Calendario</title> <style type="text/css"><!--body { }#calendario {	background: url(fundo_calendario.gif) no-repeat;	width: 164px;	height: 157px;		font: 11px Arial, Helvetica, sans-serif;	color: #637B5B 	}.calendario_estrutura {	margin: 5px 10px;}.calendario_mes {	text-align: center;	font-weight: bold;	padding-left: 35px;	line-height: 20px;	color: #8BA384;}.calendario_semana{	font-weight: bold;	height: 30px;}.calendario_dia, .calendario_hoje{	padding: 0px 3px;}.calendario_hoje {	background-color: #8BA384;	color: #FFF;}--></style></head> <body>      <div id="calendario">	<script type="text/javascript">		<!--		   now = new Date();		   nowDay = now.getDay();		   nowDate = now.getDate();		   nowMonth = now.getMonth() + 1;		   nowYear = new String(now.getYear());		   nowyearLen = nowYear.length				   nowYear = nowYear[nowyearLen - 2] + nowYear[nowyearLen - 1]		   j = 31;		   startDate = 1;		   tmpDate = nowDate;		   tmpDay = nowDay;		   start = false;		   end = false;		   		   monthName = new Array();		   monthName[1] = "Janeiro";		   monthName[2] = "Fevereiro";		   monthName[3] = "Março";		   monthName[4] = "Abril";		   monthName[5] = "Maio";		   monthName[6] = "Junho";		   monthName[7] = "Julho";		   monthName[8] = "Agosto";		   monthName[9] = "Setembro";		   monthName[10] = "Outubro";		   monthName[11] = "Novembro";		   monthName[12] = "Dezembro";		   		   monthLen = new Array();		   monthLen[1] = "31";		   monthLen[2] = "28";		   monthLen[3] = "31";		   monthLen[4] = "30";		   monthLen[5] = "31";		   monthLen[6] = "30";		   monthLen[7] = "31";		   monthLen[8] = "31";		   monthLen[9] = "30";		   monthLen[10] = "31";		   monthLen[11] = "30";		   monthLen[12] = "31";		   		   for (i = 0; i < j; i++){			   tmpDate;			   tmpDay;			   			   if (tmpDay < 0){				tmpDay = 6;			   }			   if (tmpDate == 1){				 i = 31;			   }		   }		   		   document.write("<table border='0' class='calendario_estrutura'><tr><td><table><tr>")		   document.write("<td class='calendario_mes'>" + monthName[nowMonth] + ' 20' + nowYear + "</td>")		   document.write("</tr></table><table><tr class='calendario_semana'>")		   document.write("<td>D</td><td>S</td><td>T</td><td>Q</td><td>Q</td><td>S</td><td>S</td></tr><tr>")		   		   for (i = 0; i < 7; i++){		   			   for (week = 0; week <= 6; week++){			   				   if (startDate == nowDate){					   document.write("<td class='calendario_hoje'>")				   }				   else{				 	  document.write("<td class='calendario_dia'>")				   }				   if (week == tmpDay){				 	  start = true				   }				   if ((start == true)&&(end == false)){					   document.write(startDate)					   startDate++				   }				   if (startDate == nowDate){					   document.write("")				   }				   				   document.write("</td>")				   				   if (startDate > monthLen[nowMonth]){				 	  end = true				   }			   }			   			   document.write("</tr>")		   }		   		   document.write("</tr></table></td></tr></table>");		//-->	</script>   </div>     </body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Daniel Emiliano    0

Daniel Emiliano
Postado

Show de bola véio !

Obrigado mesmo, acho que eu não conseguiria fazer sózinho de forma alguma.

Agora vou estudar o que você fez, porque mais do que copiar um código, eu quero aprender a andar com as próprias pernas http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Valew véio, Abraço !

 

 

Ps: Tava reparando agora, e vi que depois do dia do Mês, que aparece em cima, está escrito a palavra "NaN"

Você sabe me dizer o porque isso aparece ?

 

Imagem Postada

Compartilhar este post

Link para o post
Compartilhar em outros sites

Nícolas    4

Nícolas
Postado

hehehe erro meu enquanto eu brincava com a variavel do ano, hehe

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta'>http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Calendario</title><style type="text/css"><!--body {}#calendario {	background: url(fundo_calendario.gif) no-repeat;	width: 164px;	height: 157px;		font: 11px Arial, Helvetica, sans-serif;	color: #637B5B	 }.calendario_estrutura {	margin: 5px 10px;}.calendario_mes {	text-align: center;	font-weight: bold;	padding-left: 35px;	line-height: 20px;	color: #8BA384;}.calendario_semana{	font-weight: bold;	height: 30px;}.calendario_dia, .calendario_hoje{	padding: 0px 3px;}.calendario_hoje {	background-color: #8BA384;	color: #FFF;}--></style></head><body>    <div id="calendario">	<script type="text/javascript">		<!--			now = new Date();			nowDay = now.getDay();			nowDate = now.getDate();			nowMonth = now.getMonth() + 1;			nowYear = new String(now.getYear());			nowyearLen = nowYear.length			nowYear = nowYear.split("")			nowYear = nowYear[nowyearLen - 2] + nowYear[nowyearLen - 1]			j = 31;			startDate = 1;			tmpDate = nowDate;			tmpDay = nowDay;			start = false;			end = false;		  			monthName = new Array();			monthName[1] = "Janeiro";			monthName[2] = "Fevereiro";			monthName[3] = "Março";			monthName[4] = "Abril";			monthName[5] = "Maio";			monthName[6] = "Junho";			monthName[7] = "Julho";			monthName[8] = "Agosto";			monthName[9] = "Setembro";			monthName[10] = "Outubro";			monthName[11] = "Novembro";			monthName[12] = "Dezembro";		  			monthLen = new Array();			monthLen[1] = "31";			monthLen[2] = "28";			monthLen[3] = "31";			monthLen[4] = "30";			monthLen[5] = "31";			monthLen[6] = "30";			monthLen[7] = "31";			monthLen[8] = "31";			monthLen[9] = "30";			monthLen[10] = "31";			monthLen[11] = "30";			monthLen[12] = "31";		  		   for (i = 0; i < j; i++){			   tmpDate;			   tmpDay;			  			   if (tmpDay < 0){				tmpDay = 6;			   }			   if (tmpDate == 1){				 i = 31;			   }		   }		  		   document.write("<table border='0' class='calendario_estrutura'><tr><td><table><tr>")		   document.write("<td class='calendario_mes'>" + monthName[nowMonth] + ' 20' + nowYear + "</td>")		   document.write("</tr></table><table><tr class='calendario_semana'>")		   document.write("<td>D</td><td>S</td><td>T</td><td>Q</td><td>Q</td><td>S</td><td>S</td></tr><tr>")		  		   for (i = 0; i < 7; i++){		  			   for (week = 0; week <= 6; week++){			  				   if (startDate == nowDate){					   document.write("<td class='calendario_hoje'>")				   }				   else{					   document.write("<td class='calendario_dia'>")				   }				   if (week == tmpDay){					   start = true				   }				   if ((start == true)&&(end == false)){					   document.write(startDate)					   startDate++				   }				   if (startDate == nowDate){					   document.write("")				   }				  				   document.write("</td>")				  				   if (startDate > monthLen[nowMonth]){					   end = true				   }			   }			  			   document.write("</tr>")		   }		  		   document.write("</tr></table></td></tr></table>");		//-->	</script>   </div>   </body></html>

Agora sim...

 

5 da manhã mechendo nisso... da nem pra me culpa ahhahahaha

 

 

Então cara.. da uma estudada sim...

 

 

Não passa de regras que você deve seguir.

 

Da uma lida sobre xhtml que se pega bem os esquemas.

 

E aquelas 2 linhasinhas safadas.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">

contam pra caramba pois é a versão do html.

 

Se seu site ta valido e tudo bonitinho, as vezes só de você mudar esse doctype ele ja da uma desconfigurada em tudo.

 

se você for mudar esse atual por esse.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml">

É provavel que ele não vai dar como um documento valido.

 

ou pode mudar uma coisinha ou outra e tal.

 

 

Precisa levar varias coisas em conta.

 

 

Mas são apenas regras cara.

 

 

Da uma pesquisada sobre o assunto que é bem legal.

 

E o bacana é que só de deixar um html valido, ja ajuda e muito para acesso de definientes visuais.

 

 

Mas codigo valido não é tudo ;)

Compartilhar este post

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

Informação importante

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

  Aceito