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模拟的Ping效果代码 (Web Ping)
Mar 13 Javascript
两个数组去重的JS代码
Dec 04 Javascript
Javascript中的匿名函数与封装介绍
Mar 15 Javascript
JavaScript实现网页加载进度条代码超简单
Sep 21 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
Oct 29 Javascript
Angular Module声明和获取重载实例代码
Sep 14 Javascript
详解JavaScript模块化开发
Dec 04 Javascript
JS开发中基本数据类型具体有哪几种
Oct 19 Javascript
原生javascript AJAX 三级联动的实现代码
May 04 Javascript
用webpack4开发小程序的实现方法
Jun 04 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
Nov 13 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
Sep 04 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初学入门
2006/11/19 PHP
ThinkPHP使用PHPExcel实现Excel数据导入导出完整实例
2014/07/22 PHP
jQuery+Ajax+PHP“喜欢”评级功能实现代码
2015/10/08 PHP
php 如何禁用eval() 函数实例详解
2016/12/01 PHP
php单元测试phpunit入门实例教程
2017/11/17 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
PHP从零开始打造自己的MVC框架之入口文件实现方法详解
2019/06/03 PHP
PHP7 安装event扩展的实现方法
2019/10/08 PHP
实现复选框全选/全不选切换
2006/12/23 Javascript
javascript编程起步(第七课)
2007/02/27 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
2013/07/10 Javascript
JavaScript将取代AppleScript?
2014/09/18 Javascript
js利用clipboardData实现截屏粘贴功能
2016/10/12 Javascript
js图片延迟加载(Lazyload)三种实现方式
2017/03/01 Javascript
jQuery查找dom的几种方法效率详解
2017/05/17 jQuery
微信小程序如何获知用户运行小程序的场景教程
2017/05/17 Javascript
angular基于ng-alain定义自己的select组件示例
2018/02/23 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
2018/04/05 Javascript
在小程序Canvas中使用measureText的方法示例
2018/10/19 Javascript
小程序实现选择题选择效果
2018/11/04 Javascript
node实现socket链接与GPRS进行通信的方法
2019/05/20 Javascript
简单谈谈python基本数据类型
2018/09/26 Python
浅析CSS3 中的 transition,transform,translate之间区别和作用
2020/03/26 HTML / CSS
基于html5 canvas实现漫天飞雪效果实例
2014/09/10 HTML / CSS
中国综合性网上购物商城:当当(网上卖书起家)
2016/11/16 全球购物
随机分配座位,共50个学生,使学号相邻的同学座位不能相邻
2014/01/18 面试题
汽车运用工程专业毕业生推荐信
2013/12/25 职场文书
英文留学推荐信范文
2014/01/25 职场文书
销售人员获奖感言
2014/02/05 职场文书
写给老婆的检讨书
2014/02/21 职场文书
工伤事故赔偿协议书(标准)
2014/09/29 职场文书
婚前协议书标准版
2014/10/19 职场文书
2014年村官工作总结
2014/11/24 职场文书
2015年五一劳动节慰问信
2015/03/23 职场文书
2015年党风廉政建设个人总结
2015/08/18 职场文书
webpack介绍使用配置教程详解webpack介绍和使用
2022/06/25 Javascript