VUE實(shí)現(xiàn)日歷組件功能

哈哈， 就在昨天筆者剛剛在Github 上發(fā)布了一個基于VUE的日歷組件。過去做日歷都是需要引用 jquery moment 引用 fullCalendar.js 的。幾者加起來體積龐大不說，也并不是很好使用在vue這種數(shù)據(jù)驅(qū)動的項(xiàng)目里。所以筆者經(jīng)過一周的拍腦袋，做了一個十分簡陋的版本。

簡介

目前只支持月視圖，該組件是 .vue 文件的形式。所以，大家在使用的時候 是需要node的咯~~~

安裝

npm install vue-fullcalendar

DEMO

針對這個組件， 本人做了一個十分簡單的 demo。進(jìn)入到該項(xiàng)目后

npm install
npm run dev

然后打開瀏覽器 輸入 localhost:8080 你應(yīng)該就能看到demo啦

使用

大致了解后肯定是使用的問題啦，你只需要把這個組件引入到你自己的vue項(xiàng)目中就可以自由使用啦，因?yàn)楝F(xiàn)在是比較初步的版本。所以筆者十分鼓勵大家針對自己的需求做二次開發(fā)，

import fullcalendar from 'vue-fullcalendar'

API

既然是組件，筆者自然預(yù)先定義了一些小屬性。不過不用擔(dān)心，都是基于VUE的

props

1、events 是該組件唯一接受的參數(shù) 用來表示該日歷上的所有日程事件，他的格式應(yīng)該如下

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

title 自然就是事件的標(biāo)題啦 會直接顯示在日歷上

start 事件的開始日期 必填哦

end 事件的結(jié)束日期 沒填就默認(rèn)是開始日期

YOUR_DATA 你自己定義的一些數(shù)據(jù) 變量名隨意 在后續(xù)都會被vue的廣播事件傳遞

events

這里的events 可不是上面說的 props 里的events 哦 而是 你在使用日歷 時 一些行為的 反饋。 比如你點(diǎn)擊 某一天 某個時間 日歷組件都會向外部 dispatch 一個對應(yīng)的事件和相應(yīng)的參數(shù)

'changeMonth' 事件， 當(dāng)你切換月份時觸發(fā)

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

start 是這個月視圖(并不是這個月)的第一天 yyyy-MM-dd

end 是這個月視圖(并不是這個月)的最后一天 yyyy-MM-dd

'eventClick' : 當(dāng)你點(diǎn)擊某個日歷事件時觸發(fā)

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

event 就是這個日歷事件對象啦 參考 上面的props

jsEvent 這次點(diǎn)擊的原生 javascript 事件

pos 這個事件的相對于日歷的相對坐標(biāo) 在slot中使用

'dayClick' : 當(dāng)你點(diǎn)擊某一天觸發(fā)

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

day 你點(diǎn)擊的這一天的 Date 對象

jsEvent 這次點(diǎn)擊的原生 javascript 事件

slots

為了方便開發(fā)者的自由定制我在組件中加了很多slots 來填寫大家自己需要的東西 比如 事件卡片 篩選器，下圖是一張我自己項(xiàng)目的 事件卡片 和篩選。當(dāng)然我并沒有把他們放進(jìn)組件里。 I find my roof, you find yours.

結(jié)尾

因?yàn)檫@個組件還是比較初級的階段，可能有不少問題，所以十分鼓勵大家提issue或是下載后根據(jù)自己的需求二次開發(fā)。

demo下載：vue-fullcalendar_jb51.rar

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。