FullCalendar用来做日程管理功能非常强大,但是唯一不足的地方是没有将中国农历历法加进去,今天我将结合实例和大家分享如何将中国农历中的节气和节日整合到FullCalendar中,从而增强其实用性。
首先是要载入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("零",
"初一","初二","初三",