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 = "<<";
cell1.align = "center";
cell1.onclick = backYear_Click;
cell2 = document.createElement("TD");
cell2.innerHTML = "<";
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 = ">";
cell4.align = "center";
cell4.onclick = forthMonth_Click;
cell5 = document.createElement("TD");
cell5.innerHTML = ">>";
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 = " ";
}
} else {
if(j >= firstDay) {
monthCell.innerHTML = k;
k++;
monthCell.onclick = onClick;
monthCell.onmouseout = onMouseOut;
monthCell.onmouseover = onMouseOver;
} else {
monthCell.innerHTML = " ";
}
}
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>