Ir para conteúdo

POWERED BY:

Arquivado

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

Freelife

[Resolvido] Calendário com eventos do ano

Recommended Posts

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

×

Informação importante

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