Calendario JavaScript, dudas.

Kewon · #1 (**permalink**) 06/04/2009, 03:16

Hola tengo el siguiente calendario echo en JavaScript, queria saber si le puedo agregar alguna funcion con sus respectivos botones que te permita navegar por los meses, y tambien si se le pueden añadir enlaces a los eventos.

Aqui os dejo el codigo:

Código:

<html>
<head>
<title>Calendario</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="css/calendario.css" media="screen" rel="stylesheet" type="text/css">
<BODY style=" background-color: transparent; ">

<SCRIPT type="text/javascript">

msgFont='Arial,helvetiva';
msgFontSize="15";
msgFontColor="white"


function evento(dia,mes,titulo,){
this.dia = dia
this.mes = mes
this.titulo = titulo

}

var eventos = new Array() /* que no se te olvide cazurro primero DIA*/
eventos[0] = new evento (10,4,"Inaugracion de la Web :)")


function b_writeIt(obj, text){
	document.getElementById(obj).innerHTML=text		
}

function changeText(num){
	b_writeIt('divMessage',eventos[num].titulo)
}

function borrarText(){
	b_writeIt('divMessage',' ')
}





var day_of_week = new Array('Do','Lu','Ma','Mi','Ju','Vi','Sa');
var month_of_year = new Array('Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Deciembre');


var Calendar = new Date();
	    
var month = Calendar.getMonth();    
var today = Calendar.getDate();    
var weekday = Calendar.getDay();    


if(Calendar.getFullYear){
year = Calendar.getFullYear();//IE
}else{
year = Calendar.getYear()+1900;}//Mozilla Firefox

var DAYS_OF_WEEK = 7;    
var DAYS_OF_MONTH = 31;    
var cal;    

Calendar.setDate(1);    
Calendar.setMonth(month);    




var TR_start = '<TR>';
var TR_end = '</TR>';
var highlight_start = '<TD WIDTH="20"><TABLE CELLSPACING=0 BORDER=1  BORDERCOLOR=CCCCCC style="font-size:' +msgFontSize+'px; font-family:'+msgFont+'; color:'+msgFontColor+'"><TR><TD WIDTH=18><B><CENTER>';
var highlight_end   = '</CENTER></TD></TR></TABLE></B>';
var TD_start = '<TD WIDTH="20"><CENTER>';
var TD_end = '</CENTER></TD>';



cal =  '<TABLE BORDER=1 CELLSPACING=0 CELLPADDING=0 BORDERCOLOR=BBBBBB style="font-size:' +msgFontSize+'px; font-family:'+msgFont+'; color:'+msgFontColor+'"><TR><TD>';
cal += '<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=2 style="font-size:' +msgFontSize+'px; font-family:'+msgFont+'; color:'+msgFontColor+'">' + TR_start;
cal += '<TD COLSPAN="' + DAYS_OF_WEEK + '"><CENTER><B>';
cal += month_of_year[month]  + '   ' + year + '</B>' + TD_end + TR_end;
cal += TR_start;




for(index=0; index < DAYS_OF_WEEK; index++)
{
	cal += TD_start + day_of_week[index] + TD_end;
}

cal += TD_end + TR_end;
cal += TR_start;


for(index=0; index < Calendar.getDay(); index++)
cal += TD_start + '  ' + TD_end;


for(index=0; index < DAYS_OF_MONTH; index++) 
{
if( Calendar.getDate() > index )
{
  
  week_day =Calendar.getDay();

  
  if(week_day == 0)
  cal += TR_start;

  if(week_day != DAYS_OF_WEEK)
  {
	  
	  var day  = Calendar.getDate();
		
	  
	 	var iEvent;
		for(iEvent=0; iEvent < eventos.length; iEvent++)
		{
			if( ((month+1)==eventos[iEvent].mes)  && (day==eventos[iEvent].dia) )//cuando coincidan con los eventos
		  		day = "<a href='javascript:void(0)' onMouseOver='changeText(" + iEvent + "); window.status=\"Perl Site\";return true;'  onMouseOut='borrarText(); window.status=\"\";return true;'> " + day + '</a>';
		}
		
		 
		 if( today==Calendar.getDate() )		 
		 	 cal += highlight_start + day + highlight_end + TD_end;
	 	 else	//dias normales
		  cal += TD_start + day + TD_end;	  	
  } 

  
  if(week_day == DAYS_OF_WEEK)
  cal += TR_end;
  }

  
  Calendar.setDate(Calendar.getDate()+1);

}

cal += '</TD></TR></TABLE></TABLE>';

//  fin del calendario -.-

</SCRIPT>
<p align="center"><span class="style2"> Calendario de Actividades
</span><br>
<SCRIPT  type="text/javascript">

document.write(cal);
</SCRIPT>
<div id="divMessage" style="position:absolute; width:231px; height:114px; font-size: 15px; font-family: Arial; color:#ffffff; left: 181px; z-index: 2; top: 226px;">
       <div align="center"><br>
       </div>
</div>
</BODY>
</html>

Muchas gracias de antemano :)

Adler · #2 (**permalink**) 06/04/2009, 07:07

Hola

Más que ayudarte con ese script, te paso esta liga de la grandiosa Tunait

Suerte

Kewon · #3 (**permalink**) 06/04/2009, 11:24

Muchas gracias voy a probarlo ya :)