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