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 相关文章推荐
JS array 数组详解
Mar 22 Javascript
菜鸟javascript基础资料整理3 正则
Dec 06 Javascript
基于JQuery实现异步刷新的代码(转载)
Mar 29 Javascript
在父页面调用子页面的JS方法
Sep 29 Javascript
JQuery EasyUI 数字格式化处理示例
May 05 Javascript
一个简单的jQuery计算器实现了连续计算功能
Jul 21 Javascript
JavaScript中的数组操作介绍
Dec 30 Javascript
使用js画图之正弦曲线
Jan 12 Javascript
基于ES6 Array.of的用法(实例讲解)
Sep 05 Javascript
Vue中使用vue-i18插件实现多语言切换功能
Apr 25 Javascript
jQuery实现表单动态添加数据并提交的方法
Jul 19 jQuery
JavaScript根据json生成html表格的示例代码
Oct 24 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
索尼SONY ICF-7600A(W)电路分析
2021/03/01 无线电
PHP文本操作类
2006/11/25 PHP
php购物车实现代码
2011/10/10 PHP
php获取文件内容最后一行示例
2014/01/09 PHP
PHP 实现的将图片转换为TXT
2015/10/21 PHP
PHP读书笔记_运算符详解
2016/07/01 PHP
PHP chop()函数讲解
2019/02/11 PHP
表单填写时用回车代替TAB的实现方法
2007/10/09 Javascript
谷歌地图打不开的解决办法
2014/08/07 Javascript
探讨js字符串数组拼接的性能问题
2014/10/11 Javascript
浅谈javascript属性onresize
2015/04/20 Javascript
招聘网站基于jQuery实现自动刷新简历
2015/05/10 Javascript
总结Node.js中的一些错误类型
2016/08/15 Javascript
js 判断登录界面的账号密码是否为空
2017/02/08 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
2017/02/14 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
2017/02/22 Javascript
详解js跨域请求的两种方式,支持post请求
2018/05/05 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
2018/08/16 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
2018/12/13 Javascript
Vue-CLI与Vuex使用方法实例分析
2020/01/06 Javascript
node.js通过url读取文件
2020/10/16 Javascript
vue+vant实现购物车全选和反选功能
2020/11/17 Vue.js
用Python中的字典来处理索引统计的方法
2015/05/05 Python
python 的列表遍历删除实现代码
2020/04/12 Python
利用Python实现网络测试的脚本分享
2017/05/26 Python
python Pygame的具体使用讲解
2017/11/03 Python
pyspark 读取csv文件创建DataFrame的两种方法
2018/06/07 Python
python 实现批量xls文件转csv文件的方法
2018/10/23 Python
浅谈html5 video 移动端填坑记
2018/01/15 HTML / CSS
HTML5自定义mp3播放器源码
2020/01/06 HTML / CSS
Europcar葡萄牙:葡萄牙汽车和货车租赁
2017/10/13 全球购物
添柏岚英国官方网站:Timberland英国
2019/11/28 全球购物
C#实现启动一个进程
2016/10/01 面试题
语文教学随笔感言
2014/02/18 职场文书
毕业晚会主持词
2014/03/24 职场文书
python中tkinter复选框使用操作
2021/11/11 Python