Skip to main content
Código ordenado, además arreglado para que funcione el fiddle.
Origen Enlace

buenos días. Estoy con un calendario con html y javascript, y me gustaría que al hacer click en un día me abriera otro html que tengo indicándome el año, mes y día que he seleccionado anteriormente.

var actual=newactual = new Date(); 

function mostrarCalendario(year, month)
  {
  var now var= now=newnew Date(year, month - 1, 1);
  var last var= last=newnew Date(year, month, 0);
  var primerDiaSemana var= primerDiaSemana=(now.getDay()==0 == 0) ? 7 : now.getDay();
  var ultimoDiaMes var= ultimoDiaMes=lastlast.getDate();
    var dia=0;
dia = 0;
  var resultado="<tr>";
  resultado = "<tr>";
   
  var diaActual=0;
diaActual = 0;
  console.log(ultimoDiaMes);
    var a=0;
a = 0;
  var b=b = ++a;
    var last_cell=primerDiaSemana+ultimoDiaMes;
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++)
    {
  i = 1; i <= 42; if(i==primerDiaSemanai++) {
    if (i == primerDiaSemana) {
            // determinamos en que dia empieza
          dia = dia=1;1;
        }
        if(i<primerDiaSemana)
     (i < primerDiaSemana) {
            // celda mes anterior y siguiente
          resultado += resultado+="<td"<td class='ayer'><a class='ayer' href='javascript:select_pordias();'>"+;'>" + (ultimoDiaMes - (primerDiaSemana - i - 1))+"< + "</a></td>";
        } else if (i>=last_celli >= last_cell) {
        if (i % 7 == 0) {
                      resultado += resultado+="<td"<td class='post' style='color: #fd9292'><a class='red' href='javascript:select_pordias();'>"+a+++"<;'>" + a++ + "</a></td>";
                  } else {
                  resultado += resultado+="<td"<td class='post' style='color: #cccccc'><a class='post' href='javascript:select_pordias();'>"+a+++"<;'>" + a++ + "</a></td>";
                  }
                  }
         else {
            // mostramos el dia
         if (dia == if(dia==actualactual.getDate() && month==actualmonth == actual.getMonth()+1 + 1 && year==actualyear == actual.getFullYear())
              resultado += resultado+="<td"<td class='hoy' ><a class='hoy' href='javascript:select_pordias();'>"+dia+"<;'>" + dia + "</a></td>";
            else
              resultado += resultado+="<td><a"<td><a class='negro' href='javascript:select_pordias();'>"+dia+"<;'>" + dia + "</a></td>";
            dia++;
        }
        
        if(i%7==0)
   (i % 7 == 0) {
         if (dia > if(dia>ultimoDiaMesultimoDiaMes)
                break;
          resultado += resultado+="<tr><"<tr></tr>\n";
        }
    }
  resultado += resultado+="<"</tr>";
    
    
 
  var meses var= meses=ArrayArray("ENERO", "FEBRERO", "MARZO", "ABRIL", "MAYO", "JUNIO", "JULIO", "AGOSTO", "SEPTIEMBRE", "OCTUBRE", "NOVIEMBRE", "DICIEMBRE");
    

 
    // Calculamos el siguiente mes y año
  nextMonth = nextMonth=month+1;
month + 1;
  nextYear=year;
nextYear = year;
  if (month+1>12)
month + 1 > 12) {
      nextMonth = nextMonth=1;1;
    nextYear = year + nextYear=year+1;1;
    }
 
    // Calculamos el anterior mes y año
  prevMonth = month prevMonth=month- 1;
  prevYear = prevYear=year;year;
    if (month -1<1)
 1 < 1) {
      prevMonth = prevMonth=12;12;
     prevYear = year prevYear=year- 1;
    }
  if (month+1>12month + 1 > 12)
  {
    meses[month]=meses[month] = meses[0];
    }
  if (month+1>12month + 1 > 12)
  {
    meses[month+1]= meses[1];
meses[month + 1] = }meses[1];
   }
  if (month >=11>= 11 && month <12< 12) {
    meses[month] meses[month]== meses[11];
     meses[month+1]=meses[month meses[0];
+ 1] = meses[0];
  }
    if (month -1<1 1 < 1) {
    meses[month -2]=meses[11]; 2] = meses[11];
    meses[month-3]=meses[10];
 - 3] = }meses[10];
   }
  if (month - 1 >0> 0 && month - 1 <=1<= 1) {
    meses[month-2]=meses[0];
    meses[month-3]=meses[11];
  2] = }meses[0];
    //document.getElementById("calendar").getElementsByTagName("caption")[0].innerHTML="<div>"+meses[month-1]+"meses[month /- "+year+"</div><div><a3] onclick='mostrarCalendario("+prevYear+","+prevMonth+")'>&lt;</a></div><div><a= onclick='mostrarCalendario("+nextYear+","+nextMonth+")'>&gt;</a></div>";meses[11];
  }
  document.getElementById("calendar").getElementsByTagName("tbody")[0].innerHTML=resultado;
innerHTML = resultado;
  document.getElementById("calendar").getElementsByTagName("caption")[0].innerHTML="<div>"+year+"<innerHTML = "<div>" + year + "</div><div>"+meses[monthdiv><div>" + meses[month -1]+"< 1] + "</div><div><a onclick='mostrarCalendario("+prevYear+"" + prevYear + ","+prevMonth+"" + prevMonth + ")'>&lt;</a></div><div><a onclick='mostrarCalendario("+nextYear+"" + nextYear + ","+nextMonth+"" + nextMonth + ")'>&gt;</a></div><div>"+meses[monthdiv><div>" + meses[month -3]+"< 3] + "</div><div>"+meses[month+1]+"<div><div>" + meses[month + 1] + "</div><div>"+meses[monthdiv><div>" + meses[month -2]+"</div><div>"+meses[month]+"< 2] + "</div>";
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>
<head>
    <script src="js/semanal.js"></script>
    
    <meta charset="utf-8">
    <style></head>
        #calendar {
            font-family:Arial;<body>
            font-size:12px;<center>
       <table }id="calendar">
        #calendar caption {<p>
            text-align:center;<caption></caption>
            padding:5px 10px;<thead>
            background-color:white;<tr>
            <th>LUNES</th>
            font-weight:bold;<th>MARTES</th>
            font-size:medium;<th>MIERCOLES</th>
            margin-bottom: 30px;<th>JUEVES</th>
            
         }<th>VIERNES</th>
        #calendar caption div:nth-child(1) {margin-bottom: 10px; text-align: center;}<th>SABADO</th>
        #calendar caption div:nth-child(2) { display: inline; margin-top: 5px; width: 20%;}<th>DOMINGO</th>
        #calendar caption div:nth-child(3) {text-align: left; float: left; color: #cccccc; }</tr>
        #calendar caption div:nth-child(4) {text-align: right; float: right; color: #cccccc;  }</thead>
        #calendar caption div:nth-child(5) { float: left; width: 20%; color: #cccccc; font-size: 10px;}<tbody>
        #calendar caption div:nth-child(6) { float: right; width: 20%; color: #cccccc; font-size: 10px;}<script>
        #calendar caption div:nth-child(7) { float: left;  width: 20%; color: #cccccc; font-size: 14px;}
        #calendarwindow.onload caption= div:nth-childfunction(8) { float: right;  width: 20%; color: #cccccc; font-size: 14px;}
        #calendar caption div:nth-child(3) a {cursor:pointer;}
        #calendar caption div:nth-childmostrarCalendario(4actual.getFullYear() 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-childactual.getMonth(7) {
            color:red;
       + 1);}
        #calendar .hoy {
            background-color:grey;</script>
            color: black;<script>
        }
        #calendar window.ayer {
            color: #cccccc;
            }
       onclick #calendar= .postfunction() {
            color: #cccccc;
            }
        #calendar .negro {
          var getInput color:= black;prompt(+year);
        }
        #calendar localStorage.red {
            color: #fd9292;
        }
        #calendar td:nth-childsetItem(7) a { color:red; }
        #calendar"Year", td:nth-child(7getInput) a.red { color:#fd9292; }
        a {color:black; text-decoration:none}

    </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>
    <script>mostrarCalendario(actual.getFullYear(),actual.getMonth()+1);</script>
    <script>
    window.onclick = function() {
    var getInput = prompt(+year);
    localStorage.setItem("Year",getInput);
}
</script>tbody>
    </tbody>
</table>
  </center>
</body> 

</html>

buenos días. Estoy con un calendario con html y javascript, y me gustaría que al hacer click en un día me abriera otro html que tengo indicándome el año, mes y día que he seleccionado anteriormente.

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("caption")[0].innerHTML="<div>"+meses[month-1]+" / "+year+"</div><div><a onclick='mostrarCalendario("+prevYear+","+prevMonth+")'>&lt;</a></div><div><a onclick='mostrarCalendario("+nextYear+","+nextMonth+")'>&gt;</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+")'>&lt;</a></div><div><a onclick='mostrarCalendario("+nextYear+","+nextMonth+")'>&gt;</a></div><div>"+meses[month-3]+"</div><div>"+meses[month+1]+"</div><div>"+meses[month-2]+"</div><div>"+meses[month]+"</div>";
    
}
<!DOCTYPE html>
<html lang="es">
<head>

    <script src="js/semanal.js"></script>
    
    <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;
            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}

    </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>
    <script>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>

Estoy con un calendario con html y javascript, y me gustaría que al hacer click en un día me abriera otro html que tengo indicándome el año, mes y día que he seleccionado anteriormente.

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 + ")'>&lt;</a></div><div><a onclick='mostrarCalendario(" + nextYear + "," + nextMonth + ")'>&gt;</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>
Origen Enlace

Pasar distintas variables javascript html al clickar

buenos días. Estoy con un calendario con html y javascript, y me gustaría que al hacer click en un día me abriera otro html que tengo indicándome el año, mes y día que he seleccionado anteriormente.

Antes de que me digan nada, he mirado por el foro distintas soluciones pero no consigo hacer funcionar ninguna, he mirado lo de LocalStorage, SessionStorage, Ajax...etc... y no sé si es que las estoy poniendo mal o qué.

Yo tengo el calendario mensual ya terminado y en cada dia hay un hipervínculo, que me redirige al otro html. Pues la idea que tengo es que me capture el año, mes y día que había clicado en el calendario anterior y lo muestre en el calendario diario. Os dejo mi código del mensual:

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("caption")[0].innerHTML="<div>"+meses[month-1]+" / "+year+"</div><div><a onclick='mostrarCalendario("+prevYear+","+prevMonth+")'>&lt;</a></div><div><a onclick='mostrarCalendario("+nextYear+","+nextMonth+")'>&gt;</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+")'>&lt;</a></div><div><a onclick='mostrarCalendario("+nextYear+","+nextMonth+")'>&gt;</a></div><div>"+meses[month-3]+"</div><div>"+meses[month+1]+"</div><div>"+meses[month-2]+"</div><div>"+meses[month]+"</div>";
    
}
<!DOCTYPE html>
<html lang="es">
<head>

    <script src="js/semanal.js"></script>
    
    <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;
            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}

    </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>
    <script>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>