jQuery日程管理插件fullcalendar使用详解
FullCalendar用来做日程管理功能非常强大，但是唯一不足的地方是没有将中国农历历法加进去，今天我将结合实例和大家分享如何将中国农历中的节气和节日整合到FullCalendar中，从而增强其实用性。
HTML
首先是要载入jQuery库和fullcalendar插件。
<scriptsrc='js/jquery-1.9.1.min.js'></script> <scriptsrc='js/fullcalendar.min.js'></script>
然后在body中，建立日历容器div#calendar。
<divid="calendar"></div>
jQuery
使用jQuery调用fullcalendar插件，方法如下，值得一提的是events数据源来自json.php，这个PHP文件负责读取数据并返回json格式的日程安排数据给前端。
$(function(){
$('#calendar').fullCalendar({
header:{
left:'prev,nexttoday',
center:'title',
right:'month,agendaWeek,agendaDay'
},
selectable:true,
events:'json.php'//数据源
});
});
以上代码就可以展示一个日历界面，但是需要加入农历，则需要将农历算法代码整合到fullCalendar中，并且需要将fullCalendar.js中的代码稍微改动下，以下是网友@太空飛豬以及/可爱/玫瑰提供的中国农历算法javascript版，再此一并感谢！
functionRunGLNL(){
vartoday=newDate();
vard=newArray("周日","周一","周二","周三","周四","周五","周六");
varDDDD=d[today.getDay()];
DDDD=DDDD+""+(CnDateofDateStr(today));//显示农历
DDDD=DDDD+SolarTerm(today);//显示二十四节气
document.write(DDDD);
}
functionDaysNumberofDate(DateGL){
returnparseInt((Date.parse(DateGL)-Date.parse(DateGL.getFullYear()+"/1/1"))/86400000)+1;
}
functionCnDateofDate(DateGL){
varCnData=newArray(
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
);
varCnMonth=newArray();
varCnMonthDays=newArray();
varCnBeginDay;
varLeapMonth;
varBytes=newArray();
varI;
varCnMonthData;
varDaysCount;
varCnDaysCount;
varResultMonth;
varResultDay;
varyyyy=DateGL.getFullYear();
varmm=DateGL.getMonth()+1;
vardd=DateGL.getDate();
if(yyyy<100)yyyy+=1900;
if((yyyy<1997)||(yyyy>2020)){
return0;
}
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(newDate((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){
returnResultMonth*100+ResultDay;
}
else{
returnResultMonth*100-ResultDay;
}
}
functionCnYearofDate(DateGL){
varYYYY=DateGL.getFullYear();
varMM=DateGL.getMonth()+1;
varCnMM=parseInt(Math.abs(CnDateofDate(DateGL))/100);
if(YYYY<100)YYYY+=1900;
if(CnMM>MM)YYYY--;
YYYY-=1864;
returnCnEra(YYYY)+"年";
}
functionCnMonthofDate(DateGL){
varCnMonthStr=newArray("零","正","二","三","四","五","六","七","八","九","十","冬","腊");
varMonth;
Month=parseInt(CnDateofDate(DateGL)/100);
if(Month<0){
return"闰"+CnMonthStr[-Month]+"月";
}
else{
returnCnMonthStr[Month]+"月";
}
}
functionCnDayofDate(DateGL){
varCnDayStr=newArray("零",
"初一","初二","初三","初四","初五",
"初六","初七","初八","初九","初十",
"十一","十二","十三","十四","十五",
"十六","十七","十八","十九","二十",
"廿一","廿二","廿三","廿四","廿五",
"廿六","廿七","廿八","廿九","三十");
varDay;
Day=(Math.abs(CnDateofDate(DateGL)))%100;
//hanlichenmod
if("初一"==CnDayStr[Day]){
//alert(SolarTerm(DateGL));
returnCnMonthofDate(DateGL);
}else{
if(SolarTerm(DateGL)!=""){
returnSolarTerm(DateGL);
}else{
returnCnDayStr[Day];
}
}
}
functionDaysNumberofMonth(DateGL){
varMM1=DateGL.getFullYear();
MM1<100?MM1+=1900:MM1;
varMM2=MM1;
MM1+="/"+(DateGL.getMonth()+1);
MM2+="/"+(DateGL.getMonth()+2);
MM1+="/1";
MM2+="/1";
returnparseInt((Date.parse(MM2)-Date.parse(MM1))/86400000);
}
functionCnEra(YYYY){
varTiangan=newArray("甲","乙","丙","丁","戊","己","庚","辛","壬","癸");
varDizhi=newArray("子","丑","寅","卯","辰","巳","午","未","申","酉","戌","亥");
returnTiangan[YYYY%10]+Dizhi[YYYY%12];
}
functionCnDateofDateStr(DateGL){
if(CnMonthofDate(DateGL)=="零月")return"请调整您的计算机日期!";
elsereturn"农历"+CnYearofDate(DateGL)+""+CnMonthofDate(DateGL)+CnDayofDate(DateGL);
}
functionSolarTerm(DateGL){
varSolarTermStr=newArray(
"小寒","大寒","立春","雨水","惊蛰","春分",
"清明","谷雨","立夏","小满","芒种","夏至",
"小暑","大暑","立秋","处暑","白露","秋分",
"寒露","霜降","立冬","小雪","大雪","冬至");
varDifferenceInMonth=newArray(
1272060,1275495,1281180,1289445,1299225,1310355,
1321560,1333035,1342770,1350855,1356420,1359045,
1358580,1355055,1348695,1340040,1329630,1318455,
1306935,1297380,1286865,1277730,1274550,1271556);
varDifferenceInYear=31556926;
varBeginTime=newDate(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(varM=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++;
}
varJQ="";
if(DateGL.getDate()==BeginTime.getDate()){
JQ+=SolarTermStr[M];
}
returnJQ;
}
将以上代码直接复制粘贴到从官网下载的fullcalendar.js的最后。然后关键的是我们要对fullcalendar.js原有的代码中程序日历天数的代码段做修改。
大概在第2385行开始，其中的if语句中的部分修改为以下代码
if(showNumbers){//月视图天数数字显示
varcnMonth=CnMonthofDate(date);//农历月
varcnDay=CnDayofDate(date);//农历日
varsolar=SolarTerm(date);//农历节气
if(solar!='')cnDay=solar;
varcnMonDay=cnMonth+cnDay;
varholiday='';
if(cnDay=='正月')
holiday='春节';
switch(cnMonDay){
case'正月初一':holiday='春节';break;
case'正月十五':holiday='元宵';break;
case'五月初五':holiday='端午';break;
case'八月十五':holiday='中秋';break;
case'九月初九':holiday='重阳';break;
case'腊月三十':holiday='除夕';break;
}
html+="<divclass='fc-day-number'><spanclass='solarday'>"+cnDay+"</span>
<spanclass='holiday'>"+holiday+"</span>"+date.getDate()+"</div>";
}
以上代码中，调用了农历算法，计算出日历中对应的农历日期包括节气，在这里我们还做了特殊节日的处理，比如春节、端午、中秋等，然后我们要将农历与公历以及特殊节日同时显示在fullcalendar中，这时就要修改css来控制使得公历日期显示在左上，农历显示在右上，特殊节日显示在中间。
.fc-grid.fc-day-number{padding:02px;position:relative}
.fc-grid.fc-day-numberspan.solarday{float:right;color:#999}
.fc-grid.fc-day-numberspan.holiday{position:absolute;left:40%}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。