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>

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

  1. You’d need to make use of the document.createElement and the node.appendChild methods.

    Use the createElement method to create a new <tr> element. Then create <td> elements. Append your new <td> elements to your new <tr> using the appendChild method, and then append your <tr> to the table.

    e.g.

    // outside your for loop
    var newRow = document.createElement('tr');
    
    // inside your for loop
    var newCell = document.createElement('td');
    newRow.appendChild(newCell);
    
    // after your loop
    document.getElementById('calendar').appendChild(newRow);
    
    Reply

Leave a Comment