Calendario con links

[Dig]

Hola.
Es la primera vez que escribo en el foro, aunque lo he consultado en varias ocasiones y en todas me ha sido util.

Mi cuestión es que necesito poner un calendario (con las funciones propias de marcar el día de hoy, ir atras y adelante en mes y año, etc...), eso no es problema ya que aquí se presentan muchos ejemplos interesantes.

La idea es hacer que cuando se pinche en un día se carge una página dentro de un frame mostrando información relativa a ese día. En mi caso una série de noticias. Lo bueno sería que para cada día generase automaticamente el enlace correspondiente (que no la página html, ojo) como por ejemplo: 01022005.html, así yo solo tendría que crear las paginas html con el contenido y guardarlas con el nombre correspondiente. En caso de que exista la página la carga en caso que no, va a una página de error. Por defecto, se cargaría la página correspondiente a ese día y quedaría señalado el día actual.

Por otra parte, que cuando se pase el ratón por encima de un día se muestre una ventanita con el número de noticias o items que contiene ese día. Esto último lo he encontrado en este mismo foro Modificar un script que muestra un texto onmouse over
Lo único que estaría bien de esto último es que no hubiese que meter la información a mano sino que lo leyese de la página correspondiente, sin BD a ser posible, aunque no se si esto último es posible sin echar mano de php y bases de datos.

Siento haberme enrrolado un poco, pero quería explicarme bien.

Venga, un saludo a todos. Espero vuestra ayuda ansiosamente

Dig

[dasaevc]

Buenas cuate:
Mira, tu pregunta es un tanto dificil por las siguientes cuestiones:
Para empezar, tienes que ver desde un principio si para cada día del calendario existe página de referencia, para ponerlo de una vez en tu calendario, en segunda, sin BD, sería muy laborioso y te llevaría mucho tiempo, la mejor solución que te recomiendo es usar BD y PHP, si te podría hacer un ejemplo que no las utilice, pero la explicación y el ejemplo me llevarían algo de tiempo. salu2

[Carlitos]

www.carlitos.com.es -> fechas -> calendario

pulsa un día. te sale un alert. se podría cambiar para que fuese un enlace.

investiga un poquito porque se puede modificar mas o menos a lo que quieres. (lo del enlace. lo de mostrar el número de noticias, ya me parece un poco más complejo)

[Carlitos]

también te puede interesar esto:

http://javascript.tunait.com/javascr...ioselecciondia

un saludete.

[Dig]

Dasaevc. ¿sabes de algún ejemplo en PHP de donde pueda coger lo que estoy buscando?.
Si eres tan amable, ya que lo has comentado y si tienes tiempo. ¿Me podrias enviar un e-mail con la solución que dices que se te ocurre?

Muchas gracias

[dasaevc]

Ok, dejame buscar entre mis cosillas y te lo mando o lo posteo

[Dig]

dasaevc, te acuerdas de mi?. Has encontrado algo?....
Venga, un saludo

[edudw]

Iniciado por Dig

Hola.
Es la primera vez que escribo en el foro, aunque lo he consultado en varias ocasiones y en todas me ha sido util.

Mi cuestión es que necesito poner un calendario (con las funciones propias de marcar el día de hoy, ir atras y adelante en mes y año, etc...), eso no es problema ya que aquí se presentan muchos ejemplos interesantes.

La idea es hacer que cuando se pinche en un día se carge una página dentro de un frame mostrando información relativa a ese día. En mi caso una série de noticias. Lo bueno sería que para cada día generase automaticamente el enlace correspondiente (que no la página html, ojo) como por ejemplo: 01022005.html, así yo solo tendría que crear las paginas html con el contenido y guardarlas con el nombre correspondiente. En caso de que exista la página la carga en caso que no, va a una página de error. Por defecto, se cargaría la página correspondiente a ese día y quedaría señalado el día actual.

Por otra parte, que cuando se pase el ratón por encima de un día se muestre una ventanita con el número de noticias o items que contiene ese día. Esto último lo he encontrado en este mismo foro Modificar un script que muestra un texto onmouse over
Lo único que estaría bien de esto último es que no hubiese que meter la información a mano sino que lo leyese de la página correspondiente, sin BD a ser posible, aunque no se si esto último es posible sin echar mano de php y bases de datos.

Siento haberme enrrolado un poco, pero quería explicarme bien.

Venga, un saludo a todos. Espero vuestra ayuda ansiosamente

Dig

Hola.


Tengo un script que te puede servir. Esta en php, eso sí.

Lo busco y lo posteo luego con mas detalles. Estoy seguro que te servira poruqe tiene la manera de introducir la informacion a una ddbb. Please wait...

[Dig]

edudw, te lo agradeceria mucho si lo pusieses pronto ya que lo necesito con cierta urgencia y cuantas mas opciones tenga mejor.
Venga, un saludo y muchas gracias por adelantado.

[Dig]

Ok.
Cualquiera de los dos me sirven Carlitos, pero necesito que en vez de salir un mensaje de alerta o que la fecha pase a una caja de texto cuando pinches se vaya a una página web.
¿Sabes como puedo adapatarlos?.
El estilo del de tunait me gusta mucho pero necesitario que paara pasar entre meses y años fuera con flechas en vez de desplegables.

¿Alguien me puede ayudar?.

Saludos a todos/as

[Carlitos]

Hola

Prueba esto: http://www.terra.es/personal5/sacrol...alendario2.htm

Lo que te hace es generar enlaces para cada día. Por ejemplo, pincha en el 26 de enero. Te carga una pagina aparte que se llama 2612005.htm (te he dicho el 26, porque es la unica página que se te cargará. si le das a otro día, no te va a encontrar ninguna página)


el código:

Código:

<script type="text/javascript">
/**************************************************************
 Calendario. Por Carlitos. [email protected]
 Si usas este script, deja intactas estas líneas (créditos). Vale?
 También te agradecería un e-mail con tus comentarios. ([email protected])
****************************************************************/

hoy = new Date();
dias = new Array("Lu","Ma","Mi","Ju","Vi","Sa","Do")
mesl = new Array('Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre')
mes = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
dd = hoy.getDate();
mm = hoy.getMonth();
aa = hoy.getFullYear();



function elige(elg)
{
pag=elg.toString()+(mm+1)+aa.toString()+".htm"
window.open(pag)
}

function baja()
{
mm--
if (mm<0) {mm=11;aa--}
pinta()
}

function sube()
{
mm++
if (mm>11) {mm=0;aa++}
pinta()
}

function pinta()
{
d1 = new Date(aa,mm,1);
ds1 = d1.getDay()
if (ds1 == 0) ds1 = 7
if (((aa % 4 == 0) && (aa % 100 != 0)) || (aa % 400 == 0)) mes[1] = "29";
 c = 2
 ff = 1
 calen="<table style='border: 1px solid black'><tr>"
 calen+="<td align='center'><img src='../fotos/izq.gif' border='0' onclick='baja()'></td><td align='center' colspan='5'>"+ mesl[mm] +" "+ aa +"</td><td align='center'><img src='../fotos/dch.gif' border='0' onclick='sube()'></td></tr><tr>"
 for (z=0;z<7;z++)
 {
  calen+="<td align='right' style='border: 1px solid black;width:15px;'>"+ dias[z] +"</td>"
 }
 calen+="</tr><tr>"
 c = c - ds1
 while (c <= mes[mm])
 {
  if (c <= 0) calen+="<td align='right' style='border: 1px solid black;width:15px'>&nbsp</td>"
  else
  {
   if (c == dd & mm == hoy.getMonth() & aa == hoy.getFullYear()) calen+="<td align='right' style='border: 1px solid black;width:15px;' onclick='elige("+ c +")'><font color='red'><b>"+c+"</b></font></td>"
   else calen+="<td align='right' style='border: 1px solid black;width:15px' onclick='elige("+ c +")'>"+c+"</td>"
  }
  c++
  ff++
  if (ff > 7) {calen+="</tr><tr>";ff=1}
 }    
 calen+="</tr></table>"
 document.getElementById('calendra').innerHTML=calen
}
</script>
</head>
<body onLoad="pinta()">
<div id="calendra"></div>
</body>
</html>

Espero que te sirva.

Un saludo.

Editado: en las últimas líneas , tienes una que pone

document.getElementById('calendra').innerHTML=cale n

el foro lo ha separado. al final debería poner calen todo junto

[edudw]

Hola Dig.

Y el link que te pase te sirvio o no?

[Dig]

En primer lugar, agradeceros la ayuda que los dos me habeis prestado y sobre todo vuestra rapidez en contestar ya que me urge bastante.

Carlitos, el calendario esta cojonudo pero me gustaria saber si es posible un par de "mejoras".
Cuando pasas por un día que tiene enlace no aparece la manita, por lo que no sabes si puedes pinchar o no. ¿se puede arreglar?. No se donde situar en el codigo el hand.
Por otra parte, ¿se puede hacer que los dias con enlace aparezcan con un color y los que no con otro?. Supongo que no, verdad, ya que para eso tendria que haber una DB que comprobara las páginas que existen y cuales no. De todas formas yo te lo pregunto.
Supongo que no habra problema en cambiar los style="" por class y que estos esten definidos en una CSS. ¿o si?.
A colación de esto me gustaria que el día de hoy apareciese recuadrado en vez de solo coloreado. Supongo que poniendole un estilo en vez de solo <font color='red'><b>"+c+"</b></font> funcionara sin problemas.

Por ultimo, aunque esto no me corre prisa, por curiosidad para el tema del diseño. ¿En los array se pueden especificar imagenes?. Me explico. Imaginate que en vez de Lu,Ma,Mi, etc... con texto quiero que sean graficos, por cuestion de diseño, ¿se puede especificar que cargue el grafico correspondiente al Lunes, al Martes, a los dias incluso?, ¿se haria en el array del principio?, ¿de que modo?, ¿Este ejemplo estaria bien?;
dias = new Array("img src='lunes.gif'","img src'martes.gif'",) y lo mismo para dias, meses, años, etc...
Esto seria muy chulo porque daria un monton de posibilidades más al diseño ya que posibilitaria poner otro tipo de fuentes, por ejemplo.

Ah, y por ultimo, y esto si es importante. Cuando pinchas en un día con link se abre una nueva ventana. Yo quiero que se abra en la misma y lo he especificado asi en la funcion elige; window.open(pag,'_self'). Parece funcionar correctamente pero no se si deberia ponerlo en el onclick en vez de en la función.

Venga, de nuevo muchas gracias y si pudieras responderme a estas dudas ya seria la leche.
Un saludo y gracias de nuevo por el esfuerzo.
Ah, ten por seguro que apareceran tus creditos en el script.

Dig

P.D.: Edudw, muchas gracias por tu link. Lo he visto por encima pero aun no he podido mirarlo en profundidad. Ten por seguro que lo hare. Ya te digo cosas

[Dig]

Edudw, estoy probando el calendario dell link que me has pasado pero no consigo que funcione.
Me he bajado todos los archivos necesarios de la web (no me he podido dejar ninguno ya que estan en un .zip) y he seguido las instrucciones pero el calendario no me aparece.

Tu lo has probado?. ¿te funciona?.
Podrias pegarle un ojo?

Venga, gracias
Saludos

Dig

[Dig]

Carlitos.
Nueva duda.
Y si el link preestablecido no existe, ¿como decirle que se vaya a una página de error?, por ejemplo error.html

Gracias

P.D:Ya tengo solucionado lo de los estilos y lo de la manita.
Cuando lo tenga todo hecho ya te lo enseño. Aún sigo peleando con algunas cosas

[Carlitos]

Hola.

¿Te corre prisa?
No tengo mucho tiempo para hacerte retoques al código. Pero si me dejas hasta el fin de samana (entiendase hasta el domingo) voy a intentar hacerte unos cambios. Tengo las ideas en la cabeza (para casi todo lo que pides) y creo que pueden funcionar. Solo falta teclearlas. Lo que falte, ya se me irá ocurriendo. Qué estoy en plena tormenta de ideas conmigo mismo.

Un saludo.

[Carlitos]

Ufff, leyendo el mensje otra vez, veo que te urge. Déjame ver si mañana ya te he hecho algo.

[Dig]

Carlitos. Eres un torbellino de ideas.... jejejejeje
Oye, no te preocupes. No me urge tanto. Miralo tranquilamente el fin de semana y el lunes, si puedes me dices cosas.
No, al final entre uno y otro vamos a hacer un script que lo vamos a tener que patentar... jejejejejeje....

No, en serio. Que muchas gracias por la ayuda. Además, estoy aprendiendo un huevo contigo. Desde hace tiempo habia estado aplicando Javascript pero siempre cosas sencillas. Ahora llevo un tiempo que necesito cosas más complejas y me habia puesto a aprender yo pero esto ahora superaba mis conocimientos.
Me estoy estudiando un manual de Javascript de la página desarrolloweb.com , ¿la conoces?. Tambien tengo un par de libros que me estoy estudiando sobre el tema. El principal problema que tenia yo es que me sabia lo justo de la sintaxis y me costaba incorporar cosas y desarrollarlas por mi mismo. Con esto le estoy metiendo un buen empujón a mi aprendizaje. Si sabes de algún buen manual o libro más, todos los consejos son buenos.

En fin, no me enrrollo más que me pongo a escribir y soy como las persianas...
Venga, yo también le voy a pegar un vistazo el fin de semana y el lunes comentamos.

Muchas gracias otra vez y buen fin de semana.

Dig

[edudw]

Hola Dig Y Carlitos.


Sigo pensando que el script que te pase soluciona en gran parte lo que necesitas.

[sjam7]

yo tengo uno pero funciona con asp, la base de datos la uso para la informacion de eventos del dia, es una base de datos access, si te sirve avisame:

http://www.creandowebs.com/bodasymodas/agenda.asp

[taar]

Mire que casualidad, un amigo de esos pegajozos :) me habia pedido algo asi, y tuve que hacerle una, solo he probado en IE6, si no funciona en otros navegadores me avisas.

Código PHP:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>Calendario</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<meta http-equiv="pragma" content="no-cache"> 
<script language="javascript"> 
var contenedor = ""; //-- El nombre del Frame donde se va mostrar la pagina (vacio = misma pagina) 
var dias = new Array("Dom","Lun","Mar","Mié","Jue","Vie","Sáb"); 
var currentDate = new Date(); 
var listName = new Array("dom","lun","mar","mie","jue","vie","sab"); 
var meses = new Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Setiembre","Octubre","Noviembre","Diciembre"); 
var http = "http://www.tudominio.com/"; 
function Calendar() { 
    //-- Tabla principal: selecciona el lugar donde va salir el calendario 
    oTable = document.createElement("TABLE"); 
    oTable.id = "calendario"; 
    oTable.align = "center"; 
    oBody = document.createElement("TBODY"); 
    oRow1 = document.createElement("TR"); 
    oRow2 = document.createElement("TR"); 
    oRow3 = document.createElement("TR");         
    oCell1 = document.createElement("TD"); 
    oCell1.id = "td1"; 
    oCell2 = document.createElement("TD"); 
    oCell2.id = "td2";     
    oCell3 = document.createElement("TD"); 
    oCell3.id = "td3";     
    oRow1.appendChild(oCell1); 
    oRow2.appendChild(oCell2); 
    oRow3.appendChild(oCell3);     
    oBody.appendChild(oRow1); 
    oBody.appendChild(oRow2); 
    oBody.appendChild(oRow3); 
    oTable.appendChild(oBody); 
    contenedor != "" ? document.getElementById(contenedor).appendChild(oTable) : document.body.appendChild(oTable);  
    this.DisplayContents = DisplayContents; 
    //-- Tabla de cabecera: coloca las cabecera del calendario 
    headerTable = document.createElement("TABLE"); 
    headerTable.id = "cabecera"; 
    headerTable.align = "center"; 
    headerBody = document.createElement("TBODY"); 
    headerRow = document.createElement("TR");     
    cell1 = document.createElement("TD"); 
    cell1.innerHTML = "&lt;&lt;"; 
    cell1.align = "center"; 
    cell1.onclick = backYear_Click; 
    cell2 = document.createElement("TD"); 
    cell2.innerHTML = "&lt;"; 
    cell2.align = "center";     
    cell2.onclick = backMonth_Click; 
    cell3 = document.createElement("TD"); 
    cell3.width = '60%'; 
    cell3.id = "lbldate"; 
    cell3.innerHTML = ""; 
    cell3.align = "center";     
    cell3.style.cursor = "default"; 
    cell4 = document.createElement("TD"); 
    cell4.innerHTML = "&gt;"; 
    cell4.align = "center";     
    cell4.onclick = forthMonth_Click; 
    cell5 = document.createElement("TD"); 
    cell5.innerHTML = "&gt;&gt;"; 
    cell5.align = "center";     
    cell5.onclick = forthYear_Click;     
    headerRow.appendChild(cell1); 
    headerRow.appendChild(cell2); 
    headerRow.appendChild(cell3); 
    headerRow.appendChild(cell4); 
    headerRow.appendChild(cell5); 
    headerBody.appendChild(headerRow); 
    headerTable.appendChild(headerBody); 
    document.getElementById("td1").appendChild(headerTable); 
    //-- Tabla lista de dias: coloca el listado de dias en el calendario 
    dateTable = document.createElement("TABLE"); 
    dateTable.id = "dias"; 
    dateTable.align = "center"; 
    dateBody = document.createElement("TBODY"); 
    dateRow = document.createElement("TR");     
    for(var i = 0; i < dias.length; i++) { 
        dateCell1 = document.createElement("TD"); 
        dateCell1.innerHTML = dias[i]; 
        dateCell1.align = "center"; 
        dateRow.appendChild(dateCell1); 
    } 
    dateBody.appendChild(dateRow); 
    dateTable.appendChild(dateBody); 
    document.getElementById("td2").appendChild(dateTable); 
} 
function DisplayContents(){ 
    if(document.getElementById("td3").hasChildNodes()) { 
        document.getElementById("td3").removeChild(document.getElementById("td3").firstChild); 
    } 
    var firstDay = firstOfMonth(currentDate).getDay(); 
    var lastDay = lastDayOfMonth(currentDate).getDate(); 
    var k = 1; 
    monthTable = document.createElement("TABLE"); 
    monthTable.id = "fechas"; 
    monthTable.align = "center"; 
    monthBody = document.createElement("TBODY"); 
    for(var i = 0; i < 6; i++) { 
        monthRow = document.createElement("TR"); 
        for(var j = 0; j < 7; j++) { 
            monthCell = document.createElement("TD"); 
            if(i > 0) { 
                if(k <= lastDay) { 
                    monthCell.innerHTML = k; 
                    k++; 
                    monthCell.onclick = onClick; 
                    monthCell.onmouseover = onMouseOver; 
                    monthCell.onmouseout = onMouseOut;                     
                } else { 
                    monthCell.innerHTML = "&nbsp;"; 
                } 
            } else { 
                if(j >= firstDay) { 
                    monthCell.innerHTML = k; 
                    k++; 
                    monthCell.onclick = onClick; 
                    monthCell.onmouseout = onMouseOut; 
                    monthCell.onmouseover = onMouseOver;                     
                } else { 
                    monthCell.innerHTML = "&nbsp;"; 
                }             
            } 
            monthCell.align = "center"; 
            monthRow.appendChild(monthCell); 
        } 
        monthBody.appendChild(monthRow); 
    } 
    monthTable.appendChild(monthBody); 
    document.getElementById("td3").appendChild(monthTable); 
    document.getElementById("lbldate").innerHTML = meses[currentDate.getMonth()] + " - " + currentDate.getFullYear(); 
} 
 
function firstOfMonth(param){ 
    var day = new Date(); 
    day.setYear(param.getYear()); 
    day.setMonth(param.getMonth()); 
    day.setDate(1); 
    return day; 
} 
 
function lastDayOfMonth(param){ 
    var day = new Date(); 
    var year = param.getYear(); 
    var month = param.getMonth() + 1; 
    if (month == 12) { 
        month = 0; 
        year++; 
    } 
    day.setYear(year); 
    day.setMonth(month); 
    day.setDate(1); 
    return new Date(day.valueOf() - (24 * 60 * 60 * 1000)); 
} 
function backYear_Click(){ 
    var year = currentDate.getFullYear(); 
    currentDate.setYear(--year); 
    DisplayContents(); 
} 
function forthYear_Click(){ 
    var year = currentDate.getFullYear(); 
    currentDate.setYear(++year); 
    DisplayContents(); 
} 
function backMonth_Click(){ 
    var month = currentDate.getMonth(); 
    var year = currentDate.getFullYear(); 
    if (--month == -1){ 
        month = 11; 
        year--; 
    } 
    currentDate.setMonth(month); 
    currentDate.setYear(year); 
    DisplayContents(); 
} 
function forthMonth_Click(){ 
    var month = currentDate.getMonth(); 
    var year = currentDate.getFullYear(); 
    if (++month == 12){ 
        month = 0; 
        year++; 
    } 
    currentDate.setMonth(month); 
    currentDate.setYear(year); 
    DisplayContents(); 
} 
function onClick() { 
    var month = currentDate.getMonth(); 
    var year = currentDate.getFullYear(); 
    var day = this.innerHTML; 
    if(day < 10) { 
        day = "0" + day; 
    } 
    var web = http + year  + "/" + meses[month] + "/" + day + ".htm"; 
    window.open(web,"_self"); 
} 
function onMouseOver() { 
    var month = currentDate.getMonth(); 
    var year = currentDate.getFullYear(); 
    var day = this.innerHTML; 
    if(day < 10) { 
        day = "0" + day; 
    } 
    window.status = http + meses[month] + "/" + year + "/" + day + ".htm"; 
    this.style.cursor = "pointer"; 
    this.style.backgroundColor = "#F2F2F2"; 
    this.style.border = "1px solid #003399";     
} 
function onMouseOut() { 
    this.style.cursor = "default"; 
    this.style.backgroundColor = "white";     
    this.style.border = "1px solid #CCCCCC"; 
    window.status = "";     
} 
 
</script> 
<style> 
    body {  
        margin: 0px; 
        background-color: white; 
    } 
    #calendario { 
        border: 1px solid #000000; 
        background-color: white; 
        width: 250px; 
        font-family: Arial, Verdana, sans-serif; 
        font-size: 12px; 
        color: #0066CC; 
        text-decoration: none; 
    } 
    #cabecera { 
        cursor: pointer; 
        border-bottom: 1px; 
        border-bottom-color: #6699AA; 
        border-bottom-style:solid; 
        width: 100%; 
        font-family: Arial, Verdana, sans-serif; 
        font-size: 12px; 
        color: #0066CC; 
        text-decoration: none; 
    } 
    #dias { 
        width: 100%; 
    } 
    #fechas { 
        width: 100%; 
        font-family: Arial, Verdana, sans-serif; 
        font-size: 12px; 
        color: #0066CC; 
        text-decoration: none; 
    } 
    #fechas TD { 
        border: 1px solid #CCCCCC; 
        background-color: white; 
    } 
</style> 
</head> 
<body> 
</body> 
</html> 
<script> 
    oCalendar = new Calendar(); 
    oCalendar.DisplayContents(); 
</script>  
  

[Dig]

Hola a todos. Veo que esto se va animando...

Vamos por partes.

sjam7. Tu calendario funciona muy bien pero al estar en ASP no se como hacerlo rular. De ASP no tengo ni idea. ¿Podrias facilitarme los fuentes para probarlo y explicarme un poquito como hacerlo funcionar?.

taar. Tu script no lo he podido probar porque tengo un par de dudas.
La primera es referente a las últimos lineas que me pones
<script>
oCalendar = new Calendar();
oCalendar.DisplayContents();
</script>

Estan fuera del <html></html> y entiendo que eso no puede estar así. Las he incluido dentro del body pero no aparece nada en la página (he probado IE y Firefox). ¿Como se hace para visualizar el calendario?. ¿Como se llama al script en el cuerpo de la página?.

edudw. No te digo lo contrario, el problema es que segui las instrucciones que ponia y no consegui hacerlo rular. ¿tu sabes como va?, ¿lo has probado?.

Venga, un saludo

[taar]

taar. Tu script no lo he podido probar porque tengo un par de dudas.
La primera es referente a las últimos lineas que me pones
<script>
oCalendar = new Calendar();
oCalendar.DisplayContents();
</script>

Estan fuera del <html></html> y entiendo que eso no puede estar así. Las he incluido dentro del body pero no aparece nada en la página (he probado IE y Firefox). ¿Como se hace para visualizar el calendario?. ¿Como se llama al script en el cuerpo de la página?

Un par de aclaraciones:
1.
Primero se crea un nuevo Objeto (POO)
oCalendar = new Calendar();
Luego se llama al metodo DisplayContents() que es parte del objeto oCalendar
oCalendar.DisplayContents();

2.
Tuve una equivocacion al comienzo donde dice

Código:

var contenedor = ""; //-- El nombre del Frame donde se va mostrar la pagina

en realidad la variable contenedor viene a ser el lugar donde va desplegarse el calendario, puede ser un span o un div o lo que te guste. Por ejemplo si creas un span: <span id=miCalendario></span> entonces contenedor quedaria asi:

Código:

var contenedor = "miCalendiario";

3.
Para indicarle en que frame se debe mostrar el contenido del link busca la funcion onClick y modifica la ultima linea por lo que te guste

Código:

window.open(web,"_self");

window.open(web,"_self");

[Dig]

Sjam7. He estado pegando un vistazo al calendario que pones y podria servirme pero primero me gustaria probarlo. Podrias darme más información?. Me podrias pasar el codigo o los archivos para probarlo?.
Lo único es que veo que es ASP y yo de ese tema estoy muy pez, si me pasas cosas explicame como incorporarlas en el html. Please

Un saludo

[Dig]

Hola.
Taar he estado intentando probar el codigo que me pasate pero no he logrado hacerlo funcionar, la página me aparece en blanco. No entiendo muy bien tus instrucciones. Te pongo el codigo de la página que he hecho y me dices que hago mal, por favor.

Código:

<html>
<head>
<title>Calendario</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="pragma" content="no-cache">
<script language="javascript">
var contenedor = "miCalendiario"; //-- El nombre del Frame o lugar donde se va mostrar la pagina (vacio = misma pagina)
var dias = new Array("Dom","Lun","Mar","Mié","Jue","Vie","Sáb");
var currentDate = new Date();
var listName = new Array("dom","lun","mar","mie","jue","vie","sab");
var meses = new Array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Setiembre","Octubre","Noviembre","Diciembre");
var http = "http://www.tudominio.com/";
function Calendar() {
    //-- Tabla principal: selecciona el lugar donde va salir el calendario
    oTable = document.createElement("TABLE");
    oTable.id = "calendario";
    oTable.align = "center";
    oBody = document.createElement("TBODY");
    oRow1 = document.createElement("TR");
    oRow2 = document.createElement("TR");
    oRow3 = document.createElement("TR");        
    oCell1 = document.createElement("TD");
    oCell1.id = "td1";
    oCell2 = document.createElement("TD");
    oCell2.id = "td2";    
    oCell3 = document.createElement("TD");
    oCell3.id = "td3";    
    oRow1.appendChild(oCell1);
    oRow2.appendChild(oCell2);
    oRow3.appendChild(oCell3);    
    oBody.appendChild(oRow1);
    oBody.appendChild(oRow2);
    oBody.appendChild(oRow3);
    oTable.appendChild(oBody);
    contenedor != "" ? document.getElementById(contenedor).appendChild(oT  able) : document.body.appendChild(oTable);
    this.DisplayContents = DisplayContents;
    //-- Tabla de cabecera: coloca las cabecera del calendario
    headerTable = document.createElement("TABLE");
    headerTable.id = "cabecera";
    headerTable.align = "center";
    headerBody = document.createElement("TBODY");
    headerRow = document.createElement("TR");    
    cell1 = document.createElement("TD");
    cell1.innerHTML = "&lt;&lt;";
    cell1.align = "center";
    cell1.onclick = backYear_Click;
    cell2 = document.createElement("TD");
    cell2.innerHTML = "&lt;";
    cell2.align = "center";    
    cell2.onclick = backMonth_Click;
    cell3 = document.createElement("TD");
    cell3.width = '60%';
    cell3.id = "lbldate";
    cell3.innerHTML = "";
    cell3.align = "center";    
    cell3.style.cursor = "default";
    cell4 = document.createElement("TD");
    cell4.innerHTML = "&gt;";
    cell4.align = "center";    
    cell4.onclick = forthMonth_Click;
    cell5 = document.createElement("TD");
    cell5.innerHTML = "&gt;&gt;";
    cell5.align = "center";    
    cell5.onclick = forthYear_Click;    
    headerRow.appendChild(cell1);
    headerRow.appendChild(cell2);
    headerRow.appendChild(cell3);
    headerRow.appendChild(cell4);
    headerRow.appendChild(cell5);
    headerBody.appendChild(headerRow);
    headerTable.appendChild(headerBody);
    document.getElementById("td1").appendChild(headerTable);
    //-- Tabla lista de dias: coloca el listado de dias en el calendario
    dateTable = document.createElement("TABLE");
    dateTable.id = "dias";
    dateTable.align = "center";
    dateBody = document.createElement("TBODY");
    dateRow = document.createElement("TR");    
    for(var i = 0; i < dias.length; i++) {
        dateCell1 = document.createElement("TD");
        dateCell1.innerHTML = dias[i];
        dateCell1.align = "center";
        dateRow.appendChild(dateCell1);
    }
    dateBody.appendChild(dateRow);
    dateTable.appendChild(dateBody);
    document.getElementById("td2").appendChild(dateTable);
}
function DisplayContents(){
    if(document.getElementById("td3").hasChildNodes()) {
        document.getElementById("td3").removeChild(document.getElementById("td3").firstChild);
    }
    var firstDay = firstOfMonth(currentDate).getDay();
    var lastDay = lastDayOfMonth(currentDate).getDate();
    var k = 1;
    monthTable = document.createElement("TABLE");
    monthTable.id = "fechas";
    monthTable.align = "center";
    monthBody = document.createElement("TBODY");
    for(var i = 0; i < 6; i++) {
        monthRow = document.createElement("TR");
        for(var j = 0; j < 7; j++) {
            monthCell = document.createElement("TD");
            if(i > 0) {
                if(k <= lastDay) {
                    monthCell.innerHTML = k;
                    k++;
                    monthCell.onclick = onClick;
                    monthCell.onmouseover = onMouseOver;
                    monthCell.onmouseout = onMouseOut;                    
                } else {
                    monthCell.innerHTML = "&nbsp;";
                }
            } else {
                if(j >= firstDay) {
                    monthCell.innerHTML = k;
                    k++;
                    monthCell.onclick = onClick;
                    monthCell.onmouseout = onMouseOut;
                    monthCell.onmouseover = onMouseOver;                    
                } else {
                    monthCell.innerHTML = "&nbsp;";
                }            
            }
            monthCell.align = "center";
            monthRow.appendChild(monthCell);
        }
        monthBody.appendChild(monthRow);
    }
    monthTable.appendChild(monthBody);
    document.getElementById("td3").appendChild(monthTable);
    document.getElementById("lbldate").innerHTML = meses[currentDate.getMonth()] + " - " + currentDate.getFullYear();
}

function firstOfMonth(param){
    var day = new Date();
    day.setYear(param.getYear());
    day.setMonth(param.getMonth());
    day.setDate(1);
    return day;
}

function lastDayOfMonth(param){
    var day = new Date();
    var year = param.getYear();
    var month = param.getMonth() + 1;
    if (month == 12) {
        month = 0;
        year++;
    }
    day.setYear(year);
    day.setMonth(month);
    day.setDate(1);
    return new Date(day.valueOf() - (24 * 60 * 60 * 1000));
}
function backYear_Click(){
    var year = currentDate.getFullYear();
    currentDate.setYear(--year);
    DisplayContents();
}
function forthYear_Click(){
    var year = currentDate.getFullYear();
    currentDate.setYear(++year);
    DisplayContents();
}
function backMonth_Click(){
    var month = currentDate.getMonth();
    var year = currentDate.getFullYear();
    if (--month == -1){
        month = 11;
        year--;
    }
    currentDate.setMonth(month);
    currentDate.setYear(year);
    DisplayContents();
}
function forthMonth_Click(){
    var month = currentDate.getMonth();
    var year = currentDate.getFullYear();
    if (++month == 12){
        month = 0;
        year++;
    }
    currentDate.setMonth(month);
    currentDate.setYear(year);
    DisplayContents();
}
function onClick() {
    var month = currentDate.getMonth();
    var year = currentDate.getFullYear();
    var day = this.innerHTML;
    if(day < 10) {
        day = "0" + day;
    }
    var web = http + year  + "/" + meses[month] + "/" + day + ".htm";
    window.open(web,"_self");
}
function onMouseOver() {
    var month = currentDate.getMonth();
    var year = currentDate.getFullYear();
    var day = this.innerHTML;
    if(day < 10) {
        day = "0" + day;
    }
    window.status = http + meses[month] + "/" + year + "/" + day + ".htm";
    this.style.cursor = "pointer";
    this.style.backgroundColor = "#F2F2F2";
    this.style.border = "1px solid #003399";    
}
function onMouseOut() {
    this.style.cursor = "default";
    this.style.backgroundColor = "white";    
    this.style.border = "1px solid #CCCCCC";
    window.status = "";    
}

</script>
<style>
    body {
        margin: 0px;
        background-color: white;
    }
    #calendario {
        border: 1px solid #000000;
        background-color: white;
        width: 250px;
        font-family: Arial, Verdana, sans-serif;
        font-size: 12px;
        color: #0066CC;
        text-decoration: none;
    }
    #cabecera {
        cursor: pointer;
        border-bottom: 1px;
        border-bottom-color: #6699AA;
        border-bottom-style:solid;
        width: 100%;
        font-family: Arial, Verdana, sans-serif;
        font-size: 12px;
        color: #0066CC;
        text-decoration: none;
    }
    #dias {
        width: 100%;
    }
    #fechas {
        width: 100%;
        font-family: Arial, Verdana, sans-serif;
        font-size: 12px;
        color: #0066CC;
        text-decoration: none;
    }
    #fechas TD {
        border: 1px solid #CCCCCC;
        background-color: white;
    }
</style>
</head>
<body>
<script>
    oCalendar = new Calendar();
    oCalendar.DisplayContents();
</script>

<table width="500"  border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td><span id=miCalendario></span></td>
  </tr>
</table>
</body>
</html>

Venga, un saludo y gracias a todos por las respuestas.

Dig

[Dig]

Hola a todos.
A falta de mirar el ejemplo de Taar (taar, si puedes responderme a la duda que te plantee te lo agradecere mucho) me temo que lo que queria hacer no es demasiado viable con javascript. Quizás me equivoque de estrategia y lo suyo hubiese sido empezar a plantearlo como una aplicación PHP o ASP desde un principio, pero el javascript lo conozco un poco más que estos lenguajes y por eso mi empeño de hacerlo de esta forma.
Hago un último llamamiento enumerando lo que necesito y los motivos por los que desisto.

Mi idea era hacer un calendario automatizado, es decir que se generase el solo.
Que además los días fueran enlaces con unas rutas determinadas pero que al mismo tiempo se validase si esa ruta existe o no.
Además que se diferenciase con colores el día actual, dia con link y dia sin link.

El calendario en si no tiene problema ya que hay muchos y buenos ejemplos de diferentes tipos de calendarios. El problema viene con la validación con la comprobación de si tienen o no enlace. Además (y esto es lo chungo) es que todo sea automático, es decir, que no haya que estar definiendo el link, el color del día, la validación....
Se me comento para la valicación, por ejemplo, validar si existia una imagen con ese nombre y aunque la idea es buena supone hacer una imagen para cada dia.

El problema de todo esto es que los contenidos y el mantenimiento de los mismos no lo voy a hacer yo sino una persona que hay que facilitarle una herramienta lo más sencilla posible, por eso todo el tema de los automatismos.

En fin, el tema veo que es complejo así que si a alguien se le ocurre alguna idea más será muy bienvenida.
A todos los demás muchisimas gracias por su ayuda y su paciencia conmigo un 10 a todos. Nunca habia participado en este foro pero después de estos mensajes me ha parecido realmente util y seguro que me vereís más por aquí dandoos la paliza

Venga, un saludo

Dig

[Zertiko]

Hola sjam7, si me lo envías a mí, me vendría de lujo.

Muchas gracias.

Un saludo.

[sjam7]

Ahi va el archivo ASP para llamarlo pueden abrirlo en un popup o como quieran, solo debe estar en un servidor que soporte ASP

Código:

<%
RS2 = Server.MapPath("base.mdb")
Set conexion2 = Server.CreateObject("ADODB.Connection")
conexion2.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & RS2 & ";"
Set RS2 = Server.CreateObject("ADODB.Recordset")

Function GetDaysInMonth(iMonth, iYear)
	Dim dTemp
	dTemp = DateAdd("d", -1, DateSerial(iYear, iMonth + 1, 1))
	GetDaysInMonth = Day(dTemp)
End Function

Function GetWeekdayMonthStartsOn(dAnyDayInTheMonth)
	Dim dTemp
	dTemp = DateAdd("d", -(Day(dAnyDayInTheMonth) - 1), dAnyDayInTheMonth)
	GetWeekdayMonthStartsOn = WeekDay(dTemp)
End Function

Function SubtractOneMonth(dDate)
	SubtractOneMonth = DateAdd("m", -1, dDate)
End Function

Function AddOneMonth(dDate)
	AddOneMonth = DateAdd("m", 1, dDate)
End Function


Dim dDate	 ' Date we're displaying calendar for
Dim iDIM	  ' Days In Month
Dim iDOW	  ' Day Of Week that month starts on
Dim iCurrent  ' Variable we use to hold current day of month as we write table
Dim iPosition ' Variable we use to hold current position in table


If IsDate(Request.QueryString("date")) Then
	dDate = CDate(Request.QueryString("date"))
Else
	If IsDate(Request.QueryString("month") & "-" & Request.QueryString("day") & "-" & Request.QueryString("year")) Then
		dDate = CDate(Request.QueryString("month") & "-" & Request.QueryString("day") & "-" & Request.QueryString("year"))
	Else
		dDate = Date()
		' The annoyingly bad solution for those of you running IIS3
		If Len(Request.QueryString("month")) <> 0 Or Len(Request.QueryString("day")) <> 0 Or Len(Request.QueryString("year")) <> 0 Or Len(Request.QueryString("date")) <> 0 Then
			Response.Write "La fecha seleccionada no es valida.  El calendario regresa al dia de hoy.<BR><BR>"
		End If
		' The elegant solution for those of you running IIS4
		'If Request.QueryString.Count <> 0 Then Response.Write "The date you picked was not a valid date.  The calendar was set to today's date.<BR><BR>"
	End If
End If

mes=Month(CDate(dDate))
if mes=1 then mesactual="Enero"
if mes=2 then mesactual="Febrero"
if mes=3 then mesactual="Marzo"
if mes=4 then mesactual="Abril"
if mes=5 then mesactual="Mayo"
if mes=6 then mesactual="Junio"
if mes=7 then mesactual="Julio"
if mes=8 then mesactual="Agosto"
if mes=9 then mesactual="Septiembre"
if mes=10 then mesactual="Octubre"
if mes=11 then mesactual="Noviembre"
if mes=12 then mesactual="Diciembre"

'MonthName(Month(dDate))
'Now we've got the date.  Now get Days in the choosen month and the day of the week it starts on.
iDIM = GetDaysInMonth(Month(dDate), Year(dDate))
iDOW = GetWeekdayMonthStartsOn(dDate)


%>
<!-- Outer Table is simply to get the pretty border-->
<link href="hojacss.css" rel="stylesheet" type="text/css">

<TABLE width="150" BORDER=0 CELLPADDING=0 CELLSPACING=0>
  <TR>
<TD>
<TABLE width="150" BORDER=0 CELLPADDING=0 CELLSPACING=1 class="bordenegroTODO">
		<TR bgcolor="#CCCCCC"> 
		  <TD ALIGN="center" COLSPAN=7> 
			<TABLE WIDTH=100% BORDER=0 CELLSPACING=0 CELLPADDING=0>
			  <TR background="images/fondotoptabla.gif"> 
			    <TD width="29%" height="24" ALIGN="left" background="images/fondotoptabla.gif"><A HREF="agenda.asp?date=<%= SubtractOneMonth(dDate)%>" alt="Ir al mes anterior"><FONT COLOR=#000099 SIZE="1" face="Arial, Verdana, Helvetica, sans-serif"><b>&lt;&lt; 
				  </b></FONT></A></TD>
			    <TD width="43%" ALIGN="center" background="images/fondotoptabla.gif"><FONT COLOR=#000099 size="2" face="Arial, Verdana, Helvetica, sans-serif"><B><%=mesactual%></B></FONT></TD>
			    <TD width="28%" ALIGN="right" background="images/fondotoptabla.gif"><A HREF="agenda.asp?date=<%= AddOneMonth(dDate)%>" alt="Ir al siguiente mes"><FONT COLOR=#000099 SIZE="1" face="Arial, Verdana, Helvetica, sans-serif"><b> 
				  &gt;&gt;</b></FONT></A></TD>
			  </TR>
			</TABLE></TD>
		</TR>
		<TR valign="middle" bgcolor="#CCCCCC"> 
		  <TD height="20" ALIGN="center" background="images/fondotoptabla.gif" class="bordenegroTODO"><FONT COLOR=#000000 size="1" face="Arial, Verdana, Helvetica, sans-serif"><B>D</B></FONT></TD>
		  <TD height="20" ALIGN="center" background="images/fondotoptabla.gif" class="bordenegroTODO"><FONT COLOR=#000000 size="1" face="Arial, Verdana, Helvetica, sans-serif"><B>L</B></FONT></TD>
		  <TD height="20" ALIGN="center" background="images/fondotoptabla.gif" class="bordenegroTODO"><FONT COLOR=#000000 size="1" face="Arial, Verdana, Helvetica, sans-serif"><B>M</B></FONT></TD>
		  <TD height="20" ALIGN="center" background="images/fondotoptabla.gif" class="bordenegroTODO"><FONT COLOR=#000000 size="1" face="Arial, Verdana, Helvetica, sans-serif"><B>M</B></FONT></TD>
		  <TD height="20" ALIGN="center" background="images/fondotoptabla.gif" class="bordenegroTODO"><FONT COLOR=#000000 size="1" face="Arial, Verdana, Helvetica, sans-serif"><B>J</B></FONT></TD>
		  <TD height="20" ALIGN="center" background="images/fondotoptabla.gif" class="bordenegroTODO"><FONT COLOR=#000000 size="1" face="Arial, Verdana, Helvetica, sans-serif"><B>V</B></FONT></TD>
		  <TD height="20" ALIGN="center" background="images/fondotoptabla.gif" class="bordenegroTODO"><FONT COLOR=#000000 size="1" face="Arial, Verdana, Helvetica, sans-serif"><B>S</B></FONT></TD>
		</TR>
		<%
If iDOW <> 1 Then
	Response.Write vbTab & "<TR>" & vbCrLf
	iPosition = 1
	Do While iPosition < iDOW
		Response.Write vbTab & vbTab & "<TD>&nbsp;</TD>" & vbCrLf
		iPosition = iPosition + 1
	Loop
End If

iCurrent = 1
iPosition = iDOW
Do While iCurrent <= iDIM
	If iPosition = 1 Then
		Response.Write vbTab & "<TR>" & vbCrLf
	End If

	if iPosition=1 then
	 fondo="#eeeeee"
	else
	 fondo=""
	end if 


if iCurrent = "5" and Month(dDate)="5" then
	 fondo="#CCCCCC"
elseif iCurrent = "16" and Month(dDate)="9" then
	 fondo="#CCCCCC"
elseif iCurrent = "1" and Month(dDate)="1" then
	 fondo="#CCCCCC"
elseif iCurrent = "25" and Month(dDate)="12" then
	 fondo="#CCCCCC"
elseif iCurrent = "5" and Month(dDate)="2" then
	 fondo="#CCCCCC"
end if


	
	If iCurrent = Day(dDate) Then
		Response.Write vbTab & vbTab & "<TD class=bordenegroTODO onmouseover=""this.style.background='#eeeeee'"" onmouseout=""this.style.background='#eeeeee'"" width=18 height=20 ALIGN=center BGCOLOR=#ff6666 background=images/fondotoptabla.gif><A HREF=""./agenda.asp?date=" & iCurrent & "-" & Month(dDate) & "-" & Year(dDate) & """ class=a2><FONT face=""Verdana"" SIZE=""1"" COLOR=#000099><b>" & iCurrent & "</b></FONT></A></TD>" & vbCrLf
	Else
		fechahoy= iCurrent & "/" & Month(dDate) & "/" & Year(dDate)
		SQL2="SELECT * FROM eventos WHERE fecha=#"&fechahoy&"# order by fecha"
		RS2.Open SQL2,conexion2,2,3,1
		if not rs2.eof then
		Response.Write vbTab & vbTab & "<TD class=bordenegroTODO onmouseover=""this.style.background='#3D87CA'"" onmouseout=""this.style.background='#3D87CA'"" width=18 height=20 ALIGN=center BGcolor=#3D87CA><A HREF=""./agenda.asp?date=" & iCurrent & "-" & Month(dDate) & "-" & Year(dDate) & """ class=a2><FONT face=""Verdana"" SIZE=""1"" color=#ffffff>" & iCurrent & "</FONT></A></TD>" & vbCrLf
		else
		Response.Write vbTab & vbTab & "<TD onmouseover=""this.style.background='#66FFCC'"" onmouseout=""this.style.background='"&fondo&"'"" width=18 height=20 ALIGN=center BGcolor="&fondo&"><A HREF=""./agenda.asp?date=" & iCurrent & "-" & Month(dDate) & "-" & Year(dDate) & """ class=a2><FONT face=""Verdana"" SIZE=""1"">" & iCurrent & "</FONT></A></TD>" & vbCrLf
		end if
		rs2.close
	End If
	
	If iPosition = 7 Then
		Response.Write vbTab & "</TR>" & vbCrLf
		iPosition = 0
	End If
	
	iCurrent = iCurrent + 1
	iPosition = iPosition + 1
Loop

If iPosition <> 1 Then
	Do While iPosition <= 7
		Response.Write vbTab & vbTab & "<TD>&nbsp;</TD>" & vbCrLf
		iPosition = iPosition + 1
	Loop
	Response.Write vbTab & "</TR>" & vbCrLf
End If
%>
	  </TABLE>
</TD>
</TR>
</TABLE>
<table height="5" border="0" cellspacing="0" cellpadding="0">
  <tr> 
	<td></td>
  </tr>
</table>
<table width="150" border="0" cellspacing="2" cellpadding="0">
  <tr> 
	<td width="18" height="20" bgcolor="#CCCCCC" class="bordenegroTODO"><font size="1" face="Arial, Verdana, Helvetica, sans-serif">&nbsp;</font></td>
	<td width="126" height="20"><font size="1" face="Arial, Verdana, Helvetica, sans-serif">&nbsp;Dia 
	  festivo</font></td>
  </tr>
  <tr> 
	<td height="20" bgcolor="#eeeeee" class="bordenegroTODO"><font size="1" face="Arial, Verdana, Helvetica, sans-serif">&nbsp;</font></td>
	<td height="20"><font size="1" face="Arial, Verdana, Helvetica, sans-serif">&nbsp;Domingo</font></td>
  </tr>
  <tr> 
	<td height="20" bgcolor="#3D87CA" class="bordenegroTODO"><font size="1" face="Arial, Verdana, Helvetica, sans-serif">&nbsp;</font></td>
	<td height="20"><font size="1" face="Arial, Verdana, Helvetica, sans-serif">&nbsp;Dia 
	  con evento</font></td>
  </tr>
  <tr> 
	<td height="20" bgcolor="#66FFCC" class="bordenegroTODO"><font size="1" face="Arial, Verdana, Helvetica, sans-serif">&nbsp;</font></td>
	<td height="20"><font size="1" face="Arial, Verdana, Helvetica, sans-serif">&nbsp;Puntero</font></td>
  </tr>
  <tr> 
	<td height="20" background="images/fondotoptabla.gif" class="bordenegroTODO"><font size="1" face="Arial, Verdana, Helvetica, sans-serif">&nbsp;</font></td>
	<td height="20"><font size="1" face="Arial, Verdana, Helvetica, sans-serif">&nbsp;Dia 
	  actual </font></td>
  </tr>
</table>
<br>

[Zertiko]

Ok gracias sjam7.

Un saludo.