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> 年
<select id="month-select"></select> 月
</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>年
[<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(日历组件封装)的更多相关文章
- vue2.0项目 calendar.js(日历组件封装)
最近一直闲来无事,便寻思着做一下自己的个人项目,也想说能使用现在比较流行的一些mvvm框架来做,于是就选用了这样的一个技术栈vue2.0+vue-router+vuex+webpack来做,做得也是多 ...
- js日志组件封装
js日志组件~~ 1 function Logger(level) { if (!(this instanceof Logger)) { return new Logger(); } var ERRO ...
- Vue.js 自定义组件封装实录——基于现有控件的二次封装(以计时器为例)
在本人着手开发一个考试系统的过程中,出现了如下一个需求:制作一个倒计时的控件显示在试卷页面上.本文所记录的就是这样的一个过程. 前期工作 对于这个需求,自然我想到的是有没有现成的组件可以直接使用(本着 ...
- chart.js angular组件封装(ng6)、实战配置、插件编写
前言 项目需要使用chart.js插件,由于项目是使用angular开发,那么我第一步就是先把chart.js改造成angular组件来使用. 本项目代码都可以在github上下载:项目git地址 a ...
- vue.js table组件封装
table组件 和 分页组件来自iview,在这里我根据公司业务再次做了一次封装,使用slot进行内容分发,可以随意放置input输入框和button按钮 ,再使用props向子组件传递参数,使用em ...
- [js开源组件开发]js多选日期控件
js多选日期控件 详情请见:http://www.lovewebgames.com/jsmodule/calendar.html 它的github地址:https://github.com/tianx ...
- Vue文件封装日历组件
封装就是要具有灵活性,样式自适应,调用的时候传入props就可以变成自己想要的样式. 效果展示网址:https://1963331542.github.io/ 源代码: <template> ...
- 日历组件 原生js
自己基于原生js编写的日历组件 git地址: https://github.com/lihefen/calendar.git demo : https://lihefen.github.io/cale ...
- 第二百一十四节,jQuery EasyUI,Calendar(日历)组件
jQuery EasyUI,Calendar(日历)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Canlendar(日历)组件的使用方法 ...
随机推荐
- Myeclipse插件将wsdl生成java客户端代码
一.建立webservice服务端: 1.新建一个web service project,名称为webservice_server截图如下,点击finish. 2.选择工程,点击右键,选择new-&g ...
- 关于j2ee工程发布到was上后,部分更新,例修改web.xml配置文件不起作用的原因解析【转】
在WAS中,应用的配置是从config/cells....目录下读取:而资源从/installedApps目录下读取 故当配置文件(例web.xml)发生改变时,只更新应用程序资源文件/install ...
- Android安卓身份证识别SDK
一.Android安卓身份证识别SDK应用背景 这些年,随着互联网金融的极速发展,第三方支付.理财.P2P网贷.征信等APP应用成爆发式的增长,在众多APP中都涉及到对身份证信息的录入,如第三方支付. ...
- Ninject之旅目录
第一章:理解依赖注入 Ninject之旅之一:理解DI 第二章:开始使用Ninject Ninject之旅之二:开始使用Ninject(附程序下载) Ninject之旅之三:Ninject对象生命周期 ...
- java集合框架02——Collection架构与源码分析
Collection是一个接口,它主要的两个分支是List和Set.如下图所示: List和Set都是接口,它们继承与Collection.List是有序的队列,可以用重复的元素:而Set是数学概念中 ...
- javascript之自增自减典型运算(易错)
JavaScript“自增”运算符与表达式 递增运算符(++)是一个一元运算符,该运算符可以将操作数进行递增操作,即每次增加1.递增运算符要求其操作数必须是变量.对象中的某个属性或数组中的某个元素,并 ...
- Trick 小记
1.\[P(A|BC) = \frac{P(AB|C)}{P(B|C)}\] 2. In EM algorithm, the usual expectation function can be wri ...
- EM and GMM(Theory)
Part 1: Theory 目录: What's GMM? How to solve GMM? What's EM? Explanation of the result What's GMM? GM ...
- GET和POST的区别,何时使用POST?
GET:一般用于信息获取,使用URL传递参数,对所发送信息的数量也有限制,一般在2000个字符 POST:一般用于修改服务器上的资源,对所发送的信息没有限制. GET方式需要使用Re ...
- UML类图中的关系和表示方法
类图是用来描述程序中的类以及它们之间的关系的,使用类图可以帮助我们简化对系统的理解.在UML类图中比较常见的关系有六种,它们分别是:依赖.关联.聚合.组合.泛化.实现,这六种关系中类之间的紧密程度是依 ...