Estoy intentando hacer una especie de agenda diaria que pueda cambiar el día. Resulta que al pulsar en el > o < en lugar de restar o sumar un día a la fecha actual (en días) lo saca en la parte del año. Por ejemplo, hoy es 7, me gustaría que al darle al < me saque 6 en el día, pero en lugar de eso lo saca en la parte del año. Agradecería ayuda de vuestra parte, gracias de antemano.
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 = actual.getDate();
var resultado = "<tr>";
var diaActual = 0;
console.log(ultimoDiaMes);
var a = 0;
var b = ++a;
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
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;
}
if (month + 1 > 12) {
meses[month] = meses[0];
}
if (month + 1 > 12) {
meses[month + 1] = meses[1];
}
if (month >= 11 && month < 12) {
meses[month] = meses[11];
meses[month + 1] = meses[0];
}
if (month - 1 < 1) {
meses[month - 2] = meses[11];
meses[month - 3] = meses[10];
}
if (month - 1 > 0 && month - 1 <= 1) {
meses[month - 2] = meses[0];
meses[month - 3] = meses[11];
}
nextDay = dia + 1;
prevDay = dia - 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(" + prevDay + ")'><</a></div><div><a onclick='mostrarCalendario(" + nextYear + "," + nextMonth + ")'>></a></div><div>" + dia + "</div>";
}
mostrarCalendario(actual.getFullYear(), actual.getMonth() + 1, actual.getDate());
#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%;
}
#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;
color: black;
}
#calendar .negro {
color: black;
}
#calendar td:nth-child(7) a {
color:red;
}
#calendar td:nth-child(7) a.red {
color:#fd9292;
}
a {
color:black;
text-decoration:none
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<script src="js/diario.js"></script>
</head>
<body>
<center>
<table id="calendar">
<p>
<caption></caption>
<thead>
</thead>
<tbody>
</tbody>
</table>
</center>
</body>
</html>