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

1481337626847097422.jpg

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

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

比如:

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

js代码:

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

属性

Paste_Image.png

方法

Paste_Image.png

范例:

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();
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容