vue-full-calendar修改侧栏时间间隔slotDuration【亲测有效】

做项目遇到一个需求,使用vue-full-calendar来做排版表,其中有一个就是要修改侧栏的时间间隔,例如:30分钟的时间间隔,改成10分钟等。
解决方式:
1、销毁后,重新创建

$('#mycalendar').fullCalendar('destroy');
$('#mycalendar').fullCalendar(calendarOptions);

这种销毁后重新创建的方式也是可以做的,但是日历记录的信息都会初始化,也就是默认时间又会从当前周开始,这样你就永远没法跳转到下一周去。

2、重新设置 options配置项

$('#cc-calendar').fullCalendar('option','slotDuration','00:10:00');

以上是使用jquery的方法。

使用VUE的方法如下:
1、销毁后,重新创建

this.$refs.calendar.fireMethod('destroy');// 销毁排班表
this.$refs.calendar.fireMethod(this.config);// 重新创建排班表

2、重新设置option配置项

this.$refs.calendar.fireMethod('option','slotDuration','00:10:00');

这样就可以实现切换了:
原来:
vue-full-calendar修改侧栏时间间隔slotDuration【亲测有效】_第1张图片
点击切换:
vue-full-calendar修改侧栏时间间隔slotDuration【亲测有效】_第2张图片
TIPS:

// 这样能够调取 calendar 的下一周的数据
// https://juejin.im/entry/5ab59faa5188252c32199f91
this.$refs.calendar.fireMethod('next');

参考文档:
http://www.maomikeji.cn
https://www.e-learn.cn/content/wangluowenzhang/700989
https://fullcalendar.io/docs/dynamic-options
https://juejin.im/entry/5ab59faa5188252c32199f91
https://www.npmjs.com/package/vue-full-calendar
https://stackoverflow.com/questions/26976079/fullcalendar-set-slotduration-not-working
https://www.helloweba.net/javascript/447.html#fc-destroy

你可能感兴趣的:(vue)