Calendario Programativo para tu web

cobwer · #1 (**permalink**) 04/07/2007, 18:59

Este es un util calendario que podrias utilizar para publicar eventos, yo lo utilizo para mi asociacion AIESEC, es facil de usar, yo tome de referencias varios que estan en la web y los adapte para que sirva de programar eventos y no solo de adornos.

agregas eventos de la siguiente forma:

Código:

eventos[0] = new evento (2,7,"evento del 2 julio jajaja")
eventos[1] = new evento (5,8,"este marca el evento del 5 agosto")

ejemplo:

funciona en IE y Moz.

Código HTML:

<html>
<head>
<title>Calendario</title>
</head>
<BODY>
<SCRIPT type="text/javascript">
//  Begin Mensaje-------------------------------------------------------------------------------------------------------------->
/*
Created by A1 JavaScripts - http://www.a1javascripts.com/
This may be used freely as long as this msg is intact!
*/
msgFont='Arial,helvetiva';
msgFontSize="12";
msgFontColor="black"
/*
Here's the array that holds the text to change the divmessage to
when you mouseover. Change the text here
*/
function evento(dia,mes,titulo){
this.dia = dia
this.mes = mes
this.titulo = titulo
}

var eventos = new Array()
eventos[0] = new evento (2,7,"evento del 2 julio jajaja")
eventos[1] = new evento (5,8,"este marca el evento del 5 agosto")
eventos[2] = new evento (15,7,"Mi evento de aiesec colombia<u><font color=ff0000>@++</font></u>")
eventos[3] = new evento (10,8,"Cumpleaño <u><font color=ff0000>Linda</font></u>")


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

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

function borrarText(){
	b_writeIt('divMessage',' ')
}
//  End Mensaje-------------------------------------------------------------------------------------------------------------->


<!-- STEP ONE: Place the following script into a separate JavaScript file called: calendar.js	 -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
//  SET ARRAYS
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');

//  DECLARE AND INITIALIZE VARIABLES
var Calendar = new Date();
	    
var month = Calendar.getMonth();    // Returns month (0-11)
var today = Calendar.getDate();    // Returns day (1-31)
var weekday = Calendar.getDay();    // Returns day (1-31)

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

var DAYS_OF_WEEK = 7;    // "constant" for number of days in a week
var DAYS_OF_MONTH = 31;    // "constant" for number of days in a month
var cal;    // Used for printing

Calendar.setDate(1);    // Start the calendar day at '1'
Calendar.setMonth(month);    // Start the calendar month at now


/* VARIABLES FOR FORMATTING
NOTE: You can format the 'BORDER', 'BGCOLOR', 'CELLPADDING', 'BORDERCOLOR'
      tags to customize your caledanr's look. */

var TR_start = '<TR>';
var TR_end = '</TR>';
var highlight_start = '<TD WIDTH="20"><TABLE CELLSPACING=0 BORDER=1 BGCOLOR=DEDEFF 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>';

/* BEGIN CODE FOR CALENDAR
NOTE: You can format the 'BORDER', 'BGCOLOR', 'CELLPADDING', 'BORDERCOLOR'
tags to customize your calendar's look.*/

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 + '" BGCOLOR="#EFEFEF"><CENTER><B>';
cal += month_of_year[month]  + '   ' + year + '</B>' + TD_end + TR_end;
cal += TR_start;

//   DO NOT EDIT BELOW THIS POINT  //

// LOOPS FOR EACH DAY OF WEEK
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;

// FILL IN BLANK GAPS UNTIL TODAY'S DAY
for(index=0; index < Calendar.getDay(); index++)
cal += TD_start + '  ' + TD_end;

// LOOPS FOR EACH DAY IN CALENDAR
for(index=0; index < DAYS_OF_MONTH; index++) 
{
if( Calendar.getDate() > index )
{
  // RETURNS THE NEXT DAY TO PRINT
  week_day =Calendar.getDay();

  // START NEW ROW FOR FIRST DAY OF WEEK
  if(week_day == 0)
  cal += TR_start;

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

  // END ROW FOR LAST DAY OF WEEK
  if(week_day == DAYS_OF_WEEK)
  cal += TR_end;
  }

  // INCREMENTS UNTIL END OF THE MONTH
  Calendar.setDate(Calendar.getDate()+1);

}// end for loop

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

//  End Calendario---------------------------------------------------------------------------------------------------------------->

</SCRIPT>

<p>Calendario
<br>
<SCRIPT  type="text/javascript">
//  PRINT CALENDAR
document.write(cal);
</SCRIPT>
<div id="divMessage" style="position:absolute; width:175px; height:80px; font-size: 12px; font-family: Arial; color:#000000;">
      Aqui se muestra el evento que se&ntilde;ales en el Calendario!!! <br>
     </div>
</BODY>

musaweb · #2 (**permalink**) 16/07/2008, 10:47

Buenas tardes , necesito un calendario igual que tienes ,que contenga eventos ,pero el ejemplo que esta puesto no me funciona no s'e porque me pueden ayudaar

corretodo · #3 (**permalink**) 18/08/2010, 03:15

Como puedo hacer unos botones para pasar de mes.

Muchas gracias

caricatos · #4 (**permalink**) 18/08/2010, 04:04

Hola:

No está bien revivir un viejo tema para hacer una nueva pregunta. El tema siempre puede referenciarse.