Ayuda me urge!!

black88_smith · #1 (**permalink**) 21/12/2010, 09:52

Alguein me puede ayudar con hacer un calendario de eventos !!!
Yo Tengo esto pero le quiero agregar registros a tal fecha y al darle clic me muestre el contenido asi mismo quiero que el administrador inserte los eventos pero desde un formulario no desde el codigo Como lo hago!!!

black88_smith · #2 (**permalink**) 21/12/2010, 09:54

<html>
<head>
<title>Calendario</title>
</head>
<BODY>
<SCRIPT type="text/javascript">

msgFont='Arial,helvetiva';
msgFontSize="12";
msgFontColor="black"

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

var eventos = new Array()
eventos[0] = new evento (2,12,"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',' ')
}

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

var Calendar = new Date();

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

if(Calendar.getFullYear){
year = Calendar.getFullYear();
}else{
year = Calendar.getYear()+1900;}

var DAYS_OF_WEEK = 7;
var DAYS_OF_MONTH = 31;
var cal; // Used for printing

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 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;

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 )
{
// 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;
}

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

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

}// end for loop

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

</SCRIPT>

<p>Calendario
<br>
<SCRIPT type="text/javascript">
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>