How to make the week days start at monday instead of sunday in javascript please?

Question

i'm trying to create a calendar using only pure javascript. the code i'm working on is below. i'm new to programming so if there are some remarks or advice i will welcome them and thank you very much.

Filling the Calendar table

function fillCalendar(selectedYearValue, selectedMonthValue, weeks){
    if(document.getElementById("calendarRows")){
        var x = document.getElementById("calendarRows");
        var firstDayInMonth = new Date(selectedYearValue, selectedMonthValue, 1);
        var firstDayNameIndex = firstDayInMonth.getDay();
        currentMonth = firstDayInMonth.getMonth();
        for(j = 0; j <= weeks; j++){
            var newRow = x.insertRow(x.rows.length);
            newRow.id = 'row'+j;
            for(i = 0; i <= 6; i++){
                if(i == firstDayNameIndex && currentMonth == firstDayInMonth.getMonth()){
                    var y = newRow.insertCell(i);
                    y.innerHTML = firstDayInMonth.getDate() + '<br><a href="">Ajouter un Planning</a>';
                    y.className = 'bg-month border';
                    y.id = firstDayInMonth.getDate();
                    if(firstDayNameIndex == 6){
                        firstDayNameIndex = 0;
                        firstDayInMonth.setDate(firstDayInMonth.getDate() + 1);
                    }
                    else{
                        firstDayNameIndex++;
                        firstDayInMonth.setDate(firstDayInMonth.getDate() + 1);
                    }
                }
                else{
                    var y = newRow.insertCell(i);
                    y.className = 'bg-not-month';
                }
            }
        }
    }
}

getting the number of weeks in the given month

function getWeeks(selectedYearValue, selectedMonthValue){
    var weeks = 0; //weeks to return
    var firstDayInMonth = new Date(selectedYearValue, selectedMonthValue, 1); //get the first day in the month
    var lastdayinmonth = new Date(selectedYearValue, selectedMonthValue + 1, 0); //get the last day in the month
    var compar = new Date(selectedYearValue, selectedMonthValue, 1); //comparison date
    compar.setDate(compar.getDate() + 1); //comparison date always +1 day

    for(i = firstDayInMonth.getDate(); i <= lastdayinmonth.getDate(); i++){
        if(firstDayInMonth.getDay() / 6 == 1 && compar.getMonth() == firstDayInMonth.getMonth()){
            weeks++;
        }
        compar.setDate(compar.getDate() + 1);
        firstDayInMonth.setDate(firstDayInMonth.getDate() + 1);
    }
    /*
    first we iterate for the entire month
    for each time we iterate and get a saturday we add 1 week

    there was a problem that was when a saturday is the last day of the month
    it adds a weeks even though we don't want it
    that's why i added the compar date
    when the month in the compar date is different than the month we're iterating for
    it don't add another week
    */
    return weeks;
}

Filling the Calendar table with the current month

function thisMonth(){
    clearCalendar();
    var date = new Date();
    var firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
/////begin : append headers
    if(document.getElementById('yearSelect') || document.getElementById('monthSelect')){
        if(document.getElementById('yearSelect').length == 0 && document.getElementById('monthSelect').length == 0){
            fillSelectYear();
            fillSelectMonth();
        }
    }

    if(document.getElementById("yearSelect")){
        document.getElementById("yearSelect").value = ""+firstDay.getFullYear()+""; //select the respective year
    }
    if(document.getElementById("monthSelect")){
        document.getElementById("monthSelect").value = ""+firstDay.getMonth()+""; //select the respective month
    }
/////end : append headers
/////Begin : Get Number of weeks in month
    var weeks = getWeeks(date.getFullYear(), date.getMonth());
/////End : Get Number of weeks in month
/////begin : Creating the calendar
    fillCalendar(date.getFullYear(), date.getMonth(), weeks);
/////End : Creating the calendar
}

This is the Html code for the calendar

<table class="table border rounded" id="calendar-table">

              <thead class="thead-dark">
                <!-- begin : calendar Headers : year and month -->

                <tr class="bg-dark">
                    <td colspan="1" class="text-center">
                        <button class="btn btn-primary" id="previous"><span>&laquo;</span></button>
                    </td>
                    <td colspan="5" class="text-center">
                        <ul class="list-inline">
                          <li class="list-inline-item">
                            <select class="custom-select" id="yearSelect">
                            </select>
                          </li>
                          <li class="list-inline-item">
                            <select class="custom-select" id="monthSelect">
                            </select>
                          </li>
                          <li class="list-inline-item">
                            <button class="btn btn-primary" id="currentMonthButton">Aujourd'hui</button>
                          </li>
                        </ul>
                    </td>
                    <td colspan="1" class="text-center">
                        <button class="btn btn-primary" id="next"><span>&raquo;</span></button>
                    </td>
                <tr>

                <!-- end : calendar Headers : year and month -->

                <!-- begin : calendar Headers : name of days -->

                <tr class="text-center">
                  <th scope="col">Dimanche</th>
                  <th scope="col">Lundi</th>
                  <th scope="col">Mardi</th>
                  <th scope="col">Mercredi</th>
                  <th scope="col">Jeudi</th>
                  <th scope="col">Vendredi</th>
                  <th scope="col">Samedi</th>

                  <!-- <th scope="col">Lundi</th>
                  <th scope="col">Mardi</th>
                  <th scope="col">Mercredi</th>
                  <th scope="col">Jeudi</th>
                  <th scope="col">Vendredi</th>
                  <th scope="col">Samedi</th>
                  <th scope="col">Dimanche</th> -->
                </tr>

                <!-- end : calendar Headers : name of days -->

              </thead>


                <!-- begin : calendar rows : dates -->

              <tbody id="calendarRows">

              </tbody>

                <!-- end : calendar rows : dates -->
            </table>

until now my code works perfectly the only problem is that i want to have the calendar days start at monday instead of sunday.

Have a good day.

Answer 1

I found the answer for my question and here it is:

first i changed my function from calculating the number of weeks to get getting the indexes of days in the month. if the month begins for example in sunday(and sunday index is 0), i just change it's index to 6 so that it can become the last day of the week instead of the first week. and the other days i simply decreased their index by 1.

Days indexes in the entire month

function getWeekDaysTable(selectedYearValue, selectedMonthValue){
    var weekDays = []; //day indexes to return
    var firstDayInMonth = new Date(selectedYearValue, selectedMonthValue, 1); //get the first day in the month
    var lastdayinmonth = new Date(selectedYearValue, selectedMonthValue + 1, 0); //get the last day in the month

    for(i = firstDayInMonth.getDate(); i <= lastdayinmonth.getDate(); i++){
            if(firstDayInMonth.getDay() == 0){
                weekDays.push(6);
            }else{
                weekDays.push(firstDayInMonth.getDay()-1);
            }
        firstDayInMonth.setDate(firstDayInMonth.getDate() + 1);
    }
    return weekDays;
}

for filling the calendar i just did a loop on the result of the getWeekDaysTable instead of doing a loop on the entire month indexes.

Filling the Calendar

function fillFrCalendar(selectedYearValue, selectedMonthValue, weeks){
    if(document.getElementById("calendarRows")){
        var x = document.getElementById("calendarRows");
        var firstDayInMonth = new Date(selectedYearValue, selectedMonthValue, 1);

        var countWeekDays = 0;
        var weekDays = getWeekDaysTable(firstDayInMonth.getFullYear(), firstDayInMonth.getMonth());

        var firstDayNameIndex = firstDayInMonth.getDay();
        var currentMonth = firstDayInMonth.getMonth();

        for(j = 0; j <= weeks; j++){
            if(currentMonth == firstDayInMonth.getMonth()){
                var newRow = x.insertRow(x.rows.length);
                newRow.id = 'row'+j;
                for(i = 0; i <= 6; i++){
                    if(i == weekDays[countWeekDays]){
                        var y = newRow.insertCell(i);
                        y.innerHTML = firstDayInMonth.getDate() + '<br><a href="">Ajouter un Planning</a>';
                        y.className = 'bg-month border';
                        y.id = firstDayInMonth.getDate();
                        if(firstDayNameIndex == 6){
                            firstDayNameIndex = 0;
                            firstDayInMonth.setDate(firstDayInMonth.getDate() + 1);
                            countWeekDays++;
                        }
                        else{
                            firstDayNameIndex++;
                            firstDayInMonth.setDate(firstDayInMonth.getDate() + 1);
                            countWeekDays++;
                        }
                    }
                    else{
                        var y = newRow.insertCell(i);
                        y.className = 'bg-not-month';
                    }
                }
            }
        }
    }
}