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 相关文章推荐
飞鱼(shqlsl) javascript作品集
Dec 16 Javascript
ext for eclipse插件安装方法
Apr 27 Javascript
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
Dec 13 Javascript
基于jquery实现的文字淡入淡出效果
Nov 14 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
Feb 27 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
Mar 12 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
Jan 26 Javascript
js基于setTimeout与setInterval实现多线程
Jun 17 Javascript
微信小程序封装http访问网络库实例代码
May 24 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
如何解决React官方脚手架不支持Less的问题(小结)
Sep 12 Javascript
javascript实现随机抽奖功能
Dec 30 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(视频)Http下载
2006/12/12 PHP
PHP的foreach中使用引用时需要注意的一个问题和解决方法
2014/05/29 PHP
PHP数组排序之sort、asort与ksort用法实例
2014/09/08 PHP
php+mysql数据库实现无限分类的方法
2014/12/12 PHP
PHP中的socket_read和socket_recv区别详解
2015/02/09 PHP
讲解WordPress开发中一些常用的debug技巧
2015/12/18 PHP
Laravel 读取 config 下的数据方法
2019/10/13 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
PHP实现随机发放扑克牌
2020/04/21 PHP
JavaScript Cookie的读取和写入函数
2009/12/08 Javascript
jqTransform form表单美化插件使用方法
2012/07/05 Javascript
JS简单实现元素复制示例附图
2013/11/19 Javascript
JavaScript 基本概念
2015/01/20 Javascript
javascript清空table表格的方法
2015/05/14 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
2015/11/24 Javascript
Bootstrap table两种分页示例
2016/12/23 Javascript
Node.js学习入门
2017/01/03 Javascript
jQuery实现元素的插入
2017/02/27 Javascript
React-router v4 路由配置方法小结
2017/08/08 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
2018/03/09 Javascript
Vue路由history模式解决404问题的几种方法
2018/09/29 Javascript
Node使用Nodemailer发送邮件的方法实现
2020/02/24 Javascript
基于Python os模块常用命令介绍
2017/11/03 Python
Python统计单词出现的次数
2018/04/04 Python
Django如何自定义分页
2018/09/25 Python
利用python实现逐步回归
2020/02/24 Python
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
2018/11/30 HTML / CSS
html5如何及时更新缓存文件(js、css或图片)
2013/06/24 HTML / CSS
初中生物教学反思
2014/01/10 职场文书
医学专业应届生的自我评价
2014/02/28 职场文书
个人查摆问题及整改措施
2014/10/16 职场文书
玩手机检讨书1000字
2014/10/20 职场文书
2015年车间主任工作总结
2015/05/21 职场文书
单位收入证明范本
2015/06/18 职场文书
关于springboot配置druid数据源不生效问题(踩坑记)
2021/09/25 Java/Android
解决linux下redis数据库overcommit_memory问题
2022/02/24 Redis