I am developing a calendar for a school project, however I have a problem that I cannot solve and my searches were unsuccessful, when I generate the month and press to go to the next month the table overlaps causing a problem that makes subsequent months buggy .
There is my code in HTML and JavaScript
// Adds an event that triggers when the document content is fully loaded
document.addEventListener('DOMContentLoaded', function() {
// Array containing the names of the months in Portuguese
const monthsPt = ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'];
const tableDays = document.getElementById('dias'); // Gets the days table by ID
// Function to generate the days of the calendar for a specific month and year
function GetDaysCalendar(month, year) {
// Updates the displayed month and year
document.getElementById('mes').innerHTML = monthsPt[month];
document.getElementById('ano').innerHTML = year;
// Calculates the first day of the week of the month and the last day of the month
let firstDayOfWeek = new Date(year, month, 1).getDay() - 1;
let getLastDayThisMonth = new Date(year, month + 1, 0).getDate();
// Loop to fill in the days of the table
for (var i = -firstDayOfWeek, index = 0; i < (42 - firstDayOfWeek); i++, index++) {
let dt = new Date(year, month, i); // Creates a date object for the current loop day
let dtNow = new Date(); // Current date
var dayTable = tableDays.getElementsByTagName('td')[index]; // Gets the corresponding table cell
var today = new Date();
var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
let currentDay = parseInt(dd);
let currentMounth = parseInt(mm) - 1;
// Removes classes for previous month, next month, and current day
dayTable.classList.remove('mes-anterior');
dayTable.classList.remove('mes-proximo');
dayTable.classList.remove('dia-atual');
dayTable.innerHTML = dt.getDate(); // Sets the day number in the cell
dayTable.addEventListener('click', function() {
console.log("trivilin");
console.log(dt.getDate());
console.log(currentDay);
console.log(dt.getMonth());
console.log(currentMounth);
if ((dt.getDate() >= currentDay && dt.getMonth() == currentMounth) || dt.getMonth() > currentMounth) {
const modal = document.getElementById("ModalAceito");
const span = document.getElementsByClassName("close")[0];
modal.style.display = "block";
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
} else {
const modall = document.getElementById("ModalError");
const spann = document.getElementsByClassName("closeError")[0];
modall.style.display = "block";
spann.onclick = function() {
modall.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modall) {
modall.style.display = "none";
}
}
}
});
// Checks if the current date matches the loop date
if (dt.getFullYear() == dtNow.getFullYear() && dt.getMonth() == dtNow.getMonth() && dt.getDate() == dtNow.getDate()) {
dayTable.classList.add('dia-atual'); // Adds the class for the current day
}
// Adds class for days from the previous month
if (i < 1) {
dayTable.classList.add('mes-anterior');
}
// Adds class for days from the next month
if (i > getLastDayThisMonth) {
dayTable.classList.add('mes-proximo');
}
}
}
// Gets the current date
let now = new Date();
let month = now.getMonth(); // Current month
let year = now.getFullYear(); // Current year
GetDaysCalendar(month, year); // Generates the calendar for the current month
// Gets the buttons to navigate between months
const buttonNext = document.getElementById('btn_prev');
const buttonPrevious = document.getElementById('btn_ant');
// Event for the next button
buttonNext.onclick = function() {
month++; // Advances to the next month
if (month >= 12) { // If it exceeds December
month = 0; // Reset to January
year++; // Advance to the next year
}
GetDaysCalendar(month, year); // Updates the calendar
}
// Event for the previous button
buttonPrevious.onclick = function() {
month--; // Moves back to the previous month
if (month < 0) { // If it goes below January
month = 11; // Reset to December
year--; // Move back to the previous year
}
GetDaysCalendar(month, year); // Updates the calendar
}
});<!-- Tells the browser which version of HTML is being used -->
<!DOCTYPE html>
<!-- Opening HTML, setting language to pt -->
<html lang="pt">
<!-- Opening the site header -->
<head>
<meta charset="UTF-8">
<!-- Import css style into html code -->
<link rel="stylesheet" type="text/css" href="C:UsersAlunoDesktopPAPCssEstilo.css">
<!-- Import code in JavaScript into html code -->
<script type="text/javascript" src="C:UsersAlunoDesktopPAPScriptScript.js"></script>
<!-- Sets the site title for Registo de Salas -->
<title> Registo de Salas </title>
<!-- Site Header Closing -->
</head>
<!-- Opening of the website body -->
<body>
<!-- Creating a title at the beginning of the site with the name "Registo de Salas" -->
<h1> Registo de Salas </h1>
<!-- Creating a div and defining it as a class called Conteudo -->
<div class="Conteudo">
<!-- Creating a div and defining it with a class name called "Calendario"-->
<div class="Calendario">
<!-- Opening header-->
<header>
<!-- Creating a subtitle and defining its id for mes -->
<h2 id="mes">Abril</h2>
<!-- Creating a link and naming it as the class btn-ant with the id btn_prev -->
<a class="btn-ant" id="btn_ant">
<</a>
<!-- Creating a link and naming it as the class btn-pro with the id btn_next -->
<a class="btn-pro" id="btn_prev">></a>
<!-- Header closing -->
</header>
<!-- Creating a table to form the calendar -->
<!-- I made this table based on what I know about HTML at the moment, if this becomes a used project it can implement a more efficient method, and I apologize for the confusion that follows, I'm really improvising in this part.-->
<table>
<!-- Opens the table head -->
<thead>
<!-- Creating a row in the table -->
<tr>
<!-- This part of the code serves to make the days of the week appear at the top of the calendar, if someone changes this it may have to be changed in the page index. -->
<td>Dom</td>
<td>Seg</td>
<td>Ter</td>
<td>Qua</td>
<td>Qui</td>
<td>Sex</td>
<td>Sab</td>
<!-- Closes the table row -->
</tr>
<!-- Closes the table head -->
</thead>
<!-- Creating the table body and placing its id as dias -->
<tbody id="dias">
<!-- The lines of code below only serve to load the calendar lines and create their respective spaces, the days are replaced by the code made in javaScript -->
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<!-- Closing the table body -->
</tbody>
<!-- Table closing -->
</table>
<!-- Foother opening -->
<footer>
<!-- Using the h2 tag to place the year, its year id is due to the fact that it is easier to replace it in JavaScript -->
<h2 id="ano">2020</h2>
<!-- Footer closing -->
</footer>
<!-- Estrutura do Modal -->
<div id="ModalAceito" class="modal">
<div class="modal-content">
<table>
<span class="close">×</span>
<td> Sala tic 1</td>
</table>
</div>
</div>
<div id="ModalError" class="modal">
<div class="modal-content">
<span class="closeError">×</span>
<h1> Impossivel fazer marcação</h1>
</div>
</div>
<!-- Closing of the div -->
</div>
<!-- Closing of the div -->
</div>
<!-- Closing the body of the site -->
</body>
<!-- HTML closing -->
</html>I already tried asking my teachers and looked where I found something about it.