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(日历)组件的使用方法 ...
随机推荐
- Oracle_关联查询
1. 等值连接(Equijoin).非等值连接(Non-Equijoin).外连接(Outer join):-->左外连接-->右外连接.自连接(Self join) 交叉连接(Cross ...
- 数据库SQL,NoSQL之小感悟
遇到1000万数据表 最近遇到一个问题,就是单表数据过的存储及查询问题.举个例子:1000万的数据存在一个表中,字段4-5个样子,日常 开发中难免要做过滤.排序.分页.如果把这几个放在一起即要过滤又要 ...
- .NET中代理服务器WebProxy的各种用法
引用地址 引用 因为涉及到代理的各种情况,WebRequest和WebProxy类的文档写的相当复杂,不但各个文档关注点不同,而且不同版本的同一文档也有小小的区别,网上也没有关于这个类的相关文章.于是 ...
- indexOf()--数组去重
@(JavaScript) 数组去重方法有多中,这里列举出自己认为比较容易理解的方法. 思路: 创建一个新的空数组,用来存放去重后的新数组. 利用for循环循环遍历需要去重的数组. 利用indexOf ...
- linux之sed的常用操作
Sed命令: sed是一种流编辑器,它是文本处理中非常中的工具,能够完美的配合正则表达式使用,功能不同凡响.处理时,把当前处理的行存储在临时缓冲区中,称为"模式空间"(patter ...
- udp服务器监听(多线程)
项目一:udp1111 监听的有三个文件分别为: guiHello.java 有关界面和事件响应功能 UdpFunc.java是udp类的封装:发送和接收 udpServer.java是入口函数,无实 ...
- Java线程中yield()的用法
Thread.yield()方法的作用:暂停当前正在执行的线程,并执行其他线程.(可能没有效果) yield()让当前正在运行的线程回到可运行状态,以允许具有相同优先级的其他线程获得运行的机会.因此, ...
- lambda表达式查询经验:IN 和groupby的使用
lambda In的用法: lambda表达式查询没有IN这个方法,可以变通一下,in查询的数组是否包含在映射对象里面的集合里: 如下代码: var departmentIDs = input.Dep ...
- 启程、对C的继承
Cocoa和Object-c是苹果公司OS X和IOS操作系统的核心. .m扩展名表示文件使用的是Objective-c代码. 与C语言一样,Objective-c使用头文件来包含结构体.符号 ...
- Django的URL路由
URL配置(URLconf)就像Django 所支撑网站的目录.它的本质是URL模式以及要为该URL模式调用的视图函数之间的映射表:你就是以这种方式告诉Django,对于这个URL调用这段代码,对于那 ...