jQuery日程管理插件fullcalendar使用详解
网络编程 2021-07-04 19:20www.168986.cn编程入门
这篇文章主要介绍了jQuery日程管理插件fullcalendar使用方法，整合农历节气和节日，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
FullCalendar用来做日程管理功能非常强大，唯一不足的地方是没有将中国农历历法加进去，今天我将结合实例和大家分享如何将中国农历中的节气和节日整合到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调用fullcalendar插件，方法如下，值得一提的是events数据源来自json.php，这个PHP文件负责读取数据并返回json格式的日程安排数据给前端。
$(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
selectable: true,
events: 'json.php' //数据源
});
});
以上代码就可以展示一个日历界面，需要加入农历，则需要将农历算法代码整合到fullCalendar中，并且需要将fullCalendar.js中的代码稍微改动下，以下是网友@太空飛豬以及/可爱/玫瑰提供的中国农历算法javascript版，再此一并感谢！
function RunGLNL() {
var today = new Date();
var d = new Array("周日", "周一", "周二", "周三", "周四", "周五", "周六");
var DDDD = d[today.getDay()];
DDDD = DDDD + " " + (CnDateofDateStr(today)); //显示农历
DDDD = DDDD + SolarTerm(today); //显示二十四节气
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 " 请调整您的计算机日期!";
else return "农历" + 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;
}
将以上代码直接复制粘贴到从官网下载的fullcalendar.js的。然后关键的是我们要对fullcalendar.js原有的代码中程序日历天数的代码段做修改。
大概在第2385行开始，其中的if语句中的部分修改为以下代码
if (showNumbers) {//月视图天数数字显示
var Month = CnMonthofDate(date);//农历月
var Day = CnDayofDate(date);//农历日
var solar = SolarTerm(date);//农历节气
if(solar!='') Day=solar;
var MonDay = Month+Day;
var holiday = '';
if(Day=='正月')
holiday = '春节';
switch(MonDay){
case '正月初一': holiday = '春节';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'>"+ Day+"</span>
<span class='holiday'>"+holiday+"</span>" + date.getDate() + "</div>";
}
以上代码中，调用了农历算法，计算出日历中对应的农历日期包括节气，在这里我们还做了特殊节日的处理，比如春节、端午、中秋等，然后我们要将农历与公历以及特殊节日显示在fullcalendar中，这时就要修改css来控制使得公历日期显示在左上，农历显示在右上，特殊节日显示在中间。
.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%}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。
上一篇：JS小数转换为整数的方法分析
下一篇：基于jquery二维码生成插件qrcode
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程：电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示：编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程