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

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

vue-based fullcalendar no jquery required

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

npmnpm

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

简单现场演示工具

demo.gif

安装

由 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') 
 }
}

这里有一个样本截图，Yeah you see the calendar

文档

道具

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

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

posted @ 2020-05-16 06:00  鳳舞九天  阅读(1159)  评论(1)    收藏  举报