fullcalendar.js添加农历、节日展示

效果如图



## fullcalendar改造说明
项目中日期插件用的是fullcalendar，由于插件本身不支持使用农历、节日展示所以对fullcalendar进行了修改，当你重新安装是需要手动去修改源码,修改内容如下* 1、在fullcalendar.js之前引入lunar.js> lunar.js是一个计算农历和各种节假日的第三方js，需在fullcalendar前引用。
* 2、修改fullcalendar.js正常生成的日历只是包含一个日期，想要显示农历就需要手动修改源码，目前我使用的版本是3.9.0，已经是最新版本，主要修改地方有两处```if (isDayNumberVisible) {html += view.buildGotoAnchorHtml(date, { 'class': 'fc-day-number' }, date.format('D') // inner HTML);//此处可以搜索fc-day-number，在下面添加以下代码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
return '<div' + attrs + '>' + innerHtml + '</div>';
```* 3、修改fullcalendar.css(.min)修改生成的代码当然也要给它添加一些样式，添加内容如下```.fc table > thead > tr > th div{ font-weight: bold; color: #25992E; font-size:16px; } .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; },
```

鉴于很多朋友都找不到lunar.js,我已经将demo代码上传至github上fullcalendar农历demo

fullcalendar.js添加农历、节日展示相关推荐

Outlook中添加中国农历节日
Outlook中直接添加农历节日非常不方便, Google后找到解决办法如下: 一. ics文件导入法推荐下载如下农历日历: http://www.google.com/calendar/ical/ ...
FullCalendar 七：FullCalendar应用——整合农历节气和节日
FullCalendar用来做日程管理功能非常强大,但是唯一不足的地方是没有将中国农历历法加进去,今天我将结合实例和大家分享如何将中国农历中的节气和节日整合到FullCalendar中,从而增强其实用 ...
oracle 判断节气,FullCalendar应用——整合农历节气和节日
如果您还不了解日程安排FullCalendar日历的相关知识,请先阅读本站系列文章: 日程安排FullCalendar的应用. HTML 首先是要载入jQuery库和fullcalendar插件. 然 ...
FullCalendar增加节气、节日和农历显示
https://m.aoh.cc/222.html 对比了各种日历插件后选择了FullCalendar,根据需求需要显示节假日和节气,顺带把农历也加上,网上看了FeiFei些的<fullCale ...
element ui 日历空控件添加农历节气和家假日
背景: 按照客户需求,需要在日历控件上添加农历和节气 ,但是element ui控件中无弄里控件只能引入外部js来完成该功能, 1.引入calendar.js 2.调用方法显示农历 2.1 // 公 ...
js日历农历_中国农历日历的全部日历
js日历农历 Vue月球全日历 (vue-lunar-full-calendar) Chinese lunar calendar for Fullcalendar. Fullcalendar的中国农历 ...
Javascript:公农历节日周年计算
/* Geovin Du 塗聚文 20130608修改 toString():把数组转换成一个字符串 toLocaleString():把数组转换成一个字符串 join():把数组转换成一个用符号连接 ...
JS格式化json并展示
一.格式化json数据展示区域第1种: <div id="showJsonData1" contenteditable="true" style=&qu ...
three.js 添加字体
本篇文章是对three.js如何添加字体的一个总结. 1. 关于低版本three.js添加字体我在网上找到的教程就是使用的这种办法,但是我使用的76版的threeJs已经不支持了,没有具体深究是什么 ...

fullcalendar.js添加农历、节日展示

fullcalendar.js添加农历、节日展示相关推荐

最新文章

热门文章