1

estoy haciendo un calendario con js, html y css, y mi problema es que me gustaría que cuando el dia es un domingo del mes siguiente, pudiera aparecer de un color diferente, por ejemplo un azul. Tengo puesto que me aparezcan los dias del mes siguiente, con un color diferente. Y tengo que los domingos me aparezcan en rojo, de ahi que tengo dos etiquetas diferentes, una para los dias siguientes y una para los domingos. Por lo tanto, no sé cómo darle color a un domingo del mes siguiente. Os dejo mi código:

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 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'>"+(ultimoDiaMes - (primerDiaSemana - i - 1))+"</td>";
		} else if (i>=last_cell) {
		resultado+="<td class='post' style='color: #cccccc'>"+a+++"</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;
	}
 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>

Y ya si alguien me pudiera decir cómo poner un hipervínculo a cada uno de los días a otro java, sería la repera. Pero lo que más me interesa es lo del color. Muchas gracias

1 respuesta 1

0

Puedes hacerlo igual que hiciste con los domingos del mes, puedes chequear i mod 7 asi:

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 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'>"+(ultimoDiaMes - (primerDiaSemana - i - 1))+"</td>";
		} else if (i>=last_cell) {
                  if (i % 7 == 0) {
		                resultado+="<td class='post' style='color: blue'>"+a+++"</td>";
                  } else {
                    resultado+="<td class='post' style='color: #cccccc'>"+a+++"</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;
	}
 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>

7
  • Eres un héroe, muchas gracias, me sirvió. Por cierto, lo de ponerle hipervínculos a cada uno de los días, me podrías ayudar? Commented el 5 jun. 2018 a las 16:21
  • Solo tienes que encerrar los dias en un <a href="tu_vinculo"></a>
    – alanfcm
    Commented el 5 jun. 2018 a las 16:25
  • No me deja, se me queda todo en blaco, no se dónde meterlo. Tengo que utilizar esto: <a href="javascript:select_pordias"> pero no se dónde ponerlo. @alanfcm Commented el 6 jun. 2018 a las 11:44
  • Seria asi: resultado+="<td class='hoy'><a href='select_pordias()'>"+dia+"</a></td>";
    – alanfcm
    Commented el 6 jun. 2018 a las 15:27
  • Vale, me sirvió, pero ahora tengo otro problema. Cuando intento colorear los enlaces, cuando quiero colorear un domingo normal de color rojo, no puedo porque lo tenia puesto como #calendar td:nth-child(7) { color:red; }, y le da más importancia al <a> que al td. Me podrias ayudar @alanfcm ? Commented el 6 jun. 2018 a las 21:56

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.