關于vue-lunar-full-calendar的使用說明
更新時間：2022年07月28日 08:40:52 作者：巖崎理奈
這篇文章主要介紹了關于vue-lunar-full-calendar的使用說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue-lunar-full-calendar的使用
效果圖
首先安裝：
npm install --save vue-lunar-full-calendar
在main.js中全局引入：
import LunarFullCalendar from "vue-lunar-full-calendar"; Vue.use(LunarFullCalendar);
在需要用到的頁面引入組件
data() {
let self = this;
return {
events:[],
config: {
eventLimitText: '更多',
lunarCalendar: true,//控制中文日歷是否顯示為真
locale:'zh-cn',//中文
eventColor: 'white',
header: {
left: 'prevYear,prev,next,nextYear',
center: 'title',
right: 'hide,custom, today'
},
eventLimit: true, // 一天中顯示多少條事件，多了隱藏
firstDay: 0, // 控制周一周日那個在前面
defaultView: 'month',
buttonText: {
today: '今天',
month: '月',
week: '周',
day: '日'
},
//分頁方法
viewRender(view, element) {
self.viewRender(view, element);
},
customButtons: { // 新增按鈕
hide: {
text: '隱藏農(nóng)歷',
click: function () {
self.$refs.calendar.fireMethod('option', {
lunarCalendar: false
})
self.$refs.calendar.fireMethod('option', {
header: {
left: 'prevYear,prev,next,nextYear',
center: 'title',
right: 'show,custom, today'
}
})
}
},
show: {
text: '顯示農(nóng)歷',
click: function () {
self.$refs.calendar.fireMethod('option', {
lunarCalendar: true
})
self.$refs.calendar.fireMethod('option', {
header: {
left: 'prevYear,prev,next,nextYear',
center: 'title',
right: 'hide,custom, today'
}
})
}
},
},
},
}
}//如果沒有點擊事件需求 此處可省略
viewRender (view, element) {
//獲取要查詢月份的時間戳
var time = view.calendar.currentDate._i;
this.years=this.$moment(time).format('YYYYMM')
//initDta為初始化方法 是根據(jù)頁面需求 調(diào)用接口 查詢調(diào)轉日期的方法
this.initData(this.years)
}, //日歷事件點擊事件
eventClick (event, jsEvent, pos) {
},
//背景點擊事件
dayClick (date, jsEvent, view) {
},詳細 可參考 fullcalendar文檔
使用vue-full-calendar時報錯及解決
在使用2.8.1-0版本的vue-full-calendar報了很奇怪的錯誤：
TypeError: cal.fullCalendar is not a function
經(jīng)過查閱之后，發(fā)現(xiàn)解決方案非常簡單，只需要在package.json中增加如下引用：
// 放在dependencies里即可 "fullcalendar": "^3.10.2",
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要給大家介紹了關于Vue路由跳轉傳參或打開新頁面跳轉的相關資料,在使用Vue.js開發(fā)單頁面應用時常常會遇到路由跳轉傳參的需求,需要的朋友可以參考下2023-07-07
詳解vue的數(shù)據(jù)劫持以及操作數(shù)組的坑
這篇文章主要介紹了vue的數(shù)據(jù)劫持以及操作數(shù)組的坑，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
這篇文章主要介紹了Vue文件下載進度條的實現(xiàn)原理,通過使用onDownloadProgress方法API獲取進度及文件大小等數(shù)據(jù)，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-07-07
這篇文章主要介紹了Vue設置長時間未操作登錄以后自動到期返回登錄頁,本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2020-01-01
這篇文章主要為大家詳細介紹了vue.js路由跳轉的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
vue的axios請求改變content-type為form-data問題
這篇文章主要介紹了vue的axios請求改變content-type為form-data問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue響應式原理的的相關資料，文中講解非常細致，代碼幫助大家更好的理解和學習，感興趣的朋友可以了解下2020-06-06
深入探索VueJS Scoped CSS 實現(xiàn)原理
這篇文章主要介紹了深入探索VueJS Scoped CSS 實現(xiàn)原理，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
前端開發(fā)指南之vue-grid-layout的使用實例
vue-grid-layout是一個vue柵格拖動布局的組件,下面這篇文章主要給大家介紹了關于前端開發(fā)指南之vue-grid-layout使用的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-09-09
vue項目使用luckyexcel預覽excel表格功能(心路歷程)
這篇文章主要介紹了vue項目使用luckyexcel預覽excel表格,我總共嘗試了2種方法預覽excel,均可實現(xiàn),還發(fā)現(xiàn)一種方法可以實現(xiàn),需要后端配合,叫做KKfileview,本文給大家介紹的非常詳細,需要的朋友可以參考下2023-10-10