1

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+")'>&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>";
	
}
 
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>

8
  • Una aclaración @JoumeParra , java y javascript o es lo mismo, te lo digo para que no tengas mal entendidos en la pregunta, editala.Saludos. Commented el 6 jun. 2018 a las 14:04
  • 1
    Si, error mio, gracias por la sugerencia no me habia dado cuenta. Me pueden ayudar? Commented el 6 jun. 2018 a las 14:12
  • Por lo que entiendo, quieres acceder a otro archivo *.js que contiene la funcion select_pordias() ?
    – gmarsi
    Commented el 6 jun. 2018 a las 14:15
  • Puedes hacer una variable global fuera de los scripts para que ambos tomen el mismo valor. U otra almacenando en un localstorage, cookie o algo parecido el valor de la variable para después utilizarlo.
    – cignius
    Commented el 6 jun. 2018 a las 14:28
  • Así es, @gmarsi Commented el 6 jun. 2018 a las 14:30

1 respuesta 1

0

A la hora de poner los scripts debes de hacerlo de forma que al que quieras acceder se haya cargado primero que desde el que accedes.

Suponganos que tienes tu HTML e indicas los scripts que vas a usar:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- Tu codigo -->
    <script src="script1.js"></script>
    <script src="script2.js"></script>
</body>
</html>

script1.js seria el archivo donde se encuantra la funcion select_pordias() mientras que el archivo script2.js seria donde tienes la funcion mostrarCalendario(). Para mostrarlo de forma facil imagina lo siguiente

en script1.js tienes una variable

var saludo = 'Hola'

y en script2.js tienes

console.log(saludo)

Al ejecutarlo veras que se muestra correctamente ''Hola'' por consola. Si pones los scripts del reves te saldra un error ya que no puedes acceder a una variable que aun no se ha declarado

1
  • Gracias por tu ayuda, pero no seria en script1 el mostrarCalendario() para poder recojer la variable del mes, año y dia que quiero ver, y luego imprimirlo en select_pordias? Aparte de eso me ha servido para poder enganchar los dos javascript, pero me gustaria saber cómo guardar la variable en mostrarCalendario() y luego supongo que en select_pordias() deberé poner console.log(variableguardada), no? Commented el 6 jun. 2018 a las 16:35

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.