FullCalendar 七：FullCalendar应用——整合农历节气和节日

最新推荐文章于 2021-05-21 06:49:28 发布

原创

最新推荐文章于 2021-05-21 06:49:28 发布 · 820 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#json #php #javascript #ViewUI

本文介绍了如何将中国农历的节气和节日整合到FullCalendar日历中，增强了其在日程管理中的实用性。通过加载jQuery库和fullcalendar插件，结合JSON数据源，实现了农历日期与特殊节日的显示。详细步骤包括修改fullcalendar.js代码，添加农历算法，并调整CSS以呈现公历、农历和特殊节日。提供了完整的代码示例和在线演示链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

FullCalendar用来做日程管理功能非常强大，但是唯一不足的地方是没有将中国农历历法加进去，今天我将结合实例和大家分享如何将中国农历中的节气和节日整合到FullCalendar中，从而增强其实用性。

如果您还不了解日程安排FullCalendar日历的相关知识，请先阅读本站系列文章：日程安排FullCalendar的应用。

查看演示DEMO 下载源码

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()