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

如何使工作日从星期一开始而不是在javascript中星期日开始？

1 个答案: