You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何移除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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.01 04:12:30