自定义日历 - 月份剩余天数

Question

我正在努力创建一个连续2周连续显示的自定义日历。

我并不是想制作一个典型的JS UI库提供的典型的7天4周日历。

我目前正忙着填写程序和日历日。我不知道为什么，但我遇到了一个路障，我似乎无法弄清楚如何用月/下个月来填补日历日。 （我今天可以正确标记，但我可以填写前一天或即将到来的日子）

感谢任何帮助，这是我的代码。

HTML：

<div id="Cal">
       <table>
           <thead>
               <tr>
                    <th colspan="15" style="text-align:center;"></th>
               </tr>
           </thead>
           <tbody>
               <tr class="Second_Header">
                   <td></td>
                   <td>Mon</td>
                   <td>Tue</td>
                   <td>Wed</td>
                   <td>Thu</td>
                   <td>Fri</td>
                   <td>Sat</td>
                   <td style="border-right:solid 1px #000;">Sun</td>
                   <td>Mon</td>
                   <td>Tue</td>
                   <td>Wed</td>
                   <td>Thu</td>
                   <td>Fri</td>
                   <td>Sat</td>
                   <td>Sun</td>
               </tr>
               <tr id="Days"  class="Second_Header">
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
               </tr>
               <tr>
                   <td  style="background: #443E3E;">John Doe</td>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
               </tr>
                <tr>
                   <td  style="background: #443E3E;">Bob Smith</td>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
               </tr>
                <tr>
                   <td  style="background: #443E3E;">Joe McDonald</td>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
               </tr>
           </tbody>
       </table>
   </div>

JS / jQuery的：

$(function () {
        $("#Cal tbody tr td:nth-child(7)").addClass("WeekEnd");
        var months = ["January", "February", "March", "April", "May", "June", "July", "August", "Spetember", "October", "November", "December"],
        currentYear = (new Date).getFullYear();
        currentMonth = (new Date).getMonth();
        currentDate = (new Date).getDate();
        currentDay = (new Date).getDay();
        monthDays = [];
        monthDays[0] = 31;
        if (currentYear % 4 === 0) {  // if not a leapyear, feb. has 28 days
            monthDays[1] = 28;
        }
        else {
            monthDays[1] = 29;  // if a leapyear, feb. has 29 days
        }
        monthDays[2] = 31;
        monthDays[3] = 30;
        monthDays[4] = 31;
        monthDays[5] = 30;
        monthDays[6] = 31;
        monthDays[7] = 31;
        monthDays[8] = 30;
        monthDays[9] = 31;
        monthDays[10] = 30;
        monthDays[11] = 31;
        $("#Cal thead th").text((months[currentMonth])); // Set month
        if (currentDate >= (currentDate - monthDays[currentMonth]))  //Second half of month helps determine placement of today
        {
            $("#Days td").eq(currentDay+7).text(currentDate); // Set current day
            $("#Days td").eq(currentDay+7).addClass("today"); // Add class to current day

            $("#Days td:not(:first)").each(function () { // Fill remainder of week
                var UpcomingDays = monthDays[currentMonth] - currentDate
                console.log(UpcomingDays);
                if (UpcomingDays > 0) {

                }
                else {

                }
            });
        }
        else {      //First half of month helps determine placement of today
            $("#Days td").eq(currentDay).text(currentDate); // Set current day
            $("#Days td").eq(currentDay).addClass("today"); // Add class to current day

            $("#Days td:not(:first)").each(function () { // Fill remainder of week
                if ($(this).text() == "") {
                    if (currentDate <= monthDays[currentMonth]) {
                        $(this).text("FR");
                    }
                    else {
                        $(this).text("FL");
                    }

                }
            });
            }
});

以下是小提琴的链接：

http://jsfiddle.net/zB4Th/