不啰嗦,我们直接开始!
fullcalendar 版本:v5.9.0
解决方案
fullcalendar next ,prev等切换月份的按钮是没有回调函数,要想由回调函数必须用custombuttons(自定义按钮,官方文档),它能提供回调函数,然后再回调函数里通过调用this.$refs.calendar.$options.calendar.next();或calendar.next();去切换月份。
示例 核心代码 fullcalendar设置及渲染
var nowdate = new date();var nowdatestr = nowdate.format("yyyy-mm-dd");var option = { isubmittnitialdate: nowdatestr, // 默认周日作为第一天 // firstday: 1, // 日历中的日程是否可以编辑. 可编辑是指可以移动, 改变大小等 editable: fal, daymaxevents: true, // 允许天/周名称是否可点击,包括周次weeknumber,点击之后可以跳转到对于的天/周视图,默认fal navlinks: fal, 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,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的数据function rendercalendar(){ // todo:调用接口获取数据,这里定义为空数组 var events=[]; calendar.toption('events', events);}
展示效果
注意:
fullcalendar events日程数据源的start和end 分别对应开始日期和结束日期,如健康的副词果开始日期和结束日期是同一天的励志电影语录那么在@eventclick回调参数中end是默认为null的
不啰嗦,文章结束,建议三连!
本文发布于:2023-04-06 02:57:57,感谢您对本站的认可!
本文链接:https://www.wtabcd.cn/fanwen/zuowen/84b43afca251d18db2adadf868aad539.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文word下载地址:fullcalendar next与prev等切换月份回调处理.doc
本文 PDF 下载地址:fullcalendar next与prev等切换月份回调处理.pdf
留言与评论(共有 0 条评论) |