Creating calendar - restrain number of columns

Question

Hope you have a good day.

I'm writing a calendar using pure JavaScript, and so far I'm stuck (and it's taking way too much time) at one point, where I'm to put days into html table.

What I want to achieve is to put number of day into a table but, break the line after it reaches the end of the table (7th column).

Down below is the current state and code:

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

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

}

The result of that is:

The result I'm working on should be:

I don't even need a complete solution, but a suggestion or something like that would be very appreciated.

Thank you for your help in advance!

Answer 1

You could make a variable var week = 0 , then where the days are being made use a week++; .

Then below that you could use:

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

but first you will need to include the <tr> tag in the begin of your 7 days.

I don't know all of your code, but in a table you could use this method.

Answer 2

Try like this. CalendarRow should be class, because you need many of them. You don't need preset row in table, better add id to table itself.

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

Ok, now its working: solution below

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

};

Thanks for the help guys!