Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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;
}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";
} 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
Muito bom fabyo... gostei pacas... =Dcomo diseram simples e pratico... muito show..
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">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)](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")](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")](http://www.northcircle.com/icant/shimx.gif) repeat-x top left; color: #000; } tr.odd { background: url("[http://www.northcircle.com/icant/shim.gif")](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>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/
nao usei tabelas mesmo e é assim que funciona o tableless
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!!!!
beleza entao
adorei o visual novo = )
valeu
Mestre, Expanda seus horizontes!!!!
http://icant.co.uk/csstablegallery/tutorials.php
Dê uma boa lida! Garanto que será divertido!!!!
<script language=javascript>
<?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_semana=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 }";
$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 .= "\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]
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+
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!
>
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/
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
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?
o problema todo foi ter colocado no título que era tableless, o correto seria:"Calendário usando CSS, sem tabelas"
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+
Show Fabyo.. muito bom.. :) O script ficou pequeno, e faz tudo que precisa.