<!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>
Comentarios sobre la versión: Versión 2 (0)
No hay comentarios