calendar.js(日历组件封装)

时间:2022-09-15 08:17:26

最近一直闲来无事,便寻思着做一下自己的个人项目,也想说能使用现在比较流行的一些mvvm框架来做,于是就选用了这样的一个技术栈vue2.0+vue-router+vuex+webpack来做,做得也是多页面应用,使用vue-router,也是想说把多个功能模块化,单个模块spa,实现更高的效果。当然现在还在做的过程中,如果感兴趣可以过来star一下,哈哈,https://github.com/xiaobinwu/Wuji,git clone下来看看。

今天要说的是在做这个项目的过程中,自己想加一个日历功能,但是找遍很多插件,没有多少是合我心意,于是就想说自己写一个,但是想象太美好,技术能力不够,写不出,此处省略一万字。最后找到百度日历还挺符合我要的日历功能,但是我想更加自定化更好一下,于是就拿这个来做了一下修改。结果长这样:

calendar.js(日历组件封装)

将其最后的日历组件赋值给一个全局变量,用模块模式暴露一下方法,可以对日历进行配置:

    <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&period;0项目 calendar&period;js&lpar;日历组件封装&rpar;

    最近一直闲来无事,便寻思着做一下自己的个人项目,也想说能使用现在比较流行的一些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&period;js 自定义组件封装实录——基于现有控件的二次封装(以计时器为例)

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

  4. chart&period;js angular组件封装&lpar;ng6&rpar;、实战配置、插件编写

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

  5. vue&period;js table组件封装

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

  6. &lbrack;js开源组件开发&rsqb;js多选日期控件

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

  7. Vue文件封装日历组件

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

  8. 日历组件 原生js

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

  9. 第二百一十四节,jQuery EasyUI,Calendar&lpar;日历&rpar;组件

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

随机推荐

  1. oracle启动脚本 &period;

        .#!/bin/bash set -x su -oracle >>EON lsnrctl start sqlplus /nolog >>EOF conn / as sy ...

  2. 安卓应用开发用户体验之禁止EditText自动获取焦点

    一.问题描述: 在安卓应用开发时,经常会在同一个页面有许多不同的控件,在用户操作时,如何正确的在这些控件之间来回切换是良好用户体验的重要问题.可能会碰到如下问题:在点击页面内某控件时(假设控件为Spi ...

  3. 让你提前认识软件开发&lpar;23&rpar;:怎样在C语言中运行shell命令?

    第1部分 又一次认识C语言 怎样在C语言中运行shell命令? [文章摘要] Linux操作系统具备开源等诸多优秀特性,因此在很多通信类软件(主流开发语言为C语言)中,开发平台都迁移到了Linux上, ...

  4. 《Pointers On C》读书笔记&lpar;第五章 操作符和表达式&rpar;

    1.C语言操作符优先级表 2.算术操作符中%(取模操作符)只适用于整型类型,其余几个操作符(+.-.*./)既适用于整型类型也适用于浮点类型.当/操作符的两个操作数都是整型时,它执行整除运算,其它情况 ...

  5. &lbrack;INS-32052&rsqb; Oracle基文件夹和Oracle主文件夹位置同样

    1.错误描写叙述 [INS-32052] Oracle基文件夹和Oracle主文件夹位置同样 2.错误原因    Oracle基文件夹和Oracle主文件夹位置同样 3.解决的方法    Oracle ...

  6. Nyoj 星际之门(一)&lpar;Cayley定理&rpar;

    描述 公元3000年,子虚帝国统领着N个星系,原先它们是靠近光束飞船来进行旅行的,近来,X博士发明了星际之门,它利用虫洞技术,一条虫洞可以连通任意的两个星系,使人们不必再待待便可立刻到达目的地. 帝国 ...

  7. 201421123042 《Java程序设计》第13周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 答: 2. 为你的系统增加网络功能(购物车.图书馆管理.斗地主等)-分组完成 为了让你的系统可以被多个用户 ...

  8. CODEVS 3546 矩阵链乘法

    http://codevs.cn/problem/3546/ 题目 给定有n个要相乘的矩阵构成的序列(链)<A1,A2,A3,.......,An>,要计算乘积A1A2.....An.一组 ...

  9. 【转】Python-面向对象进阶

    [转]Python-面向对象进阶 一.isinstance(obj, cls) and issubclass(sub, super) 1. isinstance(obj, cls),检查obj是否是类 ...

  10. mst总结

     1.jsonp跨域 Jsop的原理:利用script不存在跨域的问题,动态创建script标签,把需要请求的数据源地址赋值给其src属性,并且指定一个回调函数,从而接受到我们想要的数据 后台设置下 ...