创建日历 - 限制列数

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

试试这样。 CalendarRow 应该是类，因为您需要其中的许多。你不需要在表中预设行，最好将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 2

您可以创建一个变量var week = 0，然后使用week++;。

然后你可以在下面使用：

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

但首先您需要在 7 天开始时包含 <tr> 标签。

我不知道你所有的代码，但是在表格中你可以使用这个方法。

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

};

感谢大家的帮助！