基於百度萬年曆定製化 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

代碼下載地址:後續放開