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