FullCalendar应用——整合农历节气和节日

摘要:
FullCalendar用来做日程管理功能非常强大,但是唯一不足的地方是没有将中国农历历法加进去,今天我将结合实例和大家分享如何将中国农历中的节气和节日整合到FullCalendar中,从而增强其实用性。HTML首先是要载入jQuery库和fullcalendar插件。jQuery使用jQuery调用fullcalendar插件,方法如下,值得一提的是events数据源来自json.php,这个PHP文件负责读取数据并返回json格式的日程安排数据给前端。

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("零",
"初一","初二","初三",

免责声明:内容来源于网络,仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇实操 | Airtest测试微信小程序linux shell脚本神一般的测试案例下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

jquery日历插件FullCalendar使用技巧

原文链接:http://blog.csdn.net/u013493957/article/details/44920341 FullCalendar是一款基于jquery的日历控件,它有着很强大的功能,下面我来给大家介绍一下FullCalendar使用技巧吧,希望此方法对各位有帮助呀。 简介 官方网站:http://arshaw.com/fullcale...

fullcalendar日历控件知识点集合

1、基本的语法: 首先,fullcalendar和JQUERY一样,以面向对象的方式来组织代码。当然,这里的面向对象不过指能够把整个fullcalendar理解为一个类,这个类里包含有非常多的属性、方法、托付(函数回调)作为成员变量。通过为这些成员变量赋值,就可以实例化出一个符合自己需求的fullcalendar实例出来,即终于在浏览器里渲染出的日历。换...

FullCalendar日历插件说明文档

FullCalendar提供了丰富的属性设置和方法调用,开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发,本文将FullCalendar的常用属性和方法、回调函数等整理成中文文档,以供参阅。当前版本1.6.4。 普通显示设置 属性 描述 默认值 header 设置日历头部信息。如果设置为false,则不显示头部信息。包...

FullCalendar日历控件使用小结

FullCalendar作为一个功能完善的日历插件使用非常广泛,在WEB开发过程中非常流行。它与EXT JS中的Calendar非常类似,但考虑到EXTjs比较“复杂庞大”,所以我在开发过程中都会优先考虑FullCalendar。 FullCalendar的使用比较简单,上手很快。我这里简单向大家介绍一下它的基本用法,如果需要更加深入的学习或者改写该日历,...