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ñales en el Calendario!!! <br>
</div>
</BODY>