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,
// 默認周日作為第一天
// firstDay: 1,
// 日歷中的日程是否可以編輯. 可編輯是指可以移動, 改變大小等
editable: false,
dayMaxEvents: true,
// 允許天/周名稱是否可點擊,包括周次weekNumber,點擊之后可以跳轉(zhuǎ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);點擊事件定義
// 日期點擊事件
function dateClick(info){
console.log(info);
}
// 上一年點擊
function prevYearCustomClick(){
calendar.prevYear();
renderCalendar();
}
// 上月點擊
function prevMonthCustomClick(){
calendar.prev();
renderCalendar();
}
// 下月點擊
function nextMonthCustomClick(){
calendar.next();
renderCalendar();
}
// 下一年點擊
function nextYearCustomClick(){
calendar.nextYear();
renderCalendar();
}
// 今日點擊
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 分別對應(yīng)開始日期和結(jié)束日期,如果開始日期和結(jié)束日期是同一天的那么在@eventClick回調(diào)參數(shù)中end是默認為null的

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

