码迷,mamicode.com
首页 > Web开发 > 详细

vue2.0项目 calendar.js(日历组件封装)

时间:2017-03-26 00:13:59      阅读:622      评论:0      收藏:0      [点我收藏+]

标签:能力   点击   blank   blog   注释   https   修改   cell   next   

最近一直闲来无事,便寻思着做一下自己的个人项目,也想说能使用现在比较流行的一些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

vue2.0项目 calendar.js(日历组件封装)

标签:能力   点击   blank   blog   注释   https   修改   cell   next   

原文地址:http://www.cnblogs.com/wuxiaobin/p/6618768.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!