My Calendar only show months with 31 days. Heeellpppp

Question

My calendar was working fine earlier. But now it is skipping months and is showing only the months that have 31 days.

For example: if the current month is May, the next month should be June. But it is repeating May and then shows next month as July (that has 31 days).

let nav = 0;

const calendar = document.getElementById("calendar");
const weekdays = [
  "Sunday",
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday",
];

function load() {
  const dt = new Date();

  if (nav !== 0) {
    dt.setMonth(new Date().getMonth() + nav);
  }

  const day = dt.getDate();
  const month = dt.getMonth();
  const year = dt.getFullYear();

  const firstDayOfMonth = new Date(year, month, 1);
  const daysInMonth = new Date(year, month + 1, 0).getDate();

  const dateString = firstDayOfMonth.toLocaleDateString("en-us", {
    weekday: "long",
    year: "numeric",
    month: "numeric",
    day: "numeric",
  });
  const paddingDays = weekdays.indexOf(dateString.split(", ")[0]);

  document.getElementById("monthDisplay").innerText =
    dt.toLocaleDateString("pt-br", {
      month: "long"
    }).toUpperCase() +
    " " +
    year;

  calendar.innerHTML = "";

  for (let i = 1; i <= paddingDays + daysInMonth; i++) {
    const daySquare = document.createElement("div");
    daySquare.classList.add("day");

    if (i > paddingDays) {
      daySquare.innerText = i - paddingDays;

      daySquare.addEventListener("click", () => console.log("click"));
    } else {
      daySquare.classList.add("padding");
    }

    calendar.appendChild(daySquare);
  }
}

function initButtons() {
  document.getElementById("nextButton").addEventListener("click", () => {
    nav++;
    load();
  });

  document.getElementById("backButton").addEventListener("click", () => {
    nav--;
    load();
  });
}

initButtons();
load();

<div id="header">
  <button id="backButton">Back</button>
  <div id="monthDisplay"></div>
  <button id="nextButton">Next</button>
</div>

<div id="weekdays">
  <div>Domingo</div>
  <div>Segunda</div>
  <div>Terça</div>
  <div>Quarta</div>
  <div>Quinta</div>
  <div>Sexta</div>
  <div>Sabado</div>
</div>

<div id="calendar"></div>

Answer 1

The reason is that you're running the script on March 31.

When you do

  const dt = new Date();

you're setting dt to a time on March 31. Then you do

    dt.setMonth(new Date().getMonth() + nav);

When nav == 1, this returns April 31. But there is no day 31 in April, so that's treated as May 1.

If you want to do navigation by months, it would be best to use the first day of the month as your base date, rather than the current date:

  const today = new Date();
  const dt = new Date(today.getFullYear(), today.getMonth());

Your code never uses the day variable, so there's no need for

  const day = dt.getDate();

But if you do need the current day of month, get that from today() instead:

  const day = today.getDate();

Answer 2

So I can't exactly explain why your code was acting the way it was but it had to do something with how you were using dt.setMonth(new Date().getMonth() + nav). When I was outputting the results of dt to the console after this line of code, it would always return the first day of the month, then the last day, then skipping over a month and repeating. To fix this, I removed your nav variable, moved the dt, day, month, and year constants to become global variables, and added some code to the click event listeners to increment the year and month appropriately. While this solves your question, it might not be exactly what you were looking for. If it isn't, please let me know if the comments with any more details on restrictions you may have or what you are trying to accomplish. Thank you.

//let nav = 0;
let dt = new Date();
let day = dt.getDate();
let month = dt.getMonth();
let year = dt.getYear() + 1900;

const calendar = document.getElementById("calendar");
const weekdays = [
  "Sunday",
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday",
];

function load() {
  // const dt = new Date();
  // if (nav !== 0) {
  //   dt.setMonth(new Date().getMonth() + nav);
  // }

  // const day = dt.getDate()-1;
  // const month = dt.getMonth();
  // const year = dt.getFullYear();
  // dt.setDate(day);
  dt.setMonth(month);
  dt.setYear(year);

  const firstDayOfMonth = new Date(year, month, 1);
  const daysInMonth = new Date(year, month + 1, 0).getDate();

  const dateString = firstDayOfMonth.toLocaleDateString("en-us", {
    weekday: "long",
    year: "numeric",
    month: "numeric",
    day: "numeric",
  });
  const paddingDays = weekdays.indexOf(dateString.split(", ")[0]);

  const monthName = dt.toLocaleString('pt-br', {month: 'long'});

  document.getElementById("monthDisplay").innerText =
    monthName.toUpperCase() +
    " " +
    year;

  calendar.innerHTML = "";

  for (let i = 1; i <= paddingDays + daysInMonth; i++) {
    const daySquare = document.createElement("div");
    daySquare.classList.add("day");

    if (i > paddingDays) {
      daySquare.innerText = i - paddingDays;

      daySquare.addEventListener("click", () => console.log("click"));
    } else {
      daySquare.classList.add("padding");
    }

    calendar.appendChild(daySquare);
  }
}

function initButtons() {
  document.getElementById("nextButton").addEventListener("click", () => {
    // nav++;
    if(month == 11){
      dt.setMonth(month = 0);
      year++;
    }else{
      dt.setMonth(++month);
    }
    load();
  });

  document.getElementById("backButton").addEventListener("click", () => {
    // nav--;
    if(month == 0){
      dt.setMonth(month = 11);
      year--;
    }else{
      dt.setMonth(--month);
    }
    load();
  });
}

initButtons();
load();