I'm doing a calendar with js, html and css, and my problem is that I would like that when the day is a Sunday of the following month, it could appear in a different color, for example a blue. I have since I appear the days of the following month, with a different color. And I have to appear on Sundays in red, so I have two different labels, one for the following days and one for Sundays. Therefore, I do not know how to color a Sunday of the following month. I leave my code:
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+")'><</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>And if someone could tell me how to put a hyperlink on each of the days to another java, it would be the repera. But what interests me most is the color. Thank you very much