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

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

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( 
      
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值