1

me gustaría saber cómo puedo mostrar los dias del mes anterior en mi clandario con javascript, es decir, en lugar de mostrar celdas vacías por dias que y han pasado, poder mostrar los dias del mes anterior y posterior. Ejemplo: el lunes es dia 30, el martes 31 y el miércoles dia 1. En mi calendario sólo se muestra el dia 1, y el lunes y martes aparecen celdas en blanco. Me gustaría saber cómo mostrar el 30 y el 31. Os dejo mi código en 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()+1);
</script>
<!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;
		}
		
		
	</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>
 

5
  • Incluye tambien tu HTML
    – alanfcm
    el 4 jun. 2018 a las 16:24
  • Ahi lo tienes, perdona el 4 jun. 2018 a las 16:26
  • mira esto te va a guiar: code.tutsplus.com/es/tutorials/… el 4 jun. 2018 a las 16:33
  • Lo siento, pero eso es casi lo mismo que tengo ya @Tegito123 , yo necesito que en esos huecos que hay en blanco, aparezcan los dias del mes anterior y posterior. el 4 jun. 2018 a las 16:38
  • claro pero revisa y ve como hace la parte que a ti no te sale bn el 4 jun. 2018 a las 16:39

2 respuestas 2

0

No se porque sumas y restas al mes, pero usando tu codigo yo lo haria asi:

var actual=new Date();
function mostrarCalendario(year,month)
{
	var now=new Date(year,month-1,1);
	var last=new Date(year,month-2,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;
  
  // 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;
	}
 
	// 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 vacia
			resultado+="<td class='ayer'>"+(ultimoDiaMes - (primerDiaSemana - i - 1))+"</td>";
		} else if (i>=last_cell) {
      resultado+="<td>"+(i - ultimoDiaMes - 1) +"</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");
	    
	//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());
</script>
<!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;
		}
		
		
	</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>

9
  • Muchas gracias, me sirvió para los dias anteriores, pero para los dias posteriores en lugar de volver del 31 al 1 del mes siguiente, me sale el dia 63 y cosas así, no se si sabes como lo podría solucionar. @alanfcm el 4 jun. 2018 a las 16:47
  • ya edite el codigo, tienes que jugar con los numeros, pero de la manera que lo tienes, creo que solo funcionaria para el mes actual
    – alanfcm
    el 4 jun. 2018 a las 17:13
  • Consejo: usa moment.js el 4 jun. 2018 a las 17:15
  • Tambien puedes usar algun plugin como jQueryDatePicker: jqueryui.com/datepicker
    – alanfcm
    el 4 jun. 2018 a las 17:18
  • Y cómo lo podría hacer para que me funcionase siempre? Lo siento por molestarte tanto, pero me cuesta mucho esto . @alanfcm el 4 jun. 2018 a las 17:23
0

Vale, ya lo he solucionado, he añadido como variable var a=0 y var b= ++a, y he sustituido la línea " else if (i>=last_cell) { resultado+=""+(i - ultimoDiaMes - 1) +"";" por "else if (i>=last_cell) { resultado+=""+a+++"";}" .

Muchas gracias a todos por vuestra ayuda

Tu Respuesta

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

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