Calendario Tableless em varios idiomas

Fabyo · Julho 13, 2005

Pessoal tava com um tempo livre entao só pra encher eu fiz um calendario a logica é bem simples, dai pra mudar um pouco a rotina em vez de usar tabelas eu usei div

e esse calendario é estilo do windows com um combo em cima pra você escolher o mes e mudar

e sobre o idioma quem quiser mudar pra outro idioma é só editar a linha:

setlocale(LC_TIME, "portuguese"); para o idioma que preferir

quem quiser pode aproveitar a logica pra montar qualquer calendario, ou mudar esse que eu fiz

<!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">
<head>
<title>Calendario Tableless</title>
<script type="text/javascript">
<!--
function MM_jumpMenu(targ,selObj,restore){ //v3.0
 eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
 if (restore) selObj.selectedIndex=0;
}
//-->
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style media="screen" type="text/css" />
#top{
word-spacing: 3px;
background-color: Gray;
width:215px;
_width:215px;
color:white;
}
.linhas{
margin-left: 10px;
}
.destaque{
margin-left: 10px;
font-weight: bold;
color: white;
background-color: gray;
}
fieldset{
width:215px;
}
</style>
</head>
<body>
<form name="form1" method="post" action="">
<select name="menu1" onchange="MM_jumpMenu('parent',this,0)">
<?php
setlocale(LC_TIME, "portuguese");
$dia = date("d");
$mes = isset($_GET["mes"]) ? intval($_GET["mes"]) : date("m");
$ano = isset($_GET["ano"]) ? intval($_GET["ano"]) : date("Y");

for($i = 1; $i <= 12; $i++){

$nome_mes = ucfirst(strftime("%B", mktime(0, 0, 0, $i, 1, 2005)));

if($i == $mes)
{
	echo "\t<option value=\"?mes=$i&ano=$ano\" selected=\"selected\">$nome_mes</option>\n";
}
else
{
	echo "\t<option value=\"?mes=$i&ano=$ano\">$nome_mes</option>\n";
}	
}	
?>
</select><br />

<fieldset>
<div id="top">
<?php

$total_dias = date("t", mktime(0, 0, 0, $mes, 1, $ano));
for($i = 1; $i <= 7; $i++) {
echo "<span>".ucfirst(strftime("%a", mktime(0, 0, 0, 5, $i, 2005)))."</span>\n";
}	
?>
</div>
<?php

$k = 1;
for ($i = 1; $i <= 6; $i++) {
echo "<div>";
for ($j = 0; $j < 7; $j++) {
	$dias = date("w", mktime(0, 0, 0, $mes, $k, $ano));
	if($dias == $j and $k <= $total_dias) {
		if($k == $dia) {
			echo "<span class=\"destaque\">". sprintf("%02d", $k)."</span> ";
		} else {	
			echo "<span class=\"linhas\">". sprintf("%02d", $k)."</span> ";
		}	
		$k++;
	} else {
		echo "<span class=\"linhas\">".str_repeat(" ", 4)."</span> ";
	}
}
echo "</div>\n";	
}

?>
</fieldset>
</form>
</body>
</html>

obs: Eu nao gosto de comentar meus codigos mas quem tiver alguma duvida pode perguntar a vontade que eu explico linha por linha se precisar

outra coisa nao sei se repararam ,mas eu nao digitei nada do tipo "Dom Seg Ter etc... peguei tudo via programação

Douglas · Julho 13, 2005

Show Fabyo.. muito bom.. :) O script ficou pequeno, e faz tudo que precisa.

Perfect Lion · Julho 15, 2005

Muito bom fabyo... gostei pacas... =Dcomo diseram simples e pratico... muito show..

Emiliano · Março 16, 2006

Maravílha de código, mestre!!!!!

Mas acredito que foi incoerênte em um detalhe!!!! TABLELESS!!!

Um calendário são dados tabulados!! Logo TABLE!!!!

Reenvio seu calendário no formato TABLE!!!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="pt-br">  <head>	<title>.:: Calendário table ::.</title>	  <!--META-->	  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">	  <meta name="author"			 content="Emiliano">	  <meta name="language"		   content="pt-br">	  <!--ESTILOS-->	  <style type="text/css">		//CSS adiquirido no CSS Table Galery!!!! (http://icant.co.uk/csstablegallery/index.php?css=67)		table		{		border-collapse: collapse;		border-spacing:0;		border: 1px solid #BA9;		font: 90% "Trebuchet MS", Tahoma, Arial, Helvetica, sans-serif;		}		 caption{		  padding: 0 .4em .4em;		  text-align: left;		  font-size: 110%;		  font-weight: bold;		  text-transform: uppercase;		  color: #453827;		  background: transparent;		  }				tr{				}		td, th {		  border: 1px solid #BBAA99;		  padding: .3em;		font-size: 0.9em;		color: #666;		  }		thead th, tfoot th, tfoot td {		border: 1px solid #BA9;		text-align: left;		font-weight: bold;		font-size: 100%;		background: #BA9 url("http://www.northcircle.com/icant/thbg.gif") repeat-x top left;		color: #FFF;		}		 tbody th,thead th,tbody td {		vertical-align: top;		text-align: left;		}				tbody tr:hover td, 		tbody tr:focus td,		tbody tr:hover th,		tbody tr:focus th		{		background: url("http://www.northcircle.com/icant/shimx.gif")  repeat-x top left;		color: #000;		}				tr.odd		{		background: url("http://www.northcircle.com/icant/shim.gif")  repeat-x top left;		}			  </style>	  <!--SCRIPTS-->	  <script type="text/javascript">		function MM_jumpMenu(targ,selObj,restore){ //v3.0		  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");		  if (restore) selObj.selectedIndex=0;		}	  </script>  </head>  <body>	<form name="form1" method="post" action="">	<fieldset>  	  <table summary="Calendário do mês">		<caption>		  <select name="menu1" onChange="MM_jumpMenu('parent',this,0)">  <?php  //setar idioma  setlocale(LC_TIME, "portuguese");	$dia = date("d");	$mes = isset($_GET["mes"]) ? intval($_GET["mes"]) : date("m");	$ano = isset($_GET["ano"]) ? intval($_GET["ano"]) : date("Y");  for($i = 1; $i <= 12; $i++){	$nome_mes = ucfirst(strftime("%B", mktime(0, 0, 0, $i, 1, 2006)));	if($i == $mes){	  echo "\t<option value=\"?mes=$i&ano=$ano\" selected=\"selected\">$nome_mes</option>\n";	}else{	  echo "\t<option value=\"?mes=$i&ano=$ano\">$nome_mes</option>\n";	}	  }	  ?>		  </select>		</caption>		<thead>		  <tr>  <?	$total_dias = date("t", mktime(0, 0, 0, $mes, 1, $ano));	for($i = 1; $i <= 7; $i++){	  echo "<th scope=\"cols\">".ucfirst(strftime("%a", mktime(0, 0, 0, 5, $i, 2005)))."</td>\n";	}	  ?>		  </tr>		</thead>		<tbody>  <?  $k=1;  for ($i = 1; $i <= 6; $i++){	echo "<tr>";	for ($j = 0; $j < 7; $j++){	  $dias = date("w", mktime(0, 0, 0, $mes, $k, $ano));	  if($dias == $j and $k <= $total_dias){		if($k == $dia){		  echo "<th>". sprintf("%02d", $k)."</th> ";		}else{			  echo "<td>". sprintf("%02d", $k)."</td> ";		}			$k++;	  }else{		echo "<td></td> ";	  }	}	echo "</tr>\n";  }  ?>  		</tbody>		<tfoot>		  <tr>			<td colspan="7">Calendário do Sr. Fabyo</td>		  </tr>  		</tfoot>	  </table>	</fieldset>	</form>  </body></html>

Fabyo · Março 16, 2006

Emiliano você que nao entendeu Tableless é sem tabelas eu nao usei

por isso que é tableless

http://tableless.com.br/aprenda/faq/ para saber mais sobre esse tema

http://tableless.com.br/artigos/tutorial/

http://tableless.com.br/aprenda/caminho-su...para-tableless/

http://www.tableless.com.br

nao usei tabelas mesmo e é assim que funciona o tableless

Emiliano · Março 16, 2006

Entendi sim, mestre!!!

(risos)

É uma velha discusão de Sr. Eis e o senhor Bruno Torres!!!

Sou adepto também do tableless!!!!! Mas também cultivo a semântica!!!!

www.revolucao.etc.br/css

Fabyo · Março 16, 2006

beleza entao

adorei o visual novo = )

valeu

Emiliano · Março 16, 2006

Mestre, Expanda seus horizontes!!!!

http://icant.co.uk/csstablegallery/tutorials.php

Dê uma boa lida! Garanto que será divertido!!!!

hinom · Maio 12, 2006

<?php

function dia_semana($data_ano,$data_mes,$data_dia){

if(function_exists('mcal_day_of_week')){

return mcal_day_of_week(intval($data_ano),intval($data_mes),intval($data_dia));

}else{

return date('w', mktime(0, 0, 0, intval($data_mes), intval($data_dia), intval($data_ano)) );

}

function data_calendario_js($data_ano=0,$data_mes=0,$data_dia=0,$data_dia_sel=0,$dias_sem

ana=0){

$atual_ano = date("Y");

$atual_mes = date("m");

$atual_dia = date("d");

if($data_ano==0 || $data_mes==0 || $data_dia==0){$data_ano = $atual_ano;}

if($data_mes==0 || $data_dia==0){$data_mes = $atual_mes;}

if($data_dia==0){$data_dia = $atual_dia;}

$data_mqt = date("t");

$data_wd1 = dia_semana($data_ano,intval($data_mes),1);

$data_wd2 = dia_semana($data_ano,intval($data_mes),intval($data_dia));

if($data_dia_sel==0){

$data_dia_sel = $data_dia;

}

if($dias_semana==0){

$dias_semana = "dom,seg,ter,qua,qui,---,sab";

}

$r = "";

$r .= "\nano = ".$data_ano.";";

$r .= "\nmes = ".$data_mes.";";

$r .= "\ndia = ".$data_dia.";";

$r .= "\nmqt = ".$data_mqt.";";

$r .= "\nwd1 = ".$data_wd1.";";

$r .= "\nwd2 = ".$data_wd2.";";

$r .= "\ndia_sel = ".$data_dia_sel.";";

$r .= "\nsem = '".$dias_semana."';";

$r .= "\nsemana = sem.split(',');";

$r .= "\nlim = semana.length;";

$r .= "\ndocument.write('

$r .= "\n document.write('[tr]');";

$r .= "\n document.write('

');";

$r .= "\n document.write('

');";

$r .= "\n document.write('[/tr]');";

$r .= "\n document.write('[tr]');";

$r .= "\n for(i=0;i

$r .= "\n if(i>0){";

$r .= "\n document.write('

');";

$r .= "\n }else{";

$r .= "\n document.write('

');";

$r .= "\n }";

$r .= "\n document.write('

'+semana+'');";

$r .= "\n }";

$r .= "\n document.write('

[/tr]');";

$r .= "\n document.write('[tr]');";

$r .= "\n document.write('

');";

$r .= "\n document.write('[/tr]');";

$r .= "\n k = 0;";

$r .= "\n d_ini = 1;";

$r .= "\n qtd_mn = 0;";

$r .= "\n k_ok = true;";

$r .= "\n primeiro_dia = true;";

$r .= "\n for(i=d_ini;i<=mqt;i++){";

$r .= "\n n = i;";

$r .= "\n if(k==0 || i==d_ini){";

$r .= "\n document.write('[tr]');";

$r .= "\n document.write('

');";

$r .= "\n }";

$r .= "\n if(primeiro_dia){";

$r .= "\n if(wd1!=k){";

$r .= "\n n = '';";

$r .= "\n qtd_mn++;";

$r .= "\n }else{";

$r .= "\n i = d_ini;";

$r .= "\n n = i;";

$r .= "\n primeiro_dia = false;";

$r .= "\n }";

$r .= "\n if(k>0){";

$r .= "\n document.write('

');";

$r .= "\n }";

$r .= "\n document.write('

$r .= "\n if(n == dia_sel){";

$r .= "\n document.write('_sel');";

$r .= "\n }";

$r .= "\n document.write('>'+n+'

');";

$r .= "\n if((k+1)==lim || i==mqt){";

$r .= "\n document.write('

');";

$r .= "\n document.write('[/tr]');";

$r .= "\n if(k_ok){k_ok = false;}";

$r .= "\n k = 0;";

$r .= "\n }else{";

$r .= "\n k++;";

$r .= "\n }";

$r .= "\ndocument.write('

');";

return $r;

}

$data_ano = 0;

$data_mes = 0;

$data_dia = 0;

$data_dia_sel = $data_dia;

$dias_semana = 0;

echo data_calendario_js($data_ano,$data_mes,$data_dia,$data_dia_sel,$dias_semana);

?>

[/tr]

reoli · Maio 26, 2006

Tudo bem Pessoal,Tableless com certesa , não quero entrar no mérito de table ou tabless mais pelo código postado pelo nosso colega eu só perdi mais um tempinho em acertar a formatação mudei os SPANS por DIV definindo o WIDTH e a MARGE Muito bom belo codigo.t+

LVieira · Julho 6, 2006

Alguém já percebeu que neste código quando o ano indicado é anterior a 1902 e quando passa de 2037 o calendário não se forma corretamente.Alguém saberia dizer o por quê disso acontecer?Agradeço desde já a colaboração!

::..Hunter..:: · Julho 20, 2006

Emiliano você que nao entendeu Tableless é sem tabelas eu nao usei <table> por isso que é tableless

http://tableless.com.br/aprenda/faq/ para saber mais sobre esse tema

http://tableless.com.br/artigos/tutorial/

http://tableless.com.br/aprenda/caminho-su...para-tableless/

http://www.tableless.com.br

nao usei tabelas mesmo e é assim que funciona o tableless

Tableless não é ausencia total de tabelas, como você pode ver no próprio link que passou, olha esta parte:

"Ah, e não se esqueça que para dados como uma tabela periódica ou um calendário a solução semanticamente correta é a tabela mesmo. Ou seja, tableless não é ausência de tabelas, é o seu uso apenas onde é semanticamente justificável."

http://tableless.com.br/aprenda/caminho-su...para-tableless/ http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Fabyo · Julho 20, 2006

voces nao entenderam minha ideia, esse assunto ja foi discultido e passado pra traz, mas como voce levantou esse topico de novo vou explicar melhor, eu fiz um calendario sem usar tabelas para poder mostrar o uso do css, e mostrar que dava para fazer.

nao tem nada haver com semantica, mesma coisa o Mauricio do site http://www.maujor.com

ele cria imagens usando css de exemplo, por exemplo bandeiras, relogios etc...

pergunta é viavel ou necessario fazer imagens com css?, claro que nao e nao tem nem semantica nisso o que ele propros era mostrar o dominio do css, mesma coisa eu com o calendario ja fiz calendarios de varias maneiras e resolvi fazer um sem tabelas nao vejo problemas nenhum nisso.

entenderam agora?

http://maujorcss.vilabol.uol.com.br/brflag.html

::..Hunter..:: · Agosto 14, 2006

o problema todo foi ter colocado no título que era tableless, o correto seria:"Calendário usando CSS, sem tabelas"

Fabyo · Agosto 15, 2006

table = tabela

less = sem

no proprio site do tableless, explica que sem tabela nao quer dizer um site semantico, ou no padrao tableless é sem tabelas para montar layout ou posicionar objetos, mas beleza quem nao gostou do script aproveita pelo menos o codigo fonte do calendario ta valendo

t+

Arquivado

Calendario Tableless em varios idiomas

Recommended Posts

Fabyo 66

Compartilhar este post

Link para o post

Compartilhar em outros sites

Douglas 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

Perfect Lion 10

Compartilhar este post

Link para o post

Compartilhar em outros sites

Emiliano 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fabyo 66

Compartilhar este post

Link para o post

Compartilhar em outros sites

Emiliano 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fabyo 66

Compartilhar este post

Link para o post

Compartilhar em outros sites

Emiliano 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

hinom 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

reoli 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

LVieira 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

::..Hunter..:: 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fabyo 66

Compartilhar este post

Link para o post

Compartilhar em outros sites

::..Hunter..:: 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fabyo 66

Compartilhar este post

Link para o post

Compartilhar em outros sites

Consulta SQL dentro de outra consulta

problema em usar json para realizar engenharia de dados

Soma dos dias utilizados

Fóruns

Tempo Real

Informação importante