这里有新鲜出炉的 jQuery 示例,程序狗速度看过来!
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
这篇文章主要介绍了 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。
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 %
- }
来源: http://www.phperz.com/article/17/0601/328800.html