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

原创文章作者：月光光 2014年02月10日 21:41helloweba.com 标签：Fullcalendar

FullCalendar用来做日程管理功能非常强大，但是唯一不足的地方是没有将中国农历历法加进去，今天我将结合实例和大家分享如何将中国农历中的节气和节日整合到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格式的日程安排数据给前端，具体请看本站文章：FullCalendar应用——读取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 cnMonth = CnMonthofDate(date);//农历月
	var cnDay = CnDayofDate(date);//农历日
	var solar = SolarTerm(date);//农历节气
	if(solar!='') cnDay=solar;
	var cnMonDay = cnMonth+cnDay;

	var holiday = '';
	if(cnDay=='正月')
		holiday = '春节';
	switch(cnMonDay){
		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'>"+ cnDay+"</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%}

这样就完成了fullcalendar与农历的整合，请点击这里查看演示。

声明：本文为原创文章，helloweba.net和作者拥有版权，如需转载，请注明来源于helloweba.net并保留原文链接：https://www.helloweba.net/javascript/248.html

你可能感兴趣的文章

共11条评论

Bilgint

请问下载源码打开之后出了一大堆404和405错误，说post不了静态数据之类的

2019年10月08日 15:02
号子小小神

晕死，只能支持97年到20年。。。。。。。。。。。。

2017年09月20日 09:43
感谢分享~~

2016年08月18日 15:29
楼主，你有用thinkphp框架开发的日历吗？就的话就发一份哈，感激不尽， 840948658@***.com，

2016年08月10日 17:57
楼主你好，这个农历算法好像只支持到2020年，我看到CnDateofDate方法里面有这么一段
if ((yyyy < 1997) || (yyyy > 2020)) {
return 0;
}
如果过了2020年，所有农历日期就显示为零了，请教下如何修正这个算法？

2015年07月23日 15:08
不知道能不能把国定假日注明出来

2015年02月09日 17:02
大哥，我用这个农历的js，为什么拖拉事件会出错

2014年10月11日 18:01
不错，已参考，谢谢楼主。不过有个地方有错误。CnDayofDate这个方法里的最后在返回时，不应该返回节气，应该就是返回农历日。因为还要根据农历日来算农历节日呢。比如2014年9月8日是中秋节，但是又正好是节气“白露”，那中秋节就不能正常显示了。
还有下面这两句，也应该在算出农历节日后再算节气。
var solar = SolarTerm(date);//农历节气
if(solar!='') cnDay=solar;

2014年06月24日 16:15
大神，我想问一下这个PHP部分怎么整合到web项目中去啊！！我们学校用的是Tomcat+MyEclipse+Oracle，在数据库方面实现远程连接，PHP部分怎么写？

2014年06月12日 09:46
这个写的好，谢谢

2014年06月06日 19:45
想问一下博主，fullCalendar插件有没有事件日常重复机制。小弟不才，看文档和源码貌似没发现事件重复机制。望博主指点一二！

2014年02月11日 15:09

WEB技术分享