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 相关文章推荐
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
Sep 28 Javascript
js数组与字符串的相互转换方法
Jul 09 Javascript
使用 js+正则表达式为关键词添加链接
Nov 11 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
Nov 28 Javascript
jQuery实现滚动切换的tab选项卡效果代码
Aug 26 Javascript
轻松学习Javascript闭包函数
Dec 15 Javascript
详解react-router如何实现按需加载
Jun 15 Javascript
vue-router history模式下的微信分享小结
Jul 05 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
Sep 12 Javascript
JavaScript直接调用函数与call调用的区别实例分析
May 22 Javascript
vue3.0+vue-router+element-plus初实践
Dec 02 Vue.js
使用Typescript开发微信小程序的步骤详解
Jan 12 Javascript
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
PHP中使用CURL模拟登录并获取数据实例
2014/07/01 PHP
PHP的error_reporting错误级别变量对照表
2014/07/08 PHP
PHP实现的简单三角形、矩形周长面积计算器分享
2014/11/18 PHP
php文件下载处理方法分析
2015/04/22 PHP
作为程序员必知的16个最佳PHP库
2015/12/09 PHP
PHP的Yii框架中YiiBase入口类的扩展写法示例
2016/03/17 PHP
php获取今日开始时间和结束时间的方法
2017/02/27 PHP
PHP crc32()函数讲解
2019/02/14 PHP
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
2010/05/07 Javascript
JavaScript浏览器选项卡效果
2010/08/25 Javascript
用js实现trim()的解决办法
2013/04/16 Javascript
js中的caller和callee属性介绍和例子
2014/06/07 Javascript
JavaScript实现的一个倒计时的类
2015/03/12 Javascript
JQuery 封装 Ajax 常用方法(推荐)
2017/05/21 jQuery
angularjs实现时间轴效果的示例代码
2017/11/29 Javascript
利用vscode调试编译后的js代码详解
2018/05/14 Javascript
Vue.use源码学习小结
2018/06/20 Javascript
python中__slots__用法实例
2015/06/04 Python
详解python的webrtc库实现语音端点检测
2017/05/31 Python
python实现植物大战僵尸游戏实例代码
2019/06/10 Python
Win下PyInstaller 安装和使用教程
2019/12/25 Python
python print 格式化输出,动态指定长度的实现
2020/04/12 Python
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
2016/11/16 HTML / CSS
悦木之源美国官网:Origins美国
2016/08/01 全球购物
当当网软件测试笔试题
2015/11/24 面试题
深圳茁壮笔试题
2015/05/28 面试题
质检员岗位职责
2013/12/17 职场文书
2014五一国际劳动节活动总结范文
2014/04/14 职场文书
消防安全责任书范本
2014/04/15 职场文书
计算机相关专业自荐信
2014/07/02 职场文书
车辆转让协议书
2014/09/24 职场文书
九九重阳节标语
2014/10/07 职场文书
大学生村官工作总结2015
2015/04/09 职场文书
房地产销售助理岗位职责
2015/04/14 职场文书
社会实践单位意见
2015/06/05 职场文书
Python卷积神经网络图片分类框架详解分析
2021/11/07 Python