位置: 编程技术 - 正文
推荐整理分享jQuery日程管理插件fullcalendar使用详解(jquery日期控件onchange事件),希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:js日程插件,jquery日历框有长期的选项,jquery日程安排,jquery日期控件 datepicker,jquery日期控件onchange事件,jquery日程安排,jquery日期控件,jquery日期控件,内容如对您有帮助,希望把文章链接给更多的朋友!
FullCalendar用来做日程管理功能非常强大,但是唯一不足的地方是没有将中国农历历法加进去,今天我将结合实例和大家分享如何将中国农历中的节气和节日整合到FullCalendar中,从而增强其实用性。
HTML
首先是要载入jQuery库和fullcalendar插件。
然后在body中,建立日历容器div#calendar。
<div id="calendar"></div>
jQuery
使用jQuery调用fullcalendar插件,方法如下,值得一提的是events数据源来自json.php,这个PHP文件负责读取数据并返回json格式的日程安排数据给前端。
以上代码就可以展示一个日历界面,但是需要加入农历,则需要将农历算法代码整合到fullCalendar中,并且需要将fullCalendar.js中的代码稍微改动下,以下是网友@太空??以及/可爱/玫瑰提供的中国农历算法javascript版,再此一并感谢!
将以上代码直接复制粘贴到从官网下载的fullcalendar.js的最后。然后关键的是我们要对fullcalendar.js原有的代码中程序日历天数的代码段做修改。
大概在第行开始,其中的if语句中的部分修改为以下代码
以上代码中,调用了农历算法,计算出日历中对应的农历日期包括节气,在这里我们还做了特殊节日的处理,比如春节、端午、中秋等,然后我们要将农历与公历以及特殊节日同时显示在fullcalendar中,这时就要修改css来控制使得公历日期显示在左上,农历显示在右上,特殊节日显示在中间。
友情链接: 武汉网站建设