基于百度万年历定制化 1
基于百度万年历定制化 1
项目需求：
某门户项目需要在右上角添置一个日期（yyyy-MM-dd）的显示，同时点击此时间可以弹出一个窗体，窗体内容为万年历。
万年历需求：
1、日志显示24节气，且24节气内容可配置
2、对法定节假日可进行配置管理
项目开发周期：
一周
项目技术选择：
1、基于网上现存的万年历组件进行扩展
2、.Net MVC 开发一个Web项目进行内容配置
准备
首先我需要在网上找到一个相对完善的万年历模板，经过多番寻找，总算是找到了一个见如下链接,组件默认实现了很多的功能。
image.png
下载下来之后我需要对其内容进行修改，当我们打开文件结构时，我们发现所有的页面元素都已经被压缩过了，这就使得代码很难阅读，不方便我们后期的更改。这个时候一个神奇就出现了，LZ在之前的文章中也提到过，Jsbeautifier JS代码美化库,通过使用此工具我们可以将前台的代码进行格式化输出，同理对目录下的其他文件也可使用此方法，最后结果如图2所示
图1.png
图2.png
此时，代码阅读就很方便了。然后我们开始根据需求进行更改代码
1、首先我们不需要如下模块，将此模块内容更改为节日内容，如果点击日期是某个节气，显示具体内容，否则显示“无”。
image.png
2、下如所示“2015年假日安排”以及下拉框内容要将静态数据改为动态获取的方式，我们找到代码段见下图，将此处内容之后更改为AJAX动态获取。
image.png
image.png
思路
如图我们可以看到window.OB.RILi开头的内容对应的就是下拉框的显示数据以及各种前台绑定之。
dataRest:休息日
dataWork:工作日
dateFestival:假日
dateFestivalContent:节假日说明
dateAllFestival:所有的假期
jieqi24:新增加的节气
源程序内容，静态赋值
window.OB = window.OB || {},
window.OB.RiLi = window.OB.RiLi || {},
window.OB.RiLi.dateRest = ["0101", "0102", "0103", "0218", "0219", "0220", "0221", "0222", "0223", "0224", "0404", "0405", "0406", "0501", "0502", "0503", "0620", "0621", "0622", "0903", "0904", "0905", "0926", "0927", "1001", "1002", "1003", "1004", "1005", "1006", "1007"],
window.OB.RiLi.dateWork = ["0104", "0215", "0228", "0906", "1010"],
window.OB.RiLi.dateFestival = ["20150101||元旦", "20150219||春节", "20150405||清明节", "20150501||劳动节", "20150620||端午节", "20150903||抗战纪念日", "20150927||中秋节", "20151001||国庆节"],
window.OB.RiLi.dateAllFestival = ["正月初一|v,春节", "正月十五|v,元宵节", "二月初二|v,龙头节", "五月初五|v,端午节", "七月初七|v,七夕节", "七月十五|v,中元节", "八月十五|v,中秋节", "九月初九|v,重阳节", "十月初一|i,寒衣节", "十月十五|i,下元节", "腊月初八|i,腊八节", "腊月廿三|i,祭灶节", "0202|i,世界湿地日,1996", "0214|v,西洋情人节", "0308|i,国际妇女节,1975", "0315|i,国际消费者权益日,1983", "0422|i,世界地球日,1990", "0501|v,国际劳动节,1889", "0512|i,国际护士节,1912", "0518|i,国际博物馆日,1977", "0605|i,世界环境日,1972", "0623|i,国际奥林匹克日,1948", "0624|i,世界骨质疏松日,1997", "1117|i,世界学生日,1942", "1201|i,世界艾滋病日,1988", "0101|v,元旦", "0312|i,植树节,1979", "0504|i,五四青年节,1939", "0601|v,儿童节,1950", "0701|v,建党节,1941", "0801|v,建军节,1933", "0903|v,抗战胜利纪念日", "0910|v,教师节,1985", "1001|v,国庆节,1949", "1224|v,平安夜", "1225|v,圣诞节", "w:0520|v,母亲节,1913", "w:0630|v,父亲节", "w:1144|v,感恩节(美国)", "w:1021|v,感恩节(加拿大)"];我们通过更改原来的方式，通过ajax获取数据，数据放在一个json文件中，文件内容见下图
ajax调用.png
json文件内容
{
"24jieqi": [
{
"name": "立春",
"value": "斗指东北。太阳黄经为315度。是二十四个节气的头一个节气。其含义是开始进入春天，“阳和起蛰，品物皆春”，过了立春，万物复苏生机勃勃，一年四季从此开始了"
},
{
"name": "雨水",
"value": "斗指壬。太阳黄经为330°。这时春风遍吹，冰雪融化，空气湿润，雨水增多，所以叫雨水。人们常说：“立春天渐暖，雨水送肥忙”。"
}
],
"dateRest": [
"0101",
"0102",
"0103",
"0218",
"0219",
"0220",
"0221",
"0222",
"0223",
"0224",
"0404",
"0405",
"0406",
"0501",
"0502",
"0503",
"0620",
"0621",
"0622",
"0903",
"0904",
"0905",
"0926",
"0927",
"1001",
"1002",
"1003",
"1004",
"1005",
"1006",
"1007"
],
"dateWork": [
"0104",
"0215",
"0228",
"0906",
"1010"
],
"dateFestival": [
"20150101||元旦",
"20150219||春节",
"20150405||清明节",
"20150501||劳动节",
"20150620||端午节",
"20150927||中秋节",
"20151001||国庆节"
],
"dateFestivalContent": [
{
"name": "国庆节",
"value": "10月1日至7日放假调休，共7天。10月10日（星期六）上班。"
},
{
"name": "中秋节",
"value": "9月27日放假。"
},
{
"name": "端午节",
"value": "6月20日放假，6月22日（星期一）补休。"
},
{
"name": "劳动节",
"value": "5月1日放假，与周末连休。"
},
{
"name": "清明节",
"value": "4月5日放假，4月6日（星期一）补休。"
},
{
"name": "春节",
"value": "2月18日至24日放假调休，共7天。2月15日（星期日）、2月28日（星期六）上班。"
},
{
"name": "元旦",
"value": "1月1日至3日放假调休，共3天。1月4日（星期日）上班。"
}
],
"dateAllFestival": [
"正月初一|v,春节",
"正月十五|v,元宵节",
"二月初二|v,龙头节",
"五月初五|v,端午节",
"七月初七|v,七夕节",
"七月十五|v,中元节",
"八月十五|v,中秋节",
"九月初九|v,重阳节",
"十月初一|i,寒衣节",
"十月十五|i,下元节",
"腊月初八|i,腊八节",
"腊月廿三|i,祭灶节",
"0202|i,世界湿地日,1996",
"0214|v,西洋情人节",
"0308|i,国际妇女节,1975",
"0315|i,国际消费者权益日,1983",
"0422|i,世界地球日,1990",
"0501|v,国际劳动节,1889",
"0512|i,国际护士节,1912",
"0518|i,国际博物馆日,1977",
"0605|i,世界环境日,1972",
"0623|i,国际奥林匹克日,1948",
"0624|i,世界骨质疏松日,1997",
"1117|i,世界学生日,1942",
"1201|i,世界艾滋病日,1988",
"0101|v,元旦",
"0312|i,植树节,1979",
"0504|i,五四青年节,1939",
"0601|v,儿童节,1950",
"0701|v,建党节,1941",
"0801|v,建军节,1933",
"0903|v,抗战胜利纪念日",
"0910|v,教师节,1985",
"1001|v,国庆节,1949",
"1224|v,平安夜",
"1225|v,圣诞节",
"w:0520|v,母亲节,1913",
"w:0630|v,父亲节",
"w:1144|v,感恩节(美国)",
"w:1021|v,感恩节(加拿大)"
]
}通过这样的方式将原来写死在页面上的数据，变为数据可通过json文件配置。 新增了一个点击事件——鼠标点击，如果为节气，显示节气内容，我们添加如下的一段内容即可
点击事件.png
到现在位置，功能已全部实现，只不过内容代码都是html+css+js基本结构，没有将数据可配置化在数据库中。
结果演示.png
代码下载地址:后续放开
腾讯云开发者
