請問如何在javascript中讓工作日從星期一而不是星期日開始？

Question

我正在嘗試僅使用純 javascript 創建日歷。 我正在處理的代碼如下。 我是編程新手，所以如果有一些評論或建議，我會歡迎他們並非常感謝。

填充日歷表

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';
                }
            }
        }
    }
}

獲取給定月份的周數

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;
}

用當前月份填充日歷表

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
}

這是日歷的 Html 代碼

<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>

到目前為止，我的代碼運行良好，唯一的問題是我希望日歷日從星期一而不是星期日開始。

祝你有美好的一天。

Answer 1

我找到了我的問題的答案，這里是：

首先，我將我的函數從計算周數改為獲取月份中的天數索引。 如果月份從星期日開始（並且星期日索引為 0），我只是將它的索引更改為 6，以便它可以成為一周的最后一天而不是第一周。 其他幾天我只是將他們的指數減少了 1。

整個月的天數索引

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;
}

為了填充日歷，我只是對 getWeekDaysTable 的結果進行了循環，而不是對整個月份的索引進行了循環。

填寫日歷

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';
                    }
                }
            }
        }
    }
}