Este ejemplo muestra como construir un calendario a partir de el mes y año. Para ello es necesario realizar diferentes operaciones con fechas.
Estilos
.calendar { height: 50px; width: 80px; text-align: right; vertical-align: top; font-size: 14px; font-weight: bold; }
Código JavaScript
var Meses = new Array('Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'); var Dias = new Array ('Domingo','Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'); var Dias_Mes = new Array(31,28,31,30,31,30,31,31,30,31,30,31); function Lista_Meses() //Funcion que añade las diferentes opciones a la lista de meses { var i, longitud; for (i=0; i<Meses.length; i++) { longitud = window.document.formulario1.Mes.length window.document.formulario1.Mes[longitud] = new Option(Meses[i], i,"",""); } window.document.formulario1.Ano.value=new Date().getFullYear(); //Se elige el año actual window.document.formulario1.Mes.selectedIndex=new Date().getMonth(); //Se selecciona el mes actual } function Bisiesto(year) { if ((year % 4 == 0) && (( year % 100 != 0) || (year % 400 ==0))) return true; else return false; } function getDays(month, year) { if (Bisiesto(year)) Dias_Mes[1]=29; // solo para Febrero else Dias_Mes[1]=28; return Dias_Mes[month] } function Muestra() { var Contenido ="<table border=1 cellpadding=0><tr>"; var fecha; var dias_mes; var j=1; if (!isNaN(window.document.formulario1.Ano.value)) //Si el año es un numero { fecha=new Date(parseInt(window.document.formulario1.Ano.value),parseInt(window.document.formulario1.Mes.value),1); dias_mes=getDays(fecha.getMonth(), fecha.getFullYear()); for (i=0;i<7;i++) Contenido=Contenido + "<th>" + Dias[i] + "</th>"; Contenido=Contenido+ "</tr><tr>"; for (i=0; i<fecha.getDay();i++) Contenido=Contenido+ "<td></td>"; for (i=fecha.getDay();i<7;j++,i++) Contenido=Contenido+ "<td class='calendar'>" + j + "</td>"; while (j<=dias_mes) { Contenido=Contenido+"</tr><tr>" for (i=0; i<7 & j<=dias_mes; j++,i++) Contenido=Contenido+ "<td class='calendar'>" + j + "</td>"; } Contenido=Contenido+"</tr></table>"; window.document.getElementById('calendario').innerHTML=Contenido; } else alert("Error: El año debe ser numerico");
Código HTML
<form name="formulario1" action="" style="display: none;"> <select id="Mes" name="Mes"></select> <input type="text" id="Ano" size="4"> <input type="button" class="boton" value="Mostrar" onclick="Muestra();"> </form> <div id="calendario"></div>