当初写这个控件主要是为了每日签到。当然你也可以改成事件(日程表)的日历控件,所有代码和样式都会分享给你。
javascript代码极其简单,详细请下载demo文件(最下方有下载链接)。
其实网上能搜索到很多类似控件,虽然功能多,但是文件很大。但实际应用中,或许我们只需要某个简单的功能而已。该控件分享给你们,满足你们的DIY,希望你们能喜欢,并多多支持我。
样式图:
控件结构讲解:
主要文件:calendar.mx.1.1.css、calendar.mx.1.1.js
是基于jquery的(其实当初在编写代码时候也没有用到jquery的什么东西)
提供了一个简易的demo.html
控件的使用:
<script type="text/javascript">
$(function(){
Calendar.init("2015/01/08 16:13:11");//初始化时间:标准格式如:2015/01/08 16:13:11
$("#calendar").html(Calendar.getCalendar([1,5]));
});
</script>
其它说明:
1.可以不写要初始化时间,那么就是js获取的本地浏览器上的本地时间,当然实际开发中是要以服务器时间为准的,所以,最好初始化为服务器时间。
2.Calendar.getCalendar([1,5]) //意思是:高亮显示1号,5号。
实际开发中:每日签到,直接加载某个会员当月所有的签到就行。
3.如何改成日程表的形式:其实和签到的原理差不多。提供的demo文件中,自己研究研究,很简单的。
控件的下载地址:demo
使用过程中,如果有什么不懂的地方,欢迎留言咨询。