經(jīng)手的需求丽蝎,有一個功能是以月為單位進行值班的安排與查詢猎拨,具體如圖,每一天都能點擊顯示員工列表進行操作屠阻,當天已經(jīng)安排過的红省,值班信息顯示在日歷上
vue-full-calendar這個插件有很多文章,但大多是移動端国觉,滿足我需要的更是一個都沒有吧恃,無奈只能自己東拼西湊試了很多方法,結(jié)果還不錯麻诀,達到了預(yù)期痕寓,特意整理一下過程,希望能使跟我有同樣需求的小伙伴少走幾步彎路
demo指路?https://github.com/sunhuihuibuhui/demo-for-vue-full-calendar歡迎star针饥、fork厂抽,筆芯~
安裝:npm i vue-full-calendar
在main.js中全局引入:
或者在需要用到的組件中局部引入,需要注冊和引入樣式:
使用:
config是日歷的基本配置
events是事件丁眼,即第一張圖上的值班信息
event-selected是事件的點擊事件筷凤,day-click是當天日期的點擊事件,兩個事件的參數(shù)寫在方法中了
第一張圖左上角可以根據(jù)日期查詢苞七,但是日期跟calendar插件是分離的藐守,所以點擊查詢按鈕的時候需要調(diào)用calendar的gotoDate方法,參數(shù)是選中的月份蹂风,格式是YYYY-MM
calendar主要用到的就這么多卢厂,動態(tài)添加事件有一個專門的方法如下
但是項目中我沒用到,我是直接在created的時候獲取值班數(shù)據(jù)惠啄,然后push到events中的慎恒。
demo再次指路??https://github.com/sunhuihuibuhui/demo-for-vue-full-calendar再次歡迎star、fork撵渡,再次筆芯~~
其它的一些api可以參考這個文檔??https://www.helloweba.net/javascript/445.html
絕大部分都是適用的融柬,也可以留言問我,因為當時時間比較充裕趋距,我試了很多在項目中并沒有用到的方法粒氧,后來刪掉了所以整理的時候就都沒有放上來
415更新:添加了增加和修改信息,很小的一個點更新在github中了节腐,就不在此放代碼了