vue2.0項目 calendar.js(日歷組件封裝)

最近一直閑來無事，便尋思着做一下自己的個人項目，也想說能使用現在比較流行的一些mvvm框架來做，於是就選用了這樣的一個技術棧vue2.0+vue-router+vuex+webpack來做，做得也是多頁面應用，使用vue-router，也是想說把多個功能模塊化，單個模塊spa，實現更高的效果。當然現在還在做的過程中，如果感興趣可以過來star一下，哈哈，https://github.com/xiaobinwu/Wuji，git clone下來看看。

今天要說的是在做這個項目的過程中，自己想加一個日歷功能，但是找遍很多插件，沒有多少是合我心意，於是就想說自己寫一個，但是想象太美好，技術能力不夠，寫不出，此處省略一萬字。最后找到百度日歷還挺符合我要的日歷功能，但是我想更加自定化更好一下，於是就拿這個來做了一下修改。結果長這樣：

將其最后的日歷組件賦值給一個全局變量，用模塊模式暴露一下方法，可以對日歷進行配置：

    <div id="cal">
        <div id="top">
            <div class="select">
                <select id="year-select"></select>&nbsp;年
                <select id="month-select"></select>&nbsp;月
            </div>
            <div class="step">
                <span id="prev"><</span>
                <span id="next">></span>                               
            </div>
        </div>
        <ul id="wk">
            <li>一</li>
            <li>二</li>
            <li>三</li>
            <li>四</li>
            <li>五</li>
            <li><b>六</b></li>
            <li><b>日</b></li>
        </ul>
        <div id="cm"></div>
        <div id="bm">
            <div class="heavenly-branch">
                <span id="heavenly"></span>年 &nbsp;
                ［<span id="branch"></span>］
            </div>
            <a href="javascript:;;" id="now-date">回到今天</a>
        </div>
    </div>

js：

    calendar.init({
        cellClickCallback: function(cell, datedata){
            console.log(datedata);
            alert('你點擊的是'+ datedata.solarYear + '年' + datedata.solarMonth + '月' + datedata.solarDate + '日');        
        }
    });

於是對源代碼做了一些注釋，為了以后修改，可以去看詳細的代碼： https://github.com/xiaobinwu/calendar.js