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

calendar.js(日历组件封装)的更多相关文章

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

    最近一直闲来无事,便寻思着做一下自己的个人项目,也想说能使用现在比较流行的一些mvvm框架来做,于是就选用了这样的一个技术栈vue2.0+vue-router+vuex+webpack来做,做得也是多 ...

  2. js日志组件封装

    js日志组件~~ 1 function Logger(level) { if (!(this instanceof Logger)) { return new Logger(); } var ERRO ...

  3. Vue.js 自定义组件封装实录——基于现有控件的二次封装(以计时器为例)

    在本人着手开发一个考试系统的过程中,出现了如下一个需求:制作一个倒计时的控件显示在试卷页面上.本文所记录的就是这样的一个过程. 前期工作 对于这个需求,自然我想到的是有没有现成的组件可以直接使用(本着 ...

  4. chart.js angular组件封装(ng6)、实战配置、插件编写

    前言 项目需要使用chart.js插件,由于项目是使用angular开发,那么我第一步就是先把chart.js改造成angular组件来使用. 本项目代码都可以在github上下载:项目git地址 a ...

  5. vue.js table组件封装

    table组件 和 分页组件来自iview,在这里我根据公司业务再次做了一次封装,使用slot进行内容分发,可以随意放置input输入框和button按钮 ,再使用props向子组件传递参数,使用em ...

  6. [js开源组件开发]js多选日期控件

    js多选日期控件 详情请见:http://www.lovewebgames.com/jsmodule/calendar.html 它的github地址:https://github.com/tianx ...

  7. Vue文件封装日历组件

    封装就是要具有灵活性,样式自适应,调用的时候传入props就可以变成自己想要的样式. 效果展示网址:https://1963331542.github.io/ 源代码: <template> ...

  8. 日历组件 原生js

    自己基于原生js编写的日历组件 git地址: https://github.com/lihefen/calendar.git demo : https://lihefen.github.io/cale ...

  9. 第二百一十四节,jQuery EasyUI,Calendar(日历)组件

    jQuery EasyUI,Calendar(日历)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Canlendar(日历)组件的使用方法 ...

随机推荐

  1. 代码神器Atom,最常用的几大插件,你值得拥有。

    作者:魔洁 atom常用插件 atom插件安装File>Settings>intall搜索框输入插件名,点击Packages搜索,搜索出来后点击intall安装,建议你先安装(simpli ...

  2. 谁该吃药了(线性判别法LDA小故事)

    一家"胡说八道医院"拥有一种治疗癌症的药物, 根据过去的记录, 该药物对一些患者非常有效, 但是会让一些患者感到更痛苦... 我们希望有一种判别准则能帮助我们判断哪些病人该吃药,哪 ...

  3. react-router3.x hashHistory render两次的bug,及解决方案

    先写一个简单App页面,其实就是简单修改了react-router的官方例子中的animations例子,修改了两个地方: 1.路由方式由browserHistory修改为hashHistory 2. ...

  4. Array方法归类总结

    数组的转换方法 valueOf()方法,数组调用该方法后返回的还是原来的数组. toString()方法,数组调用该方法后会调用每一项的toStirng()方法,之后将每一项拼接成一个以逗号分割的字符 ...

  5. ROM与RAM知识

    “ROM”和“RAM”的意思: “ROM”:N年前代表一种只能写入和读取,而不能改写和擦除的设备,可以用光驱CD-ROM来说明这个道理.目前的“ROM”已经不是这个道理了,它的技术已经飞快的发展到现在 ...

  6. linux下常用语言的语法检查插件整理

    linux下常用语言的语法检查插件 可以结合vim语法检查插件syntastic使用,具体请参考syntastic使用说明 如php,sql,json,css,js,html,shell,c等语法插件 ...

  7. iOS上传代码到Github平台

    对于开发人员来说,很多时候想把自己好的代码 demo放到一个公共平台,与大家交流,Github就是一个不错的平台,下面给大家说说Github的具体使用方法. 第一步.申请Github账号.https: ...

  8. Java集合框架之三:HashMap源码解析

    版权声明:本文为博主原创文章,转载请注明出处,欢迎交流学习! HashMap在我们的工作中应用的非常广泛,在工作面试中也经常会被问到,对于这样一个重要的集合模型我们有必要弄清楚它的使用方法和它底层的实 ...

  9. Javascript继承(暂略去中转函数、组合继承和寄生继承)

    继承,在JS中通过原型链实现.如: function Box(){ this.name="Lee"; } function Desk(){ this.age=100; } //通过 ...

  10. 字符串查找算法总结(暴力匹配、KMP 算法、Boyer-Moore 算法和 Sunday 算法)

    字符串匹配是字符串的一种基本操作:给定一个长度为 M 的文本和一个长度为 N 的模式串,在文本中找到一个和该模式相符的子字符串,并返回该字字符串在文本中的位置. KMP 算法,全称是 Knuth-Mo ...