快捷導(dǎo)航

fullcalendar日程管理插件月份切換回調(diào)處理方案

更新時(shí)間：2022年03月11日 15:59:25 作者：Q.E.D.

這篇文章主要為大家介紹了fullcalendar日程管理插件月份切換回調(diào)處理的方案示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

解決方案

fullcalendar next ,prev等切換月份的按鈕是沒(méi)有回調(diào)函數(shù)，要想由回調(diào)函數(shù)必須用customButtons（自定義按鈕，官方文檔），它能提供回調(diào)函數(shù)，然后再回調(diào)函數(shù)里通過(guò)調(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,
  // 允許天/周名稱(chēng)是否可點(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)開(kāi)始日期和結(jié)束日期，如果開(kāi)始日期和結(jié)束日期是同一天的那么在@eventClick回調(diào)參數(shù)中end是默認(rèn)為null的