Foros del Web » Programando para Internet » Javascript »

Calendario con eventos - Edición

 Estas en el tema de Calendario con eventos - Edición en el foro de Javascript en Foros del Web. Hola, tal y como aparece en ésta misma web: http://www.forosdelweb.com/f13/calendario-programativo-para-web-502998/ Hay un calendario con eventos... He hecho muchos cambios, desde cambiar los campos, hasta los ...
  #1 (permalink)  
Antiguo 23/08/2010, 09:46
 
Fecha de Ingreso: agosto-2010
Mensajes: 1
Antigüedad: 13 años, 8 meses
Puntos: 0
Sonrisa Calendario con eventos - Edición
Hola, tal y como aparece en ésta misma web:

http://www.forosdelweb.com/f13/calendario-programativo-para-web-502998/

Hay un calendario con eventos... He hecho muchos cambios, desde cambiar los campos, hasta los colores, pero no consigo hacer que el calendario comience en Lunes... ya he cambiado la variable de los nombres, y consigo que me marque bien el día, peroooo no consigo que haga bien del todo el cambio...

Alguien puede echarme una mano???

Gracias
  #2 (permalink)  
Antiguo 26/08/2010, 14:34
Avatar de Adler
Colaborador
  
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 17 años, 3 meses
Puntos: 126
Respuesta: Calendario con eventos - Edición
Hola

Estaba dando una vuelta por el foro y me encontré con este tema. Aquí lo tienes editado para que empiece por lunes. Lo que hace el aburrimiento
Cita:
<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('Lu','Ma','Mi','Ju','Vi','Sa','Do');
var month_of_year = new Array('Enero','Febrero','Marzo','Abril','Mayo','Ju nio','Julio','Agosto','Septiembre','Octubre','Novi embre','Deciembre');

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

Calendar.setDate(1); // Start the calendar day at '1'
var primerDiaMes = Calendar.getDay();
if (primerDiaMes == 0) {primerDiaMes = 6;} else { primerDiaMes -=1;}

// 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.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 < primerDiaMes; 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 == 1)
cal += TR_start;

if(week_day != DAYS_OF_WEEK)
{
// SET VARIABLE INSIDE LOOP FOR INCREMENTING PURPOSES
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>
</html>
Suerte
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />
  #3 (permalink)  
Antiguo 12/09/2010, 03:44
 
Fecha de Ingreso: septiembre-2010
Mensajes: 1
Antigüedad: 13 años, 7 meses
Puntos: 0
Respuesta: Calendario con eventos - Edición
Fantástico, funcionando perfectamente, muchas gracias, me gustaría adornar algo más el tema.
Sería posible que el evento aparezca en una ventanita de posición configurable?
Gracias a todos los gurus informáticos.
Luis
  #4 (permalink)  
Antiguo 12/09/2010, 12:28
Avatar de Adler
Colaborador
  
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 17 años, 3 meses
Puntos: 126
Respuesta: Calendario con eventos - Edición
Hola

Esto es lo que tendrás que editar para hacer lo que llamas una "ventanita configurable"
Cita:
function changeText(num){
b_writeIt('divMessage',eventos[num].titulo)
}

function borrarText(){
b_writeIt('divMessage',' ')
}
Suerte
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />

Etiquetas: calendario, edición, eventos
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Tema Cerrado


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 08:23.