關(guān)于vue-lunar-full-calendar的使用說(shuō)明
更新時(shí)間：2022年07月28日 08:40:52 作者：巖崎理奈
這篇文章主要介紹了關(guān)于vue-lunar-full-calendar的使用說(shuō)明，具有很好的參考價(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);
在需要用到的頁(yè)面引入組件
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: '日'
},
//分頁(yè)方法
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ù)頁(yè)面需求 調(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)過(guò)查閱之后，發(fā)現(xiàn)解決方案非常簡(jiǎn)單，只需要在package.json中增加如下引用：
// 放在dependencies里即可 "fullcalendar": "^3.10.2",
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3+vant4封裝日期時(shí)間組件方式(年月日時(shí)分秒)
這篇文章主要介紹了vue3+vant4封裝日期時(shí)間組件方式(年月日時(shí)分秒),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要為大家介紹了封裝一個(gè)更易用的Dialog組件過(guò)程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-05-05
Vue實(shí)現(xiàn)移動(dòng)端頁(yè)面切換效果【推薦】
這篇文章主要介紹了Vue實(shí)現(xiàn)移動(dòng)端頁(yè)面切換效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-11-11
vue proxy 的優(yōu)勢(shì)與使用場(chǎng)景實(shí)現(xiàn)
這篇文章主要介紹了vue proxy 的優(yōu)勢(shì)與使用場(chǎng)景實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
Vue中實(shí)現(xiàn)滾動(dòng)加載與無(wú)限滾動(dòng)
本文主要介紹了Vue中實(shí)現(xiàn)滾動(dòng)加載與無(wú)限滾動(dòng)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
vue+vuex+axio從后臺(tái)獲取數(shù)據(jù)存入vuex實(shí)現(xiàn)組件之間共享數(shù)據(jù)
這篇文章主要介紹了vue+vuex+axio從后臺(tái)獲取數(shù)據(jù)存入vuex，組件之間共享數(shù)據(jù),非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-04-04
在 Vue 的項(xiàng)目中，我們經(jīng)常會(huì)遇到 v-if、v-show、v-for 或 v-model 這些內(nèi)置指令，它們?yōu)槲覀兲峁┝瞬煌墓δ?。除了使用這些內(nèi)置指令之外，Vue 也允許注冊(cè)自定義指令。接下來(lái)，將使用Vue 3官方文檔自定義指令章節(jié)中使用的示例，來(lái)一步步揭開自定義指令背后的秘密。2021-05-05
這篇文章主要給大家介紹了關(guān)于vue升降版本以及如何查看項(xiàng)目版本的相關(guān)資料,在開發(fā)和維護(hù)Vue.js應(yīng)用程序時(shí)了解所使用的Vue.js版本非常重要,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
vue element封裝form表單的實(shí)現(xiàn)
本文主要介紹了vue element封裝form表單的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
手把手教你使用electron將vue項(xiàng)目打包成exe
Electron相當(dāng)于一個(gè)瀏覽器的外殼,可以把現(xiàn)有的vue程序嵌入到殼里面,下面這篇文章主要給大家介紹了關(guān)于如何使用electron將vue項(xiàng)目打包成exe的相關(guān)資料,需要的朋友可以參考下2023-01-01