why do I have lines that start right after the <th> tag

March 5, 2023

I have this code

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Calendrier</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.3/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <style type="text/css">
        .calendar {
            font-family: Arial, sans-serif;
            border-collapse: collapse;
            width: 100%;
        }

        .calendar td, .calendar th {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }

        .calendar th {
            background-color: #f2f2f2;
            margin-bottom: 10px;
        }

        .calendar td.work {
            background-color: #c6efce;
        }

        .calendar td.not-work {
            background-color: #ffc7ce;
        }
    </style>
</head>
<body>
    <div class="container mt-5">
        <table class="table calendar">
            <thead>
                <tr>
                    <th>Lundi</th>
                    <th>Mardi</th>
                    <th>Mercredi</th>
                    <th>Jeudi</th>
                    <th>Vendredi</th>
                    <th>Samedi</th>
                    <th>Dimanche</th>
                </tr>
            </thead>
            <tbody id="calendar-body">
            </tbody>
        </table>
    </div>
    <script type="text/javascript">
        var tbody = document.getElementById("calendar-body");
        var currentDate = new Date(2023, 2, 6);
        var endDate = new Date(2023, 11, 31);
        var cycleLength = 6; // 2 jours non travaillés suivis de 4 jours travaillés
        var dayCounter = 0;
        var prevMonth = -1; // initial value to detect month change

        while (currentDate <= endDate) {
            var month = currentDate.getMonth();

            // create a new row after the month changes
            if (month !== prevMonth) {
                var tr = document.createElement("tr");
                var th = document.createElement("th");
                th.colSpan = 7;
                th.textContent = new Intl.DateTimeFormat("fr-FR", { month: "long", year: "numeric" }).format(currentDate);
                tr.appendChild(th);
                tbody.appendChild(tr);
                prevMonth = month;
            }

            if (currentDate.getDay() == 1) {
                var tr = document.createElement("tr");
            }

            var td = document.createElement("td");
            if (dayCounter % cycleLength == 0 || dayCounter % cycleLength == 1) {
                td.className = "not-work";
            } else {
                td.className = "work";
            }
            td.textContent = currentDate.getDate();
            tr.appendChild(td);
            currentDate.setDate(currentDate.getDate() + 1);
            dayCounter++;

            if (currentDate.getDay() == 0) {
                tbody.appendChild(tr);
            }
        }
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.3/js/bootstrap.min.js"></script>
</body>
</html>

why do I have lines that start right after the <th> tag where the calendar month is written?

>Solution :

You were accidentally adding the TH to a TR

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Calendrier</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.3/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <style type="text/css">
        .calendar {
            font-family: Arial, sans-serif;
            border-collapse: collapse;
            width: 100%;
        }

        .calendar td, .calendar th {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }

        .calendar th {
            background-color: #f2f2f2;
            margin-bottom: 10px;
        }

        .calendar td.work {
            background-color: #c6efce;
        }

        .calendar td.not-work {
            background-color: #ffc7ce;
        }
    </style>
</head>
<body>
    <div class="container mt-5">
        <table class="table calendar">
            <thead>
                <tr>
                    <th>Lundi</th>
                    <th>Mardi</th>
                    <th>Mercredi</th>
                    <th>Jeudi</th>
                    <th>Vendredi</th>
                    <th>Samedi</th>
                    <th>Dimanche</th>
                </tr>
            </thead>
            <tbody id="calendar-body">
            </tbody>
        </table>
    </div>
    <script type="text/javascript">
        var tbody = document.getElementById("calendar-body");
        var currentDate = new Date(2023, 2, 6);
        var endDate = new Date(2023, 11, 31);
        var cycleLength = 6; // 2 jours non travaillés suivis de 4 jours travaillés
        var dayCounter = 0;
        var prevMonth = -1; // initial value to detect month change

        while (currentDate <= endDate) {
            var month = currentDate.getMonth();

            // create a new row after the month changes
            if (month !== prevMonth) {
                var tr = document.createElement("tr");
                var th = document.createElement("th");
                th.colSpan = 7;
                th.textContent = new Intl.DateTimeFormat("fr-FR", { month: "long", year: "numeric" }).format(currentDate);
   
                tbody.appendChild(th);
                prevMonth = month;
            }

            if (currentDate.getDay() == 1) {
                var tr = document.createElement("tr");
            }

            var td = document.createElement("td");
            if (dayCounter % cycleLength == 0 || dayCounter % cycleLength == 1) {
                td.className = "not-work";
            } else {
                td.className = "work";
            }
            td.textContent = currentDate.getDate();
            tr.appendChild(td);
            currentDate.setDate(currentDate.getDate() + 1);
            dayCounter++;

            if (currentDate.getDay() == 0) {
                tbody.appendChild(tr);
            }
        }
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.3/js/bootstrap.min.js"></script>
</body>
</html>

The above isn’t quite right, because you still need to add some empty TD cells so that the first days of the next month begin in the correct column, but it should get you started.