I'm with a calendar with html and javascript, and I would like to click on one day to open another html that I have indicating the year, month and day that I have previously selected.
Before they tell me anything, I looked at the forum for different solutions but I can not get any of them working, I've looked at LocalStorage, SessionStorage, Ajax ... etc ... and I do not know if I'm putting them wrong or what.
I have the monthly calendar already finished and every day there is a hyperlink, which redirects me to the other html. Well, the idea that I have is that I capture the year, month and day that I had clicked on the previous calendar and show it on the daily calendar. I leave my monthly code:
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>";
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
for (var i = 1; i <= 42; i++) {
if (i == primerDiaSemana) {
// determinamos en que dia empieza
dia = 1;
}
if (i < primerDiaSemana) {
// celda mes anterior y siguiente
resultado += "<td class='ayer'><a class='ayer' href='javascript:select_pordias();'>" + (ultimoDiaMes - (primerDiaSemana - i - 1)) + "</a></td>";
} else if (i >= last_cell) {
if (i % 7 == 0) {
resultado += "<td class='post' style='color: #fd9292'><a class='red' href='javascript:select_pordias();'>" + a++ + "</a></td>";
} else {
resultado += "<td class='post' style='color: #cccccc'><a class='post' href='javascript:select_pordias();'>" + a++ + "</a></td>";
}
} else {
// mostramos el dia
if (dia == actual.getDate() && month == actual.getMonth() + 1 && year == actual.getFullYear())
resultado += "<td class='hoy' ><a class='hoy' href='javascript:select_pordias();'>" + dia + "</a></td>";
else
resultado += "<td><a class='negro' href='javascript:select_pordias();'>" + dia + "</a></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;
}
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];
}
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>";
}
#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;
color: black;
}
#calendar td:nth-child(7) {
color: red;
}
#calendar .hoy {
background-color: grey;
color: black;
}
#calendar .ayer {
color: #cccccc;
}
#calendar .post {
color: #cccccc;
}
#calendar .negro {
color: black;
}
#calendar .red {
color: #fd9292;
}
#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>
<script src="js/semanal.js"></script>
<meta charset="utf-8">
</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>
<script>
window.onload = function()
{mostrarCalendario(actual.getFullYear(), actual.getMonth() + 1);}
</script>
<script>
window.onclick = function() {
var getInput = prompt(+year);
localStorage.setItem("Year", getInput);
}
</script>
</tbody>
</table>
</center>
</body>
</html>