Foros del Web » Programando para Internet » Javascript »

Calendario inteligente

Estas en el tema de Calendario inteligente en el foro de Javascript en Foros del Web. Hola a todos !!! estoy tratando de hacer una cosilla, a ver si podéis echarme una mano. Se trata de hacer un calendario donde el ...
  #1 (permalink)  
Antiguo 09/12/2003, 08:22
 
Fecha de Ingreso: noviembre-2002
Mensajes: 223
Antigüedad: 21 años, 5 meses
Puntos: 1
Calendario inteligente

Hola a todos !!! estoy tratando de hacer una cosilla, a ver si podéis echarme una mano.

Se trata de hacer un calendario donde el usuario pueda navegar para seleccionar el año y mes adecuados. Hasta ahí perfecto, pero ahora viene la complicación.

En cada mes habrá una o dos fechas señaladas en otro color y cuando el usuario haga clic en una de ellas, debe aparecer otra información. La información no es la misma para todos, sino que dependiendo de la fecha seleccionada se dirige a uno u otro enlace.

Hay alguna manera de poder hacer esto con JavaScript? en principio no querría utilizar ASP.

Muchas gracias de antemano.

Saludos y feliz día!
  #2 (permalink)  
Antiguo 10/12/2003, 08:25
Avatar de jercer  
Fecha de Ingreso: octubre-2003
Mensajes: 373
Antigüedad: 20 años, 6 meses
Puntos: 13
Pon un poco de código para q veamos como creas el calendario
¿en HTML o JavaScript?
  #3 (permalink)  
Antiguo 26/12/2003, 06:43
 
Fecha de Ingreso: noviembre-2002
Mensajes: 223
Antigüedad: 21 años, 5 meses
Puntos: 1
Hola de nuevo !!!!!
Lo primero FELICES FIESTAS A TODOS !!!!!!

Veréis, el calendario que yo tengo básicamente lo he sacado de esta página:

http://www.dynamicdrive.com/dynamici...pcalendar2.htm

Ahora lo que quiero es que en cada mes aparezacan resaltadas una o dos fechas y al hacer clic en cada una de ellas me lleven a su correspondiente enlace.

Pódeisa ayudarme??

Toda la felicidad del mundo para el 2004!!!!!!!!
  #4 (permalink)  
Antiguo 29/12/2003, 15:57
 
Fecha de Ingreso: noviembre-2003
Mensajes: 383
Antigüedad: 20 años, 5 meses
Puntos: 2
Aquí tienes el código de un calendario como tu necesitas.
Me costó bastante tiempo depurarlo pero al fin lo conseguí.
Te permite seleccionar un mes cualquiera de un año cualquiera y te mostrará el mes y si tiene algún dia "activado" te aparece en otro color para que el visitante se percate de que es un enlace.

Al principio de el código veras una línea con la variable DiaEnlace.
Aquí es donde especificas el día que quieras que sea un enlace activo, qué página se debe abrir y en que frame se debe abrir.

Ejemplo:

DiaEnlace[b] = new Array(12,10,"www.forosdelweb.com","_blank");b++;

esto activará el dia 10 de Diciembre y se lo picas se abrirá la página indicada (www.forosdelweb.com) en una ventana nueva (_blank).

Espero que te ayude.

<HEAD>
<style>
a.{text-decoration:none;color=blue}
a:visited{text-decoration:none;color=blue}
</style>

<script language="JavaScript">


var b=0;
DiaEnlace = new Array();

//################################################## ############
// formato para los enlaces
// DiaEnlace[b] = new Array(Mes,Dia,Url,Ventana);b++;

DiaEnlace[b] = new Array(12,10,"www.elcorteingles.es","_blank");b++;


var ns6=document.getElementById&&!document.all
var ie4=document.all

var ColorFondoCal = "#F8D3D3";
var ColorBordeCal = "white";
var ColorFondoCab = "#F8D3D3";
var ColorBordeCab = "white";
var ColorFondoDias = "#F5C5C5";
var ColorBordeDias = "white";
var ColorFondoActual = "Red";
var ColorTextDias = "Black";
var ColorTextActual = "Blue";
var FuenteDias = "Verdana; Arial";

var DiasPorMes = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
var NombreMes = new Array('Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre');
var NombreDias = new Array('Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa', 'Do');
var MesSeleccionado;
var AnioSeleccionado;
var FechaActual = new Date();
var Hoy = FechaActual.getDate();
var MesActual = FechaActual.getMonth();
var AnioActual = FechaActual.getYear();
if (AnioActual < 1000)
AnioActual+=1900;
var startspaces=0;

function Header(Year, Mes)
{
if (Mes == 1)
DiasPorMes[1] = ((Year % 400 == 0) || ((Year % 4 == 0) && (Year % 100 !=0))) ? 29 : 28;
var Header_String = NombreMes[Mes] + ' ' + Year;
return Header_String;
}



function CreaCalendario(Year, Mes)
{

var PrimeraFecha = new Date(Year, Mes);
var Heading = Header(Year, Mes);
var PrimerDia = PrimeraFecha.getDay() ;

startspaces=Hoy;

while (startspaces > 7)
startspaces-=7;

startspaces = PrimerDia - 1;

if (startspaces < 0)
startspaces+=7;

var Cadena = '<table><font face="'+FuenteDias+'"><tr><td valign="top"><table BORDER=0 CELLSPACING=1 cellpadding=2 FRAME="box" BGCOLOR="'+ColorFondoCal+'" BORDERCOLORLIGHT="'+ColorBordeCal+'" bordercolordark="'+ColorBordeCal+'">';
Cadena += '<tr><th colspan=7 BGCOLOR="'+ColorFondoCab+'" BORDERCOLOR="'+ColorBordeCab+'">' + Heading + '</th></tr><tr>';
for (var j=0; j<7; j++)
{
Cadena += '<th ALIGN="CENTER" BGCOLOR="'+ColorFondoCab+'" BORDERCOLOR="'+ColorBordeCab+'">'+NombreDias[j]+'</th>'
}
Cadena += '<tr>';

for (s=0;s<startspaces;s++)
Cadena+="<td> </td>";

count=1;

while (count <= DiasPorMes[Mes])
{ for (b = startspaces;b<7;b++)
{ linktrue=false;

if (count==Hoy)
Cadena+="<td bgcolor='"+ColorFondoActual+"'><strong><center>";
else
Cadena+="<td><center>";

for (c=0;c<DiaEnlace.length;c++)
{ if ((DiaEnlace[c] != null) && (DiaEnlace[c][0]==Mes + 1) && (DiaEnlace[c][1]==count))
{ Cadena+='<a href="http://' + DiaEnlace[c][2] + '" target="'+DiaEnlace[c][3]+'" style="text-decoration=none" >';
linktrue=true;
}
}

if (count <= DiasPorMes[Mes])
Cadena+=count;
else
Cadena+="";

if (linktrue)
Cadena+="</a>";

if (count==Hoy)
Cadena+="</strong>";

Cadena+="</center></td>";
count++;
}
Cadena+="</tr><tr>";
startspaces=0;
}
Cadena += '</table></td></tr></table>';
cross_el=ns6? document.getElementById("Calendar") : document.all.Calendar
cross_el.innerHTML = Cadena;
}


function VerifFecha()
{ if ((event.keyCode < 48) || (event.keyCode > 57))
{ return false;
}
}

function On_Year()
{ var Year = document.when.anio.value;
if (Year.length == 4)
{ MesSeleccionado = document.when.Mes.selectedIndex;
AnioSeleccionado = Year;
CreaCalendario(AnioSeleccionado, MesSeleccionado);
}
}

function On_Mes()
{ var Year = document.when.anio.value;
if (Year.length == 4)
{ MesSeleccionado = document.when.Mes.selectedIndex;
AnioSeleccionado = Year;
CreaCalendario(AnioSeleccionado, MesSeleccionado);
}
else
{ alert('Año erroneo.');
document.when.anio.focus();
}
}


function PorDefecto() {
if (!ie4&&!ns6)
return
var Mid_Screen = Math.round(document.body.clientWidth / 2);
document.when.Mes.selectedIndex = MesActual;
document.when.anio.value = AnioActual;
MesSeleccionado = MesActual;
AnioSeleccionado = AnioActual;
CreaCalendario(AnioActual, MesActual);
}


function Pasar(direccion)
{ if (direccion == '+')
{ MesSeleccionado++;
if (MesSeleccionado == 12)
{ MesSeleccionado = 0;
AnioSeleccionado++;
}
}


if (direccion == '-')
{ MesSeleccionado--;
if (MesSeleccionado < 0)
{ MesSeleccionado = 11;
AnioSeleccionado--;
}
}

CreaCalendario(AnioSeleccionado, MesSeleccionado);
document.when.Mes.selectedIndex = MesSeleccionado;
document.when.anio.value = AnioSeleccionado;
}

</script>
</HEAD>

<body onLoad="PorDefecto()">
<div id=NavBar style="position: relative; width: 105; top: 5px; height: 24" align="left">
<form name="when">
<table width="51" >
<tr>
<td width="9" onClick="Pasar('-')"><</td>
<td width="1">
<select name="Mes" onChange="On_Mes()" style="font-size: 3 mm">
<script language="JavaScript1.2">
if (ie4||ns6)
{ for (j=0;j<NombreMes.length;j++)
{ document.writeln('<option value=' + j + ' style="font-size: 3 mm">' + NombreMes[j]);
}
}
</script>
</select>
</td>
<td width="1"><input type="text" name="anio" size=3 maxlength=4 onKeyPress="return VerifFecha()" onKeyUp="On_Year()" style="font-size: 3 mm"></td>
<td width="3" onClick="Pasar('+')">></td>
</tr>
</table>
</form>
</div>
<div id=Calendar style="position: relative; width: 76; top: -20px; height: 19" align="left"></div>
</BODY>
  #5 (permalink)  
Antiguo 30/12/2003, 04:34
 
Fecha de Ingreso: noviembre-2002
Mensajes: 223
Antigüedad: 21 años, 5 meses
Puntos: 1
QUE MARAVILLA!!! ES GENIAL!!!

Muchísimas gracias pellagofio!!!!.



Era justo lo que necesitaba.!!!! Mil gracias, de verdad, ya dudaba de que pudiera conseguirlo.

Gracias por compartir tus conocimientos y enhorabuena por estar hech@ todo un maestr@!!
Voy a ver si consigo entenderlo todo y soy capaz de hacerle unos arreglitos (de aspecto para mi página, porque de funcionamiento está impecable!!! ) y pongo aquí el código.

Mil gracias de nuevo!!! Es estupendo que exista gente que nos ayude a aprender!!

Que tengas un estupendo año 2004!!!

GRACIAS !!

Última edición por Liz26; 30/12/2003 a las 04:42
  #6 (permalink)  
Antiguo 30/12/2003, 05:07
 
Fecha de Ingreso: noviembre-2002
Mensajes: 223
Antigüedad: 21 años, 5 meses
Puntos: 1
Ah!! se me olvidaba.
Una cosita, ya de nota!! Es posible modificar este calendario para poder crear un enlace activo en otro año????

Algo así:

DiaEnlace[b] = new Array(2003,12,10,"www.elcorteingles.es","_blank"); b++;

DiaEnlace[b] = new Array(2002,12,10,"www.elcorteingles.es","_blank"); b++;

Estoy en ello a ver si lo consigo!!
  #7 (permalink)  
Antiguo 30/12/2003, 06:25
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 22 años, 8 meses
Puntos: 381
No lo he probado, pero Lizz está entusiasmada y con eso me sobra

si no recuerdo mal lleva muuuucho tiempo buscando el calendario.

Lo que más me llama la atención es que pellagofio se ha registrado para poner el script, todo un detallazo

Creo que no hay ninguna FAQ sobre calendarios, pellagofio qué tal si la añades??

un saludo
  #8 (permalink)  
Antiguo 30/12/2003, 06:49
 
Fecha de Ingreso: noviembre-2002
Mensajes: 223
Antigüedad: 21 años, 5 meses
Puntos: 1
Hola de nuevo a todos!!!

Tienes razón, Tunait. Vi la fecha de registro de pellagofio, así que aún le estoy más agradecida.

Bueno, pues ya está arreglado para que el vínculo activo pueda ser de cualquier año. La verdad es que el código es muy fácil de comprender , así que me ha resultado sencillito.

Añadimos un parámetro más a la variable DiaEnlace:

DiaEnlace[b] = new Array(Mes,Dia,Url,Ventana,Año);b++;

P.E: DiaEnlace[b] = new Array(12,10,"www.forosdelweb.com","_blank",2003);b ++;

Y ahora, el último for de la función CreaCalendario quedaría con una comprobación más, de la siguiente manera:

for (c=0;c<DiaEnlace.length;c++)
{ if ((DiaEnlace[c] != null) && (DiaEnlace[c][0]==Mes + 1) && (DiaEnlace[c][1]==count) && (DiaEnlace[c][4]==Year) )
{ Cadena+='<a href="http://' + DiaEnlace[c][2] + '" target="'+DiaEnlace[c][3]+'" style="text-decoration=none" >';
linktrue=true;
}
}

Si consigo darle otra apariencia os lo cuento!!!

Gracias a todos y FELIZ AÑO!!!!
  #9 (permalink)  
Antiguo 30/12/2003, 17:08
 
Fecha de Ingreso: noviembre-2003
Mensajes: 383
Antigüedad: 20 años, 5 meses
Puntos: 2
Pensaba que este script no tendría demasiada aceptación.

Gracias por los alagos.

Si modificas el script me gustaría que me avises a mi correo

[email protected]

ya que el foro lo visito muy de vez en cuando.

Feliz año.
  #10 (permalink)  
Antiguo 14/01/2004, 06:51
 
Fecha de Ingreso: noviembre-2002
Mensajes: 223
Antigüedad: 21 años, 5 meses
Puntos: 1
Hola a todos!!! Pues ya está. Os pongo el calendario de Pellagofio (todos los méritos son suyos) , con otro formato (gracias también a JavierB)

1º- En el documento donde aparece el calendario:
<script src="Calendario_Enlaces.js"></script>
<script language="JavaScript">
<!--
var b=0;
DiaEnlace = new Array();
// DiaEnlace[b] = new Array(Dia,Mes,Año,Url,Ventana,Año);b++;
DiaEnlace[b] = new Array(14,1,2004,"http://www.forosdelweb.com","_blank");b++;
</script>


2º- Todo el código está incluido en un archivo .js. Ahí va:

/ +------------------------------------------------------------+
// | CALENDARIO CON ENLACES ACTIVOS |
// +------------------------------------------------------------+

var ns6=document.getElementById&&!document.all
var ie4=document.all

var ColorFondoCal = "#FFFFFF";
var ColorBordeCal = "#000080";
var ColorBordeCalDias = "#E6F7FF";
var ColorFondoCab = "#009EF9";
var ColorBordeCab = "#000080";
var ColorFondoCabDias = "#A8DEFF";
var ColorBordeCabDias = "#000080";
var ColorFondoDias = "#E6F7FF";
var ColorBordeDias = "#FFFFFF";
var ColorFondoDiasEnlace = "#009EF9";
var ColorBordeDiasEnlace = "#FF0000";
var ColorFondoActual = "#FFFFCC";
var ColorEnlaceSobre = "#FF0000";
var ColorEnlace = "#FFFFFF";

var DiasPorMes = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
var NombreMes = new Array('Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre');
var NombreDias = new Array('L', 'M', 'X', 'J', 'V', 'S', 'D');

var MesSeleccionado;
var AnioSeleccionado;
var FechaActual = new Date();
var Hoy = FechaActual.getDate();
var MesActual = FechaActual.getMonth();
var AnioActual = FechaActual.getYear();
if (AnioActual < 1000)
AnioActual+=1900;
var startspaces=0;

function Header(Year, Mes)
{
if (Mes == 1)
DiasPorMes[1] = ((Year % 400 == 0) || ((Year % 4 == 0) && (Year % 100 !=0))) ? 29 : 28;
var Header_String = NombreMes[Mes] + ' ' + Year;
return Header_String;
}

function CreaCalendario(Year, Mes)
{
var PrimeraFecha = new Date(Year, Mes);
var Heading = Header(Year, Mes);
var PrimerDia = PrimeraFecha.getDay() ;

startspaces=Hoy;

while (startspaces > 7)
startspaces-=7;

startspaces = PrimerDia - 1;

if (startspaces < 0)
startspaces+=7;

var Cadena = '<table border=1 bordercolor="'+ColorBordeCal+'" cellspacing=0 cellpadding=0><tr><td valign="top"><table BORDER=1 CELLSPACING=1 cellpadding=2 FRAME="box" BGCOLOR="'+ColorFondoCal+'" BORDERCOLOR="'+ColorBordeCalDias+'">';
Cadena += '<tr><th colspan=7 class="Verdana12BlancoNegritaMayus"BGCOLOR="'+Colo rFondoCab+'" BORDERCOLOR="'+ColorBordeCab+'">'+Heading+'</font></font></th></tr><tr>';
for (var j=0; j<7; j++)
{
Cadena += '<th border=1 class="Verdana12Azul" ALIGN="CENTER" BGCOLOR="'+ColorFondoCabDias+'" BORDERCOLOR="'+ColorBordeCabDias+'"><b>'+NombreDia s[j]+'</b></font></font></th>'
}
Cadena += '<tr>';

for (s=0;s<startspaces;s++)
Cadena+="<td></td>";

count=1;

while (count <= DiasPorMes[Mes])
{ for (b = startspaces;b<7;b++)
{ linktrue=false;


for (c=0;c<DiaEnlace.length;c++)
{
if ((DiaEnlace[c] != null) && (DiaEnlace[c][0]==count)&& (DiaEnlace[c][1]==Mes + 1) && (DiaEnlace[c][2]==Year))
{Cadena+='<td bordercolor="'+ColorBordeDiasEnlace+ '" bgcolor="'+ColorFondoDiasEnlace+'"><a href="' + DiaEnlace[c][3] + '"target="'+DiaEnlace[c][4] + '"class="Verdana12BlancoNegritaMayus" title="Haga clic aquí">';
linktrue=true;
}
}

if (linktrue==false)
{
if ((count==Hoy) && (MesActual==Mes) && (AnioActual==Year))
Cadena+="<td class='Verdana12' bgcolor='"+ColorFondoActual+"'><strong><center>";
else
Cadena+="<td class='Verdana12' bgcolor='"+ColorFondoDias+"'><center>"
}

if (count <= DiasPorMes[Mes])
if (linktrue==false)
Cadena+=+count
if (linktrue)
Cadena+=count;
else
Cadena+="";


if ((count==Hoy) && (MesActual==Mes) && (AnioActual==Year))
Cadena+="</strong>";

Cadena+="</center></td>";
count++;
}
Cadena+="</tr><tr>";
startspaces=0;
}
Cadena += '</table></td></tr></table>';
cross_el=ns6? document.getElementById("Calendar") : document.all.Calendar
cross_el.innerHTML = Cadena;
}


function VerifFecha()
{ if ((event.keyCode < 48) || (event.keyCode > 57))
{ return false;
}
}

function On_Year()
{ var Year = document.when.anio.value;
if (Year.length == 4)
{ MesSeleccionado = document.when.Mes.selectedIndex;
AnioSeleccionado = Year;
CreaCalendario(AnioSeleccionado, MesSeleccionado);
}
}

function On_Mes()
{ var Year = document.when.anio.value;
if (Year.length == 4)
{ MesSeleccionado = document.when.Mes.selectedIndex;
AnioSeleccionado = Year;
CreaCalendario(AnioSeleccionado, MesSeleccionado);
}
else
{ alert('Año erroneo.');
document.when.anio.focus();
}
}


function PorDefecto() {
if (!ie4&&!ns6)
return
var Mid_Screen = Math.round(document.body.clientWidth / 2);
document.when.Mes.selectedIndex = MesActual;
document.when.anio.value = AnioActual;
MesSeleccionado = MesActual;
AnioSeleccionado = AnioActual;
CreaCalendario(AnioActual, MesActual);
}


function Pasar(direccion)
{ if (direccion == '+')
{ MesSeleccionado++;
if (MesSeleccionado == 12)
{ MesSeleccionado = 0;
AnioSeleccionado++;
}
}


if (direccion == '-')
{ MesSeleccionado--;
if (MesSeleccionado < 0)
{ MesSeleccionado = 11;
AnioSeleccionado--;
}
}

CreaCalendario(AnioSeleccionado, MesSeleccionado);
document.when.Mes.selectedIndex = MesSeleccionado;
document.when.anio.value = AnioSeleccionado;
}


3º- Por último incluyo la declaración de los estilos utilizados (para los tipos de letra del calendario):

.Verdana12 { font-family: Verdana; font-size: 12px; color: #000000; text-decoration: none}

.Verdana12BlancoNegritaMayus { font-family: Verdana; font-size: 12px; font-style: normal; text-decoration: none; color: #FFFFFF; text-align: centre; vertical-align: middle; font-weight: bold; text-transform: uppercase }

.Verdana12Azul { font-family: Verdana; font-size: 12px; font-style: normal; text-decoration: none; color: #000080; text-align: centre; vertical-align: middle; font-weight: normal}


Gracias de nuevo a todos, en especial a Pellagofio que es el autor de todo el invento!!

Hasta pronto!!

Última edición por Liz26; 14/01/2004 a las 06:53
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.
Respuesta




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