FullCalendar应用——整合农历节气和节日
FullCalendar用来做日程管理功能非常强大,但是唯一不足的地方是没有将中国农历历法加进去,今天我将结合实例和大家分享如何将中国农历中的节气和节日整合到FullCalendar中,从而增强其实用性。
首先是要载入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 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应用——整合农历节气和节日的更多相关文章
- C#实现万年历(农历、节气、节日、星座、属相、生肖、闰年等)
C# 万年历 农历 节气 节日 星座 星宿 属相 生肖 闰年月 时辰等,代码如下: using System.Collections.Generic; using System.Text; using ...
- C#实现万年历(农历、节气、节日、星座、星宿、属相、生肖、闰年月、时辰)
C# 万年历 农历 节气 节日 星座 星宿 属相 生肖 闰年月 时辰地址:http://www.cnblogs.com/txw1958/archive/2013/01/27/csharp-calend ...
- python3实现万年历(包括公历、农历、节气、节日)
#!/usr/local/bin/python3 # coding=utf-8 # Created: 20/07/2012 # Copyright: http://www.cnblogs.com/tx ...
- 《JQuery常用插件教程》系列分享专栏
<JQuery常用插件教程>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/read/201719.html 文章 使用jquery插件实现图 ...
- 转--2014年最新810多套android源码2.46GB免费一次性打包下载
转载自:http://www.eoeandroid.com/thread-497046-1-1.html 感谢该博客主人无私奉献~~ 下面的源码是从今年3月份开始不断整理源码区和其他网站上的安卓例子源 ...
- 2014年最新720多套Android源码2.0GB免费一次性打包下载
之前发过一个帖子,但是那个帖子有点问题我就重新发一个吧,下面的源码是我从今年3月份开始不断整理源码区和其他网站上的android源码,目前总共有720套左右,根据实现的功能被我分成了100多个类,总共 ...
- ym——android源代码大放送(实战开发必备)
转载请注明本文出自Cym的博客(http://blog.csdn.net/cym492224103),谢谢支持! 目录 PATH 列表 卷序列号为 000A-8F50 E:. │ javaapk.c ...
- php获取农历、节日、节气
/* * 农历 节气 节日 * edit: www.jbxue.com */ header("Content-Type:text/html;charset=utf-8"); cla ...
- C# 中国日历 农历 阳历 星座 二十四节气 二十八星宿 节日 天干地支
using System; namespace DotNet.Utilities { /// <summary> /// 农历属性 /// </summary> public ...
随机推荐
- redux-amrc:用更少的代码发起异步 action
很多人说 Redux 代码多,开发效率低.其实 Redux 是可以灵活使用以及拓展的,经过充分定制的 Redux 其实写不了几行代码.今天先介绍一个很好用的 Redux 拓展-- redux-amrc ...
- 阿里云直播 C# SDK 如何使用
阿里云直播SDK的坑 1.直播云没有单独的SDK,直播部分被封装在CDN的相关SDK当中. 2.针对SDK,没有相关Demo. 3.针对SDK,没有相关的文档说明. 4.针对SDK的说明,官网上的说明 ...
- C# 注册 Windows 热键
闲扯: 前几日,一个朋友问我如何实现按 F1 键实现粘贴(Ctrl+V)功能,百度了一个方法,发给他,他看不懂(已经是 Boss 的曾经的码农),我就做了个Demo给他参考.今日得空,将 Demo 整 ...
- .NET Core系列 : 2 、project.json 这葫芦里卖的什么药
.NET Core系列 : 1..NET Core 环境搭建和命令行CLI入门 介绍了.NET Core环境,本文介绍.NET Core中最重要的一个配置文件project.json的相关内容.我们可 ...
- LeetCode: 3Sum
Given an array S of n integers, are there elements a, b, c in S such that a + b + c = 0? Find all un ...
- .Net多线程编程—任务Task
1 System.Threading.Tasks.Task简介 一个Task表示一个异步操作,Task的创建和执行是独立的. 只读属性: 返回值 名称 说明 object AsyncState 表示在 ...
- Mysql命令大全
格式: mysql -h主机地址 -u用户名 -p用户密码 1.连接到本机上的MYSQL.首先打开DOS窗口,然后进入目录mysql\bin,再键入命令mysql -u root -p,回车后提示你输 ...
- SDWebImage源码解读之SDWebImageCache(上)
第五篇 前言 本篇主要讲解图片缓存类的知识,虽然只涉及了图片方面的缓存的设计,但思想同样适用于别的方面的设计.在架构上来说,缓存算是存储设计的一部分.我们把各种不同的存储内容按照功能进行切割后,图片缓 ...
- VB.NET设置控件和窗体的显示级别
前言:在用VB.NET开发射频检测系统ADS时,当激活已存在的目标MDI子窗体时,被其他子窗体遮住了,导致目标MDI子窗体不能显示. 这个问题怎么解决呢?网上看到一篇帖子VB.NET设置控件和窗体的显 ...
- .NET同步与异步之相关背景知识(六)
在之前的五篇随笔中,已经介绍了.NET 类库中实现并行的常见方式及其基本用法,当然.这些基本用法远远不能覆盖所有,也只能作为一个引子出现在这里.以下是前五篇随笔的目录: .NET 同步与异步之封装成T ...