创建日历 - 限制列数

Question

希望你过得愉快。

我使用纯JavaScript编写日历，到目前为止，我一度陷入困境（并且它占用了太多时间），我在那里放了几天进入html表。

我想要达到的目的是将一天中的天数放入表中，但是在到达表的末尾（第7列）之后将其中断。

下面是当前状态和代码：

 <div class="col-md-6 col-md-offset-3 p-b-3">
                <div class="calendar">
                    <h2 id="monthYear"></h2>
                    <table>
                        <tr>
                            <th><h4>PON</h4></th>
                            <th><h4>WTO</h4></th>
                            <th><h4>SRO</h4></th>
                            <th><h4>CZW</h4></th>
                            <th><h4>PIĄ</h4></th>
                            <th><h4>SOB</h4></th>
                            <th><h4>NIE</h4></th>
                        </tr>
                        <tr id="calendarRow">

                        </tr>
                    </table>
                </div>
            </div>

和javascript：

    var Calendar = {

    plMonths: [
        'styczeń',
        'luty',
        'marzec',
        'kwiecień',
        'maj',
        'czerwiec',
        'lipiec',
        'sierpień',
        'wrzesień',
        'październik',
        'listopad',
        'grudzień'
    ],

    currentMonth: function(){
        return new Date().getMonth() + 1;
    },

    currentYear: function(){
        return new Date().getFullYear();
    },

    currentDay: function(){
        return new Date().getDay();
    },

    getMonthDays: function(year, month){
        return new Date(year, month, 0).getDate();
    },

    currentMonthDays: function(){
        return this.getMonthDays(this.currentYear(), this.currentMonth());
    }

};


function createCalendar(){

    var currentMonth = (Calendar.currentMonth()) - 1;
    var currentDays = Calendar.currentMonthDays();
    var tableRow = jQuery('#calendarRow');
    var maxRowLength;

    (function translate() {

        for (var i = 0; i < 12; i++) {
            if (currentMonth === i)
                currentMonth = Calendar.plMonths[i];
        }
        return currentMonth;
    })();

    jQuery("#monthYear").text(currentMonth + ' ' + Calendar.currentYear());

    /********/

    for (var y = 1; y < currentDays; y++) {
        jQuery(tableRow).append('<td>' + y + '</td>');
    }

}

结果是：

我正在研究的结果应该是：

我甚至不需要一个完整的解决方案，但建议或类似的东西将非常感激。

提前感谢您的帮助！

Answer 1

您可以制作变量var week = 0，然后使用week++;制作日期。

然后在下面你可以使用：

if(week == 7) {                                                
    $("#calendarRow").append('</tr>');
    week = 0;
}

但首先您需要在7天的开头添加<tr>标记。

我不知道您的所有代码，但在表格中您可以使用此方法。

Answer 2

试试这样。 CalendarRow应该是class，因为你需要很多。您不需要在表格中预设行，更好地将ID添加到表格本身。

function createCalendar() {

// ...

    var table = jQuery(#calendar).find('table')

// ...

    for (var row = 1; row <= Math.ceil(currentDays / 7); row++) {
        var day = 1
        tableRow = jQuery('<tr class="calendarRow"></tr>')

        for (var col = 1; col <= 7 && day <= currentDays; col++, day++) {
            jQuery(tableRow).append('<td>' + day + '</td>');
        }

        table.append(tableRow)
    }
}

Answer 3

好的，现在它的工作：下面的解决方案

var Calendar = {

    plMonths: [
        'styczeń',
        'luty',
        'marzec',
        'kwiecień',
        'maj',
        'czerwiec',
        'lipiec',
        'sierpień',
        'wrzesień',
        'październik',
        'listopad',
        'grudzień'
    ],

    currentMonth: function(){
        return new Date().getMonth() + 1;
    },

    currentYear: function(){
        return new Date().getFullYear();
    },

    currentDay: function(){
        return new Date().getDay();
    },

    getMonthDays: function(year, month){
        return new Date(year, month, 0).getDate();
    },

    currentMonthDays: function(){
        return this.getMonthDays(this.currentYear(), this.currentMonth());
    }

};


Calendar.createCalendar = function(year, month){

    var currentMonth = (Calendar.currentMonth()) - 1,
        currentDays = Calendar.getMonthDays(year, month),
        monthDay = Calendar.currentDay(),
        day = 1,
        table = jQuery('.calendar').find('table');

    console.log(monthDay);

    (function translate() {
        for (var i = 0; i < 12; i++) {
            if (currentMonth === i)
                currentMonth = Calendar.plMonths[i];
        }
        return currentMonth;
    })();

    jQuery("#monthYear").text(currentMonth + ' ' + Calendar.currentYear());

    /********/

    for (var row = 1; row <= Math.ceil(currentDays / 7); row++) {

        var tableRow = jQuery('<tr class="calendarRow"></tr>');

        for (var col = 1; col <= 7 && day <= currentDays; col++, day++) {

            jQuery(tableRow).append('<td>' + day + '</td>');
        }

        table.append(tableRow);
    }

};

感谢帮助人员！