js 日历修改

本帖最后由 lea200304 于 2010-03-26 14:04:25 编辑

解决方案 »

  1.   

    var cell = document.createElement("td");
    这应该是在创建每一天对应的单元格了吧。
    在这里给加上alt/title属性，应该就可以了吧。jQuery的datepicker插件有这项功能，LZ可以研究下。
    要开发个日历功能 比如 几月几号，可以添加备注
      

  2.   

    我想的是 用一个隐藏层来做， 就是 用 onmouseover 这个 来操作，可是这个 我太会弄！
    希望 能具体点 。。
    谢谢
    这个 日历 绝对可以用
    如果没有什么特殊要求 。。
    呵呵 
      

  3.   

    在这个事件上加上mouseover就可以了
    为mouseover定义函数
      

  4.   

    你想添加那些信息和采用什么方式添加信息such as alert or layer ?
      

  5.   

    我用过jquery也写过但没像你这样写
      

  6.   

    cell.onmouseover=function(){
    alert(this.innerHTML);
          //这里面是你要实现的功能，不知道LZ具体要实现一些什么样的自定义信息所以不知从何下手
    }
      

  7.   

    我的意思是 可不可以用一个隐藏层 来实现这个提示。。
    就像下面这个代码。。
    但是把这个两个代码合不到一起。。
    很尴尬。。
     
    <script language=javascript>
    function show(obj)
    { 
    var str=getIE(obj)
    var temp=str.split(",")
    var top=temp[0]
    var left=temp[1]
    var objDiv=document.getElementById("div1")
    objDiv.style.display="";
    objDiv.style.left=temp[1];
    objDiv.style.top=parseInt(temp[0])+parseInt(obj.offsetHeight);
    }
    function getIE(e){
    var t=e.offsetTop;
    var l=e.offsetLeft;
    while(e=e.offsetParent){
    t+=e.offsetTop;
    l+=e.offsetLeft;
    }
    return (t+","+l);
    }
    function hide(obj){obj.style.display="none"}
    </script>
    <div id="div1" onMouseOut="hide(this)"style="background-color:red;position:absolute; width:200px; height:100px; top:-100px;"><a href="#">你的问题</a>有问题没</div><a href="javascript:void(0)" onmouseover=show(this)>点我</a>
    <br>
    <br>
    <br>
    <br>
    <a href="javascript:void(0)" onmouseover=show(this)>点我</a>
    <br>希望高手能理解，指点一下。。
    谢谢 
      

  8.   

    给你改下下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>blog式日历控件</title>
    </head>
    <body><script type="text/javascript">
    var $ = function (id) {
        return "string" == typeof id  ? document.getElementById(id) : id 
    }
    var Class = {
      create: function() {
        return function() {
          this.initialize.apply(this, arguments);
        }
      }
    }
    Object.extend = function(destination, source) {
        for (var property in source) {
            destination[property] = source[property];
        }
        return destination;
    }var Calendar = Class.create();
    Calendar.prototype = {
      initialize: function(container, options) {
        this.Container = $(container);
        this.Days = [];
        
        this.SetOptions(options);
        this.data = this.options.data;
        this.Year = this.options.Year;
        this.Month = this.options.Month;
        this.SelectDay = this.options.SelectDay;
        this.onSelectDay = this.options.onSelectDay;
        this.onToday = this.options.onToday;
        this.onFinish = this.options.onFinish;  
        this.Draw(); 
      },
      //设置默认属性
      SetOptions: function(options) {
        this.options = {//默认值
            data:           {},//添加自定义日期信息
            Year:           new Date().getFullYear(),//显示年
            Month:          new Date().getMonth() + 1,//显示月
            SelectDay:      function(){},//修改选择日期为函数
            onSelectDay:    function(){},//在选择日期触发
            onToday:        function(){},//在当天日期触发
            onFinish:       function(){}//日历画完后触发
        };
        Object.extend(this.options, options || {});
      },
      //上一个月
      PreMonth: function() {
        //先取得上一个月的日期对象
        var d = new Date(this.Year, this.Month - 2, 1);
        //再设置属性
        this.Year = d.getFullYear();
        this.Month = d.getMonth() + 1;
        //重新画日历
        this.Draw();
      },  
      //下一个月
      NextMonth: function() {
        var d = new Date(this.Year, this.Month, 1);
        this.Year = d.getFullYear();
        this.Month = d.getMonth() + 1;
        this.Draw();
      },
      //画日历
      Draw: function() {
        //用来保存日期列表
        var arr = [];
        //用当月第一天在一周中的日期值作为当月离第一天的天数
        for(var i = 1, firstDay = new Date(this.Year, this.Month - 1, 1).getDay(); i <= firstDay; i++){ arr.push("&nbsp;"); }
        //用当月最后一天在一个月中的日期值作为当月的天数
        for(var i = 1, monthDay = new Date(this.Year, this.Month, 0).getDate(); i <= monthDay; i++){ arr.push(i); }    
        var frag = document.createDocumentFragment();    
        this.Days = [];    
        while(arr.length > 0){
            //每个星期插入一个tr
            var row = document.createElement("tr");
            //每个星期有7天
            for(var i = 1; i <= 7; i++){
                var cell = document.createElement("td");
                cell.innerHTML = "&nbsp;";           
                if(arr.length > 0){
                    var d = arr.shift();
                    cell.innerHTML = d;
                    if(d > 0){
                        this.Days[d] = cell;
                        //判断是否今日
                        if(this.IsSame(new Date(this.Year, this.Month - 1, d), new Date())){ this.onToday(cell); }
                        //判断是否选择日期
                        var dat = this.SelectDay();//调用SelectDay获取月份自定义信息所在日期数组
                        for(var j=0; !!dat[j]; j++){//遍历自定义信息日期逐一添加显示属性
                            if(new Date(dat[j]) && this.IsSame(new Date(this.Year, this.Month - 1, d), new Date(dat[j]))){
                                               this.onSelectDay(cell);                        }
                        }
                    }
                }
                row.appendChild(cell);
            }
            frag.appendChild(row);
        }
        //先清空内容再插入(ie的table不能用innerHTML)
        while(this.Container.hasChildNodes()){ this.Container.removeChild(this.Container.firstChild); }
        this.Container.appendChild(frag);   
        this.onFinish();
      },
      //判断是否同一日
      IsSame: function(d1, d2) {
        return d1.getFullYear() == d2.getFullYear() && d1.getDate() == d2.getDate();
      } //上面已删除原程序的是否当前月份判断，以便每个月份定义信息所在日期显示属性标识出来
    };</script>
    <style type="text/css">.Calendar {
        font-family:Verdana;
        font-size:12px;
        background-color:#e0ecf9;
        text-align:center;
        width:200px;
        height:160px;
        padding:10px;
        line-height:1.5em;
    }
    .Calendar a{
        color:#1e5494;
    }.Calendar table{
    width:100%; 
    border:0;
    }.Calendar table thead{color:#acacac;}.Calendar table td {
        font-size: 11px;
        padding:1px;
    }
    #idCalendarPre{
        cursor:pointer;
        float:left;
        padding-right:5px;
    }
    #idCalendarNext{
        cursor:pointer;
        float:right;
        padding-right:5px;
    }
    #idCalendar td.onToday {
        font-weight:bold;
        color:#C60;
    }
    #idCalendar td.onSelect {
        font-weight:bold;
    }
    #showIformation {
        visibility:hidden;
        color:red;
    }
    </style>
    <div class="Calendar">
      <div id="idCalendarPre">&lt;&lt;</div>
      <div id="idCalendarNext">&gt;&gt;</div>
      <span id="idCalendarYear">2008</span>年 <span id="idCalendarMonth">8</span>月
      <table cellspacing="0">
        <thead>
          <tr>
            <td>日</td>
            <td>一</td>
            <td>二</td>
            <td>三</td>
            <td>四</td>
            <td>五</td>
            <td>六</td>
          </tr>
        </thead>
        <tbody id="idCalendar">
        </tbody>
      </table>
      <span id="showIformation"></span>
    </div>
    <script language="JavaScript">
    //下面的信息接口设置，你就自己琢磨了
    var cale = new Calendar("idCalendar", {
        data : {
                1 : {5: "小寒"}, 2 : {14: "春节"},
                3 : {10: "你妈妈叫你回家吃饭！", 15: "你不想回家吃饭？", 20: "还是回家吃饭吧！"},
                4 : {5: "清明节"}, 5 : {1: "劳动节"}, 6 : {1: "儿童节"}, 7 : {1: "建党节"}, 8 : {1: "建军节"},
                9 : {9: "重阳节"}, 10 : {1: "国庆节"}, 11 : {10: "立冬"}, 12 : {22: "冬至"}
        },
        SelectDay: function(){
            var arr = [];
            for(var pro in this.data[this.Month]){
                arr.push(new Date().setDate(pro))
            }
            return arr
        },
        onSelectDay: function(o){o.className = "onSelect";},
        onToday: function(o){o.className = "onToday"; },
        onFinish: function(){
            var ifo = "", self = this;
            var arr = ["日","一","二","三","四","五","六"];
            $("idCalendarYear").innerHTML = this.Year; 
            $("idCalendarMonth").innerHTML = this.Month;
            $("idCalendarPre").onclick = function(){self.PreMonth();};
            $("idCalendarNext").onclick = function(){self.NextMonth();};
            $("idCalendar").onmouseover = function(e){
                var eve = e || window.event;
                var ebj = eve.srcElement || eve.target;
                var day = ebj.innerHTML;
                var num = ebj.cellIndex;
                var wek = (num+"").replace(/\d/, function(o){return arr[o]});
                if(/\d+/.test(day)){
                    $("showIformation").style.visibility = "visible";
                    ifo = self.data.hasOwnProperty(self.Month)&&self.data[self.Month][day] && self.data[self.Month][day] || "";
                    $("showIformation").innerHTML = self.Year + "年" + self.Month + "月" + day + "日，星期" + wek + "<br>" + ifo;
                }
            }
            $("idCalendar").onmouseout = function(){
                $("showIformation").style.visibility = "hidden";
            }
        }
    });
    </script>
    </body>
    </html>
      

  9.   

    上面作废，因为包含了我添加的颜色信息。
    因为不清楚你想怎样显示自定义日期信息，所有我简单在原页面的CSS名为“Calendar”的“div”里面下部添加了个日期自定义信息显示容器——“id”为“showIformation”的“span”，采用“innerHTML”的方式写入。你也可以新建一个“div”等容器，把自定义信息“innerHTML”进去。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>blog式日历控件</title>
    </head>
    <body><script type="text/javascript">
    var $ = function (id) {
        return "string" == typeof id  ? document.getElementById(id) : id 
    }
    var Class = {
      create: function() {
        return function() {
          this.initialize.apply(this, arguments);
        }
      }
    }
    Object.extend = function(destination, source) {
        for (var property in source) {
            destination[property] = source[property];
        }
        return destination;
    }var Calendar = Class.create();
    Calendar.prototype = {
      initialize: function(container, options) {
        this.Container = $(container);
        this.Days = [];
        
        this.SetOptions(options);
        this.data = this.options.data;
        this.Year = this.options.Year;
        this.Month = this.options.Month;
        this.SelectDay = this.options.SelectDay;
        this.onSelectDay = this.options.onSelectDay;
        this.onToday = this.options.onToday;
        this.onFinish = this.options.onFinish;      this.Draw(); 
      },
      //设置默认属性
      SetOptions: function(options) {
        this.options = {//默认值
            data:           {},//在元程序基础上添加全部自定义信息
            Year:           new Date().getFullYear(),//显示年
            Month:          new Date().getMonth() + 1,//显示月
            SelectDay:      function(){},//获取自定义信息全部日期认定方法
            onSelectDay:    function(){},//在选择日期触发
            onToday:        function(){},//在当天日期触发
            onFinish:       function(){}//日历画完后触发
        };
        Object.extend(this.options, options || {});
      },
      //上一个月
      PreMonth: function() {
        //先取得上一个月的日期对象
        var d = new Date(this.Year, this.Month - 2, 1);
        //再设置属性
        this.Year = d.getFullYear();
        this.Month = d.getMonth() + 1;
        //重新画日历
        this.Draw();
      },  
      //下一个月
      NextMonth: function() {
        var d = new Date(this.Year, this.Month, 1);
        this.Year = d.getFullYear();
        this.Month = d.getMonth() + 1;
        this.Draw();
      },
      //画日历
      Draw: function() {
        //用来保存日期列表
        var arr = [];
        //用当月第一天在一周中的日期值作为当月离第一天的天数
        for(var i = 1, firstDay = new Date(this.Year, this.Month - 1, 1).getDay(); i <= firstDay; i++){ arr.push("&nbsp;"); }
        //用当月最后一天在一个月中的日期值作为当月的天数
        for(var i = 1, monthDay = new Date(this.Year, this.Month, 0).getDate(); i <= monthDay; i++){ arr.push(i); }
        
        var frag = document.createDocumentFragment();
        
        this.Days = [];
        
        while(arr.length > 0){
            //每个星期插入一个tr
            var row = document.createElement("tr");
            //每个星期有7天
            for(var i = 1; i <= 7; i++){
                var cell = document.createElement("td");
                cell.innerHTML = "&nbsp;";
                
                if(arr.length > 0){
                    var d = arr.shift();
                    cell.innerHTML = d;
                    if(d > 0){
                        this.Days[d] = cell;
                        //判断是否今日
                        if(this.IsSame(new Date(this.Year, this.Month - 1, d), new Date())){ this.onToday(cell); }
                        //判断是否选择日期
                        var dat = this.SelectDay();//调用SelectDay获取月份自定义信息所在日期数组
                        for(var j=0; !!dat[j]; j++){//遍历自定义信息日期逐一添加显示属性
                            if(new Date(dat[j]) && this.IsSame(new Date(this.Year, this.Month - 1, d), new Date(dat[j]))){
                                               this.onSelectDay(cell);                        }
                        }
                    }
                }
                row.appendChild(cell);
            }
            frag.appendChild(row);
        }
        //先清空内容再插入(ie的table不能用innerHTML)
        while(this.Container.hasChildNodes()){ this.Container.removeChild(this.Container.firstChild); }
        this.Container.appendChild(frag);
        
        this.onFinish();
      },
      //判断是否同一日
      IsSame: function(d1, d2) {
        return d1.getFullYear() == d2.getFullYear() && d1.getDate() == d2.getDate();
      }//上面已删除原程序的是否当前月份判断，以便每个月份定义信息所在日期显示属性标识出来
    };</script>
    <style type="text/css">.Calendar {
        font-family:Verdana;
        font-size:12px;
        background-color:#e0ecf9;
        text-align:center;
        width:200px;
        height:160px;
        padding:10px;
        line-height:1.5em;
    }
    .Calendar a{
        color:#1e5494;
    }.Calendar table{
    width:100%; 
    border:0;
    }.Calendar table thead{color:#acacac;}.Calendar table td {
        font-size: 11px;
        padding:1px;
    }
    #idCalendarPre{
        cursor:pointer;
        float:left;
        padding-right:5px;
    }
    #idCalendarNext{
        cursor:pointer;
        float:right;
        padding-right:5px;
    }
    #idCalendar td.onToday {
        font-weight:bold;
        color:#C60;
    }
    #idCalendar td.onSelect {
        font-weight:bold;
    }
    #showIformation {
        visibility:hidden;
        color:red;
    }
    </style>
    <div class="Calendar">
      <div id="idCalendarPre">&lt;&lt;</div>
      <div id="idCalendarNext">&gt;&gt;</div>
      <span id="idCalendarYear">2008</span>年 <span id="idCalendarMonth">8</span>月
      <table cellspacing="0">
        <thead>
          <tr>
            <td>日</td>
            <td>一</td>
            <td>二</td>
            <td>三</td>
            <td>四</td>
            <td>五</td>
            <td>六</td>
          </tr>
        </thead>
        <tbody id="idCalendar">
        </tbody>
      </table>
      <span id="showIformation"></span>
    </div>
    <script language="JavaScript">
    //下面的信息接口设置，你就自己琢磨了
    var cale = new Calendar("idCalendar", {
        data : {
                1 : {5: "小寒"}, 2 : {14: "春节"},
                3 : {10: "你妈妈叫你回家吃饭！", 15: "你不想回家吃饭？", 20: "还是回家吃饭吧！"},
                4 : {5: "清明节"}, 5 : {1: "劳动节"}, 6 : {1: "儿童节"}, 7 : {1: "建党节"}, 8 : {1: "建军节"},
                9 : {9: "重阳节"}, 10 : {1: "国庆节"}, 11 : {10: "立冬"}, 12 : {22: "冬至"}
        },
        SelectDay: function(){
            var arr = [];
            for(var pro in this.data[this.Month]){
                arr.push(new Date().setDate(pro))
            }
            return arr
        },
        onSelectDay: function(o){o.className = "onSelect";},
        onToday: function(o){o.className = "onToday"; },
        onFinish: function(){
            var ifo = "", self = this;
            var arr = ["日","一","二","三","四","五","六"];
            $("idCalendarYear").innerHTML = this.Year; 
            $("idCalendarMonth").innerHTML = this.Month;
            $("idCalendarPre").onclick = function(){self.PreMonth();};
            $("idCalendarNext").onclick = function(){self.NextMonth();};
            $("idCalendar").onmouseover = function(e){
                var eve = e || window.event;
                var ebj = eve.srcElement || eve.target;
                var day = ebj.innerHTML;
                var num = ebj.cellIndex;
                var wek = (num+"").replace(/\d/, function(o){return arr[o]});
                if(/\d+/.test(day)){
                    $("showIformation").style.visibility = "visible";
                    ifo = self.data.hasOwnProperty(self.Month)&&self.data[self.Month][day] && self.data[self.Month][day] || "";
                    $("showIformation").innerHTML = self.Year + "年" + self.Month + "月" + day + "日，星期" + wek + "<br>" + ifo;
                }
            }
            $("idCalendar").onmouseout = function(){
                $("showIformation").style.visibility = "hidden";
            }
        }
    });
    </script>
    </body>
    </html>
      

  10.   

    哦，把程序调用的代码再改一下下，直接调用而不需要“var cale = new Calendar("idCalendar", {....})”
    <script language="JavaScript">
    new Calendar("idCalendar", {
        data : {
                1 : {5: "小寒"}, 2 : {14: "春节"},
                3 : {10: "你妈妈叫你回家吃饭！", 15: "你不想回家吃饭？", 20: "还是回家吃饭吧！"},
                4 : {5: "清明节"}, 5 : {1: "劳动节"}, 6 : {1: "儿童节"}, 7 : {1: "建党节"}, 8 : {1: "建军节"},
                9 : {9: "重阳节"}, 10 : {1: "国庆节"}, 11 : {10: "立冬"}, 12 : {22: "冬至"}
        },
        SelectDay: function(){
            var arr = [];
            for(var pro in this.data[this.Month]){
                arr.push(new Date().setDate(pro))
            }
            return arr
        },
        onSelectDay: function(o){o.className = "onSelect";},
        onToday: function(o){o.className = "onToday"; },
        onFinish: function(){
            var self = this;
            $("idCalendarYear").innerHTML = this.Year; 
            $("idCalendarMonth").innerHTML = this.Month;
            $("idCalendarPre").onclick = function(){self.PreMonth();};
            $("idCalendarNext").onclick = function(){self.NextMonth();};
            $("idCalendar").onmouseover = function(e){
                var eve = e || window.event;
                var ebj = eve.srcElement || eve.target;
                var day = ebj.innerHTML;
                var num = ebj.cellIndex;
                var arr = ["日","一","二","三","四","五","六"];
                var wek = (num+"").replace(/\d/, function(o){return arr[o]});
                if(/\d+/.test(day)){
                    $("showIformation").style.visibility = "visible";
                    var ifo = self.data.hasOwnProperty(self.Month)&&self.data[self.Month][day] && self.data[self.Month][day]||"";
                    $("showIformation").innerHTML = self.Year + "年" + self.Month + "月" + day + "日，星期" + wek + "<br>" + ifo;
                }
            }
            $("idCalendar").onmouseout = function(){
                $("showIformation").style.visibility = "hidden";
            }
        }
    });
    </script>
      

  11.   

    谢谢 
    <span id="showIformation"></span>
    这个 显示的信息可不可以 随着 我鼠标的 移动 而移动 
    就是比如 我鼠标停在 3 上 这个信息可以显示在 3 下\左\右\上 任何一边都可以。呵呵  
      

  12.   

    可以，就creatElement一个div，然后在鼠标移动的时候检测鼠标所在位置让该div跟随移动就ok了，并且移动的过程中一样能够innerHTML改变信息，这不难，我以前就做个一个JS网页播放器—拖动进度或者音量控制条，就会出现一个小div跟随鼠标移动并显示进度和音量百分比信息，挪开鼠标那div消失。
    但我想啊，你这日历界面就这么点大小，上面再覆盖个起码显示20个文字尺寸大小的div，那不盖住了很多日期？就不方便了，你觉得？
    1、关于自定义信息“data”，可以通过ajax从后台读取，因为不同年份的节气不同（如春节不都是2月14日），由后台程序结合数据库生成合理些。
    2、修正前面每个月份日历界面都把“Today”(27)标示为红色的BUG：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>blog式日历控件</title>
    </head>
    <body><script type="text/javascript">
    var $ = function (id) {
        return "string" == typeof id  ? document.getElementById(id) : id 
    }
    var Class = {
      create: function() {
        return function() {
          this.initialize.apply(this, arguments);
        }
      }
    }
    Object.extend = function(destination, source) {
        for (var property in source) {
            destination[property] = source[property];
        }
        return destination;
    }var Calendar = Class.create();
    Calendar.prototype = {
      initialize: function(container, options) {
        this.Container = $(container);
        this.Days = [];
        
        this.SetOptions(options);
        this.data = this.options.data;
        this.Year = this.options.Year;
        this.Month = this.options.Month;
        this.SelectDay = this.options.SelectDay;
        this.onSelectDay = this.options.onSelectDay;
        this.onToday = this.options.onToday;
        this.onFinish = this.options.onFinish;      this.Draw(); 
      },
      //设置默认属性
      SetOptions: function(options) {
        this.options = {//默认值
            data:           {},
            Year:           new Date().getFullYear(),//显示年
            Month:          new Date().getMonth() + 1,//显示月
            SelectDay:      function(){},//选择日期
            onSelectDay:    function(){},//在选择日期触发
            onToday:        function(){},//在当天日期触发
            onFinish:       function(){}//日历画完后触发
        };
        Object.extend(this.options, options || {});
      },
      //上一个月
      PreMonth: function() {
        //先取得上一个月的日期对象
        var d = new Date(this.Year, this.Month - 2, 1);
        //再设置属性
        this.Year = d.getFullYear();
        this.Month = d.getMonth() + 1;
        //重新画日历
        this.Draw();
      },  
      //下一个月
      NextMonth: function() {
        var d = new Date(this.Year, this.Month, 1);
        this.Year = d.getFullYear();
        this.Month = d.getMonth() + 1;
        this.Draw();
      },
      //画日历
      Draw: function() {
        //用来保存日期列表
        var arr = [];
        //用当月第一天在一周中的日期值作为当月离第一天的天数
        for(var i = 1, firstDay = new Date(this.Year, this.Month - 1, 1).getDay(); i <= firstDay; i++){ arr.push("&nbsp;"); }
        //用当月最后一天在一个月中的日期值作为当月的天数
        for(var i = 1, monthDay = new Date(this.Year, this.Month, 0).getDate(); i <= monthDay; i++){ arr.push(i); }
        
        var frag = document.createDocumentFragment();
        
        this.Days = [];
        
        while(arr.length > 0){
            //每个星期插入一个tr
            var row = document.createElement("tr");
            //每个星期有7天
            for(var i = 1; i <= 7; i++){
                var cell = document.createElement("td");
                cell.innerHTML = "&nbsp;";
                
                if(arr.length > 0){
                    var d = arr.shift();
                    cell.innerHTML = d;
                    if(d > 0){
                        this.Days[d] = cell;
                        //判断是否今日
                        if(this.IsSame(new Date(this.Year, this.Month - 1, d), new Date(), !!0)){ this.onToday(cell); }
                        //判断是否选择日期
                        var dat = this.SelectDay();
                        for(var j=0; !!dat[j]; j++){
                            if(new Date(dat[j]) && this.IsSame(new Date(this.Year, this.Month - 1, d), new Date(dat[j]), !0)){
                                               this.onSelectDay(cell);                        }
                        }
                    }
                }
                row.appendChild(cell);
            }
            frag.appendChild(row);
        }
        //先清空内容再插入(ie的table不能用innerHTML)
        while(this.Container.hasChildNodes()){ this.Container.removeChild(this.Container.firstChild); }
        this.Container.appendChild(frag);
        
        this.onFinish();
      },
      //判断是否同一日
      IsSame: function(d1, d2, bl) {
        return bl ? d1.getFullYear() == d2.getFullYear() && d1.getDate() == d2.getDate() :
        d1.getFullYear() == d2.getFullYear() && d1.getMonth() == d2.getMonth() && d1.getDate() == d2.getDate();
      } 
    };</script>
    <style type="text/css">.Calendar {
        font-family:Verdana;
        font-size:12px;
        background-color:#e0ecf9;
        text-align:center;
        width:200px;
        height:160px;
        padding:10px;
        line-height:1.5em;
    }
    .Calendar a{
        color:#1e5494;
    }.Calendar table{
    width:100%; 
    border:0;
    }.Calendar table thead{color:#acacac;}.Calendar table td {
        font-size: 11px;
        padding:1px;
    }
    #idCalendarPre{
        cursor:pointer;
        float:left;
        padding-right:5px;
    }
    #idCalendarNext{
        cursor:pointer;
        float:right;
        padding-right:5px;
    }
    #idCalendar td.onToday {
        font-weight:bold;
        color:#C60;
    }
    #idCalendar td.onSelect {
        font-weight:bold;
    }
    #showIformation {
        visibility:hidden;
        color:red;
    }
    </style>
    <div class="Calendar">
      <div id="idCalendarPre">&lt;&lt;</div>
      <div id="idCalendarNext">&gt;&gt;</div>
      <span id="idCalendarYear">2008</span>年 <span id="idCalendarMonth">8</span>月
      <table cellspacing="0">
        <thead>
          <tr>
            <td>日</td>
            <td>一</td>
            <td>二</td>
            <td>三</td>
            <td>四</td>
            <td>五</td>
            <td>六</td>
          </tr>
        </thead>
        <tbody id="idCalendar">
        </tbody>
      </table>
      <span id="showIformation"></span>
    </div>
    <script language="JavaScript">
    new Calendar("idCalendar", {
        data : {
                1 : {5: "小寒"}, 2 : {14: "春节"},
                3 : {10: "你妈妈叫你回家吃饭！", 15: "你不想回家吃饭？", 20: "还是回家吃饭吧！"},
                4 : {5: "清明节"}, 5 : {1: "劳动节"}, 6 : {1: "儿童节"}, 7 : {1: "建党节"}, 8 : {1: "建军节"},
                9 : {9: "重阳节"}, 10 : {1: "国庆节"}, 11 : {10: "立冬"}, 12 : {22: "冬至"}
        },
        SelectDay: function(){
            var arr = [];
            for(var pro in this.data[this.Month]){
                arr.push(new Date().setDate(pro))
            }
            return arr
        },
        onSelectDay: function(o){o.className = "onSelect";},
        onToday: function(o){o.className = "onToday"; },
        onFinish: function(){
            var self = this;
            $("idCalendarYear").innerHTML = this.Year; 
            $("idCalendarMonth").innerHTML = this.Month;
            $("idCalendarPre").onclick = function(){self.PreMonth();};
            $("idCalendarNext").onclick = function(){self.NextMonth();};
            $("idCalendar").onmouseover = function(e){
                var eve = e || window.event;
                var ebj = eve.srcElement || eve.target;
                var day = ebj.innerHTML;
                var num = ebj.cellIndex;
                var arr = ["日","一","二","三","四","五","六"];
                var wek = (num+"").replace(/\d/, function(o){return arr[o]});
                if(/\d+/.test(day)){
                    $("showIformation").style.visibility = "visible";
                    var ifo = self.data.hasOwnProperty(self.Month)&&self.data[self.Month][day] && self.data[self.Month][day]||"";
                    $("showIformation").innerHTML = self.Year + "年" + self.Month + "月" + day + "日，星期" + wek + "<br>" + ifo;
                }
            }
            $("idCalendar").onmouseout = function(){
                $("showIformation").style.visibility = "hidden";
            }
        }
    });
    </script>
    </body>
    </html>
      

  13.   

    哈哈，刚吃饭了来帮你整个思路，你自己去整样式，我不喜欢整CSS。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>blog式日历控件</title>
    </head>
    <body><script type="text/javascript">
    var $ = function (id) {
        return "string" == typeof id  ? document.getElementById(id) : id 
    }
    var Class = {
      create: function() {
        return function() {
          this.initialize.apply(this, arguments);
        }
      }
    }
    Object.extend = function(destination, source) {
        for (var property in source) {
            destination[property] = source[property];
        }
        return destination;
    }var Calendar = Class.create();
    Calendar.prototype = {
      initialize: function(container, options) {
        this.Container = $(container);
        this.Days = [];
        
        this.SetOptions(options);
        this.data = this.options.data;
        this.Year = this.options.Year;
        this.Month = this.options.Month;
        this.SelectDay = this.options.SelectDay;
        this.onSelectDay = this.options.onSelectDay;
        this.onToday = this.options.onToday;
        this.onFinish = this.options.onFinish;      this.Draw(); 
      },
      //设置默认属性
      SetOptions: function(options) {
        this.options = {//默认值
            data:           {},
            Year:           new Date().getFullYear(),//显示年
            Month:          new Date().getMonth() + 1,//显示月
            SelectDay:      function(){},//选择日期
            onSelectDay:    function(){},//在选择日期触发
            onToday:        function(){},//在当天日期触发
            onFinish:       function(){}//日历画完后触发
        };
        Object.extend(this.options, options || {});
      },
      //上一个月
      PreMonth: function() {
        //先取得上一个月的日期对象
        var d = new Date(this.Year, this.Month - 2, 1);
        //再设置属性
        this.Year = d.getFullYear();
        this.Month = d.getMonth() + 1;
        //重新画日历
        this.Draw();
      },  
      //下一个月
      NextMonth: function() {
        var d = new Date(this.Year, this.Month, 1);
        this.Year = d.getFullYear();
        this.Month = d.getMonth() + 1;
        this.Draw();
      },
      //画日历
      Draw: function() {
        //用来保存日期列表
        var arr = [];
        //用当月第一天在一周中的日期值作为当月离第一天的天数
        for(var i = 1, firstDay = new Date(this.Year, this.Month - 1, 1).getDay(); i <= firstDay; i++){ arr.push("&nbsp;"); }
        //用当月最后一天在一个月中的日期值作为当月的天数
        for(var i = 1, monthDay = new Date(this.Year, this.Month, 0).getDate(); i <= monthDay; i++){ arr.push(i); }
        
        var frag = document.createDocumentFragment();
        
        this.Days = [];
        
        while(arr.length > 0){
            //每个星期插入一个tr
            var row = document.createElement("tr");
            //每个星期有7天
            for(var i = 1; i <= 7; i++){
                var cell = document.createElement("td");
                cell.innerHTML = "&nbsp;";
                
                if(arr.length > 0){
                    var d = arr.shift();
                    cell.innerHTML = d;
                    if(d > 0){
                        this.Days[d] = cell;
                        //判断是否今日
                        if(this.IsSame(new Date(this.Year, this.Month - 1, d), new Date(), !!0)){ this.onToday(cell); }
                        //判断是否选择日期
                        var dat = this.SelectDay();
                        for(var j=0; !!dat[j]; j++){
                            if(new Date(dat[j]) && this.IsSame(new Date(this.Year, this.Month - 1, d), new Date(dat[j]), !0)){
                                               this.onSelectDay(cell);                        }
                        }
                    }
                }
                row.appendChild(cell);
            }
            frag.appendChild(row);
        }
        //先清空内容再插入(ie的table不能用innerHTML)
        while(this.Container.hasChildNodes()){ this.Container.removeChild(this.Container.firstChild); }
        this.Container.appendChild(frag);
        
        this.onFinish();
      },
      //判断是否同一日
      IsSame: function(d1, d2, bl) {
        return bl ? d1.getFullYear() == d2.getFullYear() && d1.getDate() == d2.getDate() :
        d1.getFullYear() == d2.getFullYear() && d1.getMonth() == d2.getMonth() && d1.getDate() == d2.getDate();
      } 
    };</script>
    <style type="text/css">.Calendar {
        font-family:Verdana;
        font-size:12px;
        background-color:#e0ecf9;
        text-align:center;
        width:200px;
        height:160px;
        padding:10px;
        line-height:1.5em;
    }
    .Calendar a{
        color:#1e5494;
    }.Calendar table{
    width:100%; 
    border:0;
    }.Calendar table thead{color:#acacac;}.Calendar table td {
        font-size: 11px;
        padding:1px;
    }
    #idCalendarPre{
        cursor:pointer;
        float:left;
        padding-right:5px;
    }
    #idCalendarNext{
        cursor:pointer;
        float:right;
        padding-right:5px;
    }
    #idCalendar td.onToday {
        font-weight:bold;
        color:#C60;
    }
    #idCalendar td.onSelect {
        font-weight:bold;
    }
    #showInformation {
        position:absolute;
        left:0px;
        top:0px;
        width:150px;
        height:20px;
        line-height:20px;
        border:1px solid #000;
        font-size:10pt;
        text-align:center;
        color:red;
        display:none;
    }
    </style>
    <div class="Calendar">
      <div id="idCalendarPre">&lt;&lt;</div>
      <div id="idCalendarNext">&gt;&gt;</div>
      <span id="idCalendarYear">2008</span>年 <span id="idCalendarMonth">8</span>月
      <table cellspacing="0">
        <thead>
          <tr>
            <td>日</td>
            <td>一</td>
            <td>二</td>
            <td>三</td>
            <td>四</td>
            <td>五</td>
            <td>六</td>
          </tr>
        </thead>
        <tbody id="idCalendar">
        </tbody>
      </table>
    </div>
    <div id="showInformation">s</div>
    <script language="JavaScript">
    new Calendar("idCalendar", {
        data : {
                1 : {5: "小寒"}, 2 : {14: "春节"},
                3 : {10: "植树节", 15: "还是植树节", 20: "不知道什么节"},
                4 : {5: "清明节"}, 5 : {1: "劳动节"}, 6 : {1: "儿童节"}, 7 : {1: "建党节"}, 8 : {1: "建军节"},
                9 : {9: "重阳节"}, 10 : {1: "国庆节"}, 11 : {10: "立冬"}, 12 : {22: "冬至"}
        },
        SelectDay: function(){
            var arr = [];
            for(var pro in this.data[this.Month]){
                arr.push(new Date().setDate(pro))
            }
            return arr
        },
        onSelectDay: function(o){o.className = "onSelect";},
        onToday: function(o){o.className = "onToday"; },
        onFinish: function(){
            var self = this;
            $("idCalendarYear").innerHTML = this.Year; 
            $("idCalendarMonth").innerHTML = this.Month;
            $("idCalendarPre").onclick = function(){self.PreMonth();};
            $("idCalendarNext").onclick = function(){self.NextMonth();};
            $("idCalendar").onmouseover = function(e){
                var eve = e || window.event;
                var ebj = eve.srcElement || eve.target;ebj.style.cursor = "default";
                var __x = eve.clientX, __y = eve.clientY;
                var day = ebj.innerHTML, num = ebj.cellIndex;
                var arr = ["日","一","二","三","四","五","六"];
                var wek = (num+"").replace(/\d/, function(o){return arr[o]});
                if(/\d+/.test(day)){
                     var ifo = self.data.hasOwnProperty(self.Month)&&self.data[self.Month][day] && self.data[self.Month][day]||"";
                     $("showInformation").style.display  = "block";
                     $("showInformation").style.left = __x + "px";
                     $("showInformation").style.top  = __y + "px";
                     $("showInformation").innerHTML = self.Year + "年" + self.Month + "月" + day + "日，星期" + wek + "<br>" + ifo;
                }
                this.onmouseout = function(){
                     $("showInformation").style.display  = "none";
                     ebj = null;
                } 
            }
        }
    });
    </script>
    </body>
    </html>
      

  14.   

    如果只需要显示自定义过的信息，那么简单改下“onFinish”中的“$("idCalendar").onmouseover”方法：<script language="JavaScript">
    <script language="JavaScript">
    new Calendar("idCalendar", {
        data : {
                1 : {5: "小寒"}, 2 : {14: "春节"},
                3 : {10: "植树节", 15: "还是植树节", 20: "不知道什么节"},
                4 : {5: "清明节"}, 5 : {1: "劳动节"}, 6 : {1: "儿童节"}, 7 : {1: "建党节"}, 8 : {1: "建军节"},
                9 : {9: "重阳节"}, 10 : {1: "国庆节"}, 11 : {10: "立冬"}, 12 : {22: "冬至"}
        },
        SelectDay: function(){
            var arr = [];
            for(var pro in this.data[this.Month]){
                arr.push(new Date().setDate(pro))
            }
            return arr
        },
        onSelectDay: function(o){o.className = "onSelect";},
        onToday: function(o){o.className = "onToday"; },
        onFinish: function(){
            var self = this;
            $("idCalendarYear").innerHTML = this.Year; 
            $("idCalendarMonth").innerHTML = this.Month;
            $("idCalendarPre").onclick = function(){self.PreMonth();};
            $("idCalendarNext").onclick = function(){self.NextMonth();};
            $("idCalendar").onmouseover = function(e){
                var eve = e || window.event;
                var ebj = eve.srcElement || eve.target;ebj.style.cursor = "default";
                var __x = eve.clientX, __y = eve.clientY;
                var day = ebj.innerHTML, num = ebj.cellIndex;
                var arr = ["日","一","二","三","四","五","六"];
                var wek = (num+"").replace(/\d/, function(o){return arr[o]});
                      /////把下面部分语句改成这样////////
                if(/\d+/.test(day)&&self.data.hasOwnProperty(self.Month)&&self.data[self.Month][day]){
                     var ifo = self.data[self.Month][day];
                     //////把原来ifo取值判断放上去///////
                     $("showInformation").style.display  = "block";
                     $("showInformation").style.left = __x + "px";
                     $("showInformation").style.top  = __y + "px";
                     $("showInformation").innerHTML = self.Year + "年" + self.Month + "月" + day + "日，星期" + wek + "<br>" + ifo;
                }
                this.onmouseout = function(){
                     $("showInformation").style.display  = "none";
                     ebj = null;
                } 
            }
        }
    });
    </script>
      

  15.   

    能够实现，把data Json里面的信息换成链接地址，“var ifo = self.data[self.Month][day]”得到的“ ifo”就是自定义信息链接页面地址，再“window.location.href = ifo”跳转或者“window.open("",ifo,"...")”打开新窗口不能就OK了。
      

  16.   

    不要试图重写框架已经写好的HTML TAB标签，硬性逐行插入“<a href="..." onclick=....>”,应尽量把HTML元素标签与JS功能脚本分开，考虑最佳的效率和维护成本。
      

  17.   

    这样简单的多啊：
    1、删除我上述HTML中的“#showInformation”样式和“showInformation”div。
    2、在样式表中“.Calendar”下添加“cursor:default”。
    3、把自定义信息页面地址放进data。
    4、把上述的调用代码换成下面的：<script language="JavaScript">
    new Calendar("idCalendar", {
        data : {
                1 : {5: ""}, 2 : {14: ""},
                3 : {10: "http://www.google.com.hk", 15: "http://www.bauidu.com", 20: "http://www.csdn.net"},
                4 : {5: "http://www.sina.com"}, 5 : {1: ""}, 6 : {1: ""}, 7 : {1: ""}, 8 : {1: ""},
                9 : {9: ""}, 10 : {1: ""}, 11 : {10: ""}, 12 : {22: ""}
        },
        SelectDay: function(){
            var arr = [];
            for(var pro in this.data[this.Month]){
                arr.push(new Date().setDate(pro))
            }
            return arr
        },
        onSelectDay: function(o){o.className = "onSelect";},
        onToday: function(o){o.className = "onToday"; },
        onFinish: function(){
            var self = this;
            $("idCalendarYear").innerHTML = this.Year; 
            $("idCalendarMonth").innerHTML = this.Month;
            $("idCalendarPre").onclick = function(){self.PreMonth();};
            $("idCalendarNext").onclick = function(){self.NextMonth();};
            $("idCalendar").onclick = function(e){
                var eve = e || window.event;
                var ebj = eve.srcElement || eve.target;
                var day = ebj.innerHTML;
                if(/\d+/.test(day)&&self.data.hasOwnProperty(self.Month)&&self.data[self.Month][day]){
                     var ifo = self.data[self.Month][day];
                     window.open("", ifo, "");
                }
            }
        }
    });
    </script>
      

  18.   


    刚那个不行。。
    有错误 。。
    我想要的就是 csdn 微博 里面 点开左边 活动  右边日历的那种效果。。
      

  19.   

    window.open("", ifo, "") ==> window.open(ifo);
    这标签属性你自己查一下再定义，我忘了。
      

  20.   


    <script language="JavaScript">
    new Calendar("idCalendar", {
        data : {
                1 : {5: ""}, 2 : {14: ""},
                3 : {10: "http://www.google.com.hk", 15: "http://www.baidu.com", 20: "http://www.csdn.net"},
                4 : {5: "http://www.sina.com"}, 5 : {1: ""}, 6 : {1: ""}, 7 : {1: ""}, 8 : {1: ""},
                9 : {9: ""}, 10 : {1: ""}, 11 : {10: ""}, 12 : {22: ""}
        },
        SelectDay: function(){
            var arr = [];
            for(var pro in this.data[this.Month]){
                arr.push(new Date().setDate(pro))
            }
            return arr
        },
        onSelectDay: function(o){o.className = "onSelect";},
        onToday: function(o){o.className = "onToday"; },
        onFinish: function(){
            var self = this;
            $("idCalendarYear").innerHTML = this.Year; 
            $("idCalendarMonth").innerHTML = this.Month;
            $("idCalendarPre").onclick = function(){self.PreMonth();};
            $("idCalendarNext").onclick = function(){self.NextMonth();};
            $("idCalendar").onclick = function(e){
                var eve = e || window.event;
                var ebj = eve.srcElement || eve.target;
                var day = ebj.innerHTML;
                if(/\d+/.test(day)&&self.data.hasOwnProperty(self.Month)&&self.data[self.Month][day]){
                     window.open(self.data[self.Month][day]);
                }
            }
        }
    });
    </script>
      

  21.   

    你能看下 csdn 微博 里 左边 活动 点开后 右边那个 日历效果吗， 我想要这个 效果 
    ！~~~
     
      

  22.   

    谢谢 虽然未 达到我想要的 结果 
    呵呵 
    还是很感谢 你的帮助 。。
    csdn 的 精神！@~~我想要的结果就是 csdn  微博 系统  点开 活动 后  右边那个日历的 效果 呵呵