项目需求：

某门户项目需要在右上角添置一个日期（yyyy-MM-dd）的显示，同时点击此时间可以弹出一个窗体，窗体内容为万年历。
万年历需求：
1、日志显示24节气，且24节气内容可配置
2、对法定节假日可进行配置管理

项目开发周期：

一周

项目技术选择：

1、基于网上现存的万年历组件进行扩展
2、.Net MVC 开发一个Web项目进行内容配置

准备

首先我需要在网上找到一个相对完善的万年历模板，经过多番寻觅，总算是找到了一个见如下链接,组件默认实现了很多的功能。

下载下来之后我需要对其内容进行修改，当我们打开文件结构时，我们发现所有的页面元素都已经被压缩过了，这就使得代码很难阅读，不方便我们后期的更改。这个时候一个神奇就出现了，LZ在之前的文章中也提到过，Jsbeautifier JS代码美化库,通过使用此工具我们可以将前端的代码进行格式化输出，同理对目录下的其余文件也可使用此方法，最后结果如图2所示

此时，代码阅读就很方便了。而后我们开始根据需求进行更改代码
1、首先我们不需要如下模块，将此模块内容更改为节日内容，假如点击日期是某个节气，显示具体内容，否则显示“无”。

2、下如所示“2015年假日安排”以及下拉框内容要将静态数据改为动态获取的方式，我们找到代码段见下图，将此处内容之后更改为AJAX动态获取。

思路

如图我们可以看到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文件中，文件内容见下图

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文件配置。
新添加了一个点击事件——鼠标点击，假如为节气，显示节气内容，我们增加如下的一段内容就可

到现在位置，功能已一律实现，只不过内容代码都是html+css+js基本结构，没有将数据可配置化在数据库中。

代码下载地址:后续放开