I made a calendar and the dates are wrong

Asked

Viewed 35 times

-2

I am a beginner and I am learning in Mallorca, I am a week breaking my head to solve this problem. Some calendar months are right others with more days others with less. Someone with more experience can see what I don’t see?

// 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, 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()">&larr;</button>
            <a id='AnoNoCalendario'></a>
            <button id="botãoDireita" onclick="AnoPosterior()">&rarr;</button>
        </div>
        <hr>
        <div>
            <a id="mes" onload="mes()"></a>
            <button id="botãoCima" onclick="botãoCima()">&uarr;</button>
            <button id="botãoBaixo" onclick="botãoBaixo()">&darr;</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>

javascript html css

1 answer

0


The problem is here:

function diasDoMes(mes, ano){
    return new Date(ano, mes, 0).getDate();
}

Instead of having (ano, mes, 0) you 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. Now being that you want the last day of the month that was passed in the argument of the function you must add + 1.

Note: made a library that does this a few years ago and is used in production in various applications.
If useful use. https://github.com/SergioCrisostomo/js-calendar

Corrected 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()">&larr;</button>
      <a id='AnoNoCalendario'></a>
      <button id="botãoDireita" onclick="AnoPosterior()">&rarr;</button>
    </div>
    <hr>
    <div>
      <a id="mes" onload="mes()"></a>
      <button id="botãoCima" onclick="botãoCima()">&uarr;</button>
      <button id="botãoBaixo" onclick="botãoBaixo()">&darr;</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>

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.