Colocar en HEAD los dos siguientes códigos. El primero manejará el estilo del calendario(fondo, tipos de letra, tamaño, etc). Modifíquelo a su gusto. El segundo es el script propiamente dicho, no lo modifique a no ser que sepa exactamente lo que hace.
<script type="text/javascript">
// usado con el permiso de JALL.
// http://personal-de-jall.webcindario.com
// ja_lopezl@yahoo.es
function calendario(anho,mes,hoy){
anho= parseInt(anho);
mes = parseInt(mes);
hoy = parseInt(hoy);
p = new Date(anho,mes,1);
diaSemanaPrimeroMes = p.getDay();
var bisiesto = false;
if (anho % 4 == 0 && anho % 100 != 0) bisiesto = true;
if (anho % 100 == 0 && anho % 400 == 0) bisiesto = true;
var diasMes = [];
diasMes[0] = 31;
(bisiesto)? diasMes[1]= 29:diasMes[1]= 28;
diasMes[2]= 31;
diasMes[3]= 30;
diasMes[4]= 31;
diasMes[5]= 30;
diasMes[6]= 31;
diasMes[7]= 31;
diasMes[8]= 30;
diasMes[9]= 31;
diasMes[10]= 30;
diasMes[11]= 31;
var nombreMes = [];
nombreMes[0] = "Enero";
nombreMes[1] = "Febrero";
nombreMes[2] = "Marzo";
nombreMes[3] = "Abril";
nombreMes[4] = "Mayo";
nombreMes[5] = "Junio";
nombreMes[6] = "Julio";
nombreMes[7] = "Agosto";
nombreMes[8] = "Septiembre";
nombreMes[9] = "Octubre";
nombreMes[10] = "Noviembre";
nombreMes[11] = "Diciembre";
finmes = diasMes[mes];
switch (diaSemanaPrimeroMes)
{
case 0:
diaSemanaPrimeroMes = 6;
break;
default:
diaSemanaPrimeroMes = diaSemanaPrimeroMes -1;
break;
}
var texto = "";
texto += "<form>";
texto += "Año: <select name=\"anho\">";
for (i=20;i>-21;i--)
{
texto += "<option value=\""+ (anho+i)+"\">"+ (anho+i)+"<\/option>";
}
texto += "<\/select>";
texto += "Mes: <select name=\"mes\">";
for (i=0;i<12;i++)
{
texto += "<option value=\""+i+"\">"+nombreMes[i]+"<\/option>";
}
texto += "<\/select><br><br>";
texto += "<input type=\"button\" value=\"Escribir CALENDARIO\"";
texto += "onclick=\"calendario(this.form.anho.value,this.form.mes.value," + hoy + ")\">";
texto += "<\/form><br><br>";
// MES ANTERIOR
var mesAnterior = mes - 1;
anhoAnterior = anho-1;
if (mesAnterior == -1)
{
mesAnterior = 11;
texto += "<a href='javascript:calendario";
texto += "(" + anhoAnterior + "," + mes + "," + hoy + ")'";
texto += " title='Año anterior'>[ << ]</a> ";
texto += "<a href='javascript:calendario";
texto += "(" + anhoAnterior + "," + mesAnterior + "," + hoy + ")'";
texto += " title='Mes anterior'>[ < ]</a> ";
}
else
{
texto += "<a href='javascript:calendario";
texto += "(" + anhoAnterior + "," + mes + "," + hoy + ")'";
texto += " title='Año anterior'>[ << ]</a> ";
texto += "<a href='javascript:calendario";
texto += "("+ anho + "," + mesAnterior + "," + hoy +")'";
texto += " title='Mes anterior'>[ < ]</a>";
}
// MES ACTUAL
texto += " <span id='mesanho'>"+ nombreMes[mes] + " - " + anho + "</span> ";
// MES SIGUIENTE
var mesSiguiente = mes + 1;
anhoSiguiente = anho +1;
if (mesSiguiente == 12)
{
mesSiguiente = 0;
texto += "<a href='javascript:calendario";
texto += "(" + anhoSiguiente + "," + mesSiguiente + "," + hoy + ")'";
texto += " title='Mes siguiente'>[ > ]</a> ";
texto += "<a href='javascript:calendario";
texto += "(" + anhoSiguiente + "," + mes + "," + hoy + ")'";
texto += " title='Año siguiente'>[ >> ]</a>";
}
else
{
texto += "<a href='javascript:calendario";
texto += "(" + anho + "," + mesSiguiente + "," + hoy + ")'";
texto += " title='Mes siguiente'>[ > ]</a> ";
texto += "<a href='javascript:calendario";
texto += "(" + anhoSiguiente + "," + mes + "," + hoy + ")'";
texto += " title='Año siguiente'>[ >> ]</a>";
}
texto += "<br><br>";
texto += "<table border='0' class='calendario'>";
texto += "<tr><td class='cabecera'>Lu</td class='cabecera'><td class='cabecera'>Ma</td><td class='cabecera'>Mi</td>";
texto += "<td class='cabecera'>Ju</td><td class='cabecera'>Vi</td><td class='cabecera'>Sa</td><td class='cabecera'>Do</td></tr><tr>";
z = 1;
j = 1;
for (i = 0;i<42;i++){
var esSabado = j == 6 || j == 13 || j == 20 || j == 27 || j == 34;
var esDomingo = j == 7 || j == 14 || j == 21 || j == 28 || j == 35;
if ( i < diaSemanaPrimeroMes ){
if (esSabado) texto += "<td class='sabado'></td>";
else if (esDomingo) texto += "<td class='domingo'></td>";
else texto += "<td></td>";
}
if ( i == diaSemanaPrimeroMes ){
if ( z == hoy){
texto += "<td class='hoy'>"+z+"</td>";
}
else{
if (esSabado) texto += "<td class='sabado'>"+z+"</td>";
else if (esDomingo) texto += "<td class='domingo'>"+z+"</td>";
else texto += "<td class='laborable'>"+z+"</td>";
}
z++;
}
if ( i > diaSemanaPrimeroMes ){
if (z <= finmes){
if ( z == hoy){
texto += "<td class='hoy'>"+z+"</td>";
}
else{
if (esSabado) texto += "<td class='sabado'>"+z+"</td>";
else if (esDomingo) texto += "<td class='domingo'>"+z+"</td>";
else texto += "<td class='laborable'>"+z+"</td>";
}
}
else texto += "<td></td>";
z++;
}
if (esDomingo) texto += "</tr><tr>";
j++;
}
texto += "</tr></table>";
document.getElementById("calendario").innerHTML = texto;
}
</script>
<div id="calendario" style="width:300;height:300;">AQUÍ APARECERÁ EL CALENDARIO</div>
