FullCalendar v6时间线视图分隔条无法拖拽问题求助

• 启用核心配置（v5+版本适用）
  在初始化日历的时候，必须开启resourceColumns.resizable属性，这是官方提供的资源列宽度调整开关，同时可搭配最小/最大宽度限制：

  document.addEventListener('DOMContentLoaded', function() {
    const calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
      schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
      initialView: 'resourceTimelineDay',
      resources: [/* 你的资源数据 */],
      resourceColumns: {
        resizable: true, // 关键：开启列宽调整
        minWidth: 120,   // 可选：限制最小宽度
        maxWidth: 350    // 可选：限制最大宽度
      },
      events: [/* 你的事件数据 */]
    });
    calendar.render();
  });
  

• 确认依赖完整性
  资源视图属于FullCalendar Scheduler插件功能，必须确保引入了对应依赖：

  • npm安装场景：

    npm install @fullcalendar/core @fullcalendar/resource-timeline @fullcalendar/scheduler
    

    导入时要包含所有必需模块：

    import '@fullcalendar/core';
    import '@fullcalendar/resource-timeline';
    import '@fullcalendar/scheduler';
    

  • CDN引入场景：需同时引入FullCalendar核心包、resource-timeline插件包以及scheduler插件包的CDN脚本，缺一不可。

• 排查样式冲突
  自定义CSS可能会覆盖分隔条的默认样式，导致无法拖拽。检查是否有隐藏调整器或修改光标样式的代码，比如：

  .fc-resource-column-resizer {
    display: none !important;
    cursor: default !important;
  }
  

  若有，删除这类规则，或手动恢复默认样式：

  .fc-resource-column-resizer {
    cursor: col-resize !important;
    width: 6px !important;
    z-index: 10 !important;
  }
  

• 旧版本兼容（v4及更早）
  这些版本没有官方的resizable配置，要么升级到v5+，要么自己实现拖拽逻辑：监听分隔条的mousedown事件，计算鼠标移动距离动态调整资源列宽度。

内容的提问来源于stack exchange，提问作者Đỗ Thành