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最新动画教程+iso光盘下载
Jan 22 Javascript
Mootools 1.2教程 输入过滤第二部分(字符串)
Sep 15 Javascript
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
Jun 19 Javascript
JavaScript中去掉数组中的重复值的实现方法
Aug 03 Javascript
Javascript中Date类型和Math类型详解
Feb 27 Javascript
JS把内容动态插入到DIV的实现方法
Jul 19 Javascript
浅谈angularjs module返回对象的坑(推荐)
Oct 21 Javascript
微信小程序实现人脸识别
May 25 Javascript
在vue中使用SockJS实现webSocket通信的过程
Aug 29 Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
Apr 17 Javascript
Node.js从字符串生成文件流的实现方法
Aug 18 Javascript
JS+CSS实现3D切割轮播图
Mar 21 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写的基于Memcache的Queue实现代码
2011/11/27 PHP
php中使用cookie来保存用户登录信息的实现代码
2012/03/08 PHP
使用php伪造referer的方法 利用referer防止图片盗链
2014/01/20 PHP
ThinkPHP2.0读取MSSQL提示Incorrect syntax near the keyword 'AS'的解决方法
2014/06/25 PHP
PHP处理数组和XML之间的互相转换
2016/06/02 PHP
PHP二维数组去重算法
2016/12/17 PHP
用javascript对一个json数组深度赋值示例
2014/07/27 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
2016/08/25 Javascript
AngularJS 指令的交互详解及实例代码
2016/09/14 Javascript
js Date()日期函数浏览器兼容问题解决方法
2017/09/12 Javascript
vue弹窗消息组件的使用方法
2020/09/24 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
2019/09/01 Javascript
vue跳转方式(打开新页面)及传参操作示例
2020/01/26 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
2020/07/19 Javascript
[50:45]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第一场
2018/04/10 DOTA
python五子棋游戏的设计与实现
2019/06/18 Python
Python使用Pandas库实现MySQL数据库的读写
2019/07/06 Python
Python使用scipy模块实现一维卷积运算示例
2019/09/05 Python
对Pytorch中Tensor的各种池化操作解析
2020/01/03 Python
python 解决flask 图片在线浏览或者直接下载的问题
2020/01/09 Python
基于python监控程序是否关闭
2020/01/14 Python
Python3.6安装卸载、执行命令、执行py文件的方法详解
2020/02/20 Python
属性与 @property 方法让你的python更高效
2020/09/21 Python
Python实现曲线拟合的最小二乘法
2021/02/19 Python
澳大利亚旅游网站:Lastminute
2017/08/07 全球购物
荷兰本土平价百货:HEMA
2017/10/23 全球购物
什么是URL
2015/12/13 面试题
Static Nested Class 和 Inner Class的不同
2013/11/28 面试题
土木工程实习生自我鉴定
2013/09/19 职场文书
《十六年前的回忆》教学反思
2014/02/14 职场文书
企业演讲稿范文大全
2014/05/20 职场文书
售房协议书范本2014
2014/10/23 职场文书
2014年组织部工作总结
2014/11/14 职场文书
如何写辞职信
2015/05/13 职场文书
商业计划书范文
2019/04/24 职场文书
MySQL中几种插入和批量语句实例详解
2021/09/14 MySQL