Ayuda con esto!!

black88_smith · #1 (**permalink**) 20/12/2010, 10:59

Antes que nada gracias a todos los Foreros necesito un favor si me pueden apoyar en lo que quiero hacer es agregarle un boton de atras y siguiente a mi calendario de eventos asi mismo que al darle click a la fecha me muestre el contenido en una ventanita emergente ....
Ahi le dejo mi codigo espero su pronta solucion de preferencias escribanme ejemplos :

Código PHP:

   
<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','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();

}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&ntilde;ales en el Calendario!!! <br>

     </div>

</BODY>