fullcalendar next与prev等切换月份回调处理的方法(fullcalendar,next,prev,开发技术)

解决方案

fullcalendar next ,prev等切换月份的按钮是没有回调函数，要想由回调函数必须用customButtons（自定义按钮，官方文档），它能提供回调函数，然后再回调函数里通过调用this.$refs.calendar.$options.calendar.next();或calendar.next();去切换月份。

示例 核心代码 fullcalendar设置及渲染

varnowDate=newDate();varnowDateStr=nowDate.Format("yyyy-MM-dd");varoption={initialDate:nowDateStr,//默认周日作为第一天//firstDay:1,//日历中的日程是否可以编辑.可编辑是指可以移动,改变大小等editable:false,dayMaxEvents:true,//允许天/周名称是否可点击，包括周次weekNumber，点击之后可以跳转到对于的天/周视图，默认falsenavLinks: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();}}},//头部按钮布局展示设置headerToolbar:{right:'prevYearCustom,prevMonthCustom,nextMonthCustom,nextYearCustomtodayCustom',},events:[]};varcalendar=fullcalendar.initCalendar("calendar",option);

点击事件定义

//日期点击事件functiondateClick(info){console.log(info);}//上一年点击functionprevYearCustomClick(){calendar.prevYear();renderCalendar();}//上月点击functionprevMonthCustomClick(){calendar.prev();renderCalendar();}//下月点击functionnextMonthCustomClick(){calendar.next();renderCalendar();}//下一年点击functionnextYearCustomClick(){calendar.nextYear();renderCalendar();}//今日点击functiontodayCustomClick(){calendar.today();renderCalendar();}//刷新Calendar的数据functionrenderCalendar(){//TODO：调用接口获取数据,这里定义为空数组varevents=[];calendar.setOption('events',events);}

展示效果

注意：

fullcalendar events日程数据源的start和end 分别对应开始日期和结束日期，如果开始日期和结束日期是同一天的那么在@eventClick回调参数中end是默认为null的