VUE实现日历组件功能

 更新时间:2017年03月13日 14:25:01   作者:桑尼君   我要评论
本篇文章主要介绍了VUE实现日历组件功能,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

哈哈, 就在昨天笔者刚刚在Github 上发布了一个基于VUE的日历组件。过去做日历都是需要引用 jquery moment 引用 fullCalendar.js 的。几者加起来体积庞大不说,也并不是很好使用在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.


结尾

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

demo下载:vue-fullcalendar_jb51.rar

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

相关文章

  • vue2.0 自定义 饼状图 (Echarts)组件的方法

    vue2.0 自定义 饼状图 (Echarts)组件的方法

    下面小编就为大家分享一篇vue2.0 自定义 饼状图 (Echarts)组件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • 详解Vue.js中引入图片路径的几种方式

    详解Vue.js中引入图片路径的几种方式

    这篇文章主要介绍了Vue.js中引入图片路径的几种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-06-06
  • 详解vue中使用微信jssdk

    详解vue中使用微信jssdk

    这篇文章主要介绍了vue中使用微信jssdk,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • vue 权限认证token的实现方法

    vue 权限认证token的实现方法

    这篇文章主要介绍了vue 权限认证token的实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • 快速入门Vue

    快速入门Vue

    本篇文章主要介绍了如何快速入门Vue的方法,对0基础学习Vue的朋友会很有帮助,跟着小编一起来看下吧
    2016-12-12
  • 使用vux实现上拉刷新功能遇到的坑

    使用vux实现上拉刷新功能遇到的坑

    最近公司在研发app,选择了基于Vue框架的vux组件库,现总结在实现上拉刷新功能遇到的坑,感兴趣的朋友参考下吧
    2018-02-02
  • vue动画打包后失效问题的解决方法

    vue动画打包后失效问题的解决方法

    这篇文章主要介绍了vue动画打包后失效问题的解决方法,在文中给大家提到了vue-cli 打包后自定义动画未执行的解决方法,需要的朋友可以参考下
    2018-09-09
  • Vue.js实现可编辑的表格

    Vue.js实现可编辑的表格

    这篇文章主要为大家详细介绍了Vue.js实现可编辑的表格,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-12-12
  • vue内置组件transition简单原理图文详解(小结)

    vue内置组件transition简单原理图文详解(小结)

    这篇文章主要介绍了vue内置组件transition简单原理图文详解(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • vue2.0 中#$emit,$on的使用详解

    vue2.0 中#$emit,$on的使用详解

    这篇文章主要介绍了vue2.0 中#$emit,$on的使用详解,需要的朋友可以参考下
    2017-06-06

最新评论