vue-fullcalendar, vue日历fullCalendar不需要 jquery 计划事件管理

原文：https://www.kutu66.com/GitHub/article_141955

vue-based fullcalendar no jquery required

• 源代码名称:vue-fullcalendar
• 源代码网址:http://www.github.com/Wanderxx/vue-fullcalendar
• vue-fullcalendar源代码文档
• vue-fullcalendar源代码下载

Git URL:

复制

git://www.github.com/Wanderxx/vue-fullcalendar.git

Git Clone代码到本地:

复制

git clone http://www.github.com/Wanderxx/vue-fullcalendar

Subversion代码到本地:

复制

$ svn co --depth empty http://www.github.com/Wanderxx/vue-fullcalendar
Checked out revision 1.
$ cd repo
$ svn up trunk

 

##vue-fullcalendar

Vue2的工作现在是一个基于 vue.js的fullCalendar组件。 不需要Jquery或者 fullCalendar.js。 目前，仅支持月视图。 它受到 fullCalendar.io 启发，但没有被它克隆。 所以请阅读这里的文档 below 了解所有的功能。

简单现场演示工具

安装

由 NPM

@latest 适用于vue1的Vue2 0.1.11 工作*

复制

//for Vue2 npm install vue-fullcalendar@latest --save //for Vue1 npm install vue-fullcalendar@0.1.11 --save 

或者下载代码并包含它

复制

<script src='dist/vue-fulcalendar.min.js'>

用法

register 组件全局

复制

// Your entry index.jsimportVuefrom'vue'importAppfrom'./App'importfullCalendarfrom'vue-fullcalendar'Vue.component('full-calendar', fullCalendar)// Vue2newVue({ el :'#app', render:h=>h(App), template :'<App/>', components : { App } })//Vue1newVue({ el :'body', components : { App } })

或者 register 在 .vue 文件中本地

示例

复制

<full-calendar :events="fcEvents"locale="en"></full-calendar>

复制

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

这里有一个样本截图，

文档

道具

事件: 事件将显示在日历上

复制

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 可以定义尽可能多的数据

地区: monthNames weekNames和titleFormat之类的东西的langague。 支持与 moment.js 相同的语言环境。

• default: en

firstDay: 一周的第一天，Number，默认值： 0 ( 星期日) Sunday=0，Monday=1，Tuesday=2，等等 任何小于 0或者大于 6的数字都将设置为 0.

• default: 0

事件

fc会发出一些事件。

changeMonth: 每次点击箭头到下个月/上个月时，fc将发送的changeMonth

复制

this.$dispatch('changeMonth', start, end, current)

• start 是当前拼音 monthView ( moment 对象)的第一天

• end 是当前拼音 monthView ( moment 对象)的最后一天

• current 是当前月份的第一天( moment 对象)

eventClick: 每次点击一个事件，fc将发送英镑的eventClick

复制

this.$dispatch('eventClick', event, jsEvent, pos)

• event 是一个事件对象保存事件的信息

• jsEvent 保存本机javascript事件

• pos 是fc的relative 坐标

dayClick: 当你单击 day slot发送它。

复制

this.$dispatch('eventClick', day, jsEvent)

• date 是你单击的日期对象( moment 对象)

• jsEvent 保存本机javascript事件

moreClick: 当你单击 more 按钮时将它的发送

• date 是与单击的"更多"( moment 对象) 对应的日期

• events 是将在框中出现的事件的列表

• jsEvent 保存本机javascript事件

插槽

你可以使用插槽来 register 自己的材料

fc-header-left: 左上角

fc-header-right: 右上角。 在我的例子中，我添加了一个过滤菜单

fc-body-card: inside area body 区域，通常使用 EventClick，以显示事件详细信息

###END