Estoy intentando hacer un calendario con js, html y css. Ya lo tengo finalizado, ahora me falta que al pulsar sobre un día me lleve a otro javascript dentro de la misma web, y que recoja el año y mes sobre el que he pulsado. Lo estoy intentando con :
<a href='javascript:select_pordias(+year+, +meses[month-1]+, +dia+);'>
, pero no me lo pilla, y tampoco sé si lo estoy haciendo bien para que me lleve a ese javascript.
Necesitaría que el link fuera a la misma web pero a otro javascript que tengo con el nombre de select_pordias. Os dejo el link a ver si alguien me puede ayudar.
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 href='#'>"+(ultimoDiaMes - (primerDiaSemana - i - 1))+"</a></td>";
} else if (i>=last_cell) {
if (i % 7 == 0) {
resultado+="<td class='post' style='color: #fd9292'><a href='javascript:select_pordias(+year+, +meses[month-1]+, +dia+);'>"+a+++"</a></td>";
} else {
resultado+="<td class='post' style='color: #cccccc'><a href='#'>"+a+++"</a></td>";
}
}
else{
// mostramos el dia
if(dia==actual.getDate() && month==actual.getMonth()+1 && year==actual.getFullYear())
resultado+="<td class='hoy' ><a href='#'>"+dia+"</a></td>";
else
resultado+="<td><a href='#'>"+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+")'><</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);
<!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;
}
#calendar .ayer {
color: #cccccc;
}
#calendar .post {
color: #cccccc;
}
#calendar .post:nth-child(DOMINGO){
color:blue;}
</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>