在vue2项目中使用fullcalendar开发日历,在显示隐藏侧边菜单栏时,发现fullcalendar并没有监听到width到变化从而更新视图。
正常效果应该是:
在尝试使用监听侧边栏的显示/隐藏按钮,使用fullcalendar的updateSize方法重新调整大小。
<FullCalendar ref="fullCalendar" :options="calendarOptions" />
this.$refs.fullCalendar.getApi().updateSize()
得到的结果却是:
打印之后发现拿不到updateSize方法。
console.log(this.$refs.fullCalendar.getApi(),"this.$refs.fullCalendar.getApi()");
最终解决方法:使用css,找到出问题的css位置,如果使用了dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin插件。代码如下:
.fc {
.fc-col-header,
.fc-daygrid-body,
.fc-timegrid-body,
.fc-timegrid-cols > table,
.fc-timegrid-slots > table,
.fc-scrollgrid-sync-table {
/* inline-size: 100% !important; */
width: 100% !important; /* inline-size 与 width 效果相同 */
}
}
效果: