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

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 > 2025)) { 
    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%} 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# jQuery  # fullcalendar  # jquery UI Datepicker时间控件冲突问题解决  # jquery UI Datepicker时间控件的使用及问题解决  # jquery UI Datepicker时间控件的使用方法（终结版）  # jquery UI Datepicker时间控件的使用方法（加强版）  # jquery UI Datepicker时间控件的使用方法（基础版）  # jquery 日期控件datepicker属性详细解析  # datePicker——日期选择控件（with jquery）  # 基于jQuery的日期选择控件  # JQuery EasyUI 日期控件如何控制日期选择区间  # jQuery日程管理控件glDatePicker用法详解  # 的是  # 中国  # 春节  # 要将  # 端午  # 月初  # 中秋  # 处暑  # 小暑  # 您的  # 芒种  # 大暑  # 寒露  # 在这里  # 霜降  # 小满  # 大寒  # 秋分  # 立冬  # 立夏 

相关文章： c++23 std::expected怎么用 c++优雅处理函数错误返回【详解】  建站主机无法访问？如何排查域名与服务器问题  建站之星2.7模板快速切换与批量管理功能操作指南  微信h5制作网站有哪些,免费微信H5页面制作工具？  PHP 500报错的快速解决方法  南京网站制作费用,南京远驱官方网站？  建站IDE高效指南：快速搭建+SEO优化+自适应模板全解析  惠州网站建设制作推广,惠州市华视达文化传媒有限公司怎么样？  利用JavaScript实现拖拽改变元素大小  ,石家庄四十八中学官网？  网站制作需要会哪些技术,建立一个网站要花费多少？  如何零基础在云服务器搭建WordPress站点？  如何通过FTP空间快速搭建安全高效网站？  桂林网站制作公司有哪些,桂林马拉松怎么报名？  网站制作免费,什么网站能看正片电影？  网站制作说明怎么写,简述网页设计的流程并说明原因？  盐城做公司网站,江苏电子版退休证办理流程？  建站VPS推荐：2025年高性能服务器配置指南  建站主机选购指南与交易推荐：核心配置解析  大型企业网站制作流程,做网站需要注册公司吗？  linux top下的 minerd 木马清除方法  官网自助建站平台指南：在线制作、快速建站与模板选择全解析  专业企业网站设计制作公司,如何理解商贸企业的统一配送和分销网络建设？  平台云上自助建站如何快速打造专业网站？  济南专业网站制作公司,济南信息工程学校怎么样？  如何选择适合PHP云建站的开源框架？  如何通过VPS建站无需域名直接访问？  表情包在线制作网站免费,表情包怎么弄？  常州企业建站如何选择最佳模板？  建站之星Pro快速搭建教程：模板选择与功能配置指南  如何通过商城免费建站系统源码自定义网站主题？  建站之星展会模板：智能建站与自助搭建高效解决方案  IOS倒计时设置UIButton标题title的抖动问题  定制建站策划方案_专业建站与网站建设方案一站式指南  韩国网站服务器搭建指南：VPS选购、域名解析与DNS配置推荐  建站之星如何通过成品分离优化网站效率？  电商网站制作多少钱一个,电子商务公司的网站制作费用计入什么科目？  如何在景安云服务器上绑定域名并配置虚拟主机？  合肥做个网站多少钱,合肥本地有没有比较靠谱的交友平台？  武清网站制作公司,天津武清个人营业执照注销查询系统网站？  郑州企业网站制作公司,郑州招聘网站有哪些？  网站建设设计制作营销公司南阳,如何策划设计和建设网站？  官网建站费用明细查询_企业建站套餐价格及收费标准指南  南京做网站制作公司,南京哈发网络有限公司，公司怎么样，做网页美工DIV+CSS待遇怎么样？  宝塔建站助手安装配置与建站模板使用全流程解析  如何通过虚拟主机快速完成网站搭建？  广州网站设计制作一条龙,广州巨网网络科技有限公司是干什么的？  道歉网站制作流程,世纪佳缘致歉小吴事件，相亲网站身份信息伪造该如何稽查？  制作网站的基本流程,设计网站的软件是什么？  专业公司网站制作公司,用什么语言做企业网站比较好？