Angular中FullCalendar如何禁用创建新事件时的拖拽调整时长功能

需求说明 #

在Angular项目的FullCalendar周视图（timeGridWeek）中，每个时间间隔为15分钟，需要禁止用户点击空白时段后通过拖拽鼠标定义新事件时长的操作。

解决方案 #

FullCalendar最新版本中，控制拖拽选择时间段的核心配置是selectable，只需确保该配置设置为false，即可完全禁用拖拽选择空白时段创建事件时长的功能。

针对现有代码的调整 #

你的calendarOptions中已经设置了selectable: false，这是正确的核心配置，可在此基础上做以下优化以确保效果：

• 确认interactionPlugin已正确引入（你的代码中已包含，无需修改）
• 将selectMirror设置为false（selectable为false时该配置不会生效，但设置为false更严谨）
• 确保没有其他业务逻辑动态将selectable修改为true

修改后的关键配置片段：

calendarOptions: CalendarOptions = {
  // 其他插件、工具栏、视图等配置保持不变
  editable: false,
  selectable: false, // 核心：禁用选择（含拖拽选择时间段）
  selectMirror: false, // 配合禁用选择，关闭选择镜像效果
  // 其余事件绑定、格式化配置保持不变
};

更精细的控制（可选） #

如果需要允许点击空白时段但禁止拖拽操作，可以使用selectAllow回调函数，返回false阻止所有选择行为：

calendarOptions: CalendarOptions = {
  // 其他配置不变
  selectable: true, // 开启选择基础功能
  selectAllow: (selectInfo) => {
    return false; // 阻止任何选择操作，包括拖拽
  },
  // 其余配置不变
};

但对于你的需求，直接设置selectable: false是最简洁高效的方案，它会完全关闭日历的选择交互能力，从根源上阻止拖拽定义事件时长的操作。

内容的提问来源于stack exchange，提问作者Thomas