我的javascript的日历

<script>
    function MonthlyCalendar(year, month, displayElementID, instanceID, clickHandler)//monthly calendar class
    {
        var today = new Date();
        this.doClick = clickHandler;
        this.container = document.getElementById(displayElementID);
        this.currentYear = today.getFullYear(); //system's current year
        this.currentMonth = today.getMonth(); //system's current month
        this.currentDate = today.getDate(); //system's current date in the month
        if (year) //year passed in
        {
            this.givenYear = year; //given year from outside that needs to display, given
        }
        else //year not passed in
        {
            this.givenYear = this.currentYear; //given year from outside that needs to display, not given, use current year
        }
        if (month) //month passed in
        {
            this.givenMonth = month - 1; //given month from outside that needs to display, given
        }
        else //month not passed in
        {
            this.givenMonth = this.currentMonth; //given month from outside that needs to display, not given, use current month
        }
        this.totalDaysOfGivenMonth = function()//system's current total days of the specified month
        {
            var daysInMonths = new Array(31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
            if (1 == this.givenMonth)//February
            {
                if ((this.givenYear % 400 == 0) || ((this.givenYear % 4 == 0) && (this.givenYear % 100 != 0))) //leap year
                {
                    return 28;
                }
                else //not leap year
                {
                    return 29;
                }
            }
            else//Other months
            {
                return daysInMonths[this.givenMonth];
            }
        };
        this.html = function()// function that will generate the inner html for the element passed in
        {
            var firstDayOfTheGivenMonth = new Date();
            firstDayOfTheGivenMonth.setFullYear(this.givenYear);
            firstDayOfTheGivenMonth.setMonth(this.givenMonth);
            firstDayOfTheGivenMonth.setDate(1);
            var innerHTML = "<table border=\"1px\">";
            innerHTML += "<tr>";
            innerHTML += "<td>";
            innerHTML += "Sunday";
            innerHTML += "</td>";
            innerHTML += "<td>";
            innerHTML += "Monday";
            innerHTML += "</td>";
            innerHTML += "<td>";
            innerHTML += "Tuesday";
            innerHTML += "</td>";
            innerHTML += "<td>";
            innerHTML += "Wednsday";
            innerHTML += "</td>";
            innerHTML += "<td>";
            innerHTML += "Thursday";
            innerHTML += "</td>";
            innerHTML += "<td>";
            innerHTML += "Friday";
            innerHTML += "</td>";
            innerHTML += "<td>";
            innerHTML += "Saturday";
            innerHTML += "</td>";
            var weekDayOfFirstDayOfTheGivenMonth = firstDayOfTheGivenMonth.getDay();
            var dayIndexOfTheGivenMonth = 0;
            var totalDaysOfGivenMonth = this.totalDaysOfGivenMonth();
            for (var row = 0; row < 6; row++) //5 rows of the days in months
            {
                innerHTML += "<tr>";
                for (var column = 0; column < 7; column++) //from sunday to saturday
                {
                    innerHTML += "<td>";
                    if ((weekDayOfFirstDayOfTheGivenMonth <= dayIndexOfTheGivenMonth) && (dayIndexOfTheGivenMonth < totalDaysOfGivenMonth + weekDayOfFirstDayOfTheGivenMonth)) //in this month
                    {
                        innerHTML += "<span onclick=\""+instanceID+".doClick('" + this.givenYear + "','" + (this.givenMonth+1) + "','" + (dayIndexOfTheGivenMonth - weekDayOfFirstDayOfTheGivenMonth + 1) + "')\">";
                        innerHTML += dayIndexOfTheGivenMonth - weekDayOfFirstDayOfTheGivenMonth + 1;
                        innerHTML += "</span>";
                    }
                    else //not in this month
                    {
                        //alert(dayIndexOfTheGivenMonth - weekDayOfFirstDayOfTheGivenMonth);
                    }
                    innerHTML += "</td>";
                    dayIndexOfTheGivenMonth++;
                }
                innerHTML += "</tr>";
            }
            innerHTML += "</table>";
            return innerHTML;
        };
        this.showCurrentMonth = function() //show current month to the container
        {
            this.container.innerHTML = this.html();
        };
        this.showNextMonth = function() //show next month to the container
        {
            if (this.givenMonth == 11) //December
            {
                this.givenMonth = 0;
                this.currentYear = this.givenYear + 1;
            }
            else //other months
            {
                this.givenMonth = this.givenMonth + 1;
            }
            this.container.innerHTML = this.html();
        };
        this.showPreviousMonth = function() //show previous month to the container
        {
            if (this.givenMonth == 0) //January
            {
                this.givenMonth = 11;
                this.currentYear = this.givenYear - 1;
            }
            else //other months
            {
                this.givenMonth = this.givenMonth - 1;
            }
            this.container.innerHTML = this.html();
        };
        this.setNewYearAndMonth = function(year, month) //set new year and month to the calender and show
        {
            this.givenYear = year;
            this.givenMonth = month - 1;
        }
    }
</script>

<div id="test">
    <div>
        <select id="yearDropDown" onchange="changeCalendar()">
            <option value="2007">2007</option>
            <option value="2008">2008</option>
            <option value="2009">2009</option>
        </select>
        <select id="monthDropDown" onchange="changeCalendar()">
            <option value="1">January</option>
            <option value="2">February</option>
            <option value="3">March</option>
            <option value="4">April</option>
            <option value="5">May</option>
            <option value="6">June</option>
            <option value="7">July</option>
            <option value="8">August</option>
            <option value="9">September</option>
            <option value="10">October</option>
            <option value="11">November</option>
            <option value="12">December</option>
        </select>
    </div>
    <div id="container">
        <table border="1px">
            <tr>
                <td>
                    Sunday
                </td>
                <td>
                    Monday
                </td>
                <td>
                    Tuesday
                </td>
                <td>
                    Wednsday
                </td>
                <td>
                    Thursday
                </td>
                <td>
                    Friday
                </td>
                <td>
                    Saturday
                </td>
            </tr>
            <tr>
                <td>
                    1
                </td>
                <td>
                    2
                </td>
                <td>
                    3
                </td>
                <td>
                    4
                </td>
                <td>
                    5
                </td>
                <td>
                    6
                </td>
                <td>
                    7
                </td>
            </tr>
            <tr>
                <td>
                    1
                </td>
                <td>
                    2
                </td>
                <td>
                    3
                </td>
                <td>
                    4
                </td>
                <td>
                    5
                </td>
                <td>
                    6
                </td>
                <td>
                    7
                </td>
            </tr>
            <tr>
                <td>
                    1
                </td>
                <td>
                    2
                </td>
                <td>
                    3
                </td>
                <td>
                    4
                </td>
                <td>
                    5
                </td>
                <td>
                    6
                </td>
                <td>
                    7
                </td>
            </tr>
            <tr>
                <td>
                    1
                </td>
                <td>
                    2
                </td>
                <td>
                    3
                </td>
                <td>
                    4
                </td>
                <td>
                    5
                </td>
                <td>
                    6
                </td>
                <td>
                    7
                </td>
            </tr>
            <tr>
                <td>
                    1
                </td>
                <td>
                    2
                </td>
                <td>
                    3
                </td>
                <td>
                    4
                </td>
                <td>
                    5
                </td>
                <td>
                    6
                </td>
                <td>
                    7
                </td>
            </tr>
        </table>
    </div>
</div>

<script>
    var mc = new MonthlyCalendar(2008, 9, "container", "mc", clickHandler);
    mc.showCurrentMonth();
    function changeCalendar() {
        var year = document.getElementById("yearDropDown").value;
        var month = document.getElementById("monthDropDown").value;
        mc.setNewYearAndMonth(year, month);
        mc.showCurrentMonth();
    }
    function clickHandler(year, month, day) {
        alert(year+"/"+month+"/"+day);
    }
</script>