Ir para conteúdo

POWERED BY:

Arquivado

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

AMON-HÁ

Calendário Dinâmico

Por , em Javascript

Recommended Posts

AMON-HÁ    0

AMON-HÁ
Postado

Olá pessoal,

 

Eu desenvolvi aqui um calendário, baseado em alguns modelos que eu peguei na internet...

A estrutura tá conforme eu queria, mas eu preciso tornar ele dinâmico... ou seja, ficar mudando os meses sem precisar atualizar a página.

Como meus conhecimentos em javascript ainda são bem básicos, eu não sei como eu consigo fazer o que quero...

Por isso, no que puderem me ajudar eu agradeço...

Andei até dando uma olhada em alguns modelos, mas são muito complicado de entender...

Creio que pelo que eu já fiz, não será muito difícil conseguir torná-lo dinâmico...

 

No momento ele está como na imagem abaixo:

Imagem Postada

 

Ae vai o código do meu calendário:

 

calendario.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="calendario.js"></script>
<style type="text/css">
<!--
#corpo {
	width:200px;
	text-align: center;
}
-->
</style>
</head>

<body>
<script type="text/javascript">
<!--
document.write(gerarCalendario());
//-->
</script>
</body>
</html>

calendario.js

function gerarCalendario() {
	hoje = new Date();
	dia = hoje.getDate();
	mes = hoje.getMonth();
	ano = hoje.getFullYear();
	nomemes = ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'];
	inicio = new Date(ano,mes,1);
	letrasSemana = ['D','S','T','Q','Q','S','S'];
	a = 0;
	bi = bissexto(ano) ? 29 : 28;
	diasmes = [31,bi,31,30,31,30,31,31,30,31,30,31];
	
	mesmostrado = mes;
	mesanterior = mes-1;
	proximomes = mes+1;
	
	function bissexto(year) {
		if (year % 4 == 0) // regra básica
			return true; // se o ano é bissexto
			/* else */ // neste caso o else não é necessario
			return false; // se o ano não é bissexto
	}
	
	t = '<div id="corpo">';
	t += '<div>' + nomemes[mesmostrado] + ', ' + ano + '</div>';
	t += '<div><table width="100%" border="0">';
	t += '<tr>';
	for(i=0; i<letrasSemana.length; i++) {
		t += '<td><div align="center">' + letrasSemana[i] + '</div></td>';
	}
	t += '</tr>';
	t += '</table>';
	t += '</div>';
	t += '<div><table width="100%" border="0">';
	t += '<tr>';
	if (inicio.getDay() == 0) {
		increase = 0;
	} else {
		increase = 1;
	}
	for(i=1; a<diasmes[mes]; i++) {
		if(i < inicio.getDay()+increase) {
			t += '<td><div align="center"></div></td>';
		} else {
			a++;
			if (a == dia) {
				t += '<td><div align="center"><b>' + a + '</b></div></td>';
			} else {
				t += '<td><div align="center">' + a + '</div></td>';
			}
		}
		if(i%7 == 0) {
			t += '</tr>';
			t += '<tr>';
		}
	}
	t += '</tr>';
	t += '</table>';
	t += '</div>';
	
	t += '<div><table width="100%" border="0">';
	t += '<tr>';
	t += '<td><div align="left" style="padding:0 0 0 8px;">« ' + nomemes[mesanterior].substr(0,3) + '</div></td>';
	t += '<td><div align="right" style="padding:0 8px 0 0;">' + nomemes[proximomes].substr(0,3) + ' »</div></td>';
	t += '</tr>';
	t += '</table>';
	t += '</div>';
	t += '</div>';
	
	return t;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

Dinamico, por acaso você queria que as datas atualiza-sem sozinhos, tipo é 11:59 ae seria dia 15 e quando desse 12:00 (meia-noite) ele vira-se 16 sozinho??

 

ou você quer que você quer é tipo SERVER-SIDE(PHP, ASP, etc), adicionar dias especiais, datas comemorativas, totalmente editavel pelo administrador?

Compartilhar este post

Link para o post
Compartilhar em outros sites

hinom    5

hinom
Postado

o que ele quer é

 

ao cliar no mes anterior ou posterior, os dias do mês sejam carregados na tabela

 

é possível fazer essa interação on-the-fly, sem necessidade de processamento de dados no servidor.

 

basta saber manipular objetos.

 

para esse caso sugiro uso do JavaScript DOM. Ou se preferir pode usar innerHTML

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

a entendi ;), bem nesse caso é isso mesmo que você falow Hinom valew

Mas uma pergunta sempre bem formulada ajuda evitar confusões no entendimento das coisas ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

AMON-HÁ    0

AMON-HÁ
Postado

É isso mesmo que o hinom disse...

Eu queria que ao clicar no link de mês anterior ou seguinte, atualize o calendário com o novo mês... sem que isso seja preciso atualizar a página...

 

Só que eu não sei o que fazer nem a lógica da coisa...

Nunca trabalhei com JavaScript DOM não... vou dar uma lida...

Mas no que puderem me ajudar eu agradeço...

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

hinom    5

hinom
Postado

tenho um script bem antigo.. acho que fiz há uns 6 anos atrás.

 

posso te mostrar aqui então você apenas precisará copiar.

 

ou você quer aprender como fazer ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

AMON-HÁ    0

AMON-HÁ
Postado

tenho um script bem antigo.. acho que fiz há uns 6 anos atrás.

 

posso te mostrar aqui então você apenas precisará copiar.

 

ou você quer aprender como fazer ?

Eu quero aprender como fazer...

Mas talvés seu script também facilite as coisas...

 

obrigado, fico no aguardo...

Compartilhar este post

Link para o post
Compartilhar em outros sites

hinom    5

hinom
Postado

ok, vamos por partes

 

esse é o início do arquivo "calendar.js"

 

criando funções para abstração de dados:

 

function HTMLObjSet( eln ){
		/*
		  captura objetos crossbrowsers
		  retorna o caminho de um objeto buscando pelo atributo 'name' ou 'id'
		  
		  modo de uso:

		  objeto = HTMLObjSet( 'nomeObjeto' );
	   */
	var rr = false;
	if( document.all ){
		if(  document.all[eln]  ){
		rr = document.all[eln];
		}
	}else{
		if(  document[eln]  ){
		rr = document[eln];	
		}else{
			if( document.getElementById(eln) ){
			rr = document.getElementById(eln );
			}
		}
	}
	return rr;
}

function leapYear(year) {
   /*
	calcula se um determinado ano é bissexto
   */

	if (year % 4 == 0) // regra basica
	return true; //  bissexto
	return false; // nao bissexto
}

function monthDays( year ){
	/*
	 retorna quantidade de dias para um determinado mês
	 o mês de Fevereiro possui possui uma exceção. Em anos bissextos possui um dia a mais
	 essa função depende da funcção anterior leapYear()
	*/
	leap	  = leapYear(year) ? 29 : 28;
	return [31,leap,31,30,31,30,31,31,30,31,30,31];
}

function weekDay( year, month, day ){
	/* retorna o dia da semana 
	valores de 0 - 6
	*/
	return new Date( year, month, day );
}

function browserInfo(){
	/* verifica se o browser suporta document.all
	o browser IE e outros que usam o seu mecanismo possuem suporte.
	essa funcção é util para verificar qual mecanismo do browser. Atualmente os browsers utilizam 2 mecanismos.
	Se o retorno for false, provavelmente o browser utiliza mecanismo Mozilla
	*/
	if(document.all){return true;}else{return false;}
}


function getCalendar( yearb, monthb, dayb, mNames, weekDaysNames ) {

	startDay  = weekDay( yearb, monthb, 1 );
	mDays	 = monthDays( yearb );

	// result source
	rs				  = new Array();
	rs['year']		  = yearb;				 // ano
	rs['month']		 = monthb;			 // mes
	rs['day']		   = dayb;				  // dia
	rs['mDays']		 = mDays[monthb]; // quantidade de dias do mês
	rs['mNames']		= mNames[monthb];  // nome do mes por extenso
	rs['weekDaysNames'] = weekDaysNames; // array contendo siglas dos dias da semana "seg, ter, qua..."
	rs['weekDayStart']  = startDay.getDay();   // dia da semana do primeiro dia do mês. 0:dom, 1:seg, 2:ter, 3:qua...
	rs['prevMonth']	 = monthb - 1;	 // mês anterior ( nao verifica se o mês pertence ao ano anterior )
	rs['nextMonth']	 = monthb + 1;	 // mês posterior ( nao verifica se o mes pertence ao ano posterior )
	rs['leapYear']	  = leapYear(yearb);  // retorna 'flag' para informa se o ano é bissexto ou nao. true: bissexto, false:normal
	
	return rs;


	/** for debug purposes */
	/* usage "modo de uso:"


	hoje   = new Date();
	day	= hoje.getDate();
	month  = hoje.getMonth();
	year   = hoje.getFullYear();
	
	mNames		= ['Janeiro','Fevereiro','Mar?o','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'];
	weekDaysNames = ['D','S','T','Q','Q','S','S'];
	
	// load result source
	calendarData  = getCalendar( year, month, day, mNames, weekDaysNames );


	document.write( '<br />leap Year: ' );
	if( calendarData['leapYear'] ){
	document.write( 'yes' );
	}else{
	document.write( 'no' );
	}
	document.write( '<br />year: ' );
	document.write( calendarData['year'] );
	document.write( '<br />month: ' );
	document.write( calendarData['month'] );
	document.write( '<br />day: ' );
	document.write( calendarData['day'] );
	document.write( '<br />month Days: ' );
	document.write( calendarData['mDays'] );
	document.write( '<br />month Name: ' );
	document.write( calendarData['mNames'] );
	document.write( '<br />weekDaysNames: ' );
	document.write( calendarData['weekDaysNames'] );
	document.write( '<br />weekDayStart: ' );
	document.write( calendarData['weekDayStart'] );
	document.write( '<br />prevMonth: ' );
	document.write( calendarData['prevMonth'] );
	document.write( '<br />nextMonth: ' );
	document.write( calendarData['nextMonth'] );
	*/

}


function isToday( sYear, sMonth, sDay ){
	/*
	 verifica se a ano, mes e dia são iguais a data corrente
	 true: igual, false: diferente
   */
	hoje   = new Date();
	if( daysCount != '' && hoje.getFullYear() == sYear && hoje.getMonth() == sMonth && hoje.getDate() == sDay ){
	return true;
	}else{
	return false;
	}

}

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

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

  Aceito