jQuery实现日历

直接上代码。最简单的！第一段是HTML代码和简单的样式。

    <style>
       #TaskCalendar{ margin-left:10px; margin-right:10px; border-left:solid 1px #cccccc; border-right:solid 1px #cccccc; height:640px;}
       #TaskCalendar label,#TaskCalendar p{ border-bottom:solid 1px #cccccc;text-align:center; line-height:80px; height:80px;}
    </style>
   <div id="TaskCalendar">
            <p>
                <a href="#" onclick="javascript:dateData(0);">&nbsp;<&nbsp;</a>&nbsp;
                <span id="year"><%=DateTime.Now.ToString("yyyy") %></span>年
                <span id="month"><%=DateTime.Now.ToString("MM") %></span>月
                &nbsp;<a href="#" onclick="javascript:dateData(1);">&nbsp;>&nbsp;</a>
            </p>
            <label>日</label>
            <label>一</label>
            <label>二</label>
            <label>三</label>
            <label>四</label>
            <label>五</label>
            <label>六</label>
            <div id="content">
            </div>
    </div>

第二段是JS代码

        dateData(3);
    
        function dateData(type){
        
            var date = new Date();
            
            date = new Date($('#year').html(), parseInt($('#month').html()),0);

            var currentMonth = date.getMonth()+1;        //当前月
            
            var currentYear = date.getFullYear();
            
            if(type == 0){
                if(currentMonth == 0){
                    currentYear = currentYear - 1;
                    currentMonth = 11;
                }else{
                    currentMonth = currentMonth -1;
                }
            }else if(type == 1){
                if(currentMonth == 11){
                    currentYear = currentYear + 1;
                    currentMonth = 0;
                }else{
                    currentMonth = currentMonth +1;
                }
            }
            
            date = new Date(currentYear, currentMonth,0);
            
            var currentMaxDay = new Date(date.getFullYear(), date.getMonth() + 1,0).getDate();  //当前月 - 最大天
            
            var prevMaxDay = new Date(date.getFullYear(), date.getMonth(),0).getDate();         //上一月
            
            var nextMaxDay = new Date(date.getFullYear(), date.getMonth() + 2,0).getDate();     //下一月
            
            date.setDate(1);
            
            var currentWeek = date.getDay();    //当月1日是星期几？
            
            if(currentWeek == 0){
                currentWeek = 7;
            }
            
            date = new Date(currentYear, currentMonth,0);
            
            var html = "";
            
            //遍历上一月
            for(var i = prevMaxDay - currentWeek + 1; i <= prevMaxDay;i++){
                html+= "<label style='background-color:#ccc;'>" + i + "</label>";
            }
            
            //遍历当前月
            for(var j = 1;j <= currentMaxDay;j++ ){
                html+= "<label>" + j + "</label>";
            }
            
            //遍历下一月
            for(var j = 1;j <= 42 - currentMaxDay - currentWeek ;j++ ){
                html+= "<label style='background-color:#9C9C9C;'>" + j + "</label>";
            }
            $('#content').html(html);
            $('#year').html(date.getFullYear());
            $('#month').html(date.getMonth() + 1);
            var width = ($('#TaskCalendar').width() - 2) / 7;
            $('#TaskCalendar label').css({width,float:"left"});
        }
        $(window).resize(function() {
            var width = ($('#TaskCalendar').width() - 2) / 7;
            $('#TaskCalendar label').css({width,float:"left"});
        });

OK！就这么多！