fullCalendar 使用手册

fullCalendar 使用手册

标签(空格分隔): fullCalendar


仰仗网络:
fullCalendar官方网站
fullCalendar改造为农历
fullCalendar的基本事件的实现
fullCalendar的基本事件的实现2

一、简述

简单的说 fullCalendar 是一个日历控件,复杂点的看图就明白了
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
  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值