项目需求：

某门户项目需要在右上角添置一个日期（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

代码下载地址:后续放开