Desplegar calendario anual [Archivo]

MAXIUM

28-05-2013, 06:18:23

Saludos,

He recogido el siguiente código y funciona muy bien, pero lo que necesito, es desplegar todos los meses del año en la misma pantalla. ¿Como puedo adaptar este código para obtener algo similar a esta imagen?

(el CSS esta bien, yo solo quiero que me entiendan la idea de acomodar los meses)

http://biblioescolar.pbworks.com/f/Calendario+Anual.bmp

<html>
<head>
<title>Tunait.com - Calendario</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="JavaScript" type="text/javascript">
/**************************************************************
Calendario. Script creado por Tunait! (8/8/2004) Versión del 28-Ene.-07
Si quieres usar este script en tu sitio eres libre de hacerlo con la condición de que permanezcan intactas estas líneas, osea, los créditos.
Script de libre uso bajo la condición de mantener intactos los créditos de autor.
No permitida su distribución sin previa autorización
Ver condiciones de uso en http://javascript.tunait.com/
tunait@yahoo.com
****************************************************************/
var idContenedor = "miCalendario"
var hoy = new Date()
var mes = hoy.getMonth()
var dia = 1
var anio = hoy.getFullYear()
var diasSemana = new Array ('L','M','M','J','V','S','D')
var meses = new Array('Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Novi embre','Diciembre')
var tunIex=navigator.appName=="Microsoft Internet Explorer"?true:false;
if(tunIex && navigator.userAgent.indexOf('Opera')>=0){tunIex = false}
tunOp = navigator.userAgent.indexOf('Opera')>=0 ? true: false;
function tunCalendario(){
dia2 = dia
tab = document.createElement('table')
tab.id = 'calendario'
document.getElementById(idContenedor).appendChild(tab)
tcabeza = document.createElement('thead')
tab.appendChild(tcabeza)
fi2 = document.createElement('tr')
fi2b = document.createElement('th')
fi2b.colSpan = 7
fi2.id = 'mesCalendario'
fi2b.appendChild(document.createTextNode(meses[mes] + " - " + anio))
fi2.appendChild(fi2b)
tcabeza.appendChild(fi2)
fi = document.createElement('tr')
tcabeza.appendChild(fi)
for(m=0;m<7;m++){
ce = document.createElement('th')
ce.appendChild(document.createTextNode(diasSemana[m]))
fi.appendChild(ce)
}
var escribe = false
var escribe2 = true
fecha = new Date(anio,mes,dia)
var d = fecha.getDay()-1 //dia semana
if(d<0){d = 6}
tcuerpo = document.createElement('tbody')
tab.appendChild(tcuerpo)
while(escribe2){
fi = document.createElement('tr')
co = 0
for(t=0;t<7;t++){
ce = document.createElement('td')
if(escribe && escribe2){
fecha2 = new Date(anio,mes,dia)

if(fecha2.getMonth() != mes){escribe2 = false;}
else{ce.appendChild(document.createTextNode(dia));dia++;co++}
}
if(d == t && !escribe){
ce.appendChild(document.createTextNode(dia))
dia++;co++
escribe = true
}
fi.appendChild(ce)
if(hoy.getDate()+1 == dia && mes == hoy.getMonth() && anio == hoy.getFullYear()){ce.className = "Hoy"}
}

if(co>0){tcuerpo.appendChild(fi)}

}
dia = dia2
}
</script>
<style type="text/css">
#calendario{
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 10px;
text-align: center;
margin-left: auto;
margin-right: auto;
border-collapse: collapse;
border-right: 2px solid #999999;
border-bottom: 2px solid #999999;
}

/*#mes para configurar aspectos de la caja que muestra el mes y el año*/
#mesCalendario{
font-weight: bold;
text-align: center;
color: #CC6633;
background-color: #E4CAAF;

}
#calendario th, #calendario td{
border: 1px solid #999999;
padding: 3px;
font-size: 110%;
}
#calendario th{
color: #CC6633;
}

/*.Hoy para configurar aspectos de la caja que muestra el día actual*/
.Hoy{
color: #ffffff;
background-color: #666666;
font-weight: normal;
}
#miCalendario{
text-align: center;
}
</style>
</head>

<body onLoad="tunCalendario()">
<div id="miCalendario"></div>
</body>
</html>