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

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

創(chuàng)新互聯(lián)建站服務(wù)項(xiàng)目包括盤山網(wǎng)站建設(shè)、盤山網(wǎng)站制作、盤山網(wǎng)頁制作以及盤山網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，盤山網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到盤山省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

簡介

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

安裝

npm install vue-fullcalendar

DEMO

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

npm install
npm run dev

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

使用

大致了解后肯定是使用的問題啦，你只需要把這個(gè)組件引入到你自己的vue項(xiàng)目中就可以自由使用啦，因?yàn)楝F(xiàn)在是比較初步的版本。所以筆者十分鼓勵(lì)大家針對(duì)自己的需求做二次開發(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)題啦 會(huì)直接顯示在日歷上

start 事件的開始日期 必填哦

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

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

events

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

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

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

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

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

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

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

event就是這個(gè)日歷事件對(duì)象啦 參考 上面的props

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

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

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

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

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

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

slots

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

結(jié)尾

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

demo下載：vue-fullcalendar_jb51.rar

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

本文名稱：VUE實(shí)現(xiàn)日歷組件功能
網(wǎng)站地址：http://muchs.cn/article28/jpgccp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、響應(yīng)式網(wǎng)站、網(wǎng)站導(dǎo)航、微信小程序、全網(wǎng)營銷推廣、網(wǎng)站設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)