Freelife 2 Denunciar post Postado Fevereiro 15, 2011 Boa tarde galera... Assim como penei para consegui bolar o calendário, creio que outras pessoas também passem pela mesma coisa e como faz tempo que não mando nada par ao fórum, quem sabe possa ajudar alguém. Bom o código está todo comentado e a tabela de eventos está comentada logo no início. Qualquer erro ou sugestão é só postar... <? //CREATE TABLE events ( // id INT UNSIGNED NOT NULL auto_increment, // title VARCHAR(128) NOT NULL default '', // content TEXT NOT NULL, // `date` DATE NOT NULL, // author_id INT UNSIGNED NOT NULL, // date_reg DATE NOT NULL, // active BOOL DEFAULT '0', // PRIMARY KEY (id) //)ENGINE=InnoDB; ?> <style type="text/css"> .tableCalendar { height: 200px; margin: auto; padding: 0px; background-color: transparent; border: 1px solid #eee; position: relative; z-index: 1; top: 0px; font-family: inherit; font-size: 16px !important; font-weight: bold; -moz-border-radius: .5em; -webkit-border-radius: .5em; border-radius: .5em; background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(255, 255,255, .2)), to(rgba(255, 255, 255, .2))); /*background-image: -moz-linear-gradient(bottom, #888 0%, #fff 50%, #888 100%);*/ background-image: -moz-linear-gradient(bottom, rgba(255, 255,255, .2), rgba(255, 255, 255, .2))); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, startColorstr=#FFFFFF, endColorstr=#FFFFFF); } .tableCalendar td:first-letter, th:first-letter { font-size: 100%; } .tableCalendar tr:first-child td:first-child:hover { background-image: -webkit-gradient(linear, left center, right center, from(rgba(232, 135, 135, .9)), to(rgba(232, 135, 135, .6))); background-image: -moz-linear-gradient(left, rgba(232, 135, 135, .9), rgba(232, 135, 135, .6)); filter: progid:DXImageTransform.Microsoft.Gradient(enabled='true', GradientType=1, startColorstr='#E88787', endColorstr='#E88787'); -moz-border-radius-topleft: .5em; -webkit-border-top-left-radius: .5em; border-top-left-radius: .5em; } .tableCalendar tr:first-child td:hover { background-image: -webkit-gradient(linear, left center, right center, from(rgba(232, 135, 135, .9)), to(rgba(232, 135, 135, .6))); background-image: -moz-linear-gradient(left, rgba(232, 135, 135, .9), rgba(232, 135, 135, .6)); filter: progid:DXImageTransform.Microsoft.Gradient(enabled='true', GradientType=1, startColorstr='#E88787', endColorstr='#E88787'); } .tableCalendar tr:first-child td:last-child:hover { background-image: -webkit-gradient(linear, left center, right center, from(rgba(232, 135, 135, .9)), to(rgba(232, 135, 135, .6))); background-image: -moz-linear-gradient(left, rgba(232, 135, 135, .9), rgba(232, 135, 135, .6)); filter: progid:DXImageTransform.Microsoft.Gradient(enabled='true', GradientType=1, startColorstr='#E88787', endColorstr='#E88787'); -moz-border-radius-topright: .5em; -webkit-border-top-right-radius: .5em; border-top-right-radius: .5em; } .tableCalendar tr:last-child td:first-child { -moz-border-radius-bottomleft: .5em; -webkit-border-bottom-left-radius: .5em; border-bottom-left-radius: .5em; } .tableCalendar tr:last-child td:last-child { -moz-border-radius-bottomright: .5em; -webkit-border-bottom-right-radius: .5em; border-bottom-right-radius: .5em; } .nomeMes { text-align: center; color: #000; border-bottom: 1px dotted #eee; cursor: pointer; } .linksTop { width: 34px; text-align: center; color: #FFF; text-decoration: none; border-bottom: 1px dotted #eee; } .linksTop a { width: 34px; cursor: pointer; color: #FFF; text-decoration: none; font-weight: bold; display: block; } .linksTop a:hover { width: 34px; cursor: pointer; color: #FFF; text-decoration: underline; font-weight: bold; display: block; } .diasSemana { width: 34px; text-align: center; border: 0px dotted #eee; color: #FFF; } .sun { text-align: center; color: #F00; font-weight: bold; border: 0px dotted #eee; /* background-image: url(../img/bg_retangulo.png);*/ background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, .6)), to(rgba(0, 0, 0, .6))); background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, .6), rgba(0, 0, 0, .6)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, startColorstr=#000000, endColorstr=#000000); background-repeat: repeat; } .dia { margin: 0px; padding: 0px; width: 34px; color: #FFF; text-align: center; border: 0px dotted #eee; } .diaAtual { margin: 0px; padding: 0px; width: 34px; color: #000; /*background-color: #FC9;*/ background-color: #eee; font-weight: bold; text-align: center; border: 0px dotted #eee; } .diaAtualEvento { margin: 0px; padding: 0px; width: 34px; color: #FFF; /*background-color: #FC9;*/ background-color: #eee; font-weight: bold; text-align: center; cursor: pointer; border: 0px dotted #eee; background-image: -webkit-gradient(linear, left center, right center, from(rgba(232, 135, 135, .9)), to(rgba(232, 135, 135, .6))); background-image: -moz-linear-gradient(left, rgba(232, 135, 135, .9), rgba(232, 135, 135, .6)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, startColorstr=#E88787, endColorstr=#E88787); } td.diaAtualEvento:hover { text-decoration: underline; cursor: pointer; color: #F00; } .diaEvento { margin: 0px; padding: 0px; width: 34px; color: #FFF; text-align: center; cursor: pointer; border: 0px dotted #eee; background-image: -webkit-gradient(linear, left center, right center, from(rgba(232, 135, 135, .9)), to(rgba(232, 135, 135, .6))); background-image: -moz-linear-gradient(left, rgba(232, 135, 135, .9), rgba(232, 135, 135, .6)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, startColorstr=#E88787, endColorstr=#E88787); } td.diaEvento:hover { text-decoration: underline; cursor: pointer; color: #F00; } .diaVazio { width: 34px; font-size: 0px; text-align: center; } </style> <? //Ano será recebido por parâmetro. $ano = isset($_REQUEST["ano"]) ? $_REQUEST["ano"] : date("Y"); $anoAtual = date("Y"); echo "<a href='?ano=". ($ano-1) ."〈=pt'>". ($ano-1) ."</a> | <a href='?ano=".$anoAtual."〈=pt'>Voltar ao Atual</a> | <a href='?ano=". ($ano+1) ."〈=pt'>". ($ano+1) ."</a>"; //Definição da linguagem do calendário. /* Será recebido por parâmetro. */ $lang = isset($_REQUEST["lang"]) ? $_REQUEST["lang"] : ""; $lang = strtolower ($lang); //verifica o valor de $lang, para definir setlocale() switch ($lang) { case "pt": setlocale (LC_TIME, "pt_BR", "ptb", "portuguese-brazil", "bra"); break; case "en": setlocale (LC_TIME, "en_US", "en"); break; default: setlocale (LC_TIME, "pt_BR", "ptb", "portuguese-brazil", "bra"); break; } function consultaEventos($anoEvent){ //Montamos as datas de inicío e limite. $dataInicio = $anoEvent."-01-01"; $dataLimite = $anoEvent."-12-31"; //conexão com o BD. $con = @mysql_connect("localhost", "usuario", "senha_bd"); //Se não conectou, gera o erro e o array recebe null em 0. if (!$con) { $diasArray[0]=null; } //se não retornou erro, então else{ //selecionamos o bd mysql_select_db("blc", $con); //fazemos a query buscando todos os eventos dentro do ano. $query = mysql_query("SELECT * FROM `events` WHERE active=1 AND (`date` >= '".$dataInicio."') AND (`date` <= '".$dataLimite."')"); //se o número de linhas for maior que 0. if(mysql_num_rows($query) > 0){ //i recebe 0. $i = 0; // enquanto tiver dados... while($dadosEvent = mysql_fetch_array($query)){ //armazenamos a data do evento na posição de $i. $diasArray[$i] = $dadosEvent["date"]; //incrementa o $i. $i++; } } //Se não tiver nenhum evento, o array recebe null na posição 0. else { $diasArray[0]=null; } } //retorna o array. return $diasArray; }//fecha a função consultaaEventos. //Dias e meses em português ou Inglês. //Ainda preciso achar um jeito de aplicar qual das versões quero ver. $diasPtAbrev = array('D', 'S', 'T', 'Q', 'Q', 'S', 'S'); $diasEnAbrev = array('S', 'M', 'T', 'W', 'T', 'F', 'S'); $Months = array( "Janeiro"=>'January', 'Fevereiro'=>"February", 'Março'=>"March", 'Abril'=>"April", 'Maio'=>"May", 'Junho'=>"June", 'Julho'=>"July", 'Agosto'=>"August", 'Setembro'=>"September", 'Outubro'=>"October", 'Novembro'=>"November", 'Dezembro'=>"December" ); //Data atual. Para maiores informações olhe o manual do php http://php.net/manual/en/function.getdate.php $hoje = getdate(); //essa variável será usada para quebra de linha. $wrap = 0; //Aqui chamamos a função definida acima para verificar se há eventos no ano selecionado. $diasEvent = consultaEventos($ano); //Iniciando a corpo do calendário. $content = "<table class='calendarMain' id='calendarMain' style='background-color: #F00;'>"; //A variável i é referente ao número de meses. Se mudar essa variável, muda-se a forma do calendário. $i = 1; //Enquanto i for menor ou igual a 12, continua o loop. while($i <= 12){ //Iniciando uma nova linha. Essa linha é a que contém cada grupo de meses. if($wrap % 4 == 0) $content .= "<tr>"; //Iniciando uma coluna e a tabela que conterá o mês. $content .= "<td><table class='tableCalendar'>"; //recuperando as informações sobre o mês $i do ano XXXX //Para obter detalhes sobre mktime ... http://www.php.net/manual/en/function.mktime.php $data = getdate(mktime(0, 0, 0, $i, 1, $ano)); //Total de dias do mês. Para obter detalhese sobre a função date ... http://www.php.net/manual/en/function.date.php $totalDiasMes = date("t", mktime(0, 0, 0, $i, 1, $ano)); //número do dia. Essa variável é que vamos usar para escrever os números dos dias. $numbDia = 0; //pegamos o dia da semana que começa o mês. Novamente usando aqui um recurso da função getdate() mecionada acima. $brancos = $data['wday']; //Nome do mês. Procuramos o nome do mes no array. //A função array_search procura um valor no array e retorna sua chave. //Como está retornando a chave que é o nome do mês em português, então... $nomeMes = array_search($data['month'], $Months); //Se a linguagem escolhida for pt usamos a própria Chave do array. if($lang == "pt") $content .= "<tr><td colspan='7' class='nomeMes'>".$nomeMes."</td></tr>"; //senão usamos o conteúdo da posição no array. else $content .= "<tr><td colspan='7' class='nomeMes'>".$Months[$nomeMes]."</td></tr>"; ## Obs: Existem várias funções úteis sobre arrays então recomendo dar uma olhada em: http://www.php.net/manual/en/book.array.php ## //loop para imprimir os dias da semana. //Iniciando uma tr. $content .= "<tr>"; for($d=0; $d <= 6; $d++){ //Os dias da semana serão mostrados de acordo com a lang. if($lang == "pt") $content .= "<td class='diasSemana'>".$diasPtAbrev[$d]."</td>"; else $content .= "<td class='diasSemana'>".$diasEnAbrev[$d]."</td>"; } //fecha a linha. $content .= "</tr>"; //Semana é usada para iniciar uma nova linha quando for igual a 0. Essa linha já está dentro da table de class tableCalendar ou seja, já é uma linha na tabela do mes. $semana = 0; //loop do calendário. Definimos o total de colunas somando o número de dias do mês + o dia da semana que o mes começa. for($a=1; $a <= $totalDiasMes + $brancos; $a++){ //Definição do estilo do dia. Sun é domingo, ou seja modificamos o estilo quando for domingo. $class = (($a-1) % 7) == 0 ? 'sun' : 'dia'; //Se ainda não atingiu a quantidade de dias em branco, então imprime um dia vazio. if($a <= $brancos) $content .= "<td class='diaVazio'> </td>"; //senão, imprimimos os dias do mês. else { //Se semana == 0 iniciamos uma nova linha. if($semana == 0) $content .= "<tr>"; //incrementamos o número do dia, pois ele foi declarado como 0 logo acima. $numbDia++; //Se numbDia é menor que o total de dias do mês, então ... if($numbDia <= $totalDiasMes){ //Se numbDia é menor que 10, adicionamos um zero à esquerda. $dia = $numbDia < 10 ? "0".$numbDia : $numbDia; //A mesma condição explicada acima. $mes = $i < 10 ? "0".$i : $i; //Se todos os dados baterem, é o dia atual //numbDIa == dataAtual .. i(mes) == mesAtual .. ano == anoAtual if($numbDia == $hoje['mday'] && $i == $hoje['mon'] && $ano == $hoje['year'] ){ //Verificamos se existe essa data no array de eventos. //Se existir é um diaAtualEvento. if(array_keys($diasEvent, $ano."-".$mes."-".$dia)){ //mudamos a Classe. $class='diaAtualEvento'; $content .= "<td class='".$class."' >$numbDia</td>"; } //senão, é apenas o dia atual. else { $content .= "<td class='diaAtual'>$numbDia</td>"; } } //senão, é só um dia normal. else { //Verificamos se existe essa data no array de eventos. //Se existir é um diaEvento. if(array_keys($diasEvent, $ano."-".$mes."-".$dia)){ $class='diaEvento'; $content .= "<td class='".$class."' >$numbDia</td>"; } //senão, é apenas um dia normal.(aqui a classe pode ser dia ou sun como foi modificado acima. else { $content .= "<td class='".$class."'>$numbDia</td>"; } } } //se numbDia se igualou ao total de dias no mês, então, imprimimos diaVazio. else $content .= "<td class='diaVazio'> </td>"; //se o resto da divisão for igual a zero, então fechamos a linha e semana recebe -1 para que quando voltar, inicie em 0. if($a % 7 == 0){ $content .= "</tr>"; $semana = -1; } } //incrementamos semana. Aqui semana já está com 0. $semana++; } $content .= "</table></td>"; // Se o resto da divisão for 0, então fecha a linha do grupo dos meses. if($i % 4 == 0){ $content .= "</tr>"; $wrap = -1; } $wrap++; //incrementamos o mês. $i++; } //Fechamos a tabela principal. $content .= "</table>"; //Mostramos o calendário. echo "<pre>"; echo $content; echo "</pre>"; ?> Att. Freelife Compartilhar este post Link para o post Compartilhar em outros sites