Question

在this中，脚本根据提供的年份和月份生成月份的HTML。在演示中，默认日期系列显示如下

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

我想手动定制提供日系列，如下所示

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

或随机提供的任何日系列等。

但我对起点本身感到震惊。有人请给我建议，以便有效地处理这个问题。

Answer 1

您可以向shift添加generateHTML()参数，这将改变提前几天shift天。

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

如果您需要SAT - SUN - MON - ***** - FRI，则需要向后移动1天，即generateHTML(-1)。

查看demo。

Answer 2

<!DOCTYPE html>
<html>
<head>
    <title>JS Calendar</title>
    <style>
        *{
            font-family: arial;
        }
        #calendar_div{
            width: 1240px;
            height: auto;
            margin: 0 auto;
            background-color: #fcd;
        }
        table {
            border-collapse: collapse;
            width:300px;
            float: left;
            margin-right: 10px;
            margin-bottom: 10px;
            background-color: #fff;
        }
        table, td, th {    
            border: 1px solid #ddd;
        }
        th, td {
            padding: 5px;
            text-align: center;
            font-size: 12px;
            font-weight: bold;
        }
        th{
            background-color: black;
            color:white;
        }
        p{
            font-size: 13px;
            font-weight: bold;
            text-align: center;
        }
        .clear{
            clear: both;
        }
    </style>
</head>
<body>
    <div id="calendar_div"></div>
<script type="text/javascript">
var initCalendar = function(){
        var div         = document.getElementById('calendar_div'),tr_td='',main_table='',table,index,
            arr_month   = ['January','February','March','April','May','June','July','August','September','October','November','December'],
            yr          = new Date().getFullYear(),arr;
            for (var i = 0; i <12; i++) {
                arr=calendarDate(yr,i);
                index = 0;
                table='<table><tr><th colspan="7">'+arr_month[i]+' '+yr+'</th></tr><tr><th>SUN</th><th>MON</th><th>TUE</th><th>WED</th><th>THU</th><th>FRI</th><th>SAT</th></tr>';

                for (var j = 0; j <5; j++) {
                    tr_td+='<tr>';
                    for (var k = 0; k <7; k++) {
                        tr_td+='<td>'+arr[index++]+'</td>';
                    }
                    tr_td+='</tr>';
                }
            table+=tr_td+'</table>';
            main_table+=table;
            tr_td='';
            table='';
        }
        div.innerHTML='<p>Programmer:: Ram Pukar<br/>Company:: Miracle Interface Pvt.Ltd.<br/>Address:: Jwagal,Lalitpur,Nepal<br/>http://www.miracleinterface.com<br/>https://github.com/rampukar</p>'+main_table+'<div class="clear"></div>';
    } //close initCalendar()

    function calendarDate(yr,i){
        var months      = (i==0) ? 1 : (i+1),
            days        = (i==0) ? 0 : i,
            get_date    = new Date(yr,months,0).getDate(),//total number of month days
            get_day     = new Date(yr,days,1).getDay(),//month start day ...sun,mon.....
            arrDay      = [], 
            extra_arr   = [30,31], 
            extra_day   = get_date-29, 
            num_day     = 0,temp_day;

        for (var i = 0; i<35; i++) {
            if((get_day>5 || get_day>6) && (get_date>29) && i<extra_day)  {
                temp_day=extra_arr[i];
            } else if(i<get_day ) {
                temp_day='';
            } else {
                if(num_day<get_date){
                    num_day++
                    temp_day=num_day;
                } else {
                    temp_day='&nbsp;';
                }
            }
            arrDay.push(temp_day);
        }
        return arrDay;
    } // close calendarDate

    //load initCalendar 
    window.onload =function() {
        initCalendar();
    };
</script>
</body>
</html>

输出：

演示：https://jsfiddle.net/rampukar/La4c2hrj/

基于天数生成日历的算法

2 个答案: