<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
#calendar { width:200px;
font-family:Arial;
font-size:12px;
border-collapse: collapse;
background-color:#fff;
}
#calendar caption { padding:5px 10px;
background-color:#ddd;
color:#444;
font-weight:bold;
}
#calendar caption span { padding:2px;
}
#calendar caption span:nth-child(1) { float:left;
}
#calendar caption span:nth-child(3) { float:right;
}
#calendar caption span:nth-child(1), #calendar caption span:nth-child(3) { cursor:pointer;
}
#calendar caption span:nth-child(1):hover, #calendar caption span:nth-child(3):hover { background-color:#0073ea;
color:#fff;
-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;border-radius:8px;
}
#calendar th { color:#444;
}
#calendar td { text-align:right;
padding:5px;
border-spacing: 2px;
font-weight:bold;
}
#calendar td.d { border:1px solid #ccc;
cursor:pointer;
color:#0073ea;
}
#calendar td.d:hover { color:#fff;
background-color:#0073ea;
}
#calendar td.today { color:#000;
}
</style>
</head>
<body>
<h1>Calendario en jquery</h1>
<table id="calendar">
<caption><span><<</span><span class='month'></span><span>>></span></caption>
<thead>
<tr>
<th>Lu</th><th>Ma</th><th>Mi</th><th>Ju</th><th>Vi</th><th>Sa</th><th>Do</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<p>
<div id="formato1"></div>
<div id="formato2"></div>
</p>
</body>
</html>
<script>
(()=>{ const months=Array("Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"); let d=new Date();
let monthShow=d.getMonth();
let yearShow=d.getFullYear();
window.onload=()=>{ showCalendar();
// anterior mes
$("#calendar caption span:first-child").click(()=>{ showCalendar(yearShow, monthShow-1)
});
// siguiente mes
$("#calendar caption span:last-child").click(()=>{ showCalendar(yearShow, monthShow+1)
});
// evento click encima de un dia
$("#calendar").on("click", ".d", function(){ $("#formato1").html($(this).html()+"/"+(monthShow+1)+"/"+yearShow); $("#formato2").html($(this).html()+" de "+months[monthShow]+" del "+yearShow); });
}
function showCalendar(year, month)
{ let now=new Date();
let dayNow=now.getDate();
if(year==undefined || month==undefined) { d=new Date();
} else { if(month==12) { month=0;
year++;
}
if(month==-1) { month=11;
year--;
}
d=new Date(year,month);
}
monthShow=d.getMonth();
yearShow=d.getFullYear();
let firstDayDate = new Date(d.getFullYear(), d.getMonth(), 1);
let firstDay=firstDayDate.getDate();
let dayWeek=firstDayDate.getDay()+7;
let lastDayDate = new Date(d.getFullYear(), d.getMonth() + 1, 0);
let lastDay=lastDayDate.getDate();
$("#calendar .month").html(months[monthShow]+" "+yearShow); $("#calendar tbody tr").remove(); $("#calendar tbody").append("<tr></tr>");
let last_cell=dayWeek+lastDay;
let day=0;
for (let i=1; i<=42; i++) { if(i==dayWeek) { // determinamos en que dia empieza
day=1;
}
if(i<dayWeek || i>=last_cell) { // celda vacia
$("#calendar tbody tr:last-child").append("<td></td>"); }else{ // mostramos el dia
if(day==dayNow && monthShow==now.getMonth()) { $("#calendar tbody tr:last-child").append("<td class='today d'>"+day+"</td>"); } else { $("#calendar tbody tr:last-child").append("<td class='d'>"+day+"</td>"); }
day++;
}
// cuando llegamos al final de la semana, iniciamos una columna nueva
if(i%7==0) { if(i>last_cell) { break;
}
$("#calendar tbody").append("<tr></tr>"); }
}
}
})();
</script>
Crear cuenta
Comentarios sobre la versión: Versión 2 (0)
No hay comentarios