VUE实现日历组件功能


Posted in Javascript onMarch 13, 2017

哈哈, 就在昨天笔者刚刚在Github 上发布了一个基于VUE的日历组件。过去做日历都是需要引用 jquery moment 引用 fullCalendar.js 的。几者加起来体积庞大不说,也并不是很好使用在vue这种数据驱动的项目里。所以笔者经过一周的拍脑袋,做了一个十分简陋的版本。

VUE实现日历组件功能

简介

目前只支持月视图,该组件是 .vue 文件的形式。所以,大家在使用的时候 是需要node的咯~~~

安装

npm install vue-fullcalendar

DEMO

针对这个组件, 本人做了一个十分简单的 demo。进入到该项目后

npm install
npm run dev

然后打开浏览器 输入 localhost:8080 你应该就能看到demo啦

使用

大致了解后肯定是使用的问题啦,你只需要把这个组件引入到你自己的vue项目中就可以自由使用啦,因为现在是比较初步的版本。所以笔者十分鼓励大家针对自己的需求做二次开发,

import fullcalendar from 'vue-fullcalendar'

API

既然是组件,笔者自然预先定义了一些小属性。不过不用担心,都是基于VUE的

props

1、events 是该组件唯一接受的参数 用来表示该日历上的所有日程事件,他的格式应该如下

events = [
     {
      title : 'event1',
      start: '2016-07-01',
      YOUR_DATA : {}
     },
     {
      title : 'event2',
      start : '2016-07-02',
      end : '2016-07-03',
      YOUR_DATA : {}
     }
   ]

title 自然就是事件的标题啦 会直接显示在日历上

start 事件的开始日期 必填哦

end 事件的结束日期 没填就默认是开始日期

YOUR_DATA 你自己定义的一些数据 变量名随意 在后续都会被vue的广播事件传递

events

这里的events 可不是上面说的 props 里的events 哦 而是 你在使用日历 时 一些行为的 反馈。 比如你点击 某一天 某个时间 日历组件都会向外部 dispatch 一个对应的事件和相应的参数

'changeMonth' 事件, 当你切换月份时触发

this.$dispatch('changeMonth', start, end)

start 是这个月视图(并不是这个月)的第一天 yyyy-MM-dd

end 是这个月视图(并不是这个月)的最后一天 yyyy-MM-dd

'eventClick' : 当你点击某个日历事件时触发

this.$dispatch('eventClick', event, jsEvent, pos)

event 就是这个日历事件对象啦 参考 上面的props

jsEvent 这次点击的原生 javascript 事件

pos 这个事件的相对于日历的相对坐标 在slot中使用

'dayClick' : 当你点击某一天触发

this.$dispatch('eventClick', day, jsEvent)

day 你点击的这一天的 Date 对象

jsEvent 这次点击的原生 javascript 事件

slots

为了方便开发者的自由定制我在组件中加了很多slots 来填写大家自己需要的东西 比如 事件卡片 筛选器,下图是一张我自己项目的 事件卡片 和筛选。当然我并没有把他们放进组件里。 I find my roof, you find yours.

VUE实现日历组件功能

结尾

因为这个组件还是比较初级的阶段,可能有不少问题,所以十分鼓励大家提issue或是下载后根据自己的需求二次开发。

demo下载:vue-fullcalendar_3water.rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
Jun 12 Javascript
JavaScript XML和string相互转化实现代码
Jul 04 Javascript
JS数组的遍历方式for循环与for...in
Jul 31 Javascript
js实现TAB切换对应不同颜色的代码
Aug 31 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
May 18 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
Aug 10 Javascript
angular或者js怎么确定选中ul中的哪几个li
Aug 16 Javascript
JS获取当前地理位置的方法
Oct 25 Javascript
一步步教你利用Docker设置Node.js
Nov 20 Javascript
vue 项目接口管理的实现
Jan 17 Javascript
使用js在layui中实现上传图片压缩
Jun 18 Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
JS正则表达式判断有效数实例代码
Mar 13 #Javascript
又一款MVVM组件 构建自己的Vue组件(2)
Mar 13 #Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
Mar 13 #Javascript
干货!教大家如何选择Vue和React
Mar 13 #Javascript
JavaScript 数据类型详解
Mar 13 #Javascript
Java与JavaScript中判断两字符串是否相等的区别
Mar 13 #Javascript
Javascript中字符串相关常用的使用方法总结
Mar 13 #Javascript
You might like
【星际争霸1】人族1v7家ZBath
2020/03/04 星际争霸
php实现ping
2006/10/09 PHP
深入PHP中的HashTable结构详解
2013/06/13 PHP
php Session存储到Redis的方法
2013/11/04 PHP
Php连接及读取和写入mysql数据库的常用代码
2014/08/11 PHP
php获取URL中带#号等特殊符号参数的解决方法
2014/09/02 PHP
php使用类继承解决代码重复的问题
2015/02/11 PHP
详解PHP中的8个魔术常量
2020/07/06 PHP
JavaScript 原型继承
2011/12/26 Javascript
window.parent与window.openner区别介绍
2012/04/12 Javascript
jquery 设置style:display的方法
2015/01/29 Javascript
浅谈JavaScript字符串拼接
2015/06/25 Javascript
js实现的二级横向菜单条实例
2015/08/22 Javascript
JavaScript实现cookie的写入、读取、删除功能
2015/11/05 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
2016/08/05 Javascript
如何学JavaScript?前辈的经验之谈
2016/12/28 Javascript
JS中的数组转变成JSON格式字符串的方法
2017/05/09 Javascript
深入理解vue.js中的v-if和v-show
2017/06/22 Javascript
vue引用js文件的多种方式(推荐)
2018/05/17 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
2018/08/07 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
2018/12/03 Javascript
[04:15]DOTA2-DPC中国联赛1月19日Recap集锦
2021/03/11 DOTA
python的迭代器与生成器实例详解
2014/07/16 Python
Python中无限元素列表的实现方法
2014/08/18 Python
浅析Python 中整型对象存储的位置
2016/05/16 Python
Python 将pdf转成图片的方法
2018/04/23 Python
英国时尚运动品牌的合集:The Sports Edit
2017/12/20 全球购物
Under Armour安德玛英国官网:美国高端运动科技品牌
2018/09/17 全球购物
生物专业个人自荐信范文
2013/11/29 职场文书
组织关系转移介绍信
2014/01/16 职场文书
学校三八妇女节活动总结
2015/02/06 职场文书
前台岗位职责范本
2015/04/16 职场文书
给老师的保证书怎么写
2015/05/09 职场文书
Python pandas之求和运算和非空值个数统计
2021/08/07 Python
Python何绘制带有背景色块的折线图
2022/04/23 Python
win10搭建配置ftp服务器的方法
2022/08/05 Servers