Calendário em PHP, MySQL e XAJAX - Parte 1
Salve Salve Galera iMasters,
Bom eu ajustei o novo Calendário e agora adaptei à biblioteca XAJAX que é perfeita para PHP. Codigo Livre encontrada neste endereço: http://www.xajaxproject.org/.
Primeiramente vamos visualizar o calendário funcionando no link abaixo
Vamos ao que interessa:
Tabela para o banco
CREATE TABLE IF NOT EXISTS `agenda` (
`id` int(11) NOT NULL auto_increment,
`evento` varchar(200) NOT NULL,
`dtevento` varchar(10) NOT NULL,
`autor` varchar(200) NOT NULL,
`data` timestamp NOT NULL default CURRENT_TIMESTAMP,
`hora` varchar(5) NOT NULL,
`conteudo` text NOT NULL,
`local` varchar(200) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1;sql.php
<?php
$host = "localhost";//caso esteja usando o xampp ou wamp
$user = "root";
$pass = "";
$db = "db";
$conn = mysql_connect($host, $user, $pass) or die (mysql_error());
@mysql_select_db($db);
?>Criar a folha de estilos
estilo.css
.tabela{
background:#fff;
width:250px;
padding:0px;
border:1px solid #ccc;
float:left;
margin-right:20px;
}
.td{
background:#f8f8f8;
width:25px;
height:25px;
text-align:center;
}
.hj{
background: #FFFF99;
width:25px;
height:25px;
text-align:center;
}
.dom{
background: #FFCC99;
width:25px;
height:25px;
text-align:center;
}
.evt{
background: #CCFF99;
width:25px;
height:25px;
text-align:center;
cursor:pointer;
}
.mes{
background:#fff;
width:auto;
height:20px;
text-align:center;
}
.show{
background:#202020;
width:300px;
height:30px;
text-align:left;
font-size:12px;
font-weight:bold;
color:#CCFF00;
padding-left:5px;
}
.linha{
background:#404040;
width:300px;
height:20px;
text-align:left;
font-size:11px;
color:#f0f0f0;
padding:1px 1px 1px 10px;
}
.sem{
background: #ECE6D9;
width:auto;
height:20px;
text-align:center;
font-size:12px;
font-weight:bold;
font-family:Verdana;
} font-family: Verdana;
font-size: 12px;
color: #000000;
} color: #000000;
text-decoration: none;
} text-decoration: none;
color: #000000;
} text-decoration: underline;
color: #FF9900;
} text-decoration: none;
}
#carregando{
background: white;
padding-left: 20px;
display: none; /* hidden */
width: 200px;
/*height: 100px;*/
/*margin-top: -50;*/
line-height:20px;
}agendaAjax.php
<?php
#################################
#
Calendário PHP MySQL XAJAX 5
Documento: Agenda de eventos dinãmica
Autor: Gaspar Teixeira
E-mail: gaspar.teixeira@gmail.com
Data: 22/12/2008
Direito de uso: livre
Declaração: O autor não se responsabiliza
pelo utilização deste calendário!
#
#################################
require_once("xajax/xajax_core/xajax.inc.php");/busca livraria do XAJAX/
include "funcoes.php";//inclui as funçoes
$xajax = new xajax();//Gera a classe
$xajax->setCharEncoding('ISO-8859-1');//Caracteres especiais
/Registra cada uma das funçoes em PHP/
$xajax->registerFunction("Antes");
$xajax->registerFunction("Proximo");
$xajax->registerFunction("Agenda");
$xajax->registerFunction("Mostrar");
$xajax->configure('decodeUTF8Input',true);$xajax->processRequest();//Processa a requisiçao AJAX
?>
<!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">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Agenda de Eventos by Gaspar</title><!--Chama o estilo da pagina-->
<link rel="stylesheet" type="text/css" href="estilo.css">
<!-- Responde ao browser -->
<?php $xajax->printJavascript("xajax/"); ?>
<!--Exibe a mensagem carregando -->
<script type="text/javascript">
xajax.callback.global.onRequest = function() {xajax.$('carregando').style.display = 'block';}
xajax.callback.global.beforeResponseProcessing = function() {xajax.$('carregando').style.display='none';}
</script>
</head>
<body onload="xajax_Agenda()"><!-- Sai bunbando o calendario -->
<?phpinclude "sql.php";//conexão com o banco de dados
@mysql_select_db($db);//selecione o banco de dados
/Gera as divs onde serão exibidos os dados requisitados /
print "<div id=\"carregando\"><img src=\"load.gif\"/> carregando...</div>";
print "<div id=\"conteudo\"></div>";
print "<div id=\"eventos\"></div>";
?>
</body>
</html>Criar a pagina com as funções
funcoes.php
<?php
session_start();//inicia a sessão do ano
include "sql.php";//Conexão
########################################
Função para voltar os meses do ano #
########################################
function Antes($antes){
$resposta = new xajaxResponse();
//sleep(2); //habilite, caso queira ver ação do loading no localserver
$dia = date('d');
$month = $antes;
$_SESSION['ano'];
$hoje = date('j');//função importante pego o dia corrente
if($month == 0){//Caso antes de janeiro
$month = 12;
$_SESSION['ano'] = $_SESSION['ano'] - 1;
}switch($month.$n){/notem duas variaveis para o switch para identificar dia e limitar numero de dias/
case 1: $mes = "JANEIRO";
$n = 31;
break;
case 2: $mes = "FEVEREIRO";// todo ano bixesto fev tem 29 dias
$bi = $_SESSION['ano'] % 4;//anos multiplos de 4 são bixestos
if($bi == 0){
$n = 29;
}else{
$n = 28;
}
break;
case 3: $mes = "MARÇO";
$n = 31;
break;
case 4: $mes = "ABRIL";
$n = 30;
break;
case 5: $mes = "MAIO";
$n = 31;
break;
case 6: $mes = "JUNHO";
$n = 30;
break;
case 7: $mes = "JULHO";
$n = 31;
break;
case 8: $mes = "AGOSTO";
$n = 31;
break;
case 9: $mes = "SETEMBRO";
$n = 30;
break;
case 10: $mes = "OUTUBRO";
$n = 31;
break;
case 11: $mes = "NOVEMBRO";
$n = 30;
break;
case 12: $mes = "DEZEMBRO";
$n = 31;
break;
}
$pdianu = mktime(0,0,0,$month,1,$_SESSION['ano']);//primeiros dias do mes$dialet = date('D', $pdianu);//escolhe pelo dia da semana
switch($dialet){//verifica que dia cai
case "Sun": $branco = 0; break;
case "Mon": $branco = 1; break;
case "Tue": $branco = 2; break;
case "Wed": $branco = 3; break;
case "Thu": $branco = 4; break;
case "Fri": $branco = 5; break;
case "Sat": $branco = 6; break;
}
$res .= '<table class="tabela" >';//construção do calendario
$res .= '<tr>';
$antes = $month - 1;// diminui um mes
$proximo = $month + 1;// aumenta um mes
$res .= "<td class=\"mes\"><a href=\"java script:void(0);\" onclick=\"xajax_Antes($antes);\" title=\"Mês anterior\"><img src=\"ant.gif\" border=\"0\"></a></td>";/*mês anterior*/
$res .= '<td class="mes" colspan="5">'.$mes.'/'.$_SESSION['ano'].'</td>';/*mes atual e ano*/
$res .= "<td class=\"mes\"><a href=\"java script:void(0);\" onclick=\"xajax_Proximo($proximo);\" title=\"Próximo mês\"><img src=\"prox.gif\" border=\"0\"></a></td>";/*Proximo mês*/
$res .= '</tr><tr>';
$res .= '<td class="sem">D</td>';
$res .= '<td class="sem">S</td>';
$res .= '<td class="sem">T</td>';
$res .= '<td class="sem">Q</td>';
$res .= '<td class="sem">Q</td>';
$res .= '<td class="sem">S</td>';
$res .= '<td class="sem">S</td>';
$res .= '</tr><tr>';
$dt = 1;
if($branco > 0){
for($x = 0; $x < $branco; $x++){
$res .= '<td> </td>';/*preenche os espaços em branco*/
$dt++;
}
}
for($i = 1; $i <= $n; $i++ ){/*agora vamos no banco de dados verificar os evendos*/
$dtevento = $i."-".$month."-".$_SESSION['ano'];
mysql_query("SET CHARACTER SET utf8");
$sqlag = mysql_query("SELECT * FROM agenda WHERE dtevento = '$dtevento'") or die(mysql_error());
$num = mysql_num_rows($sqlag);/*quantos eventos tem para o mes*/
$id = @mysql_result($sqlag, 0, "id");
$idev = @mysql_result($sqlag, 0, "dtevento");
$eve = @mysql_result($sqlag, 0, "evento");
if($num > 0){/*prevalece qualquer dia especial do calendario, por isso está em primeiro*/
$res .= '<td class="evt">';
$res .= "<a href=\"java script:void(0);\" onclick=\"xajax_Mostrar($id);\">".$i."</a>";
$res .= '</td>';
$dt++;/*incrementa os dias da semana*/
$qt++;/*quantos eventos tem no mes*/
}elseif($i == $hoje){/*imprime os dia corrente*/
$res .= '<td class="hj">';
$res .= $i;
$res .= '</td>';
$dt++;
}elseif($dt == 1){/*imprime os domingos*/
$res .= '<td class="dom">';
$res .= $i;
$res .= '</td>';
$dt++;
}else{/*imprime os dias normais*/
$res .= '<td class="td">';
$res .= $i;
$res .= '</td>';
$dt++;
}
if($dt > 7){/*faz a quebra no sabado*/
$res .= '</tr><tr>';
$dt = 1;
}
}
$res .= '</tr>';
$res .= '</table>';
$resposta->assign("conteudo", "innerHTML", $res);//Registra os valores
$resposta->clear("eventos", "innerHTML");//apaga o evento mostrado
return $resposta;//Retorna os valores
}########################################
Funçao que avança entre os meses #
########################################
function Proximo($proximo){
$resposta = new xajaxResponse();
//sleep(2);//habilite para ver loading no localserver
$dia = date('d');
$month = $proximo;
$_SESSION['ano'];
$hoje = date('j');//função importante pego o dia corrente
if($month == 13){//caso o mes for maior que dezembro
$month = 1;
$_SESSION['ano'] = $_SESSION['ano'] + 1;
}switch($month.$n){/notem duas variaveis para o switch para identificar dia e limitar numero de dias/
case 1: $mes = "JANEIRO";
$n = 31;
break;
case 2: $mes = "FEVEREIRO";// todo ano bixesto fev tem 29 dias
$bi = $ano % 4;//anos multiplos de 4 são bixestos
if($bi == 0){
$n = 29;
}else{
$n = 28;
}
break;
case 3: $mes = "MARÇO";
$n = 31;
break;
case 4: $mes = "ABRIL";
$n = 30;
break;
case 5: $mes = "MAIO";
$n = 31;
break;
case 6: $mes = "JUNHO";
$n = 30;
break;
case 7: $mes = "JULHO";
$n = 31;
break;
case 8: $mes = "AGOSTO";
$n = 31;
break;
case 9: $mes = "SETEMBRO";
$n = 30;
break;
case 10: $mes = "OUTUBRO";
$n = 31;
break;
case 11: $mes = "NOVEMBRO";
$n = 30;
break;
case 12: $mes = "DEZEMBRO";
$n = 31;
break;
}
$pdianu = mktime(0,0,0,$month,1,$_SESSION['ano']);//primeiros dias do mes$dialet = date('D', $pdianu);//escolhe pelo dia da semana
switch($dialet){//verifica que dia cai
case "Sun": $branco = 0; break;
case "Mon": $branco = 1; break;
case "Tue": $branco = 2; break;
case "Wed": $branco = 3; break;
case "Thu": $branco = 4; break;
case "Fri": $branco = 5; break;
case "Sat": $branco = 6; break;
}
$res .= '<table class="tabela" >';//construção do calendario
$res .= '<tr>';
$antes = $month - 1;
$proximo = $month + 1;
$res .= "<td class=\"mes\"><a href=\"java script:void(0);\" onclick=\"xajax_Antes($antes);\" title=\"Mês anterior\"><img src=\"ant.gif\" border=\"0\"></a></td>";/*mês anterior*/
$res .= '<td class="mes" colspan="5">'.$mes.'/'.$_SESSION['ano'].'</td>';/*mes atual e ano*/
$res .= "<td class=\"mes\"><a href=\"java script:void(0);\" onclick=\"xajax_Proximo($proximo);\" title=\"Próximo mês\"><img src=\"prox.gif\" border=\"0\"></a></td>";/*Proximo mês*/
$res .= '</tr><tr>';
$res .= '<td class="sem">D</td>';//$res .= ar os dias da semana
$res .= '<td class="sem">S</td>';
$res .= '<td class="sem">T</td>';
$res .= '<td class="sem">Q</td>';
$res .= '<td class="sem">Q</td>';
$res .= '<td class="sem">S</td>';
$res .= '<td class="sem">S</td>';
$res .= '</tr><tr>';
$dt = 1;
if($branco > 0){
for($x = 0; $x < $branco; $x++){
$res .= '<td> </td>';/*preenche os espaços em branco*/
$dt++;
}
}
for($i = 1; $i <= $n; $i++ ){/*agora vamos no banco de dados verificar os evendos*/
$dtevento = $i."-".$month."-".$_SESSION['ano'];
mysql_query("SET CHARACTER SET utf8");
$sqlag = mysql_query("SELECT * FROM agenda WHERE dtevento = '$dtevento'") or die(mysql_error());
$num = mysql_num_rows($sqlag);/*quantos eventos tem para o mes*/
$id = @mysql_result($sqlag, 0, "id");
$idev = @mysql_result($sqlag, 0, "dtevento");
$eve = @mysql_result($sqlag, 0, "evento");
if($num > 0){/*prevalece qualquer dia especial do calendario, por isso está em primeiro*/
$res .= '<td class="evt">';
$res .= "<a href=\"java script:void(0);\" onclick=\"xajax_Mostrar($id);\">".$i."</a>";
$res .= '</td>';
$dt++;/*incrementa os dias da semana*/
$qt++;/*quantos eventos tem no mes*/
}elseif($i == $hoje){/*imprime os dia corrente*/
$res .= '<td class="hj">';
$res .= $i;
$res .= '</td>';
$dt++;
}elseif($dt == 1){/*imprime os domingos*/
$res .= '<td class="dom">';
$res .= $i;
$res .= '</td>';
$dt++;
}else{/*imprime os dias normais*/
$res .= '<td class="td">';
$res .= $i;
$res .= '</td>';
$dt++;
}
if($dt > 7){/*faz a quebra no sabado*/
$res .= '</tr><tr>';
$dt = 1;
}
}
$res .= '</tr>';
$res .= '</table>';
$resposta->assign("conteudo", "innerHTML", $res);//Registra os valores
$resposta->clear("eventos", "innerHTML");//apaga o evento mostrado
return $resposta;//Retorna os valores
}####################################################
Função que cria o Calendário e registra o Ano #
####################################################
function Agenda(){
$resposta = new xajaxResponse();
//sleep(2);//Habilite para ver o loading no localserver
$dia = date('d');
$month = ltrim(date('m'),"0");/*ltrim elimina os zeros anteposto no mes*/
session_register('ano');//Regitra a sessão
$_SESSION['ano']= date('Y');//Registra o ano corrente
$hoje = date('j');//função importante pego o dia correnteswitch($month.$n){/notem duas variaveis para o switch para identificar dia e limitar numero de dias/
case 1: $mes = "JANEIRO";
$n = 31;
break;
case 2: $mes = "FEVEREIRO";// todo ano bixesto fev tem 29 dias
$bi = $_SESSION['ano'] % 4;//anos multiplos de 4 são bixestos
if($bi == 0){
$n = 29;
}else{
$n = 28;
}
break;
case 3: $mes = "MARÇO";
$n = 31;
break;
case 4: $mes = "ABRIL";
$n = 30;
break;
case 5: $mes = "MAIO";
$n = 31;
break;
case 6: $mes = "JUNHO";
$n = 30;
break;
case 7: $mes = "JULHO";
$n = 31;
break;
case 8: $mes = "AGOSTO";
$n = 31;
break;
case 9: $mes = "SETEMBRO";
$n = 30;
break;
case 10: $mes = "OUTUBRO";
$n = 31;
break;
case 11: $mes = "NOVEMBRO";
$n = 30;
break;
case 12: $mes = "DEZEMBRO";
$n = 31;
break;
}
$pdianu = mktime(0,0,0,$month,1,$_SESSION['ano']);//primeiros dias do mes$dialet = date('D', $pdianu);//escolhe pelo dia da semana
switch($dialet){//verifica que dia cai
case "Sun": $branco = 0; break;
case "Mon": $branco = 1; break;
case "Tue": $branco = 2; break;
case "Wed": $branco = 3; break;
case "Thu": $branco = 4; break;
case "Fri": $branco = 5; break;
case "Sat": $branco = 6; break;
}
$res .= '<table class="tabela" >';//construção do calendario
$res .= '<tr>';
$antes = $month - 1;//diminui um mes quando volta
$proximo = $month + 1;// aumenta um mes quando avança
$res .= "<td class=\"mes\"><a href=\"java script:void(0);\" onclick=\"xajax_Antes($antes);\" title=\"Mês anterior\"><img src=\"ant.gif\" border=\"0\"></a></td>";/*mês anterior*/
$res .= '<td class="mes" colspan="5">'.$mes.'/'.$_SESSION['ano'].'</td>';/*mes atual e ano*/
$res .= "<td class=\"mes\"><a href=\"java script:void(0);\" onclick=\"xajax_Proximo($proximo);\" title=\"Próximo mês\"><img src=\"prox.gif\" border=\"0\"></a></td>";/*Proximo mês*/
$res .= '</tr><tr>';
$res .= '<td class="sem">D</td>';
$res .= '<td class="sem">S</td>';
$res .= '<td class="sem">T</td>';
$res .= '<td class="sem">Q</td>';
$res .= '<td class="sem">Q</td>';
$res .= '<td class="sem">S</td>';
$res .= '<td class="sem">S</td>';
$res .= '</tr><tr>';
$dt = 1;
if($branco > 0){
for($x = 0; $x < $branco; $x++){
$res .= '<td> </td>';/*preenche os espaços em branco*/
$dt++;
}
}
for($i = 1; $i <= $n; $i++ ){/*agora vamos no banco de dados verificar os evendos*/
$dtevento = $i."-".$month."-".$_SESSION['ano'];
mysql_query("SET CHARACTER SET utf8");
$sqlag = mysql_query("SELECT * FROM agenda WHERE dtevento = '$dtevento'") or die(mysql_error());
$num = mysql_num_rows($sqlag);/*quantos eventos tem para o mes*/
$id = @mysql_result($sqlag, 0, "id");
$idev = @mysql_result($sqlag, 0, "dtevento");
$eve = @mysql_result($sqlag, 0, "evento");
if($num > 0){/*prevalece qualquer dia especial do calendario, por isso está em primeiro*/
$res .= '<td class="evt">';
$res .= "<a href=\"java script:void(0);\" onclick=\"xajax_Mostrar($id);\">".$i."</a>";
$res .= '</td>';
$dt++;/*incrementa os dias da semana*/
$qt++;/*quantos eventos tem no mes*/
}elseif($i == $hoje){/*imprime os dia corrente*/
$res .= '<td class="hj">';
$res .= $i;
$res .= '</td>';
$dt++;
}elseif($dt == 1){/*imprime os domingos*/
$res .= '<td class="dom">';
$res .= $i;
$res .= '</td>';
$dt++;
}else{/*imprime os dias normais*/
$res .= '<td class="td">';
$res .= $i;
$res .= '</td>';
$dt++;
}
if($dt > 7){/*faz a quebra no sabado*/
$res .= '</tr><tr>';
$dt = 1;
}
}
$res .= '</tr>';
$res .= '</table>';
$resposta->assign("conteudo", "innerHTML", $res);//Recebe os valore os valores
return $resposta;//Retorna os valores
}###############################################
Funçao que mostra os eventos relacionados #
###############################################
function Mostrar($id){
$resposta = new xajaxResponse();
//sleep(2); //Habilite para ver no servidor local
mysql_query("SET CHARACTER SET utf8");/* Configura os caracteres especiais do banco*/
$select = mysql_query("SELECT * FROM agenda WHERE id = '$id'");
$mais = @mysql_result($select, 0, "dtevento");
$sqlev = mysql_query("SELECT * FROM agenda WHERE dtevento = '$mais' ORDER BY hora ASC") or die(mysql_error());
$numev = mysql_num_rows($sqlev);
for($j = 0; $j < $numev; $j++){/*caso no mesmo dia tenha mais eventos continua imprimindo */
$eve = @mysql_result($sqlev, $j, "evento");/*pegando os valores do banco referente ao evento*/
$dev = @mysql_result($sqlev, $j, "dtevento");
$dsev = @mysql_result($sqlev, $j, "conteudo");
$auev = @mysql_result($sqlev, $j, "autor");
$lev = @mysql_result($sqlev, $j, "local");
$psev = @mysql_result($sqlev, $j, "data");
$nowev = date('d/m/Y - H:i', strtotime($psev));/*transforma a data para data padrão brazil*/
$hev = @mysql_result($sqlev, $j, "hora");
$res .= '<table width="300" cellspacing="0" cellpadding="0">';/*monta a tabela de eventos*/
$res .= '<tr><td class="show">'.$dev.' - '.$eve.'</td></tr>';
$res .= '<tr><td class="linha"><b>Hora: </b>'.$hev.'hs</td></tr>';
$res .= '<tr><td class="linha"><b>Local: </b>'.$lev.'</td></tr>';
$res .= '<tr><td class="linha"><b>Descrição: </b>'.nl2br($dsev).'</td></tr>';/*mantem o quebra da linha para dascriçao do evento*/
$res .= '<tr><td class="linha"><b>Postado: </b><small>'.$nowev.'hs por '.$auev.'</small></td></tr>';
$res .= '</table>';
}
$resposta->assign("eventos", "innerHTML", $res);//Registra os valores e destinos
return $resposta;//Retorna os valores
}
?>No link abaixo é possível visualizar o tópico sobre a área administrativa do Calendário:
ÁREA ADMINISTRATIVA DO CALENDÁRIO
Baixar os arquivos utilizados neste Tutorial
Bom galera espero ter ajudado à todos.
Qualquer dúvida, posta aí ou envia e-mail para gaspar.teixeira@gmail.com
Grande abraço e um Feliz Natal à todos!!!! http://forum.imasters.com.br/public/style_emoticons/default/natal_wink.gif
Gaspar Teixeira
Discussão (6)
Carregando comentários...