fullcalendar更新数据,

  fullcalendar更新数据,

  本文主要介绍全日历日程管理插件的月份切换回调处理方案的一个实例。有需要的朋友可以借鉴一下,希望能有所帮助。祝大家进步很大,早日升职加薪。

  

目录

  解决方案示例fullcalendar设置和渲染点击事件定义呈现效果注:fullcalendar版本:v5.9.0

  

解决方案

  全日历下一个、上一个等切换月份的按钮没有回拨功能。回调函数必须使用customButtons(自定义按钮,官方文档),可以提供回调函数,然后调用回调函数。

  这个。$ refs . calendar . $ options . calendar . next();或者calendar . next();

  转到交换月份。

  

示例

  核心代码

  

fullcalendar设置及渲染

  var now Date=new Date();

  var nowDateStr=nowDate。格式( yyyy-MM-DD );

  var选项={

  initialDate: nowDateStr,

  //默认星期日为第一天

  //firstDay: 1,

  //日历中的日程是否可以编辑。可编辑意味着可以移动、调整大小等。

  可编辑:假,

  dayMaxEvents: true,

  //允许是否可以点击日/周的名称,包括星期号。点击后可以跳转到日/周视图,默认为假。

  navLinks:假,

  日期点击:日期点击,

  //自定义按钮

  自定义按钮:{

  上一年自定义:{

  文本:“去年”,

  点击:function() {

  preveyearchustomclick();

  }

  },

  前期客户:{

  文本:“上个月”,

  点击:function() {

  prevMonthCustomClick();

  }

  },

  下个月客户:{

  文本:“下个月”,

  点击:function() {

  nextMonthCustomClick();

  }

  },

  下一年自定义:{

  文本:“明年”,

  点击:function() {

  nextYearCustomClick();

  }

  },

  今日定制:{

  文本:“今天”,

  点击:function() {

  todayCustomClick();

  }

  }

  },

  //头部按钮布局显示设置

  headerToolbar: {

  右:“上一年客户,上一个月客户,下一个月客户,下一年客户今天客户”,

  },

  事件:[

  ]

  };

  var calendar=full calendar . init calendar( calendar ,option);

  

点击事件定义

  //日期点击事件

  功能日期点击(信息){

  console . log(info);

  }

  //点击前一年

  函数preveyearchustomclick(){

  calendar . prev year();

  render calendar();

  }

  //点击上个月

  函数prevMonthCustomClick(){

  calendar . prev();

  render calendar();

  }

  //点击下个月

  函数nextMonthCustomClick(){

  calendar . next();

  render calendar();

  }

  //点击明年

  函数nextYearCustomClick(){

  calendar . next year();

  render calendar();

  }

  //今天点击

  function todayCustomClick(){

  calendar . today();

  render calendar();

  }

  //刷新日历数据

  函数renderCalendar(){

  //TODO:调用接口获取数据,这里定义为空数组。

  var事件=[];

  calendar.setOption(events ,事件);

  }

  

展示效果

  

注意:

  完整日历事件计划数据源的开始和结束分别对应于开始日期和结束日期。如果开始日期和结束日期是同一天,那么@eventClick回调参数中的结束日期默认为null。

  以上是fullcalendar日程管理插件next和prev等切换月份的回调处理细节。更多关于fullcalendarnext、prev等切换月份的回拨信息,请关注我们的其他相关文章!

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: