G
The problem is here:function diasDoMes(mes, ano){
return new Date(ano, mes, 0).getDate();
}
Instead of having (ano, mes, 0) must have (ano, mes + 1, 0), the reason is that 0 in the position of the day will give the last day of the previous month. If you want the last day of the month that was passed on the function argument you must add + 1.Note: I made a library that does this for a few years and is used in production in various applications.If it is useful use. https://github.com/SergioCrisostomo/js-calendar Fixed version:// Informações como Data e Hora
var data = new Date()
var ano = data.getFullYear()
var calendarioAno = ano
var meses = data.getMonth()
var NomesMeses = ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro']
// Ligação com o HTML
var relogio = document.getElementById('horaRes')
var res = document.getElementById('ano')
var AnoNoCalendario = document.getElementById('AnoNoCalendario')
var mes = document.getElementById('mes')
// ligção com os dias da semana
var listaItens = [
item0 = document.getElementById('item0'),
item1 = document.getElementById('item1'),
item2 = document.getElementById('item2'),
item3 = document.getElementById('item3'),
item4 = document.getElementById('item4'),
item5 = document.getElementById('item5'),
item6 = document.getElementById('item6'),
item7 = document.getElementById('item7'),
item8 = document.getElementById('item8'),
item9 = document.getElementById('item9'),
item10 = document.getElementById('item10'),
item11 = document.getElementById('item11'),
item12 = document.getElementById('item12'),
item13 = document.getElementById('item13'),
item14 = document.getElementById('item14'),
item15 = document.getElementById('item15'),
item16 = document.getElementById('item16'),
item17 = document.getElementById('item17'),
item18 = document.getElementById('item18'),
item19 = document.getElementById('item19'),
item20 = document.getElementById('item20'),
item21 = document.getElementById('item21'),
item22 = document.getElementById('item22'),
item23 = document.getElementById('item23'),
item24 = document.getElementById('item24'),
item25 = document.getElementById('item25'),
item26 = document.getElementById('item26'),
item27 = document.getElementById('item27'),
item28 = document.getElementById('item28'),
item29 = document.getElementById('item29'),
item30 = document.getElementById('item30'),
item31 = document.getElementById('item31'),
item32 = document.getElementById('item32'),
item33 = document.getElementById('item33'),
item34 = document.getElementById('item34'),
item35 = document.getElementById('item35'),
item36 = document.getElementById('item36'),
item37 = document.getElementById('item37'),
item38 = document.getElementById('item38'),
item39 = document.getElementById('item39'),
item40 = document.getElementById('item40'),
item41 = document.getElementById('item41'),
]
// O que escreve no HTML
res.innerHTML += ${ano}
AnoNoCalendario.innerHTML = ${calendarioAno}
mes.innerHTML = ${NomesMeses[meses]}
// Função do relogio
function HoraAtual() {
hoje = new Date()
hora = hoje.getHours()
minutos = hoje.getMinutes()
segundos = hoje.getSeconds()
relogio.innerHTML = ${hora} horas ${minutos} minutos ${segundos} segundos
setTimeout('HoraAtual()', 500)
}
//Diminui os anos no calendário
function AnoAnterior() {
calendarioAno -= 1
AnoNoCalendario.innerHTML = ${calendarioAno}
escreverCal()
}
//Aumenta os anos no calendário
function AnoPosterior() {
calendarioAno += 1
AnoNoCalendario.innerHTML = ${calendarioAno}
escreverCal()
}
function botãoCima() {
if (meses == 0) {
AnoAnterior()
meses = 11
mes.innerHTML = ${NomesMeses[meses]}
} else {
meses -= 1
mes.innerHTML = ${NomesMeses[meses]}
}
escreverCal()
}
function botãoBaixo() {
if (meses == 11) {
AnoPosterior()
meses = 0
mes.innerHTML = ${NomesMeses[meses]}
} else {
meses += 1
mes.innerHTML = ${NomesMeses[meses]}
}
escreverCal()
}
function diasDoMes(mes, ano) {
return new Date(ano, mes + 1, 0).getDate();
}
function diaDaSemana(mes, ano) {
return new Date(ano, mes).getDay();
}
function escreverCal() {
var Dsemana = diaDaSemana(meses, calendarioAno);
var Qmes = diasDoMes(meses, calendarioAno);
for (var contador = 0; contador < 41; contador++) {
listaItens[contador].innerText = ''
}
for (var c = Dsemana; c < (Qmes + Dsemana); c++) {
listaItens[c].innerHTML += ${c - Dsemana +1 }
}
}
escreverCal()body {
background: rgb(32, 32, 32);
font: normal 18pt Arial;
}
header {
color: white;
text-align: center;
}
section#relogio {
text-align: center;
color: white;
background: rgb(14, 15, 29);
border-radius: 15px;
padding: 10px;
width: 370px;
margin: auto;
box-shadow: 5px 5px 5px black;
}
section#calendario {
background: rgb(241, 241, 241);
border-radius: 10px;
padding: 15px;
width: 800px;
margin: auto;
box-shadow: 5px 5px 5px black;
margin-top: 20px;
}
.conteiner {
display: grid;
grid-template-columns: repeat(7, auto);
grid-gap: 20px;
font: 16px;
text-align: center;
margin: auto;
}
div#selectAno {
text-align: center;
margin: auto;
}
button#botãoEsquerda {
right: 10px;
top: -3px;
position: relative;
}
button#botãoDireita {
left: 10px;
top: -3px;
position: relative;
}
button#botãoCima {
float: right;
}
button#botãoBaixo {
float: right;
}
footer {
color: whitesmoke;
text-align: center;
margin-top: 10px;
}<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calendário</title>
<link rel="stylesheet" href="estilo.css">
</head>
<body onload="HoraAtual()">
<header>
<h1 id="ano">Calendário</h1>
<hr>
</header>
<section id="relogio">
<div id="horaRes"></div>
</section>
<section id="calendario">
<div id="selectAno">
<button id="botãoEsquerda" onclick="AnoAnterior()">←</button>
<a id='AnoNoCalendario'></a>
<button id="botãoDireita" onclick="AnoPosterior()">→</button>
</div>
<hr>
<div>
<a id="mes" onload="mes()"></a>
<button id="botãoCima" onclick="botãoCima()">↑</button>
<button id="botãoBaixo" onclick="botãoBaixo()">↓</button>
</div>
<hr>
<div class="conteiner">
<div id="item">Domingo</div>
<div id="item">Segunda</div>
<div id="item">Terça</div>
<div id="item">Quarta</div>
<div id="item">Quinta</div>
<div id="item">Sexta</div>
<div id="item">Sabádo</div>
<div id="item0"></div>
<div id="item1"></div>
<div id="item2"></div>
<div id="item3"></div>
<div id="item4"></div>
<div id="item5"></div>
<div id="item6"></div>
<div id="item7"></div>
<div id="item8"></div>
<div id="item9"></div>
<div id="item10"></div>
<div id="item11"></div>
<div id="item12"></div>
<div id="item13"></div>
<div id="item14"></div>
<div id="item15"></div>
<div id="item16"></div>
<div id="item17"></div>
<div id="item18"></div>
<div id="item19"></div>
<div id="item20"></div>
<div id="item21"></div>
<div id="item22"></div>
<div id="item23"></div>
<div id="item24"></div>
<div id="item25"></div>
<div id="item26"></div>
<div id="item27"></div>
<div id="item28"></div>
<div id="item29"></div>
<div id="item30"></div>
<div id="item31"></div>
<div id="item32"></div>
<div id="item33"></div>
<div id="item34"></div>
<div id="item35"></div>
<div id="item36"></div>
<div id="item37"></div>
<div id="item38"></div>
<div id="item39"></div>
<div id="item40"></div>
<div id="item41"></div>
</div>
</section>
<footer>Instagram: @_danielgoulart</footer>
<script src="script.js"></script>
</body>
</html>