如何根据event.extendedProps.isBelong状态自定义FullCalendar事件的可调整大小与拖拽

要实现根据event.extendedProps.isBelong属性控制事件的拖拽和调整大小权限，无需手动修改DOM样式，FullCalendar提供了专门的配置项和钩子来处理这类交互控制，结合你现有的eventRender代码，可按以下方式实现：

1. 控制拖拽权限 #

使用eventAllow配置项，通过判断事件的isBelong属性返回布尔值，决定是否允许拖拽：

eventAllow: function(dropInfo, draggedEvent) {
  // 仅当isBelong为true时允许拖拽
  return draggedEvent.extendedProps.isBelong === true;
}

2. 控制调整大小权限 #

使用eventResizeAllow配置项，同样基于isBelong属性控制调整大小的权限：

eventResizeAllow: function(resizeInfo) {
  // 仅当isBelong为true时允许调整大小
  return resizeInfo.event.extendedProps.isBelong === true;
}

3. 配合eventRender优化交互元素 #

你当前的eventRender中手动添加了调整手柄（fc-resizer），需要根据isBelong属性决定是否渲染这些元素，避免无效的交互控件显示：

eventRender: function(info) {
  var event = info.event;
  var element = info.el;
  // 根据isBelong决定是否渲染调整手柄
  var resizerHtml = event.extendedProps.isBelong ? `
    <div class="fc-resizer fc-resizer-start"></div>
    <div class="fc-resizer fc-resizer-end"></div>
  ` : '';

  var customContent = `
    <div class="fc-content">
      <div class="custom-event-content" style="cursor: ${event.extendedProps.isBelong ? 'move' : 'initial'};padding: .6rem;">
        <small>${moment(event.start).format("HH:mm")} - ${moment(event.end).format("HH:mm")} </small><br/>
        <a style="color: ${event.textColor};text-decoration: none;" href="${event.extendedProps.urlString}"><strong> ${event.title} </strong></a><br/>
        <i class="fa-solid fa-eye pointer mt-2"></i>
      </div>
    </div>
    ${resizerHtml}
  `;

  element.innerHTML = customContent;

  var eyeIcon = element.querySelector('.fa-eye');
  if (eyeIcon) {
    eyeIcon.addEventListener('click', function() {
      openDetailModal(info);
    });
  }
},

这里还修改了cursor样式：当允许拖拽时，鼠标悬停事件显示移动光标，否则保持默认，提升用户体验。

完整配置示例 #

将上述配置整合到FullCalendar的初始化代码中：

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    // 其他基础配置（比如header、views等）
    eventAllow: function(dropInfo, draggedEvent) {
      return draggedEvent.extendedProps.isBelong === true;
    },
    eventResizeAllow: function(resizeInfo) {
      return resizeInfo.event.extendedProps.isBelong === true;
    },
    eventRender: function(info) {
      // 上述修改后的eventRender代码
    },
    // 其他必要配置（比如events数据源等）
  });
  calendar.render();
});

这样就能精准实现需求：仅当event.extendedProps.isBelong为true时，事件可拖拽和调整大小；属性为false时，这些交互功能完全禁用，且不会显示无效的调整手柄。

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