FullCalendar增加节气、节日和农历显示

https://m.aoh.cc/222.html

对比了各种日历插件后选择了FullCalendar，根据需求需要显示节假日和节气，顺带把农历也加上，网上看了FeiFei些的《fullCalendar改造计划之带农历节气节假日的万年历》文章，按照他的方法改造发现他用的是老版本的插件，新版本代码结构变动很大，无奈自己重新读源码改造之，记录下来，给有需求的朋友一点参考。

FullCalendar官网（https://fullcalendar.io/）
改造使用新的版本，v 3.0.1。

首先看下改造成功后的预览图吧：

一、汉化

现在插件已经自带了本地化文件，所以直接加载插件包中的locale/zh-cn/js即可。

二、增加农历，节气，节假日显示

关于直接调用Google Calendar的订阅我就不说了，墙的厉害。

下面说说直接修改源文件，这个就麻烦点，不过自定义程度很高，缺点就是插件更新麻烦。

按照FeiFei的方法，使用hao123的js库（点击下载lunar.js），这个库包含了农历、节气和节假日。
直接将lunar.js内容拷贝到fullcalendar.js里放在头部或者单独加载这个js都可以，看个人习惯。这里我是直接放在fullcalendar.js里，然后修改插件生成日期单元格的内容部分：

先搜索fc-day-number，查找到以下代码：

1 2 3 4 5 6

if ( this . view . dayNumbersVisible ) {      html += this . view . buildGotoAnchorHtml ( date , {              'class' : 'fc-day-number'          } , date . date ( ) // inner HTML      ) ; }

修改为：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

if ( this . view . dayNumbersVisible ) {      html += this . view . buildGotoAnchorHtml ( date , {              'class' : 'fc-day-number'          } , date . date ( ) // inner HTML      ) ;      // 增加节气显示      var cTerm = lunar ( date ) . term ;      if ( cTerm ) {          html += "<div class='fc-day-cnTerm'>" + cTerm + "</div>"      }      // 增加节日显示      var fes = lunar ( date ) . festival ( ) ;      if ( fes && fes . length > 0 ) {          html += "<div class='fc-day-cnTerm'>" + $ . trim ( fes [ 0 ] . desc ) + "</div>" ;      }      // 无节气和节日时显示农历      if ( ! cTerm && ( ! fes || fes . length == 0 ) ) {          html += "<div class='fc-day-cnDate'>" + lunar ( date ) . lMonth + "月" + lunar ( date ) . lDate + "</div>" ;      } }

再修改buildGotoAnchorHtml方法，将其中span标签改为div标签：

1 2 3 4 5

if ( ! forceOff && this . opt ( 'navLinks' ) ) {      return '<a' + attrs + ' data-goto="' + htmlEscape ( JSON . stringify ( finalOptions ) ) + '">' + innerHtml + '</a>' ; } else {      return '<div' + attrs + '>' + innerHtml + '</div>' ; }

好了，到这里就差不多完成了，接下来改下fullcalendar的样式就OK了：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

/* 改造 */   . fc - toolbar . fc - left {      position : absolute ;      top : 0 ;      left : 0 ;      float : none ; }   . fc table > thead > tr > th div {      font - weight : bold ;      color : #25992E;      font - size : 14px ; }   . fc - sat span , . fc - sun div {      color : #ED6D23 !important; }   . fc - ltr . fc - basic - view . fc - day - top . fc - day - number {      width : 100 % ;      text - align : right ;      display : block ;      font - size : 20px ;      font - family : Arial ;      font - weight : 600 ;      padding : 12px 12px 0 12px ;      line - height : 23px ;      height : 23px ;      color : #555; }   . fc - day - cnTerm {      text - align : right ;      padding : 12px 12px 0 12px ;      color : #6ABA49;      font - size : 12px ; }   . fc - day - cnDate {      text - align : right ;      padding : 12px 12px 0 12px ;      color : #999;      font - size : 12px ; }