Calendario simple en Javascript
Hola, siempre es necesario tener a la mano un calendario con la fecha actual, haremos esta vez uno simple gracias a javascript como repasar algunos conceptos del objeto Date y sus atributos.
Siempre es bueno indicar que para este ejemplo no necesitamos tener implementado un servidor web para alojar nuestro script, JavaScript funciona del lado del cliente, es decir se ejecuta directamente en tu navegador, a propósito ya descargaron la versión 3 de firefox, espero que si.
Para el calendario empezaremos creando un arreglo que contendrán los meses, este nos servirá para mostrar el mes de la fecha actual como titulo acá según el mes de nuestra pc, así hará el calendario dinámicamente.
calendario.html
<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Calendario en JavaScript</title><strong> <script language="JavaScript" type="text/javascript"> var mes = new Array(); mes[0] = "Enero"; mes[1] = "Febrero"; mes[2] = "Marzo"; mes[3] = "Abril"; mes[4] = "Mayo"; mes[5] = "Junio"; mes[6] = "Julio"; mes[7] = "Agosto"; mes[8] = "Setiembre"; mes[9] = "Octubre"; mes[10] = "Noviembre"; mes[11] = "Diciembre"; </script> </strong></head> <body> </body> </html>
Luego necesitamos crear un objeto Date que contendrá la fecha actual, esto lo almacenaremos en una variable e igualmente en una variable el mes actual, y le diremos que es el día primero.
var fechaActual = new Date(); var mesActual = fechaActual.getMonth(); fechaActual.setDate(1);
Para mostrar el calendario usaremos una tabla html, en la primera fila veremos el mes, en la segunda fila los días de la semana empezando desde el domingo.
document.write("<table border=1 cellpadding=3 cellspacing=0>");
document.write("<tr>");
document.write("<td colspan=7 align='center'>" + mes[mesActual] + "</td>");
document.write("</tr><tr>");
document.write("<td align='center'>D</td>");
document.write("<td align='center'>L</td>");
document.write("<td align='center'>M</td>");
document.write("<td align='center'>M</td>");
document.write("<td align='center'>J</td>");
document.write("<td align='center'>V</td>");
document.write("<td align='center'>S</td>");
document.write("</tr>");
Todos los meses no siempre empiezan en domingo por lo que necesitamos llenar celdas de la fila de dias con el caracter especial en blanco, para ello utilizaremos el getDay que nos devuelve el día de la semana 0-domingo, 1-lunes… 6-sábado, como vemos en caso sea cero no agregaremos esta fila.
if (fechaActual.getDay() != 0) {
document.write("<tr>");
for (i = 0; i < fechaActual.getDay(); i++) {
document.write("<td> ");
}
}
Luego empezamos a llenar los días del mes con getDate, incrementaremos de uno en uno los días hasta que cambie de mes la variable fechaActual, cuando getDay devuelva cero empezaremos una nueva fila y haremos corte de fila getDay devuelva 6.
while (fechaActual.getMonth() == mesActual) {
if (fechaActual.getDay == 0) {
document.write("</tr><tr>");
}
document.write("<td align='center'>" + fechaActual.getDate() + "</td>");
if (fechaActual.getDay() == 6) {
document.write("</tr>");
}
fechaActual.setDate(fechaActual.getDate() + 1);
}
Y para terminar en caso el último día del mes no termine en 6, llenaremos la tabla nuevamente con espacios en blanco.
for (i = fechaActual.getDay(); i < = 6; i++) {
document.write("<td> ");
}
document.write("</table>");
Simple ¿no?
Hasta pronto.