<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></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>
<script>
var months=Array("Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre");
$(document).ready(function()
{
showCalendar();
function showCalendar(year,month)
{
var now=new Date();
var dayNow=now.getDate();
if(year==undefined || month==undefined)
{
// obtenemos los valores actuales
var d=new Date();
}else{
if(month==12)
{
month=0;
year++;
}
if(month==-1)
{
month=11;
year--;
}
var d=new Date(year,month);
}
var monthShow=d.getMonth();
var yearShow=d.getFullYear();
var firstDayDate = new Date(d.getFullYear(), d.getMonth(), 1);
var firstDay=firstDayDate.getDate();
var dayWeek=firstDayDate.getDay()+7;
var lastDayDate = new Date(d.getFullYear(), d.getMonth() + 1, 0);
var lastDay=lastDayDate.getDate();
$("#calendar caption").html("<span><<</span><span>"+months[monthShow]+" "+yearShow+"</span><span>>></span>");
$("#calendar tbody tr").remove();
$("#calendar tbody").append("<tr></tr>");
var last_cell=dayWeek+lastDay
var day=0;
for(var 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>");
}
}
// evento click encima de un dia
$("#calendar .d").click(function(){
$("#formato1").html($(this).html()+"/"+(monthShow+1)+"/"+yearShow);
$("#formato2").html($(this).html()+" de "+months[monthShow]+" del "+yearShow);
});
// anterior mes
$("#calendar caption span:first-child").click(function(){
showCalendar(yearShow,monthShow-1)
});
// siguiente mes
$("#calendar caption span:last-child").click(function(){
showCalendar(yearShow,monthShow+1)
});
}
});
</script>
</head>
<body>
<h1>Calendario en jquery</h1>
<table id="calendar">
<caption></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>