<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Calendario con javascript</h1>
<br/><br/>
<div id="calendario">
<div id="anterior" onclick="mesantes()"></div>
<div id="posterior" onclick="mesdespues()"></div>
<h2 id="titulos"></h2>
<table id="diasc">
<tr id="fila0"><th></th><th></th><th></th><th></th><th></th><th></th><th></th></tr>
<tr id="fila1"><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr id="fila2"><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr id="fila3"><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr id="fila4"><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr id="fila5"><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr id="fila6"><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>
<div id="fechaactual"><i onclick="actualizar()">HOY: </i></div>
<div id="buscafecha">
<form action="#" name="buscar">
<p>Buscar ... MES
<select name="buscames">
<option value="0">Enero</option>
<option value="1">Febrero</option>
<option value="2">Marzo</option>
<option value="3">Abril</option>
<option value="4">Mayo</option>
<option value="5">Junio</option>
<option value="6">Julio</option>
<option value="7">Agosto</option>
<option value="8">Septiembre</option>
<option value="9">Octubre</option>
<option value="10">Noviembre</option>
<option value="11">Diciembre</option>
</select>
... AÑO ...
<input type="text" name="buscaanno" maxlength="4" size="4" />
...
<input type="button" value="BUSCAR" onclick="mifecha()" />
</p>
</form>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
//Arrays de datos:
meses=["enero","febrero","marzo","abril","mayo","junio","julio","agosto","septiembre","octubre","noviembre","diciembre"];
lasemana=["Domingo","Lunes","Martes","Miércoles","Jueves","Viernes","Sábado"]
diassemana=["lun","mar","mié","jue","vie","sáb","dom"];
//Tras cargarse la página ...
window.onload = function() {
//fecha actual
hoy=new Date(); //objeto fecha actual
diasemhoy=hoy.getDay(); //dia semana actual
diahoy=hoy.getDate(); //dia mes actual
meshoy=hoy.getMonth(); //mes actual
annohoy=hoy.getFullYear(); //año actual
// Elementos del DOM: en cabecera de calendario
tit=document.getElementById("titulos"); //cabecera del calendario
ant=document.getElementById("anterior"); //mes anterior
pos=document.getElementById("posterior"); //mes posterior
// Elementos del DOM en primera fila
f0=document.getElementById("fila0");
//Pie de calendario
pie=document.getElementById("fechaactual");
pie.innerHTML+=lasemana[diasemhoy]+", "+diahoy+" de "+meses[meshoy]+" de "+annohoy;
//formulario: datos iniciales:
document.buscar.buscaanno.value=annohoy;
// Definir elementos iniciales:
mescal = meshoy; //mes principal
annocal = annohoy //año principal
//iniciar calendario:
cabecera()
primeralinea()
escribirdias()
}
//FUNCIONES de creación del calendario:
//cabecera del calendario
function cabecera() {
tit.innerHTML=meses[mescal]+" de "+annocal;
mesant=mescal-1; //mes anterior
mespos=mescal+1; //mes posterior
if (mesant<0) {mesant=11;}
if (mespos>11) {mespos=0;}
ant.innerHTML=meses[mesant]
pos.innerHTML=meses[mespos]
}
//primera línea de tabla: días de la semana.
function primeralinea() {
for (i=0;i<7;i++) {
celda0=f0.getElementsByTagName("th")[i];
celda0.innerHTML=diassemana[i]
}
}
//rellenar celdas con los días
function escribirdias() {
//Buscar dia de la semana del dia 1 del mes:
primeromes=new Date(annocal,mescal,"1") //buscar primer día del mes
prsem=primeromes.getDay() //buscar día de la semana del día 1
prsem--; //adaptar al calendario español (empezar por lunes)
if (prsem==-1) {prsem=6;}
//buscar fecha para primera celda:
diaprmes=primeromes.getDate()
prcelda=diaprmes-prsem; //restar días que sobran de la semana
empezar=primeromes.setDate(prcelda) //empezar= tiempo UNIX 1ª celda
diames=new Date() //convertir en fecha
diames.setTime(empezar); //diames=fecha primera celda.
//Recorrer las celdas para escribir el día:
for (i=1;i<7;i++) { //localizar fila
fila=document.getElementById("fila"+i);
for (j=0;j<7;j++) {
midia=diames.getDate()
mimes=diames.getMonth()
mianno=diames.getFullYear()
celda=fila.getElementsByTagName("td")[j];
celda.innerHTML=midia;
//Recuperar estado inicial al cambiar de mes:
celda.style.backgroundColor="#eee";
celda.style.color="#492736";
//sabados y domingos en rojo
if (j==5) { celda.style.backgroundColor="#ccc";}
if (j==6) {
celda.style.backgroundColor="#ccc";
celda.style.color="#f11445";
}
//dias restantes del mes en gris
if (mimes!=mescal) {
celda.style.color="#a0babc";
}
//destacar la fecha actual, dia de HOY
if (mimes==meshoy && midia==diahoy && mianno==annohoy ) {
celda.style.backgroundColor="#f0b19e";
celda.innerHTML="<cite title='Fecha Actual'>"+midia+"</cite>";
}
//pasar al siguiente día
midia=midia+1;
diames.setDate(midia);
}
}
}
//Ver mes anterior
function mesantes() {
nuevomes=new Date() //nuevo objeto de fecha
primeromes--; //Restamos un día al 1 del mes visualizado
nuevomes.setTime(primeromes) //cambiamos fecha al mes anterior
mescal=nuevomes.getMonth() //cambiamos las variables que usarán las funciones
annocal=nuevomes.getFullYear()
cabecera() //llamada a funcion de cambio de cabecera
escribirdias() //llamada a funcion de cambio de tabla.
}
//ver mes posterior
function mesdespues() {
nuevomes=new Date() //nuevo obejto fecha
tiempounix=primeromes.getTime() //tiempo de primero mes visible
tiempounix=tiempounix+(45*24*60*60*1000) //le añadimos 45 días
nuevomes.setTime(tiempounix) //fecha con mes posterior.
mescal=nuevomes.getMonth() //cambiamos variables
annocal=nuevomes.getFullYear()
cabecera() //escribir la cabecera
escribirdias() //escribir la tabla
}
//volver al mes actual
function actualizar() {
mescal=hoy.getMonth(); //cambiar a mes actual
annocal=hoy.getFullYear(); //cambiar a año actual
cabecera() //escribir la cabecera
escribirdias() //escribir la tabla
}
//ir al mes buscado
function mifecha() {
//Recoger dato del año en el formulario
mianno=document.buscar.buscaanno.value;
//recoger dato del mes en el formulario
listameses=document.buscar.buscames;
opciones=listameses.options;
num=listameses.selectedIndex
mimes=opciones[num].value;
//Comprobar si el año está bien escrito
if (isNaN(mianno) || mianno<1) {
//año mal escrito: mensaje de error
alert("El año no es válido:\n debe ser un número mayor que 0")
}
else { //año bien escrito: ver mes en calendario:
mife=new Date(); //nueva fecha
mife.setMonth(mimes); //añadir mes y año a nueva fecha
mife.setFullYear(mianno);
mescal=mife.getMonth(); //cambiar a mes y año indicados
annocal=mife.getFullYear();
cabecera() //escribir cabecera
escribirdias() //escribir tabla
}
}
/*instrucciones generales*/
* { margin: auto; }
/*cabecera de la página*/
h1 { text-align: center; padding: 0.5em; }
/*div principal del calendario*/
#calendario { max-width: 536px;
background-color:#fffafa; text-align: center; }
/*tabla del calendario*/
#diasc { border-collapse:
separate; border-spacing: 4px; }
#diasc th,#diasc td { font: normal 14pt arial; width: 70px; height: 30px; }
#diasc th { color: white; background-color: black; }
#diasc td { color: #492736; background-color: #ffffff; font-weight: bold;}
/*línea de la fecha actual*/
#fechaactual { font: bold 12pt arial; padding: 0.4em }
#fechaactual i { cursor: pointer ; color: #eba18d; }
#fechaactual i:hover { color: blue; text-decoration: none; }
/*formulario de busqueda de fechas*/
#buscafecha { background-color: grey; color: white; padding: 5px }
#buscafecha select, #buscafecha input { background-color: white;
color: #eba18d; font: bold 10pt arial; }
#buscafecha [type=text] { text-align: center; }
#buscafecha [type=button] { cursor: pointer; }
/*cabecera del calendario*/
#anterior { float: left; width: 100px; font: bold 12pt arial;
padding: 0.5em 0.1em; cursor: pointer ; }
#posterior { float: right; width: 100px; font: bold 12pt arial;
padding: 0.5em 0.1em; cursor: pointer ;}
#anterior:hover {color: blue;text-decoration: underline;}
#posterior:hover {color: blue; text-decoration: underline;}
#titulos { font: normal 20pt "arial black"; padding: 0.2em; }