Monthly events calendar

Question

Monthly events calendar

Navigation

#1 by (-1 votes)

-3

I'm trying to create a monthly calendar that when I click on a certain day, take me to that day with your events. The problem is that I do not know how to get this monthly calendar to take me to the daily page, I do not know if I explain myself correctly. I'm doing it with javascript, html and css. Thank you very much for your help

This is what I have so far:

And I would like to click on one day, take me to another file that I have showing the selected day.

I leave the code in js:

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 bgcolor='silver'>";
	var diaActual=0;
	console.log(ultimoDiaMes);

 
	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 || i>=last_cell)
		{
			// celda vacia
			resultado+="<td class='ayer'>"+dia+"</td>";
		}else{
			// mostramos el dia
			if(dia==actual.getDate() && month==actual.getMonth()+1 && year==actual.getFullYear())
				resultado+="<td class='hoy'>"+dia+"</td>";
			else
				resultado+="<td>"+dia+"</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;
	}
 
	//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()+3);

<html lang="es">

<head>

	<!--http://www.lawebdelprogramador.com-->

	<title>Ejemplo de un simple calendario en JavaScript</title>

	<meta charset="utf-8">

	<style>

		#calendar {

			font-family:Arial;

			font-size:12px;

		}

		#calendar caption {

			text-align:left;

			padding:5px 10px;

			background-color:#003366;

			color:#fff;

			font-weight:bold;

			font-size:medium;

		}

		#calendar caption div:nth-child(1) {float:left;}

		#calendar caption div:nth-child(2) {float:right;}

		#calendar caption div:nth-child(2) a {cursor:pointer;}

		#calendar th {

			background-color:#006699;

			color:#fff;

			width:40px;

		}

		#calendar td {

			text-align:right;

			padding:2px 5px;

			background-color:silver;

		}

		#calendar .hoy {

			background-color:red;

		}

	</style>

</head>

 

<body>

 

<h1>Ejemplo de un simple calendario en JavaScript</h1>

<table id="calendar">

	<caption></caption>

	<thead>

		<tr>

			<th>Lun</th><th>Mar</th><th>Mie</th><th>Jue</th><th>Vie</th><th>Sab</th><th>Dom</th>

		</tr>

	</thead>

	<tbody>

	</tbody>

</table>

 

</body>

</html>

javascript html

asked by Joume Parra 03.06.2018 в 19:42

source

1 answer

add several objects in JAVA Pass PHP variable between manners that are not on the same page

score -1 · Answer 1

Although you have not placed the code of how you build the calendar with js, it occurs to me you add the event to the selected day

losdiasdelcalendario.addEventListener("click", function(){
    //la funcion que quieres utilizar, en tu caso ir a la pagina deseada;
});

If it's with HTML you can use:

onclick="myFunction()"

I hope it will guide you on where to start ...