How to add rows to calendar in Javascript?

I can’t figure out how to automatically add new rows and columns to this calendar. I cannot use jQuery or anything fancy for this task. The changes must be made to .js only. Here are the hints I was given:

  1. In the onload event handler, write the code that loops through the days of the month to create the rows for the calendar.
  2. Use a tr element for each new row and td elements within the rows for the days of the months. To display the rows, add them to the innerHTML property of the calendar table, but remember that the new rows have to go after the row that’s in the HTML. Please find my code in snippets below:

Thank you!

var $ = function (id) { return document.getElementById(id); };

var getMonthText = function(currentMonth) {
    if (currentMonth === 0) { return "January"; }
    else if (currentMonth === 1) { return "February"; }
    else if (currentMonth === 2) { return "March"; }
    else if (currentMonth === 3) { return "April"; }
    else if (currentMonth === 4) { return "May"; }
    else if (currentMonth === 5) { return "June"; }
    else if (currentMonth === 6) { return "July"; }
    else if (currentMonth === 7) { return "August"; }
    else if (currentMonth === 8) { return "September"; }
    else if (currentMonth === 9) { return "October"; }
    else if (currentMonth === 10) { return "November"; }
    else if (currentMonth === 11) { return "December"; }
};

var getLastDayofMonth = function(currentMonth) {
    var endOfMonth = getmonth(currentMonth);

    endOfMonth.setMonth(endOfMonth.getMonth() + 1);
    return endOfMonth.setDate(0);

};

window.onload = function () {

    // display current month and year
    actualMonth = new Date().getMonth();
    actualYear = new Date().getFullYear();
    $("month_year").textContent = getMonthText(actualMonth) + " " + actualYear;

    //for (var i = 1; i < endOfMonth.setDate(0); i++)
    //new rows should be added here 
    

        

    
    
};
body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: white;
    margin: 0 auto;
    width: 360px;
    border: 3px solid blue;
    padding: 0 2em 1em;
}
h1 {
    color: blue;
    margin-bottom: .25em;
}
table {
    border-collapse: collapse;
    border: 1px solid black;
}
td {
    width: 3em;
    height: 3em;
    vertical-align: top;
    padding: 0.5 0 0 0.5;
    border: 1px solid black;
}
<!DOCTYPE html>
<html>
<head>
    <title>Calendar</title>
    <link rel="stylesheet" href="calendar.css">
    <script src="calendar.js"></script>
</head>
<body>
    <main>
        <h1><span id="month_year">&nbsp;</span></h1>

        <table id="calendar">
            <tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr>
        </table>
    </main>
</body>
</html>

21 thoughts on “How to add rows to calendar in Javascript?”

Leave a Comment