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>

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

  1. Hello There. I found your weblog the use of
    msn. This is a really neatly written article. I will be sure to bookmark it and
    return to learn extra of your helpful information. Thank you for the post.
    I will certainly comeback.

    Reply
  2. Hey! I know this is somewhat off topic but I was wondering which blog platform are
    you using for this website? I’m getting tired of WordPress because I’ve had
    issues with hackers and I’m looking at alternatives for
    another platform. I would be awesome if you could point me in the direction of a good platform.

    Reply
  3. Have you ever thought about adding a little bit more than just your articles?
    I mean, what you say is valuable and everything.
    Nevertheless think of if you added some great photos or videos to give your posts more,
    “pop”! Your content is excellent but with images and clips,
    this website could definitely be one of the most beneficial in its field.

    Amazing blog! quest bars https://www.iherb.com/search?kw=quest%20bars quest
    bars

    Reply