fullCalendar 是一款强大的日历插件，适用于前端项目。本文提供从简述到配置农历与节气的详细教程，包括基本使用步骤、事件配置及高度自适应示例。通过改造，即使在高版本下也能实现农历显示。
fullCalendar 使用手册
标签（空格分隔）： fullCalendar
仰仗网络：
fullCalendar官方网站
fullCalendar改造为农历
fullCalendar的基本事件的实现
fullCalendar的基本事件的实现2
一、简述
简单的说 fullCalendar 是一个日历控件，复杂点的看图就明白了
一目了然，其实类似于 fullCalendar 的插件还是不多，但是 fullCalendar 已经够我们的项目使用了，现在fullCalendar最新版本应该是 v3 版本的，但是，我们做项目肯定是要改动 fullCalendar.js 的，因为在中国日历是需要显示农历和节日的。改完之后版本就秒变成 V1.6.0 了。自己改也可以，但我并不是大大神，哎~
二、基本使用
类似于大多数的插件，引入一些文件，写一个接受的盒子，然后配置一系列参数：
1.引入
下载地址：github下载地址
（注：高版本的 fullCalendar 还需要依赖 moment ,moment下载地址github）
<link href="./bower_components/fullcalendar/dist/fullcalendar.css" rel="stylesheet" type="text/css"/>
<link href='./bower_components/fullcalendar/dist/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src="./bower_components/fullcalendar/dist/fullcalendar.js" type="text/javascript"></script>
如果需要 moment 请自行引入啦（引入时，两个插件的版本对应哦）~
2.html
超级简单： <div id="calendar" class="dib"></div>
3.javascript
也就是自己配置一些属性什么的，具体可以参考fullCalendar的基本事件的实现。下面列举一些常用的属性和方法:
//页面加载完初始化日历
$('#calendar').fullCalendar({
//设置选项和回调
header: {
left: 'prev,next today', //按钮设置
center: 'title',
right: 'month,agendaWeek,agendaDay' //视图设置，一共5个视图
},
nextDayThreshold: '09:00:00', // 9am默认时间，默认从九点以后才算是下一天
minTime:"8:00", //周视图和日视图上的开始时间设置
maxTime:"18:00", //周视图和日视图上的结束时间设置
firstDay:0, //月视图中第一列是星期几，0是周日，1是周一
weekMode:"fixed", //月视图中一共显示多少周fixed、liquid、variable
height: 600, // 日历高度,包括表头,contentHeight不包括表头
editable: true, //默认值false,用来设置日历中的日程是否可以编辑
draggable: true,// 日程是否可拖动
monthNames:['一月','二月', '三月', '四月', '五月', '六月', '七月','八月', '九月', '十月', '十一月', '十二月'], //默认为英文月分，这里可以改成中文
dayNames:['星期日', '星期一', '星期二', '星期三','星期四', '星期五', '星期六'], //换成中文星期
events:xxxxx, //数据源，可以是Array、json或者函数function(start, end, timezone){}
//基本事件
//单机日期格子事件（新增）
dayClick : function(dayDate, allDay, jsEvent, view){}
//单机日程事件（编辑或删除）
eventClick: function(calEvent, jsEvent, view){}
//拖动事件，修改日程时间范围
eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc){}
//日程事件的缩放，修改日程时间范围
eventResize: function(event,dayDelta,minuteDelta,revertFunc){}
})
4.数据的配置
在events数据的配置上，必须要有的是：
events:[{
"id":"不解释"
"title":"日程题目内容"，
"start":"日程开始时间必须转换为’标准时间‘"，
"end":"日程结束时间，同上"，
"allDay":"true/false设置是否为全天事件，*注：只有为true时，在月视图上事件才可以被缩放"
...
}]
更多数据配置可查看数据的详细配置官网
5.配置农历与节气
可参考fullCalendar改造为农历，但是这是基于V1.6.0，如果是想要使用高版本的fullCalendar，那就可以参考一下这个的思路了。
我就是根据这个思路抽出的的js，在项目中引用调用并 dayRenderLunar(date,cell)即可，可以保证v2.7版本的农历显示，代码如下：
/**
* Created by caoRN on 2017/3/6.
*/
(function(){
var DB = {
digitCN: ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十'],
heavenlyStems: ['甲', '乙', '丙', '丁', '戊', '己', '庚', '辛', '壬', '癸'],
earthlyBranches: ['子', '丑', '寅', '卯', '辰', '巳', '午', '未', '申', '酉', '戌', '亥'],
chineseZodiac: ['鼠', '牛', '虎', '兔', '龙', '蛇', '马', '羊', '猴', '鸡', '狗', '猪'],
term: ['冬至', '小寒', '大寒', '立春', '雨水', '惊蛰', '春分', '清明', '谷雨', '立夏', '小满', '芒种', '夏至', '小暑', '大暑', '立秋', '处暑', '白露', '秋分', '寒露', '霜降', '立冬', '小雪', '大雪'],
monthCn: ['十一', '十二', '正', '二', '三', '四', '五', '六', '七', '八', '九', '十'],
dateCn: ['初一', '初二', '初三', '初四', '初五', '初六', '初七', '初八', '初九', '初十', '十一', '十二', '十三', '十四', '十五', '十六', '十七', '十八', '十九', '二十', '廿一', '廿二', '廿三', '廿四', '廿五', '廿六', '廿七', '廿八', '廿九', '三十', '卅一']
};
function lunar(oDate){
var d = new Date(oDate);
if (+d < -10233222336000) {
return null;
}
return new Lunar(d);
}
function Lunar(oDate){
this.oDate = oDate;
this.julianDay = JulianDay.fromDate(this.oDate);
this.cnDay = this.oDate.getDay() ? DB.digitCN[this.oDate.getDay()] : '日';
var mjd = this.julianDay - JulianDay.JD2000;
var arTerm = Term.getTerms(mjd);
var arNewMoon = NewMoon.getNewMoons(arTerm);
for (var days = Math.round(mjd - arNewMoon[0].JD), i = 0, o; i < arNewMoon.length; i++) {
o = arNewMoon[i];
if (days < o.days) {
this.isBigMonth = o.days == 30;
this.isLeap = o.isLeap;
this.lMonth = o.name;
this.lNextMonth = o.nextName;
this.lDate = DB.dateCn[days];
this.dateIndex = days;
break;
} else {
days -= o.days;
}
}
mjd = Math.round(mjd);
this.lYear = Math.floor((arTerm[3].JD + (mjd < arTerm[3].JD ? -365 : 0) + 365.25 * 16 - 35) / 365.2422 + 0.5);
var t = arNewMoon[arNewMoon.zyIndex].JD;
t -= mjd < t ? 365 : 0;
t += 5810;
this.sYear = Math.floor(t / 365.2422 + 0.5);
this.hYear = this.sYear + 1984 + 2698;
var t = arTerm.hash[mjd];
this.term = t ? t.name : '';
var t = this.lYear + 6000;
this.animal = DB.chineseZodiac[t % 12];
this.gzYear = DB.heavenlyStems[t % 10] + DB.earthlyBranches[t % 12];
var t = Math.floor((mjd - arTerm[0].JD) / 30.43685);
t < 12 && mjd >= arTerm[2 * t + 1].JD && t++;
t += Math.floor((arTerm[12].JD + 390) / 365.2422) * 12 + 900000;
this.gzMonth = DB.heavenlyStems[t % 10] + DB.earthlyBranches[t % 12];
var t = mjd - 6 + 9000000;
this.gzDate = DB.heavenlyStems[t % 10] + DB.earthlyBranches[t % 12];
this.gzChrono = DB.earthlyBranches[Math.floor((this.oDate.getHours() + 1) / 2)] || '子';
}
var NewMoon = {
correction: unzip('EqoFscDcrFpmEsF1DfFideFelFpFfFfFiaipqti3ksttikptikqckstekqttgkqttgkqteksttikptikq1fjstgjqttjkqttgkqtekstfkptikq1tijstgjiFkirFsAeACoFsiDaDiADc3AFbBfgdfikijFifegF3FhaikgFag3E1btaieeibggiffdeigFfqDfaiBkF3kEaikhkigeidhhdiegcFfakF3ggkidbiaedksaFffckekidhhdhdikcikiakicjF3deedFhFccgicdekgiFbiaikcfi3kbFibefgEgFdcFkFeFkdcfkF3kfkcickEiFkDacFiEfbiaejcFfffkhkdgkaiei3ehigikhdFikfckF3dhhdikcfgjikhfjicjicgiehdikcikggcifgiejF3jkieFhegikggcikFegiegkfjebhigikggcikdgkaFkijcfkcikfkcifikiggkaeeigefkcdfcfkhkdgkegieidhijcFfakhfgeidieidiegikhfkfckfcjbdehdikggikgkfkicjicjF3dbidikFiggcifgiejkiegkigcdiegfggcikdbgfgefjF3kfegikggcikdgFkeeijcfkcikfkekcikdgkabhkFikaffcfkhkdgkegbiaekfkiakicjhfgqdq1fkiakgkfkhfkfcjiekgFebicggbedF3jikejbbbiakgbgkacgiejkijjgigfiakggfggcibFifjefjF3kfekdgjcibFeFkijcfkfhkfkeaieigekgbhkfikidfcjeaibgekgdkiffiffkiakF3jhbakgdki3dj3ikfkicjicjieeFkgdkicggkighdF3jfgkgfgbdkicggfggkidFkiekgijkeigfiskiggfaidheigF3jekijcikickiggkidhhdbgcfkFikikhkigeidieFikggikhkffaffijhidhhakgdkhkijF3kiakF3kfheakgdkifiggkigicjiejkieedikgdfcggkigieeiejfgkgkigbgikicggkiaideeijkefjeijikhkiggkiaidheigcikaikffikijgkiahi3hhdikgjfifaakekighie3hiaikggikhkffakicjhiahaikggikhkijF3kfejfeFhidikggiffiggkigicjiekgieeigikggiffiggkidheigkgfjkeigiegikifiggkidhedeijcfkFikikhkiggkidhh3ehigcikaffkhkiggkidhh3hhigikekfiFkFikcidhh3hitcikggikhkfkicjicghiediaikggikhkijbjfejfeFhaikggifikiggkigiejkikgkgieeigikggiffiggkigieeigekijcijikggifikiggkideedeijkefkfckikhkiggkidhh3ehijcikaffkhkiggkidhh3hhigikhkikFikfckcidhh3hiaikgjikhfjicjicgiehdikcikggifikigiejfejkieFhegikggifikiggfghigkfjeijkhigikggifikiggkigieeijcijcikfksikifikiggkidehdeijcfdckikhkiggkhghh3ehijikifffffkhsFngErD3pAfBoDd3BlEtFqA1AqoEpDqElAEsEeB1BmADlDkqBtC3FnEpDqnEmFsFsAFnllBbFmDsDiCtDmAB1BmtCgpEplCpAEiBiEoFqFtEqsDcCnFtADnFlEgdkEgmEtEsCtDmADqFtAFrAtEcCqAE3BoFqC3F3DrFtBmFtAC1ACnFaoCgADcADcCcFfoFtDlAFgmFqBq1bpEoAEmkqnEeCtAE3bAEqgDfFfCrgEcBrACfAAABqAAB3AAClEnFeCtCgAADqDoBmtAAACbFiAAADsEtBqAB1FsDqpFqEmFsCeDtFlCeDtoEpClEqAAFrAFoCgFmFsFqEnAEcCqFeCtFtEnAEeFtAAEkFnErAABbFkADnAAeCtFeAfBoAEpFtAABtFqAApDcCGJ'),
calcForLow: function(W){
var v = 7771.37714500204, t = (W + 1.08472) / v, L;
t -= (-0.0000331 * t * t + 0.10976 * Math.cos(0.785 + 8328.6914 * t) + 0.02224 * Math.cos(0.187 + 7214.0629 * t) - 0.03342 * Math.cos(4.669 + 628.3076 * t)) / v + (32 * (t + 1.8) * (t + 1.8) - 20) / 86400 / 36525;
return t * 36525 + 8 / 24;
},
calcForHigh: function(W){
var t = XL.MS_aLon_t2(W) * 36525;
t = t - dt_T(t) + 8 / 24;
var v = ((t + 0.5) % 1) * 86400;
if (v < 1800 || v > 86400 - 1800) t = XL.MS_aLon_t(W) * 36525 - dt_T(t) + 8 / 24;
return t;
},
cache: {},
getNewMoons: function(terms){
var jd = terms[0].JD, firstDay = NewMoon.calc(jd), ar = [];
if (firstDay > jd) {
firstDay -= 29.53;
}
if (NewMoon.cache[firstDay]) {
ar = NewMoon.cache[firstDay];
} else {
for (var i = 0; i < 15; i++) {
ar.push({
JD: NewMoon.calc(firstDay + 29.5306 * i),
index: i
});
if (i) {
ar[i - 1].days = ar[i].JD - ar[i - 1].JD;
}
}
if (ar[13].JD <= terms[24].JD) {
for (i = 1; ar[i + 1].JD > terms[2 * i].JD && i < 13; i++) {
}
ar[i].isLeap = true;
for (; i < 14; i++) {
ar[i].index--;
}
}
for (i = 0; i < 14; i++) {
ar[i].name = (ar[i].isLeap ? '闰' : '') + DB.monthCn[ar[i].index % 12];
ar[i].nextName = (ar[i+1].isLeap ? '闰' : '') + DB.monthCn[ar[i+1].index % 12];
if (ar[i].index == 2) {
ar.zyIndex = i;
}
}
NewMoon.cache[firstDay] = ar;
}
return ar;
},
calc: function(jd){
jd += JulianDay.JD2000;
var D, n, pc = 14, JDstart = 1947168.00, JD1960 = 2436935;
if (jd >= JD1960) {
return Math.floor(this.calcForHigh(Math.floor((jd + pc - 2451551) / 29.5306) * Math.PI * 2) + 0.5);
}
if (jd >= JDstart && jd < JD1960) {
D = Math.floor(this.calcForLow(Math.floor((jd + pc - 2451551) / 29.5306) * Math.PI * 2) + 0.5);
n = this.correction.substr(Math.floor((jd - JDstart) / 29.5306), 1) - 0;
return D + (n ? n - 2 : n);
}
}
};
var Term = {
correction: unzip('FrcFs11AFsckF1tsDtFqEtF3posFdFgiFseFtmelpsEfhkF1anmelpFlF3ikrotcnEqEq1FfqmcDsrFor11FgFrcgDscFs11FgEeFtE1sfFs11sCoEsaF1tsD3FpeE1eFsssEciFsFnmelpFcFhkF1tcnEqEpFgkrotcnEqrEtFermcDsrE111FgBmcmr11DaEfnaF111sD3FpeForeF1tssEfiFpEoeFssD3iFstEqFppDgFstcnEqEpFg33FscnEqrAoAF1ClAEsDmDtCtBaDlAFbAEpAAAAAD1FgBiBqoBbnBaBoAAAAAAAEgDqAdBqAFrBaBoACdAAf3AACgAAAeBbCamDgEifAE1AABa3C3BgFdiAAACoCeE3ADiEifDaAEqAAFe3AcFbcAAAAAF3iFaAAACpACmFmAAAAAAAACrDaAAADG0'),
calcForLow: function(W){
var t, L, v = 628.3319653318;
t = (W - 4.895062166) / v;
t -= (53 * t * t + 334116 * Math.cos(4.67 + 628.307585 * t) + 2061 * Math.cos(2.678 + 628.3076 * t) * t) / v / 10000000;
L = 48950621.66 + 6283319653.318 * t + 53 * t * t + 334166 * Math.cos(4.669257 + 628.307585 * t) + 3489 * Math.cos(4.6261 + 1256.61517 * t) + 2060.6 * Math.cos(2.67823 + 628.307585 * t) * t - 994 - 834 * Math.sin(2.1824 - 33.75705 * t);
t -= (L / 10000000 - W) / 628.332 + (32 * (t + 1.8) * (t + 1.8) - 20) / 86400 / 36525;
return t * 36525 + 8 / 24;
},
getNearestWinter: function(jd){
var winterDay = Math.floor((jd - 355 + 183) / 365.2422) * 365.2422 + 355;
Term.calc(winterDay) > jd && (winterDay -= 365.2422);
return winterDay;
},
cache: {},
getTerms: function(jd){
var winterDay = Term.getNearestWinter(jd), ar = [];
if (Term.cache[winterDay]) {
ar = Term.cache[winterDay];
} else {
ar.hash = {};
for (var i = 0, o; i < 25; i++) {
o = {
JD: Term.calc(winterDay + 15.2184 * i),
name: DB.term[i % 24]
};
ar.push(o);
ar.hash[o.JD] = o;
}
Term.cache[winterDay] = ar;
}
return ar;
},
calcForHigh: function(W){
var t = XL.S_aLon_t2(W) * 36525;
t = t - dt_T(t) + 8 / 24;
var v = ((t + 0.5) % 1) * 86400;
if (v < 1200 || v > 86400 - 1200) {
t = XL.S_aLon_t(W) * 36525 - dt_T(t) + 8 / 24;
}
return t;
},
calc: function(jd){
jd += JulianDay.JD2000;
var i, D, n, pc = 7, JDstart = 2322147.76, JD1960 = 2436935;
if (jd >= JD1960) {
return Math.floor(this.calcForHigh(Math.floor((jd + pc - 2451259) / 365.2422 * 24) * Math.PI / 12) + 0.5);
}
if (jd >= JDstart && jd < JD1960) {
D = Math.floor(this.calcForLow(Math.floor((jd + pc - 2451259) / 365.2422 * 24) * Math.PI / 12) + 0.5);
n = this.correction.substr(Math.floor((jd - JDstart) / 365.2422 * 24), 1) - 0;
return D + (n ? n - 2 : n);
}
}
};
var JulianDay = {
JD2000: 2451545,
最低0.47元/天 解锁文章
扫一扫
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
