开源一款简单清爽的日历组件

发布时间:2016年12月10日 10点35分02秒
博客类别:小兔教程 - JavaScript高级进阶
阅读(687)   评论(5)   喜欢(10)
  • 分享到: QQ空间 更多
  • QQ鎴浘20161210100716.jpg


    源码会在最后给出地址,需要的朋友自己去下载。最近项目需要做一个日程安排的功能,就是点击日历的某一天弹出一个录入页面,填完信息后保存当天的日程安排。有日程的日期会有不同的标记(比如加一个背景色啥的)。网上找了很久,都不尽如人意,于是我只好自己找点资料弄了一个。具体的页面就不给出了,关于这个日历,现在是一个单独的js组件,分享出来。


    调用方法:首先你的页面需要有一个div,id自己定义。


    比如:


    <div id="wannianli"></div>


    js代码:


    var calender = new Calender(opts);
    calender.init();

     


    属性:


    属性名属性类型默认值说明
    idstring(字符串)
    需要渲染的dom元素
    widthnumber(数字)500
    日历的宽度
    heightnumber(数字)500日历的高度
    backgroundstring(字符串)#fff
    日历的背景色
    colorstring(字符串)#999年月的颜色
    monthTagarray(数组)["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"]月份的格式
    weekTagarray(数组)["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]星期的格式
    formatstring(字符串)日期格式化yyyy-MM-dd

    方法:


    方法名参数返回值说明
    inityear,month (不加参数默认当月)
    初始化日历,可选择年月
    click点击单元格的具体日期
    单击单元格后的回调函数
    dbclick双击单元格的具体日期
    双击单元格后的回调函数

    使用范例:


    var calender = new Calender(
    	{
    		id:"wannianli",
    		width:660,
    		height:500,
    		background:"#fff",
    		color:'#222',
    		monthTag:["1 月","2 月","3 月","4 月","5 月","6 月","7 月","8 月","9 月","10 月","11 月","12 月"],
    		weekTag:["<font class='red'>周日</font>","<font class='green'>周一</font>", "<font class='green'>周二</font>", "<font class='green'>周三</font>", "<font class='green'>周四</font>", "<font class='green'>周五</font>", "<font class='red'>周六</font>"],
    		format:"yyyy-MM-dd",
    		dbclick : function(formatStr){
    			alert(formatStr);
    		},
    		/*click : function(formatStr){
    			alert(formatStr);
    		},*/
    	}
    	
    );
    
    calender.init();

     


    依赖文件:jQuery.js、wannianli.css


    源码下载地址:http://pan.baidu.com/s/1skFrxiH


    个人博客:www.xiaotublog.com


    上一篇:三分钟学会Java文件上传

    下一篇: java.sql.SQLException: Incorrect string value: '\xE6\x88\x91\xE7\x9A\x84...' for column ...