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

自定义日历组件实现
本文介绍了一款自定义的日历组件实现方案,该组件可通过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:["周日","周一", "周二", "周三", "周四", "周五", "周六"],
format:"yyyy-MM-dd",
dbclick : function(formatStr){
alert(formatStr);
},
/click : function(formatStr){
alert(formatStr);
},
/
}

);

calender.init(2015,1);

依赖文件:jQuery.js、wannianli.css
源码下载地址:http://pan.baidu.com/s/1skFrxiH
个人博客:www.xiaotublog.com

转载于:https://www.cnblogs.com/skyblue-li/p/6155125.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值