jQuery日程管理插件fullcalendar使用詳解
FullCalendar用來做日程管理功能非常強大,但是唯一不足的地方是沒有將中國農(nóng)歷歷法加進去,今天我將結(jié)合實例和大家分享如何將中國農(nóng)歷中的節(jié)氣和節(jié)日整合到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調(diào)用fullcalendar插件,方法如下,值得一提的是events數(shù)據(jù)源來自json.php,這個PHP文件負責讀取數(shù)據(jù)并返回json格式的日程安排數(shù)據(jù)給前端。
$(function() { $('#calendar').fullCalendar({ header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' }, selectable: true, events: 'json.php' //數(shù)據(jù)源 }); });
以上代碼就可以展示一個日歷界面,但是需要加入農(nóng)歷,則需要將農(nóng)歷算法代碼整合到fullCalendar中,并且需要將fullCalendar.js中的代碼稍微改動下,以下是網(wǎng)友@太空飛豬以及/可愛/玫瑰提供的中國農(nóng)歷算法javascript版,再此一并感謝!
function RunGLNL() { var today = new Date(); var d = new Array("周日", "周一", "周二", "周三", "周四", "周五", "周六"); var DDDD = d[today.getDay()]; DDDD = DDDD + " " + (CnDateofDateStr(today)); //顯示農(nóng)歷 DDDD = DDDD + SolarTerm(today); //顯示二十四節(jié)氣 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 " 請調(diào)整您的計算機日期!"; else return "農(nóng)歷" + 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; }
將以上代碼直接復制粘貼到從官網(wǎng)下載的fullcalendar.js的最后。然后關(guān)鍵的是我們要對fullcalendar.js原有的代碼中程序日歷天數(shù)的代碼段做修改。
大概在第2385行開始,其中的if語句中的部分修改為以下代碼
if (showNumbers) {//月視圖天數(shù)數(shù)字顯示 var cnMonth = CnMonthofDate(date);//農(nóng)歷月 var cnDay = CnDayofDate(date);//農(nóng)歷日 var solar = SolarTerm(date);//農(nóng)歷節(jié)氣 if(solar!='') cnDay=solar; var cnMonDay = cnMonth+cnDay; var holiday = ''; if(cnDay=='正月') holiday = '春節(jié)'; switch(cnMonDay){ case '正月初一': holiday = '春節(jié)';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>"; }
以上代碼中,調(diào)用了農(nóng)歷算法,計算出日歷中對應的農(nóng)歷日期包括節(jié)氣,在這里我們還做了特殊節(jié)日的處理,比如春節(jié)、端午、中秋等,然后我們要將農(nóng)歷與公歷以及特殊節(jié)日同時顯示在fullcalendar中,這時就要修改css來控制使得公歷日期顯示在左上,農(nóng)歷顯示在右上,特殊節(jié)日顯示在中間。
.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%}
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
- jquery UI Datepicker時間控件沖突問題解決
- jquery UI Datepicker時間控件的使用及問題解決
- jquery UI Datepicker時間控件的使用方法(終結(jié)版)
- jquery UI Datepicker時間控件的使用方法(加強版)
- jquery UI Datepicker時間控件的使用方法(基礎版)
- jquery 日期控件datepicker屬性詳細解析
- datePicker——日期選擇控件(with jquery)
- 基于jQuery的日期選擇控件
- JQuery EasyUI 日期控件如何控制日期選擇區(qū)間
- jQuery日程管理控件glDatePicker用法詳解
相關(guān)文章
jquery地址欄鏈接與a標簽鏈接匹配之特效代碼總結(jié)
jquery如何獲取地址欄參數(shù),改變地址欄樣式,接下來,通過本篇文章給大家分享jquery地址欄鏈接與a標簽鏈接匹配之特效代碼總結(jié),需要的朋友可以參考下2015-08-08jQuery 綁定事件到動態(tài)創(chuàng)建的元素上的方法實例
這篇文章介紹了jQuery 綁定事件到動態(tài)創(chuàng)建的元素上的方法實例,有需要的朋友可以參考一下2013-08-08