Wiki日历做法

HTML标签：

<ul id='ul_calendar'>
                                    <li>日 </li>
                                    <li>一 </li>
                                    <li>二 </li>
                                    <li>三 </li>
                                    <li>四 </li>
                                    <li>五 </li>
                                    <li>六 </li>
                                </ul>

完整HTML代码：

 <table width="476" height="155" border="0" align="center" cellpadding="0" cellspacing="0"
                        class="cal">
                        <tr>
                            <td align="center" valign="top">
                                <div class="show" align="center">
                                    <span id='month_cur' class="big"></span>
                                    <br>
                                    <span id='month_pre'></span>&nbsp;&nbsp;<span id='month_next'></span></div>
                            </td>
                            <td>
                                <ul id='ul_calendar'>
                                    <li>日 </li>
                                    <li>一 </li>
                                    <li>二 </li>
                                    <li>三 </li>
                                    <li>四 </li>
                                    <li>五 </li>
                                    <li>六 </li>
                                </ul>
                            </td>
                        </tr>
                    </table>

样式（刚好7个li）：

ul#ul_calendar{width: 280px; line-height: 28px}
ul#ul_calendar li {float: left;width: 40px; }

js：

   <script language="JavaScript">
        var months = new Array("一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二");
        var daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);  /* 对应12个月有多少天*/
        var days = new Array("日", "一", "二", "三", "四", "五", "六");
        var classTemp;
        var calendarHover = "calendarHover";
        var today = new getToday();
        var year = today.year;
        var month = today.month;
        var newCal;
        //得到某月天数
        function getDays(month, year) {
            if (1 == month)
                return ((0 == year % 4) && (0 != (year % 100))) || (0 == year % 400) ? 29 : 28;
            else
                return daysInMonth[month];
        }
        //得到当天时间信息
        function getToday() {
            this.now = new Date();
            this.year = this.now.getFullYear();
            this.month = this.now.getMonth();
            this.day = this.now.getDate();
        }
        //生成日历
        function Calendar(month) {
            month = month - 1;
            newCal = new Date(year, month, 1); //当前月的第一天
            today = new getToday();
            var day = -1;   //用来判断日历中是否为当天
            var startDay = newCal.getDay(); //当月开始时间的星期数0-6
            var endDay = getDays(newCal.getMonth(), newCal.getFullYear()); //当月结束时间
            var t = (Math.floor((startDay + endDay) / 7) + ((((startDay + endDay) % 7) > 1) ? 1 : 0));
            var daily = 0;   //用来生成日历中的天数值
            if ((today.year == newCal.getFullYear()) && (today.month == newCal.getMonth()))
                day = today.day;
            var calbox = document.getElementById('ul_calendar');
            var intDaysInMonth = getDays(newCal.getMonth(), newCal.getFullYear()); //得到当月天数
            //生成日历
            for (var intWeek = 0; intWeek < t; intWeek++)
                for (var intDay = 0; intDay < 7; intDay++) {
                if ((intDay == startDay) && (0 == daily)) { daily = 1; }
                //生成值
                if ((daily > 0) && (daily <= intDaysInMonth)) {
                    if (day == daily)
                        calbox.innerHTML += '<li><a href="#' + daily + '"><font color="#FF0000">' + daily + '</font></a></li>';
                    else
                        calbox.innerHTML += '<li><a href="#' + daily + '">' + daily + '</a></li>';
                    daily++;
                }
                else {
                    calbox.innerHTML += '<li>&nbsp;</li>';
                }
            }
            var tem_month = (month + 1);
            document.getElementById('month_cur').innerHTML = tem_month + '月';
            tem_month = ((month == 0) ? 12 : month);
            document.getElementById('month_pre').innerHTML = '<a href="' + tem_month + '.html">&lt;' + tem_month + '月</a>';
            tem_month = ((month == 11) ? 1 : (month + 2));
            document.getElementById('month_next').innerHTML = '<a href="' + tem_month + '.html">' + tem_month + '月&gt;</a>';
        }

    </script>

    <script language="JavaScript">
        Calendar(<%=ViewData["month"]%>);
    </script>

效果图：