fullcalendar日程管理插件月份切換回調(diào)處理方案
fullcalendar 版本:v5.9.0
解決方案
fullcalendar next ,prev等切換月份的按鈕是沒有回調(diào)函數(shù),要想由回調(diào)函數(shù)必須用customButtons(自定義按鈕,官方文檔),它能提供回調(diào)函數(shù),然后再回調(diào)函數(shù)里通過調(diào)用
this.$refs.calendar.$options.calendar.next();或calendar.next();
去切換月份。
示例
核心代碼
fullcalendar設(shè)置及渲染
var nowDate = new Date();
var nowDateStr = nowDate.Format("yyyy-MM-dd");
var option = {
initialDate: nowDateStr,
// 默認(rèn)周日作為第一天
// firstDay: 1,
// 日歷中的日程是否可以編輯. 可編輯是指可以移動(dòng), 改變大小等
editable: false,
dayMaxEvents: true,
// 允許天/周名稱是否可點(diǎn)擊,包括周次weekNumber,點(diǎn)擊之后可以跳轉(zhuǎn)到對(duì)于的天/周視圖,默認(rèn)false
navLinks: false,
dateClick: dateClick,
// 自定義按鈕
customButtons: {
prevYearCustom: {
text: '上一年',
click: function() {
prevYearCustomClick();
}
},
prevMonthCustom: {
text: '上月',
click: function() {
prevMonthCustomClick();
}
},
nextMonthCustom: {
text: '下月',
click: function() {
nextMonthCustomClick();
}
},
nextYearCustom: {
text: '下一年',
click: function() {
nextYearCustomClick();
}
},
todayCustom: {
text: '今天',
click: function() {
todayCustomClick();
}
}
},
// 頭部按鈕布局展示設(shè)置
headerToolbar: {
right: 'prevYearCustom,prevMonthCustom,nextMonthCustom,nextYearCustom todayCustom',
},
events: [
]
};
var calendar = fullcalendar.initCalendar("calendar",option);點(diǎn)擊事件定義
// 日期點(diǎn)擊事件
function dateClick(info){
console.log(info);
}
// 上一年點(diǎn)擊
function prevYearCustomClick(){
calendar.prevYear();
renderCalendar();
}
// 上月點(diǎn)擊
function prevMonthCustomClick(){
calendar.prev();
renderCalendar();
}
// 下月點(diǎn)擊
function nextMonthCustomClick(){
calendar.next();
renderCalendar();
}
// 下一年點(diǎn)擊
function nextYearCustomClick(){
calendar.nextYear();
renderCalendar();
}
// 今日點(diǎn)擊
function todayCustomClick(){
calendar.today();
renderCalendar();
}
// 刷新Calendar的數(shù)據(jù)
function renderCalendar(){
// TODO:調(diào)用接口獲取數(shù)據(jù),這里定義為空數(shù)組
var events=[];
calendar.setOption('events', events);
}展示效果

注意:
fullcalendar events日程數(shù)據(jù)源的start和end 分別對(duì)應(yīng)開始日期和結(jié)束日期,如果開始日期和結(jié)束日期是同一天的那么在@eventClick回調(diào)參數(shù)中end是默認(rèn)為null的

以上就是fullcalendar日程管理插件next與prev等切換月份回調(diào)處理的詳細(xì)內(nèi)容,更多關(guān)于fullcalendar next與prev等切換月份回調(diào)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
深度了解vue.js中hooks的相關(guān)知識(shí)
這篇文章主要介紹了深度了解vue.js中hooks的相關(guān)知識(shí),生命周期鉤子提供了一些 方法 ,因此你可以在組件生命周期的不同時(shí)刻精確地觸發(fā)某些操作。當(dāng)我們將組件實(shí)例化時(shí),組件會(huì)被創(chuàng)建,反之會(huì)被銷毀。,需要的朋友可以參考下2019-06-06
vue2+springsecurity權(quán)限系統(tǒng)的實(shí)現(xiàn)
本文主要介紹了vue2+springsecurity權(quán)限系統(tǒng)的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
解決vue axios的封裝 請(qǐng)求狀態(tài)的錯(cuò)誤提示問題
今天小編就為大家分享一篇解決vue axios的封裝 請(qǐng)求狀態(tài)的錯(cuò)誤提示問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue3中調(diào)用api接口實(shí)現(xiàn)數(shù)據(jù)的渲染以及詳情方式
這篇文章主要介紹了vue3中調(diào)用api接口實(shí)現(xiàn)數(shù)據(jù)的渲染以及詳情方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08
vue/react項(xiàng)目刷新頁面出現(xiàn)404報(bào)錯(cuò)的原因及解決辦法
Vue項(xiàng)目打包部署到線上后,刷新頁面會(huì)提示404,下面這篇文章主要給大家介紹了關(guān)于vue/react項(xiàng)目刷新頁面出現(xiàn)404報(bào)錯(cuò)的原因及解決辦法,文中將解決的辦法介紹的很詳細(xì),需要的朋友可以參考下2023-05-05
Vue在原窗口與新窗口打開外部鏈接的實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue如何在原窗口與新窗口打開外部鏈接,文中給大家提到了vue跳轉(zhuǎn)外部鏈接的實(shí)現(xiàn)代碼,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
Vue Render函數(shù)創(chuàng)建DOM節(jié)點(diǎn)代碼實(shí)例
這篇文章主要介紹了Vue Render函數(shù)創(chuàng)建DOM節(jié)點(diǎn)代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
easycom模式開發(fā)UNI-APP組件調(diào)用必須掌握的實(shí)用技巧
uni-app基于VUE開發(fā),通常組件的使用都是先安裝,然后全局或者局部引入,注冊(cè),今天通過本文給大家分享easycom模式開發(fā)UNI-APP組件調(diào)用必須掌握的實(shí)用技巧,需要的朋友一起看看吧2021-08-08

