FullCalendar用来做日程管理功能非常强大,但是唯一不足的地方是没有将中国农历历法加进去,今天我将结合实例和大家分享如何将中国农历中的节气和节日整合到FullCalendar中,从而增强其实用性。
如果您还不了解日程安排FullCalendar日历的相关知识,请先阅读本站系列文章: 日程安排FullCalendar的应用。
HTML
首先是要载入jQuery库和fullcalendar插件。
<script src='js/jquery-1.9.1.min.js'></script>
<script src='js/fullcalendar.min.js'></script>
然后在body中,建立日历容器div#calendar。
<div id="calendar"></div>
jQuery
使用jQuery调用fullcalendar插件,方法如下,值得一提的是events数据源来自json.php,这个PHP文件负责读取数据并返回json格式的日程安排数据给前端,具体请看本站文章:FullCalendar应用——读取JSON数据。
$(function() { $('#calendar').fullCalendar({ header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' }, selectable: true, events: 'json.php' //数据源 }); });
以上代码就可以展示一个日历界面,但是需要加入农历,则需要将农历算法代码整合到fullCalendar中,并且需要将fullCalendar.js中的代码稍微改动下,以下是网友@太空飛豬以及/可爱/玫瑰提供的中国农历算法javascript版,再此一并感谢!
function RunGLNL() { var today = new Date(); var d = new Array("周日", "周一", "周二", "周三", "周四", "周五", "周六"); var DDDD = d[today.getDay()]; DDDD = DDDD + " " + (CnDateofDateStr(today)); //显示农历 DDDD = DDDD + SolarTerm(today); //显示二十四节气 document.write(DDDD); } function DaysNumberofDate(DateGL) { return parseInt((Date.parse(DateGL) - Date.parse(DateGL.getFullYear() + "/1/1")) / 86400000) + 1; } function CnDateofDate(DateGL) { var CnData = new Array(