自己动手----写JavaScript日历(2)

来源:网络 责任编辑:栏目编辑 发表时间:2013-07-01 08:10 点击:

  离上一篇好几天了.
    完善了一下:
      1.浏览器兼容(IE,Firefox,Chrome)
      2.添加一个日期点击事件
引入CSS(皮肤)
<link rel="stylesheet" type="text/css" href="calendar/skin/default/calendar.css" />
使用方法
    var calendar = new Calendar();
    calendar.dayRenderer = todayx.calendarDayRenderer; // 自定义的日期渲染器
   
    calendar.addSelectedDateChangeListener(function(date,cal){ // 添加日期选中事件监听器
        var d = DateUtil.format(date,'MM-dd');
        window.location.href = 'index.php?date=' + d;
    },'a'); // 这个'a',参数是事件处理器的id,可选
   
    calendar.show("calendar",420);  // 作为id为calendar容器的子元素显示,宽度为420

自定义的渲染器
    function calendarDayRenderer(week,day,div,cal,isToday){ // day = -1 时,表示空格
        if(day == -1){
            return "&nbsp;";   
        }else{
            var str = DateUtil.format(div.model.date,'yyyy-MM-dd');           
            var ___d = DateUtil.format(div.model.date,'MM-dd'); // DateUtil为calendar.js中的工具类
            var y = div.model.date.getFullYear();
            //str += day < 10 ? "0" + day : "" + day;           
            var a = document.createElement("a");
            a.href = "index.php?y=" + y + "&date=" + ___d;           
            if(isToday){
                a.title = "今天 " + str;               
            }else{
                a.title = str;               
            }           
            a.innerHTML = day;
            a.style.display = "block";                   
            if(isToday){
                a.style.color = 'red';                               
            }           
 

    发表评论
    请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
    用户名: 验证码:点击我更换图片
    最新评论 更多>>

    推荐热点

    • Gb2312转utf-8编码的方法(vbs+js)
    • 如何使用Ajax技术开发Web应用程序(1)
    • js跳转路径问题
    • JavaScript模仿桌面窗口
    • 用js检测两个线段是否相交
    • 我知道的JavaScript -- 设计模式(桥接)应用之 – 验证器
    • 运用JavaScript构建你的第一个Metro式应用程序(on Windows
    • 我是如何去了解jquery的(六),案例之幻灯片轮换
    • Jquery封装幻灯片效果
    网站首页 - 友情链接 - 网站地图 - TAG标签 - RSS订阅 - 内容搜索
    Copyright © 2008-2015 计算机技术学习交流网. 版权所有

    豫ICP备11007008号-1