Question

Here in this, script is generating month’s HTML based on provided year and month. In Demo, the default the day series is displayed like below

SUN - MON - ***** - FRI - SAT [0,1,2,3,4,5,6]

I want to make it customized provide day series manually like below

MON - TUE - ***** - SAT - SUN [1,2,3,4,5,6,0] 
or
SAT - SUN - ***** - THU - FRI [6,0,1,2,3,4,5,6] 

or whatever random day series provided etc..

But I am struck in the starting itself. Someone please provide me suggestions to handle this efficiently.

Answer 1

You can add a shift argument to the generateHTML(), Which will shift the week days shift days ahead.

Calendar.prototype.generateHTML = function(shift) {

    shift = (shift || 0) % 7;

    // get first day of month
    var firstDay = new Date(this.year, this.month, 1);
    var startingDay = firstDay.getDay();

    if (shift > startingDay)
        shift -= 7;

    // find number of days in month
    var monthLength = cal_days_in_month[this.month];

    // compensate for leap year
    if (this.month == 1) { // February only!
        if ((this.year % 4 == 0 && this.year % 100 != 0) || this.year % 400 == 0) {
            monthLength = 29;
        }
    }

    // do the header
    var monthName = cal_months_labels[this.month]
    var html = '<table class="calendar-table">';
    html += '<tr><th colspan="7">';
    html += monthName + "&nbsp;" + this.year;
    html += '</th></tr>';
    html += '<tr class="calendar-header">';
    for (var i = 0; i <= 6; i++) {
        html += '<td class="calendar-header-day">';
        html += cal_days_labels[(i + shift + 7) % 7];
        html += '</td>';
    }
    html += '</tr><tr>';

    // fill in the days
    var day = 1;
    // this loop is for is weeks (rows)
    for (var i = 0; i < 9; i++) {
        // this loop is for weekdays (cells)
        for (var j = 0; j <= 6; j++) {
            html += '<td class="calendar-day">';
            if (day <= monthLength && (i > 0 || j + shift >= startingDay)) {
                html += day;
                day++;
            }
            html += '</td>';
        }
        // stop making rows if we've run out of days
        if (day > monthLength) {
            break;
        } else {
            html += '</tr><tr>';
        }
    }
    html += '</tr></table>';

    this.html = html;
}

If you want SAT - SUN - MON - ***** - FRI, you will need shift 1 day backward, which is generateHTML(-1).

check out the demo.