I would like to know how I can show the days of the previous month in my clandario with javascript, that is, instead of showing empty cells for days that have passed, I can show the days of the previous and subsequent months. Example: Monday is day 30, Tuesday 31 and Wednesday day 1. In my calendar only day 1 is shown, and on Monday and Tuesday there are blank cells. I would like to know how to show 30 and 31. I leave my code in js.
var actual=new Date();
function mostrarCalendario(year,month)
{
var now=new Date(year,month-1,1);
var last=new Date(year,month,0);
var primerDiaSemana=(now.getDay()==0)?7:now.getDay();
var ultimoDiaMes=last.getDate();
var dia=0;
var resultado="<tr bgcolor='silver'>";
var diaActual=0;
console.log(ultimoDiaMes);
var last_cell=primerDiaSemana+ultimoDiaMes;
// hacemos un bucle hasta 42, que es el máximo de valores que puede
// haber... 6 columnas de 7 dias
for(var i=1;i<=42;i++)
{
if(i==primerDiaSemana)
{
// determinamos en que dia empieza
dia=1;
}
if(i<primerDiaSemana || i>=last_cell)
{
// celda vacia
resultado+="<td class='ayer'>"+dia+"</td>";
}else{
// mostramos el dia
if(dia==actual.getDate() && month==actual.getMonth()+1 && year==actual.getFullYear())
resultado+="<td class='hoy'>"+dia+"</td>";
else
resultado+="<td>"+dia+"</td>";
dia++;
}
if(i%7==0)
{
if(dia>ultimoDiaMes)
break;
resultado+="</tr><tr>\n";
}
}
resultado+="</tr>";
var meses=Array("ENERO", "FEBRERO", "MARZO", "ABRIL", "MAYO", "JUNIO", "JULIO", "AGOSTO", "SEPTIEMBRE", "OCTUBRE", "NOVIEMBRE", "DICIEMBRE");
// Calculamos el siguiente mes y año
nextMonth=month+1;
nextYear=year;
if(month+1>12)
{
nextMonth=1;
nextYear=year+1;
}
// Calculamos el anterior mes y año
prevMonth=month-1;
prevYear=year;
if(month-1<1)
{
prevMonth=12;
prevYear=year-1;
}
//document.getElementById("calendar").getElementsByTagName("caption")[0].innerHTML="<div>"+meses[month-1]+" / "+year+"</div><div><a onclick='mostrarCalendario("+prevYear+","+prevMonth+")'><</a></div><div><a onclick='mostrarCalendario("+nextYear+","+nextMonth+")'>></a></div>";
document.getElementById("calendar").getElementsByTagName("tbody")[0].innerHTML=resultado;
document.getElementById("calendar").getElementsByTagName("caption")[0].innerHTML="<div>"+year+"</div><div>"+meses[month-1]+"</div><div><a onclick='mostrarCalendario("+prevYear+","+prevMonth+")'><</a></div><div><a onclick='mostrarCalendario("+nextYear+","+nextMonth+")'>></a></div><div>"+meses[month-3]+"</div><div>"+meses[month+1]+"</div><div>"+meses[month-2]+"</div><div>"+meses[month]+"</div>";
}
mostrarCalendario(actual.getFullYear(),actual.getMonth()+1);
</script><!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<style>
#calendar {
font-family:Arial;
font-size:12px;
}
#calendar caption {
text-align:center;
padding:5px 10px;
background-color:white;
font-weight:bold;
font-size:medium;
margin-bottom: 30px;
}
#calendar caption div:nth-child(1) {margin-bottom: 10px; text-align: center;}
#calendar caption div:nth-child(2) { display: inline; margin-top: 5px; width: 20%;}
#calendar caption div:nth-child(3) {text-align: left; float: left; color: #cccccc; }
#calendar caption div:nth-child(4) {text-align: right; float: right; color: #cccccc; }
#calendar caption div:nth-child(5) { float: left; width: 20%; color: #cccccc; font-size: 10px;}
#calendar caption div:nth-child(6) { float: right; width: 20%; color: #cccccc; font-size: 10px;}
#calendar caption div:nth-child(7) { float: left; width: 20%; color: #cccccc; font-size: 14px;}
#calendar caption div:nth-child(8) { float: right; width: 20%; color: #cccccc; font-size: 14px;}
#calendar caption div:nth-child(3) a {cursor:pointer;}
#calendar caption div:nth-child(4) a {cursor:pointer;}
#calendar th {
background-color:white;
padding: 22px;
width:40px;
}
#calendar td {
text-align:center;
padding:2px 5px;
background-color:white;
font-size:20px;
}
#calendar td:nth-child(7) {
color:red;
}
#calendar .hoy {
background-color:grey;
}
</style>
</head>
<body>
<center>
<table id="calendar">
<p>
<caption></caption>
<thead>
<tr>
<th>LUNES</th><th>MARTES</th><th>MIERCOLES</th><th>JUEVES</th><th>VIERNES</th><th>SABADO</th><th>DOMINGO</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</center>
</body>
</html>