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 

评论 16
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值