Calendario

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>