[Resolvido] Calendário "Dinâmico"!

Lucas Vida · Novembro 10, 2009

Boa tarde amigos,

Estou necessitando desenvolver um calendário seria bem parecido com o do forum, não sei se ele foi feito em JS, mas seria isso o que eu necessitaria. por exemplo a pessoa clicar e ver um evento nesse dia...alguem sabe como se faz esse calendário???

Abs

klonder · Novembro 10, 2009

É possível fazer apenas com JavaScript, mas na minha opinião, seria mais conveniente fazer com PHP e um Banco de Dados.

O que você prefere?

Lucas Vida · Novembro 11, 2009

Klonder se der pra fazer em JS...acho que seria mais "leve"...Mas pelo o que você conhece qual você recomendaria???

klonder · Novembro 12, 2009

Sinceramente, eu prefiro em PHP + MySQL por ser mais robusto, além de rodar no lado do servidor, respeitando a hora do servidor e não da máquina do visitante do site.

Entretanto, de ontem para hoje desenvolvi um calendário muito simples em JavaScript, mas que dará uma noção de como fazer algo parecido.

Por ser simples, ele é um pouco complexo (ambíguo, né?!) até se conhecer a maneira correta para sua configuração. O código já está comentado, mas mesmo assim será necessário um pouco de paciência para compreender todo o processo.

Calendário simples em JavaScript, com uso de arrays para os dias de eventos:

<html>
<head>
<title>Imagens em um ComboBox - by Klonder</title>
<style type="text/css">
* {background-color:#FFF; margin:0; padding:0; list-style: none;}
</style>

<script type="text/javascript">
/*
Código by: klonder
klonder@ymail.com
Post exclusivo em: www.forum.imasters.com.br
*/

//Criando um loop que irá criar multiarrays para todos os dias do ano:
var evento = new Array();
for (loopMes = 0; loopMes<=11; loopMes++) {
	evento[loopMes] = new Array();
	for (loopDia=1; loopDia<=31; loopDia++) {
		evento[loopMes][loopDia] = "";
	}
}

//----------------------- AGENDA -----------------------//
evento[10][1] = "Hoje é dia 1. O mês está começando!";
evento[10][2] = "Olá. Hoje é dia 2. O mês começou ontem!";
evento[10][3] = "Eu gosto do dia 3!";
evento[10][28] = "O mês está acabando. Hoje é dia 28!";




function calendario() {
//Defina o mês que será exibido no calendário:
var pesquisaMes = 10; //0:Jan; 1:Fev; 2:Mar; 3:Abr; 4:Mai; 5:Jun; 6:Jul; 7:Ago; 8:Set; 9:Out; 10:Nov; 11:Dez;

//Defina o ano:
var ano = 2009;

//Defina o dia da semana em que o ano começa:
var inicioDiaSem = 4; //0:Dom; 1:Seg; 2:Ter; 3:Qua; 4:Qui; 5:---; 6:Sáb;



//----------------------- NÃO ALTERAR -----------------------//
var pesquisaDia = 1; //Não alterar
var diasNoMes = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
//Verificando se o ano é bissexto:
diasNoMes[1] = ((ano%4 == 0)?29:28);

var pesquisaDiasTotais = 0;

for (var i = 0; i<pesquisaMes; i++) {
	pesquisaDiasTotais += diasNoMes[i];
}
pesquisaDiasTotais += pesquisaDia;
//alert(pesquisaDiasTotais);

var calculoDiaSem = ((pesquisaDiasTotais%7)+inicioDiaSem);


//------------------- INICIANDO A CONSTRUÇÃO DO CALENDÁRIO -------------------//
var tabela = ""; //Variável que irá armazenar todas as linhas da tabela do calendário;
var iCount = 1; //Criando um contador contínuo, que servirá de referencial;

//Criando um contador para o dia do mês.
//Esse contador só iniciará quando o iCount for maior ou igual ao dia em que a semana inicia;
var iMes = 1; 

//Construindo o calendário, com 6 linhas:
for (var iLinha=1; iLinha<=6; iLinha++) {
tabela += "<tr>"; // Abrindo a linha atual;
	for(var iCol = 1; iCol<=7; iCol++) {
			
			//Se iCount for maior que o dia em que a semana inicia, então: iniciar iMes;
			//Após os testes, para evitar iniciar o calendário saltando uma linha, vamos elevar o valor
			//do iCount, caso o calculoDiaSem seja 7;
			if (calculoDiaSem > 7) {
				iCount = 8;
			}
			
			if (iCount >= calculoDiaSem && iMes <= diasNoMes[pesquisaMes]) {
				//Verificar se existem eventos associados ao dia atual:
				var variavel = eval("evento["+iMes+"]");
				if (evento[pesquisaMes][iMes] != "") {
					temEvento = true;
				} else {
					temEvento = false;
				}
				
				//alert(evalEvento);
				if (temEvento == true) {
					tabela += "<td><a href='javascript:verEvento("+pesquisaMes+","+iMes+")'>"+iMes+"</a></td>";
				} else {
					tabela += "<td>"+iMes+"</td>";
				}
				iMes++;
			} else {
				tabela += "<td> </td>";
			}
		iCount++;
	}
tabela += "</tr>"; // Fechando a linha atual;
}

document.getElementById("calendario").innerHTML = "<table width='200px' border='1'>"+tabela+"</table>";
}

function verEvento(v1,v2) {
var objCalEv = document.getElementById("calendarioEventos");

objCalEv.innerHTML = evento[v1][v2];
}
window.onload = calendario;
</script>
</head>
<body>
<div id="calendario"></div>
<br><br>
<div id="calendarioEventos"></div>
</body>
</html>

Lucas Vida · Novembro 13, 2009

Klonder, muito obrigado cara...

Paciência se tratando de aprender é o que eu mais tenho, vontade de dominar programação é muita...por isso perco horas vendo condigo pra poder aprender!

Valeu...Bom FDS.

klonder · Novembro 14, 2009

Você tem perfil de quem será um excelente desenvolvedor. No ramo da informática, a diferença está realmente na vontade de aprender e na capacidade de querer fazer. Por mais difícil que seja alguma linguagem, o desejo de ver as coisas funcionando é realmente o diferencial.

Abraços e bom final de semana pra você também! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Patrique · Novembro 14, 2009

Howww vou pegar este calendário para mim!

Show

Lucas Vida · Novembro 16, 2009

Valeu pelo incentivo Klonder,

Realmente não é nada fácil, muitas vezes tenho dificuldade até mesmo de saber por onde e como começar e acabo fazendo perguntas "facéis". Mas com um pouco de dedicação, muito estudo e o "correr átras" acho que ajuda...hehehe. Patrique realemente te recomendo, começei a analizar esse calendário está muito show mesmo.

Abs

suportetecnicojunior · Outubro 30, 2010

To precisando de algo parecido, estou criando uma agenda.

Quero fazer uma paginação, tipo, botão "amanhã" e botão "ontem", isso fará busca no banco de dados.

Preciso que esses botões executem a busca na base com o formato "00/00/0000".

Alguém tem alguma idéia de como fazer isso?

Arquivado

[Resolvido] Calendário "Dinâmico"!

Recommended Posts

Lucas Vida 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

klonder 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucas Vida 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

klonder 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucas Vida 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

klonder 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

Patrique 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Lucas Vida 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

suportetecnicojunior 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Javascript - Calcular Valores Monetário em Tempo Real

JavaScript - Exibir logo dentro da Tabela html

PHP+Codeigniter - Implementar o Input CÓDIGO ou ID do Produto

Fóruns

Tempo Real

Informação importante