Como destacar (estilizar) o dia do mês e a semana?
A função mais abaixo foi a mais simples que consegui na Web que me permite entender pelo menos parte do código. Preciso saber 1) como aplicar CSS ao dia atual e 2) acessar, alterar e estilizar a semana).
O objeto Date()
permite acesso ao ano, mês e dia, mas não tem um método direto que devolva a semana (série de dias de Domingo a Sábado), de modo que se possa me referir a semana atual, anterior ou posterior, assim como se faz em getDate() - 1
, por exemplo.
Ao acessar e alterar a série de dias da semana desejada, quero estilizá-la de alguma forma (tag <tr>
) em CSS para dar destaque, como na imagem abaixo. Ex: 15 a 21 de Julho OU 29 de Julho a 4 de Agosto.
Além disso, caso a semana anterior/posterior for parte do mês passado/seguinte, teria de exibir os dois meses, lado a lado, (como na imagem abaixo).
Ex: Se hoje fosse 3 de Novembro, como destacado na imagem abaixo, uma referência à semana passada pertenceria ao mês de Outubro (dias 24 a 30), tornando necessário os dois meses em questão a fim de exibir o dia atual e a semana anterior.
Observações:
A estilização da semana deve ser arbitrada, abrangendo uma única linha inteira (tag <tr>
), assim como na 1ª imagem (dias 15-21). Por arbitrada me refiro a ser capaz de passar um valor à função que retorne 1) semana atual, 2) semana passada, 3) semana retrasada, 4) semana seguinte, ou 5) semana após a semana seguinte (assim como getDate() - 1
retorna o dia de ontem), independente do dia atual (24, na 1ª imagem), que serve apenas para referência, com o objetivo de identificar 1 dentre essas 5 possibilidades de semanas no Calendário. Daí a necessidade de às vezes isso incluir um segundo mês (2ª imagem), devido a diferença entre dia atual e a semana desejada.
O objetivo principal é destacar o dia do mês e a linha <tr>
da semana desejada, não importa se isso for ou não realizado acessando as semanas do jeito que eu expliquei.
<body>
<style>
.week {
outline: solid 1px red;
}
</style>
<div id='cal'></div>
<script type="text/javascript">
function Calendar(id, year, month) {
var elem = document.getElementById(id)
var mon = month - 1
var d = new Date(year, mon)
var weekDay = ["Sun", "Mon", "Tues", "Wed", "Thu", "Fri", "Sat"];
var months = ['January', 'Frebruary', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
var table = ['<table><tr>']
table.push('<th colspan = 4>' + months[mon] + '</th>' + '<th colspan = 3>' + year + '</th>' + '</tr><tr>')
for (var i = 0; i <= 6; i++ ) {
table.push('<th>' + weekDay[i] + '</th>');
}
table.push('</tr><tr>')
for (var i=0; i<d.getDay(); i++) {
table.push('<td></td>')
}
while(d.getMonth() == mon) {
table.push('<td>'+d.getDate()+'</td>')
if (d.getDay() % 7 == 6) {
table.push('</tr><tr>')
}
d.setDate(d.getDate()+1)
}
for (var i=d.getDay(); i<7; i++) {
table.push('<td></td>')
}
table.push('</tr></table>')
elem.innerHTML = table.join('\n')
}
new Calendar("cal", 2015, 2);
</script>
</body>