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

最新推荐文章于 2024-07-25 13:00:00 发布

昆明猫咪科技创始人

最新推荐文章于 2024-07-25 13:00:00 发布

阅读量3.3k

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_40103332/article/details/94392195

版权

8 篇文章 0 订阅

订阅专栏

做项目遇到一个需求，使用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');

这样就可以实现切换了：
原来：
在这里插入图片描述
点击切换：

TIPS:

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

关注

专栏目录