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 ;
}

FullCalendar增加节气、节日和农历显示相关推荐

  1. fullCalendar改造计划之带农历节气节假日的万年历

    计划着要做一款万年历,作为自己小项目的便民功能. 作为一枚"资深"业余前端,本想着网上应该有现成的代码可用,一顿猛搜之后,倒是确实搜到几个,但是一看功能,跟我想的不一样:再看代码, ...

  2. fullCalendar改造计划之带农历节气节假日的万年历(转)

    http://feifei.im/archives/168 计划着要做一款万年历,作为自己小项目的便民功能. 作为一枚"资深"业余前端,本想着网上应该有现成的代码可用,一顿猛搜之后 ...

  3. 天气预报 增加公历节日信息（1.确定时间2.第几周第几天） 和 农历节日信息 体力活+外码

    1.确定公历节日信息实现了 2.第几周第几天还需要继续实现,大致思路是参照网上的: // 某月的第几个星期几. 5,6,7,8 表示到数第 1,2,3,4 个星期几String wFtv[] = {& ...

  4. PHP-农历+节气+节日等类库

    namespace jplt; /** jplt\Lunar* 农历 节气 节日*/ header("Content-Type:text/html;charset=utf-8"); ...

  5. 苹果5s农历显示订阅服务器,苹果5s怎么显示农历，苹果5S怎样设置阴历呢？

    说到苹果5s怎么显示农历,大家都知道,有人问本人手机苹果5s,为什么日记上没有农历呢.,另外,还有人想问苹果5s手机日历怎么设置可以显示农历,这是怎么回事?其实5s怎么设置农历苹果5s日历怎么显示农历 ...

  6. 公历农历显示节日节气星期等万年历

    先看效果,如果当日有二十四节气,或者特殊的节日(公历和农历都行),会显示出来 这里是日期处理类 public class ChineseCalendar{#region ChineseCalendar ...

  7. vant 日历改造上一月 ,下一月 , 农历 ,节气, 节日 ,月份联动

    直接上成品 代码 <template><div class="be-on-duty"><!--nav--><van-nav-bar tit ...

  8. vue fullCalendar的使用及扩展（支持农历显示及鼠标右键新建）

    引入步骤 1.安装插件 yarn add @fullcalendar/vue @fullcalendar/core @fullcalendar/daygrid @fullcalendar/intera ...

  9. 为Linux Mint Cinnamon的日历小程序增加中国农历显示以及其它部分参数优化

    我最近使用Linux Mint Xfce的时间比较多,这个操作系统虽然运行效率高,占用资源少,但是感觉Xfce桌面稳定性还存在不足,经常出现莫名其妙的画面抖动及部分区域出现花屏的现象,还容易出现使用者 ...

最新文章

  1. 深度度量学习的这十三年，难道是错付了吗？
  2. python中rfind函数_Python rfind()方法
  3. tanh函数matlab_MATLAB 基本函数
  4. RAID，LVM创建
  5. MySQL 高级 —— 索引实现的思考
  6. soapUI-JDBC Request
  7. 抵制羊毛党，图计算“加持”互联网电商风控
  8. C++ - STL迭代器失效
  9. html5中切换图片怎么做,HTML5编程实战之二：用动画的形式切换图片
  10. 树莓派Python 3.x+TensorFlow 1.9.0
  11. How to recover deleted data from SQL Server
  12. mui+vue文件上传（图片）
  13. cad卸载_3分钟搞定CAD无法卸载问题，CAD卸载不再是烦恼
  14. keepalived配置虚拟IP
  15. 测试经理必知必会-Kanban和Scrum区别
  16. linux下同一个tomcat部署多个项目
  17. #define的用法
  18. 如何实现在退休时有足够的钱供老年任性花费？(复利年金通胀综合案例)
  19. Android基础知识——Android SDK Manager详解
  20. 第1篇：Python 环境搭建

热门文章

  1. 手机端html展示pdf
  2. Linux watch命令使用介绍
  3. HDU 5536 Chip Factory 01字典树
  4. openCV Contours详解
  5. Java之@Autowired再分析
  6. 静态类(static)
  7. QT 类静态函数作为回调函数
  8. 最最简单的SQL手工注入教学，我奶奶都会
  9. linux安装powerline字体,下载安装使用Powerline：Vim和Bash终端的状态栏
  10. PHP开发面试题目总结