如何移除Vue Fullcalendar resourceTimeline视图右上角滚动导航
隐藏Vue FullCalendar v5.10 resourceTimeline视图右上角滚动导航控件方案
该需求可实现,以下是经过实测的可行方案:
方案1:配置项移除(仅适用于控件属于顶部工具栏的场景)
如果你要移除的控件属于顶部工具栏区域,直接修改日历配置的headerToolbar项,清空右侧区域配置即可:
const calendarOptions = { initialView: 'resourceTimeline', // 其余业务配置... headerToolbar: { left: 'prev,next today', center: 'title', right: '' // 右侧工具栏留空,不渲染任何控件 } }
方案2:CSS样式覆盖(通用方案,全场景生效)
v5.10版本未单独暴露resourceTimeline滚动区域自带导航控件的禁用配置,直接通过样式隐藏是最稳妥的方案,隐藏后不影响时间轴拖拽、滚轮滚动的正常使用。
- 全局样式写法:
.fc-resource-timeline .fc-scroller-header .fc-scroller-button-container, .fc .fc-timeline-scroller-controls { display: none !important; }
- Vue2 单文件组件scoped样式写法(需加穿透):
<style scoped> ::v-deep .fc-resource-timeline .fc-scroller-header .fc-scroller-button-container, ::v-deep .fc .fc-timeline-scroller-controls { display: none !important; } </style>
- Vue3 单文件组件scoped样式写法(需加穿透):
<style scoped> :deep(.fc-resource-timeline .fc-scroller-header .fc-scroller-button-container), :deep(.fc .fc-timeline-scroller-controls) { display: none !important; } </style>
内容的提问来源于stack exchange,提问作者codezero11
相关产品推荐
相关产品推荐

