vue-elementUi-Calendar前端日历插件折腾记

写在前面

最近好不容易闲了下来，把之前写的vue的日历总结一下，贴出来，过程中深刻的理解到做事情一定要趁热打铁，速战速决，不要拖拖拉拉，否则不仅仅是自己就忘记了，而且很影响效率。不过重要的还是好记性不如烂笔头，写过的东西一定要记下来。

今天把之前写的一个功能记录下来，vue+element-ui的日历，之前写的时候也是趟了很多坑，不过最终搞定了，幸好幸好。现在把代码和思路贴出来，方便以后学习，更新，使用。也希望可以帮助到更多的小伙伴们。

Step一：新建一个公共的文件夹，用来放公共的组件，在这我起名为CalendarHome///////里边有三个文件分别是eventCard.vue,header.vue,fullCalendar.vue.

首先介绍下：eventCard.vue,里边主要放的是日历里边的日程提醒显示的事件，主要用到的vue-slot插槽。

其中的moment.js为js的日期处理类库详情请看moment.js 官网

再者介绍下：header.vue,里边主要放的是日历头部的显示，下拉框，左右箭头事件，同样也是用到的vue-slot插槽。

最后介绍下：fullCalendar.vue.,里边主要放的日历的主体部分，以及接受外部事件以及参数的接口，还有暴漏出去的接口。

Step二:引用页面。

注释：

vue-fullcalendar

现在适用于Vue2。这是一个基于vue.js的fullCalendar组件。目前，它只支持月视图。它受到fullCalendar.io的启发，但没有被它克隆。因此，请阅读下面的文档以了解所有功能。

Demo

demo.gif

Example

export default {
  components: {
    "full-calendar": require("./fullCalendar").default
  },
}

var demoEvents = [
    {
      title : 'Sunny Out of Office',
      start : '2016-08-25',
      end : '2017-07-27'
    }
]
export default {
  data () {
    return {
      fcEvents : demoEvents
    }
  },
  components : {
    'full-calendar': require('vue-fullcalendar')    
  }
}

Yeah you see the calendar

对应的属性和事件

props

events :事件将显示在日历上

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

title 是此活动的标题，将显示在日历上
start 是这个活动的开始日
end 是这个活动的结束日
cssClass 是每个事件标签的css类，这样，你就可以设置不同的颜色，样式..
YOUR_DATA 您可以定义尽可能多的数据

locale :像monthNames weekNames和titleFormat这样的东西。支持与moment.js相同的语言环境
firstDay : 一周的第一天Number，默认：0（星期日）星期日= 0，星期一= 1，星期二= 2等。任何小于0或大于6的数字都将设置为0。
- default : 0

events

fc will dispatch some events out.

changeMonth :每次你点击下一个/上个月的箭头，fc都会调度changeMonth
```
this.$dispatch('changeMonth', start, end, current)
```
- start 是当前月份的第一天查看（moment对象）
- end 是当前月份的最后一天查看（moment对象）
- current 是本月的第一天（moment对象）
eventClick : 每次单击事件时，fc都会调度eventClick
```
this.$dispatch('eventClick', event, jsEvent, pos)
```
- event 是一个Event对象，用于保存事件的信息
- jsEvent持有本机javascript事件
- pos是fc的相对坐标

dayClick : fc在您点击日期广告位时发送它。
```
this.$dispatch('eventClick', day, jsEvent)
```
- date是您单击（moment对象）的日期对象
- jsEvent 持有本机javascript事件
moreClick :fc在点击more按钮时发送它
- date 是与“更多”单击（moment对象）对应的日期
- events是框中的事件列表
- jsEvent持有本机javascript事件

slots

You will be able to register your own stuff by using slots

fc-header-left : top left area
fc-header-right : top right area. In my case, I added a filter menu there
fc-body-card : inside the body area, usually working with EventClick, to display a event detail

END

最后需要改写一个大神，封装好了的，我只是拿来用加以修改,详情请看下文。
vue-fullCalendar.vue