jQuery日程管理插件fullcalendar使用詳解
更新時(shí)間：2017年01月07日 10:57:57 作者：小熊吉米
這篇文章主要介紹了jQuery日程管理插件fullcalendar使用方法，整合農(nóng)歷節(jié)氣和節(jié)日，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
FullCalendar用來做日程管理功能非常強(qiáng)大，但是唯一不足的地方是沒有將中國(guó)農(nóng)歷歷法加進(jìn)去，今天我將結(jié)合實(shí)例和大家分享如何將中國(guó)農(nóng)歷中的節(jié)氣和節(jié)日整合到FullCalendar中，從而增強(qiáng)其實(shí)用性。
HTML
首先是要載入jQuery庫(kù)和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，這個(gè)PHP文件負(fù)責(zé)讀取數(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ù)源
});
});
以上代碼就可以展示一個(gè)日歷界面，但是需要加入農(nóng)歷，則需要將農(nóng)歷算法代碼整合到fullCalendar中，并且需要將fullCalendar.js中的代碼稍微改動(dòng)下，以下是網(wǎng)友@太空飛豬以及/可愛/玫瑰提供的中國(guó)農(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 " 請(qǐng)調(diào)整您的計(jì)算機(jī)日期!";
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;
}
將以上代碼直接復(fù)制粘貼到從官網(wǎng)下載的fullcalendar.js的最后。然后關(guān)鍵的是我們要對(duì)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)歷算法，計(jì)算出日歷中對(duì)應(yīng)的農(nóng)歷日期包括節(jié)氣，在這里我們還做了特殊節(jié)日的處理，比如春節(jié)、端午、中秋等，然后我們要將農(nóng)歷與公歷以及特殊節(jié)日同時(shí)顯示在fullcalendar中，這時(shí)就要修改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%}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- jquery UI Datepicker時(shí)間控件沖突問題解決
- jquery UI Datepicker時(shí)間控件的使用及問題解決
- jquery UI Datepicker時(shí)間控件的使用方法（終結(jié)版）
- jquery UI Datepicker時(shí)間控件的使用方法（加強(qiáng)版）
- jquery UI Datepicker時(shí)間控件的使用方法（基礎(chǔ)版）
- jquery 日期控件datepicker屬性詳細(xì)解析
- datePicker——日期選擇控件（with jquery）
- 基于jQuery的日期選擇控件
- JQuery EasyUI 日期控件如何控制日期選擇區(qū)間
- jQuery日程管理控件glDatePicker用法詳解
相關(guān)文章
ligerUI的ligerDialog關(guān)閉刷新的方法
今天小編就為大家分享一篇ligerUI的ligerDialog關(guān)閉刷新的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
jquery 單行滾動(dòng)、批量多行滾動(dòng)、文字圖片翻屏滾動(dòng)效果代碼
jquery單行滾動(dòng)、批量多行滾動(dòng)、文字圖片翻屏滾動(dòng)效果代碼，需要的朋友可以參考下。2010-05-05
jQuery 全選 全不選 事件綁定的實(shí)現(xiàn)代碼
本文給大家分享一段代碼基于jQuery 全選 全不選 事件綁定的實(shí)現(xiàn)方法，代碼簡(jiǎn)單易懂，非常不錯(cuò)，需要的朋友參考下2017-01-01
這篇文章主要為大家詳細(xì)介紹了jQuery層級(jí)選擇器實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
本文將為大家介紹下jQuery模擬超鏈接點(diǎn)擊效果實(shí)現(xiàn)，感興趣的朋友可以參考下哈，希望對(duì)你有所幫助2013-04-04
jQuery1.6 使用方法，需要的朋友可以參考下。2011-11-11
基于jquery實(shí)現(xiàn)百度新聞導(dǎo)航菜單滑動(dòng)動(dòng)畫
這篇文章主要介紹了基于jquery實(shí)現(xiàn)百度新聞導(dǎo)航菜單滑動(dòng)動(dòng)畫,感興趣的小伙伴們可以參考一下2016-03-03
jQuery插件echarts實(shí)現(xiàn)的多折線圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件echarts實(shí)現(xiàn)的多折線圖效果,結(jié)合完整實(shí)例形式分析了echarts插件繪制多折線圖效果的具體步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
這篇文章主要介紹了jQuery事件委托代碼實(shí)踐詳解， 事件委托是利用事件冒泡，只指定一個(gè)事件處理程序來管理某一類型的所有事件。,需要的朋友可以參考下2019-06-06
下面小編就為大家?guī)硪黄钊肜斫鈐Query事件綁定。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06