關(guān)于vue-lunar-full-calendar的使用說明
更新時(shí)間：2022年07月28日 08:40:52 作者：巖崎理奈
這篇文章主要介紹了關(guān)于vue-lunar-full-calendar的使用說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
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, // 控制周一周日那個(gè)在前面
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'
}
})
}
},
},
},
}
}//如果沒有點(diǎn)擊事件需求 此處可省略
viewRender (view, element) {
//獲取要查詢?cè)路莸臅r(shí)間戳
var time = view.calendar.currentDate._i;
this.years=this.$moment(time).format('YYYYMM')
//initDta為初始化方法 是根據(jù)頁面需求 調(diào)用接口 查詢調(diào)轉(zhuǎn)日期的方法
this.initData(this.years)
}, //日歷事件點(diǎn)擊事件
eventClick (event, jsEvent, pos) {
},
//背景點(diǎn)擊事件
dayClick (date, jsEvent, view) {
},詳細(xì) 可參考 fullcalendar文檔
使用vue-full-calendar時(shí)報(bào)錯(cuò)及解決
在使用2.8.1-0版本的vue-full-calendar報(bào)了很奇怪的錯(cuò)誤：
TypeError: cal.fullCalendar is not a function
經(jīng)過查閱之后，發(fā)現(xiàn)解決方案非常簡(jiǎn)單，只需要在package.json中增加如下引用：
// 放在dependencies里即可 "fullcalendar": "^3.10.2",
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue路由跳轉(zhuǎn)傳參或打開新頁面跳轉(zhuǎn)的方法總結(jié)
這篇文章主要給大家介紹了關(guān)于Vue路由跳轉(zhuǎn)傳參或打開新頁面跳轉(zhuǎn)的相關(guān)資料,在使用Vue.js開發(fā)單頁面應(yīng)用時(shí)常常會(huì)遇到路由跳轉(zhuǎn)傳參的需求,需要的朋友可以參考下2023-07-07
詳解vue的數(shù)據(jù)劫持以及操作數(shù)組的坑
這篇文章主要介紹了vue的數(shù)據(jù)劫持以及操作數(shù)組的坑，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Vue文件下載進(jìn)度條的實(shí)現(xiàn)過程
這篇文章主要介紹了Vue文件下載進(jìn)度條的實(shí)現(xiàn)原理,通過使用onDownloadProgress方法API獲取進(jìn)度及文件大小等數(shù)據(jù)，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-07-07
Vue設(shè)置長(zhǎng)時(shí)間未操作登錄自動(dòng)到期返回登錄頁
這篇文章主要介紹了Vue設(shè)置長(zhǎng)時(shí)間未操作登錄以后自動(dòng)到期返回登錄頁,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2020-01-01
這篇文章主要為大家詳細(xì)介紹了vue.js路由跳轉(zhuǎn)的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
vue的axios請(qǐng)求改變content-type為form-data問題
這篇文章主要介紹了vue的axios請(qǐng)求改變content-type為form-data問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue響應(yīng)式原理的的相關(guān)資料，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-06-06
深入探索VueJS Scoped CSS 實(shí)現(xiàn)原理
這篇文章主要介紹了深入探索VueJS Scoped CSS 實(shí)現(xiàn)原理，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
前端開發(fā)指南之vue-grid-layout的使用實(shí)例
vue-grid-layout是一個(gè)vue柵格拖動(dòng)布局的組件,下面這篇文章主要給大家介紹了關(guān)于前端開發(fā)指南之vue-grid-layout使用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
vue項(xiàng)目使用luckyexcel預(yù)覽excel表格功能(心路歷程)
這篇文章主要介紹了vue項(xiàng)目使用luckyexcel預(yù)覽excel表格,我總共嘗試了2種方法預(yù)覽excel,均可實(shí)現(xiàn),還發(fā)現(xiàn)一種方法可以實(shí)現(xiàn),需要后端配合,叫做KKfileview,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10