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 相关文章推荐
ExtJs中简单的登录界面制作方法
Aug 19 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
Sep 18 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
Feb 21 Javascript
前端自动化开发之Node.js的环境搭建教程
Apr 01 Javascript
Vue中对比scoped css和css module的区别
May 17 Javascript
Javascript获取某个月的天数
May 30 Javascript
解决vue.js this.$router.push无效的问题
Sep 03 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
Oct 29 Javascript
JavaScript多种页面刷新方法小结
Apr 04 Javascript
VUE解决 v-html不能触发点击事件的问题
Oct 28 Javascript
如何基于原生javaScript生成带图片的二维码
Nov 21 Javascript
antd多选下拉框一行展示的实现方式
Oct 31 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 str_pad 函数使用详解
2009/01/13 PHP
PHP中执行cmd命令的方法
2014/10/11 PHP
PHP通过串口实现发送短信
2015/07/08 PHP
WordPress中用于更新伪静态规则的PHP代码实例讲解
2015/12/18 PHP
PHP和MySql中32位和64位的整形范围是多少
2016/02/18 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
表单的一些基本用法与技巧
2006/07/15 Javascript
当json键为数字时的取值方法解析
2013/11/15 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
2014/08/01 Javascript
jQuery中:animated选择器用法实例
2014/12/29 Javascript
Bootstrap面板使用方法
2017/01/16 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
2018/03/12 Javascript
JS关于刷新页面的相关总结
2018/05/09 Javascript
node中的密码安全(加密)
2018/09/17 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
2019/05/09 Javascript
vue组件间通信六种方式(总结篇)
2019/05/15 Javascript
Vue路由前后端设计总结
2019/08/06 Javascript
jQuery zTree插件使用简单教程
2019/08/16 jQuery
[04:45]DOTA2-DPC中国联赛正赛 iG vs LBZS 赛后选手采访
2021/03/11 DOTA
用Python将mysql数据导出成json的方法
2018/08/21 Python
Python PIL读取的图像发生自动旋转的实现方法
2019/07/05 Python
python实现连连看辅助之图像识别延伸
2019/07/17 Python
python实现ip地址查询经纬度定位详解
2019/08/30 Python
Python对Excel按列值筛选并拆分表格到多个文件的代码
2019/11/05 Python
VSCode中自动为Python文件添加头部注释
2019/11/14 Python
tensorflow使用freeze_graph.py将ckpt转为pb文件的方法
2020/04/22 Python
浅析HTML5:'data-'属性的作用
2018/01/23 HTML / CSS
英国在线定做百叶窗网站:Make My Blinds
2020/08/17 全球购物
《春雨》教学反思
2014/04/24 职场文书
给校长的建议书100字
2014/05/16 职场文书
通信工程专业求职信
2014/06/04 职场文书
代领学位证书毕业证书委托书
2014/09/30 职场文书
政府会议通知范文
2015/04/15 职场文书
Python OpenCV实现传统图片格式与base64转换
2021/06/13 Python
详解Android中的TimePickerView(时间选择器)的用法
2022/04/30 Java/Android
SQL Server中搜索特定的对象
2022/05/25 SQL Server