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, // 日歷中的日程是否可以編輯. 可編輯是指可以移動, 改變大小等 editable: false, dayMaxEvents: true, // 允許天/周名稱是否可點(diǎn)擊,包括周次weekNumber,點(diǎn)擊之后可以跳轉(zhuǎn)到對于的天/周視圖,默認(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 分別對應(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)的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
vue2+springsecurity權(quán)限系統(tǒng)的實(shí)現(xiàn)
本文主要介紹了vue2+springsecurity權(quán)限系統(tǒng)的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05解決vue axios的封裝 請求狀態(tài)的錯(cuò)誤提示問題
今天小編就為大家分享一篇解決vue axios的封裝 請求狀態(tài)的錯(cuò)誤提示問題,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09vue3中調(diào)用api接口實(shí)現(xiàn)數(shù)據(jù)的渲染以及詳情方式
這篇文章主要介紹了vue3中調(diào)用api接口實(shí)現(xiàn)數(shù)據(jù)的渲染以及詳情方式,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08vue/react項(xiàng)目刷新頁面出現(xiàn)404報(bào)錯(cuò)的原因及解決辦法
Vue項(xiàng)目打包部署到線上后,刷新頁面會提示404,下面這篇文章主要給大家介紹了關(guān)于vue/react項(xiàng)目刷新頁面出現(xiàn)404報(bào)錯(cuò)的原因及解決辦法,文中將解決的辦法介紹的很詳細(xì),需要的朋友可以參考下2023-05-05Vue在原窗口與新窗口打開外部鏈接的實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue如何在原窗口與新窗口打開外部鏈接,文中給大家提到了vue跳轉(zhuǎn)外部鏈接的實(shí)現(xiàn)代碼,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02Vue Render函數(shù)創(chuàng)建DOM節(jié)點(diǎn)代碼實(shí)例
這篇文章主要介紹了Vue Render函數(shù)創(chuàng)建DOM節(jié)點(diǎn)代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07easycom模式開發(fā)UNI-APP組件調(diào)用必須掌握的實(shí)用技巧
uni-app基于VUE開發(fā),通常組件的使用都是先安裝,然后全局或者局部引入,注冊,今天通過本文給大家分享easycom模式開發(fā)UNI-APP組件調(diào)用必須掌握的實(shí)用技巧,需要的朋友一起看看吧2021-08-08