0

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("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>

4
  • Esto se puede hacer de múltiples maneras, como dices: por Ajax, guardando los datos en una base de datos en el servidor, usando localstorage, etc. Dependiendo del uso que darás a esa información ya se podría determinar cuál sería la mejor opción. Puesto que mencionas localstorage, aquí hay un ejemplo de cómo hacerlo de ese modo.
    – A. Cedano
    Commented el 8 jun. 2018 a las 11:24
  • El uso sería el que he dicho, solamente mostrar el dia mes y año que he clicado, luego ya pondría un cartel general y listo. He mirado lo de localstorage pero no sé como ponerlo en mi código, la parte de capturar la info supongo que será un función aparte en el código del calendario mensual y luego la parte de leer la info un función en el código del calendario diario, pero no sé cómo ponerlo correctamente...Gracias por tu ayuda Commented el 8 jun. 2018 a las 11:33
  • Posible duplicado de Hipervínculo a otro JavaScript con valores Commented el 12 jun. 2018 a las 21:54
  • Te sugerimos realizar una pregunta en lugar de varias que están relacionadas a la misma pregunta, pero que esta pregunta sea basada en Cómo preguntar @JourneParra Te aseguro que de esta forma obtendrías la ayuda requerida, saludos!
    – Jorgesys
    Commented el 13 jul. 2018 a las 17:47

1 respuesta 1

0

Muy buenas hice unos cambios en tu código guardo en localstorage y los recibo en el archivo res.html te lo dejo por aquí. LO USADO PARA GUARDAR Y RECIBIR EN LOCALSTORAGE:

var fecha = "El dia es: "+dia+ " El mes: "+mes+" El año: "+anio;    
localStorage.setItem('fecha', JSON.stringify(fecha));
    var fecha = localStorage.getItem('fecha');

JS MIRAR DONDE PONGO EL COMENTARIO CAMBIO

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) {
      //CAMIOS ONCLICK Y QUITAMOS HREF
        resultado += "<td class='post' style='color: #fd9292'><a onclick='guardardia(this.id,"+year+","+month+")' id="+  a++ +" class='red' >" + a++ + "</a></td>";
      } else {
        resultado += "<td class='post' style='color: #cccccc'><a onclick='guardardia(this.id,"+year+","+month+")' id="+  a++ +" class='post' >" + a++ + "</a></td>";
      }
    } else {
      // mostramos el dia 
      //CAMIOS ONCLICK Y QUITAMOS HREF
      if (dia == actual.getDate() && month == actual.getMonth() + 1 && year == actual.getFullYear())
        resultado += "<td class='hoy' ><a onclick='guardardia(this.id,"+year+","+month+")' id="+ dia +" class='hoy' >" + dia + "</a></td>";
      else
        resultado += "<td><a class='negro' onclick='guardardia(this.id,"+year+","+month+")'id="+ dia +" >" + 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>";

}
//CAMIBOS
function guardardia(dia, anio, mes){
    var fecha = "El dia es: "+dia+ " El mes: "+mes+" El año: "+anio;
    location.href ="res.html";
    localStorage.setItem('fecha', JSON.stringify(fecha));

}
function recogerdia(){
    var fecha = localStorage.getItem('fecha');
    document.getElementById('fecha').innerHTML = fecha;
}
#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="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css.css">
    <title>Document</title>
</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>
<script src="js.js"></script>
</html>
res.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body onload="recogerdia()">
    <div id="fecha"></div>
</body>
<script src="js.js"></script>
</html>

5
  • Muchas gracias por tu ayuda, pero tengo algunos problemas. En lo que es el href destino que pones, en lugar de "res.html" intento poner que acceda al archivo js que tiene que mostrar, poniéndolo asi: "javascript:select_pordias()"; pero no me lo detecta bien, igual no lo he puesto bien. Otro problema que tengo es que cuando vuelvo hacia atrás, una vez he ido a "res.html", me muestra el calendario semanal vacío, no sé si es que falta alguna variable para borrar lo guardado, o cómo hacerlo. Muchas gracias por tu ayuda Commented el 8 jun. 2018 a las 13:50
  • a mi no me muestra el calendario vacío la verdad Commented el 8 jun. 2018 a las 13:55
  • y no entiendo a que te refieres con acceder al archivo js, con el href. Para cargar scripts o archivos js tienes que añadirlos en el html y para que al hacer click ejecute esa función supongo que te refieres a select_pordias(), debes hacer un onclick="select_pordias()" Commented el 8 jun. 2018 a las 13:57
  • si te fijas al final del html de res.html está esto: <script src="js.js"></script> eso carga el fichero js que contiene la función recogerdia() que se ejecuta al iniciar la página en el <body onload="recogerdia()"> si quieres que ejecute algo más o otro fichero js te recomiendo poner ese fichero en el res.html al igual que está js.js y en la funciñon recogerdia() haces una llamada a select_pordias(), si quieres que te eche una mano hablame por [email protected] Commented el 8 jun. 2018 a las 14:02
  • te envié un correo @Yasiel Hernández Commented el 9 jun. 2018 a las 13:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.