Creating a function to fill out a calendar in javascript?

So I want to create a function to get the weekdays in a specified month of year, I can already do this but when I get up to the part where I actually list them on the calendar it seems to start from 0 and go to 30 and not 1 to 31 how it should be for December?

Here is my JavaScript function:

function getMonthInfo(year, month) {
    let weekdays = [];
    let numDays = new Date(year, month, 0).getDate();

    for (let day = 1; day <= numDays; day++) {
        let weekday = new Date(year, month - 1, day).getDay();
        weekdays.push(weekday);
    }

    weekdays.forEach(function (item, index) {
        console.log(item, index);

        switch (item) {
            case 0:
                var number = document.createElement("p");
                var Textnode = document.createTextNode(index);
                number.appendChild(Textnode);
                document.getElementById("CM0").appendChild(number);
                break;
            case 1:
                var number = document.createElement("p");
                var Textnode = document.createTextNode(index);
                number.appendChild(Textnode);
                document.getElementById("CM1").appendChild(number);
                break;
            case 2:
                var number = document.createElement("p");
                var Textnode = document.createTextNode(index);
                number.appendChild(Textnode);
                document.getElementById("CM2").appendChild(number);
                break;
            case 3:
                var number = document.createElement("p");
                var Textnode = document.createTextNode(index);
                number.appendChild(Textnode);
                document.getElementById("CM3").appendChild(number);
                break;
            case 4:
                var number = document.createElement("p");
                var Textnode = document.createTextNode(index);
                number.appendChild(Textnode);
                document.getElementById("CM4").appendChild(number);
                break;
            case 5:
                var number = document.createElement("p");
                var Textnode = document.createTextNode(index);
                number.appendChild(Textnode);
                document.getElementById("CM5").appendChild(number);
                break;
            case 6:
                var number = document.createElement("p");
                var Textnode = document.createTextNode(index);
                number.appendChild(Textnode);
                document.getElementById("CM6").appendChild(number);
                break;
        }
    });
}

My HTML:

        <div class="CalendarMonth">
          <div id="CM0">
            <p>Sun</p>
          </div>
          <div id="CM1">
            <p>Mon</p>
          </div>
          <div id="CM2">
            <p>Tue</p>
          </div>
          <div id="CM3">
            <p>Wed</p>
          </div>
          <div id="CM4">
            <p>Thu</p>
          </div>
          <div id="CM5">
            <p>Fri</p>
          </div>
          <div id="CM6">
            <p>Sat</p>
          </div>
        </div>

My CSS:

.CalendarMonth {
    background-color: #a2a6a3;
    width: 100%;
    height: 600px;
    margin: 10px;
    display: flex;
    justify-content: center;
    border-radius: 10px;
}

That is all the code I use for styling and making the calendar and yet I still cant seem to get it to work after 3 days of playing around with multiple functions.

Thankyou in advance.

Answer

All of your lines that say

var Textnode = document.createTextNode(index);

should instead say

var Textnode = document.createTextNode(index + 1);

When you pushed into the weekday array, the first day of the month was pushed first, so it had an index 0. Since you want that to have a number 1 on your calendar, if you are using the index as that value, you need to shift all your indices by 1 before you put them in your front end.

Advertisement

Answer