jQuery日程管理插件fullcalendar使用详解


Posted in Javascript onJanuary 07, 2017

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格式的日程安排数据给前端。

$(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( 
    0x16, 0x2a, 0xda, 0x00, 0x83, 0x49, 0xb6, 0x05, 0x0e, 0x64, 0xbb, 0x00, 0x19, 0xb2, 0x5b, 0x00, 
    0x87, 0x6a, 0x57, 0x04, 0x12, 0x75, 0x2b, 0x00, 0x1d, 0xb6, 0x95, 0x00, 0x8a, 0xad, 0x55, 0x02, 
    0x15, 0x55, 0xaa, 0x00, 0x82, 0x55, 0x6c, 0x07, 0x0d, 0xc9, 0x76, 0x00, 0x17, 0x64, 0xb7, 0x00, 
    0x86, 0xe4, 0xae, 0x05, 0x11, 0xea, 0x56, 0x00, 0x1b, 0x6d, 0x2a, 0x00, 0x88, 0x5a, 0xaa, 0x04, 
    0x14, 0xad, 0x55, 0x00, 0x81, 0xaa, 0xd5, 0x09, 0x0b, 0x52, 0xea, 0x00, 0x16, 0xa9, 0x6d, 0x00, 
    0x84, 0xa9, 0x5d, 0x06, 0x0f, 0xd4, 0xae, 0x00, 0x1a, 0xea, 0x4d, 0x00, 0x87, 0xba, 0x55, 0x04 
  ); 
  var CnMonth = new Array(); 
  var CnMonthDays = new Array(); 
  var CnBeginDay; 
  var LeapMonth; 
  var Bytes = new Array(); 
  var I; 
  var CnMonthData; 
  var DaysCount; 
  var CnDaysCount; 
  var ResultMonth; 
  var ResultDay; 
  var yyyy = DateGL.getFullYear(); 
  var mm = DateGL.getMonth() + 1; 
  var dd = DateGL.getDate(); 
  if (yyyy < 100) yyyy += 1900; 
  if ((yyyy < 1997) || (yyyy > 2020)) { 
    return 0; 
  } 
  Bytes[0] = CnData[(yyyy - 1997) * 4]; 
  Bytes[1] = CnData[(yyyy - 1997) * 4 + 1]; 
  Bytes[2] = CnData[(yyyy - 1997) * 4 + 2]; 
  Bytes[3] = CnData[(yyyy - 1997) * 4 + 3]; 
  if ((Bytes[0] & 0x80) != 0) { 
    CnMonth[0] = 12; 
  } 
  else { 
    CnMonth[0] = 11; 
  } 
  CnBeginDay = (Bytes[0] & 0x7f); 
  CnMonthData = Bytes[1]; 
  CnMonthData = CnMonthData << 8; 
  CnMonthData = CnMonthData | Bytes[2]; 
  LeapMonth = Bytes[3]; 
  for (I = 15; I >= 0; I--) { 
    CnMonthDays[15 - I] = 29; 
    if (((1 << I) & CnMonthData) != 0) { 
      CnMonthDays[15 - I]++; 
    } 
    if (CnMonth[15 - I] == LeapMonth) { 
      CnMonth[15 - I + 1] = -LeapMonth; 
    } 
    else { 
      if (CnMonth[15 - I] < 0) { 
        CnMonth[15 - I + 1] = -CnMonth[15 - I] + 1; 
      } 
      else { 
        CnMonth[15 - I + 1] = CnMonth[15 - I] + 1; 
      } 
      if (CnMonth[15 - I + 1] > 12) { 
        CnMonth[15 - I + 1] = 1; 
      } 
    } 
  } 
  DaysCount = DaysNumberofDate(DateGL) - 1; 
  if (DaysCount <= (CnMonthDays[0] - CnBeginDay)) { 
    if ((yyyy > 1901) && (CnDateofDate(new Date((yyyy - 1) + "/12/31")) < 0)) { 
      ResultMonth = -CnMonth[0]; 
    } 
    else { 
      ResultMonth = CnMonth[0]; 
    } 
    ResultDay = CnBeginDay + DaysCount; 
  } 
  else { 
    CnDaysCount = CnMonthDays[0] - CnBeginDay; 
    I = 1; 
    while ((CnDaysCount < DaysCount) && (CnDaysCount + CnMonthDays[I] < DaysCount)) { 
      CnDaysCount += CnMonthDays[I]; 
      I++; 
    } 
    ResultMonth = CnMonth[I]; 
    ResultDay = DaysCount - CnDaysCount; 
  } 
  if (ResultMonth > 0) { 
    return ResultMonth * 100 + ResultDay; 
  } 
  else { 
    return ResultMonth * 100 - ResultDay; 
  } 
} 
function CnYearofDate(DateGL) { 
  var YYYY = DateGL.getFullYear(); 
  var MM = DateGL.getMonth() + 1; 
  var CnMM = parseInt(Math.abs(CnDateofDate(DateGL)) / 100); 
  if (YYYY < 100) YYYY += 1900; 
  if (CnMM > MM) YYYY--; 
  YYYY -= 1864; 
  return CnEra(YYYY) + "年"; 
} 
function CnMonthofDate(DateGL) { 
  var CnMonthStr = new Array("零", "正", "二", "三", "四", "五", "六", "七", "八", "九", "十", "冬", "腊"); 
  var Month; 
  Month = parseInt(CnDateofDate(DateGL) / 100); 
  if (Month < 0) { 
    return "闰" + CnMonthStr[-Month] + "月"; 
  } 
  else { 
    return CnMonthStr[Month] + "月"; 
  } 
} 
function CnDayofDate(DateGL) { 
  var CnDayStr = new Array("零", 
    "初一", "初二", "初三", "初四", "初五", 
    "初六", "初七", "初八", "初九", "初十", 
    "十一", "十二", "十三", "十四", "十五", 
    "十六", "十七", "十八", "十九", "二十", 
    "廿一", "廿二", "廿三", "廿四", "廿五", 
    "廿六", "廿七", "廿八", "廿九", "三十"); 
  var Day; 
  Day = (Math.abs(CnDateofDate(DateGL))) % 100; 
  //hanlichen mod 
  if ("初一" == CnDayStr[Day]) { 
    // alert(SolarTerm(DateGL)); 
    return CnMonthofDate(DateGL); 
  } else { 
    if (SolarTerm(DateGL) != "") { 
      return SolarTerm(DateGL); 
    } else { 
      return CnDayStr[Day]; 
    } 
  } 
} 
function DaysNumberofMonth(DateGL) { 
  var MM1 = DateGL.getFullYear(); 
  MM1 < 100 ? MM1 += 1900 : MM1; 
  var MM2 = MM1; 
  MM1 += "/" + (DateGL.getMonth() + 1); 
  MM2 += "/" + (DateGL.getMonth() + 2); 
  MM1 += "/1"; 
  MM2 += "/1"; 
  return parseInt((Date.parse(MM2) - Date.parse(MM1)) / 86400000); 
} 
function CnEra(YYYY) { 
  var Tiangan = new Array("甲", "乙", "丙", "丁", "戊", "己", "庚", "辛", "壬", "癸"); 
  var Dizhi = new Array("子", "丑", "寅", "卯", "辰", "巳", "午", "未", "申", "酉", "戌", "亥"); 
  return Tiangan[YYYY % 10] + Dizhi[YYYY % 12]; 
} 
function CnDateofDateStr(DateGL) { 
  if (CnMonthofDate(DateGL) == "零月") return " 请调整您的计算机日期!"; 
  else return "农历" + CnYearofDate(DateGL) + " " + CnMonthofDate(DateGL) + CnDayofDate(DateGL); 
} 
 
function SolarTerm(DateGL) { 
  var SolarTermStr = new Array( 
    "小寒", "大寒", "立春", "雨水", "惊蛰", "春分", 
    "清明", "谷雨", "立夏", "小满", "芒种", "夏至", 
    "小暑", "大暑", "立秋", "处暑", "白露", "秋分", 
    "寒露", "霜降", "立冬", "小雪", "大雪", "冬至"); 
  var DifferenceInMonth = new Array( 
    1272060, 1275495, 1281180, 1289445, 1299225, 1310355, 
    1321560, 1333035, 1342770, 1350855, 1356420, 1359045, 
    1358580, 1355055, 1348695, 1340040, 1329630, 1318455, 
    1306935, 1297380, 1286865, 1277730, 1274550, 1271556); 
  var DifferenceInYear = 31556926; 
  var BeginTime = new Date(1901 / 1 / 1); 
  BeginTime.setTime(947120460000); 
  for (; DateGL.getFullYear() < BeginTime.getFullYear();) { 
    BeginTime.setTime(BeginTime.getTime() - DifferenceInYear * 1000); 
  } 
  for (; DateGL.getFullYear() > BeginTime.getFullYear();) { 
    BeginTime.setTime(BeginTime.getTime() + DifferenceInYear * 1000); 
  } 
  for (var M = 0; DateGL.getMonth() > BeginTime.getMonth(); M++) { 
    BeginTime.setTime(BeginTime.getTime() + DifferenceInMonth[M] * 1000); 
  } 
  if (DateGL.getDate() > BeginTime.getDate()) { 
    BeginTime.setTime(BeginTime.getTime() + DifferenceInMonth[M] * 1000); 
    M++; 
  } 
  if (DateGL.getDate() > BeginTime.getDate()) { 
    BeginTime.setTime(BeginTime.getTime() + DifferenceInMonth[M] * 1000); 
    M == 23 ? M = 0 : M++; 
  } 
  var JQ = ""; 
  if (DateGL.getDate() == BeginTime.getDate()) { 
    JQ += SolarTermStr[M]; 
  } 
  return JQ; 
}

将以上代码直接复制粘贴到从官网下载的fullcalendar.js的最后。然后关键的是我们要对fullcalendar.js原有的代码中程序日历天数的代码段做修改。

大概在第2385行开始,其中的if语句中的部分修改为以下代码

if (showNumbers) {//月视图天数数字显示 
  var cnMonth = CnMonthofDate(date);//农历月 
  var cnDay = CnDayofDate(date);//农历日 
  var solar = SolarTerm(date);//农历节气 
  if(solar!='') cnDay=solar; 
  var cnMonDay = cnMonth+cnDay; 
 
  var holiday = ''; 
  if(cnDay=='正月') 
    holiday = '春节'; 
  switch(cnMonDay){ 
    case '正月初一': holiday = '春节';break; 
    case '正月十五': holiday = '元宵';break; 
    case '五月初五': holiday = '端午';break; 
    case '八月十五': holiday = '中秋';break; 
    case '九月初九': holiday = '重阳';break; 
    case '腊月三十': holiday = '除夕';break; 
  } 
       
  html += "<div class='fc-day-number'><span class='solarday'>"+ cnDay+"</span> 
  <span class='holiday'>"+holiday+"</span>" + date.getDate() + "</div>"; 
}

以上代码中,调用了农历算法,计算出日历中对应的农历日期包括节气,在这里我们还做了特殊节日的处理,比如春节、端午、中秋等,然后我们要将农历与公历以及特殊节日同时显示在fullcalendar中,这时就要修改css来控制使得公历日期显示在左上,农历显示在右上,特殊节日显示在中间。

.fc-grid .fc-day-number{padding: 0 2px; position:relative} 
.fc-grid .fc-day-number span.solarday{float:right;color:#999}   
.fc-grid .fc-day-number span.holiday{position:absolute; left:40%}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ejs v9 javascript模板系统
Mar 21 Javascript
JS实现简单的键盘打字的效果
Apr 24 Javascript
Underscore.js 1.3.3 中文注释翻译说明
Jun 25 Javascript
深入理解vue路由的使用
Mar 24 Javascript
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
AngularJS自定义表单验证功能实例详解
Aug 24 Javascript
如何使用pm2快速将项目部署到远程服务器
Mar 12 Javascript
JavaScript实现页面中录音功能的方法
Jun 04 Javascript
vue 自动化路由实现代码
Sep 03 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
Oct 27 Javascript
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
教你使用vscode 搭建react-native开发环境
Jul 07 Javascript
基于jquery二维码生成插件qrcode
Jan 07 #Javascript
jquery validation验证表单插件
Jan 07 #Javascript
JQuery ZTree使用方法详解
Jan 07 #Javascript
jquery实现转盘抽奖功能
Jan 06 #Javascript
BootStrap3中模态对话框的使用
Jan 06 #Javascript
如何制作幻灯片(代码分享)
Jan 06 #Javascript
微信小程序 支付简单实例及注意事项
Jan 06 #Javascript
You might like
php开发工具之vs2005图解
2008/01/12 PHP
php获取textarea的值并处理回车换行的方法
2014/10/20 PHP
php ajax异步读取rss文档数据
2016/03/29 PHP
jQuery$命名冲突怎么办如何解决
2014/01/16 Javascript
Windows8下搭建Node.js开发环境教程
2014/09/03 Javascript
window.location.reload 刷新使用分析(去对话框)
2015/11/11 Javascript
原生js实现键盘控制div移动且解决停顿问题
2016/12/05 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
2016/12/22 Javascript
详解nodeJS之路径PATH模块
2017/05/31 NodeJs
js与jQuery实现获取table中的数据并拼成json字符串操作示例
2018/07/12 jQuery
手把手15分钟搭一个企业级脚手架
2019/09/16 Javascript
使用vue制作滑动标签
2019/09/21 Javascript
[01:32]完美世界DOTA2联赛10月29日精彩集锦
2020/10/30 DOTA
常用python数据类型转换函数总结
2014/03/11 Python
Django的URLconf中使用缺省视图参数的方法
2015/07/18 Python
win10环境下python3.5安装步骤图文教程
2017/02/03 Python
Mac中升级Python2.7到Python3.5步骤详解
2017/04/27 Python
Python实现的堆排序算法原理与用法实例分析
2017/11/22 Python
python打包exe开机自动启动的实例(windows)
2019/06/28 Python
Python特殊属性property原理及使用方法解析
2020/10/09 Python
用Python实现职工信息管理系统
2020/12/30 Python
html5 兼容IE6结构的实现代码
2012/05/14 HTML / CSS
什么叫做SQL注入,如何防止
2016/10/04 面试题
星空联盟C# .net笔试题
2014/12/05 面试题
商业活动邀请函
2014/02/04 职场文书
元旦文艺汇演主持词
2014/03/26 职场文书
医生党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
会议接待欢迎标语
2014/10/08 职场文书
顶岗实习协议书
2015/01/29 职场文书
用基于python的appium爬取b站直播消费记录
2021/04/17 Python
python数据分析之用sklearn预测糖尿病
2021/04/22 Python
MySQL数据库压缩版本安装与配置详细教程
2021/05/21 MySQL
.Net Core导入千万级数据至Mysql的步骤
2021/05/24 MySQL
Java实现斗地主之洗牌发牌
2021/06/14 Java/Android
JavaScript实现外溢动态爱心的效果的示例代码
2022/03/21 Javascript
vue+elementUI实现表格列的显示与隐藏
2022/04/13 Vue.js