FullCalendar中eventContent插入的select下拉框无法鼠标点击如何解决

问题根因 #

FullCalendar为了支持事件拖拽、点击选中、调整时长等交互，默认会在事件外层容器绑定mousedown/pointerdown事件并阻止部分原生交互逻辑，导致点击事件内部的select元素时，原生触发下拉框的行为被拦截，只有通过Tab获取焦点后才能操作。

解决方案 #

方案1：保留事件编辑能力（拖拽/点击等交互不受影响） #

在日历配置中新增eventDidMount钩子，拦截select元素的鼠标事件冒泡，避免被FullCalendar的外层事件拦截即可。
操作步骤：

1. 给eventContent中插入的select元素添加专属类名，例如event-select：

eventContent: function(arg) {
  return {
    html: `<select class="event-select">
      <option>选项1</option>
      <option>选项2</option>
    </select>`
  }
}

2. 日历配置中新增eventDidMount钩子绑定事件：

var calendar = new FullCalendar.Calendar(calendarEl, {
  // 其他原有配置保持不变
  eventDidMount: function(info) {
    const selectEl = info.el.querySelector('.event-select');
    if (selectEl) {
      // 拦截鼠标按下事件冒泡
      selectEl.addEventListener('mousedown', function(e) {
        e.stopPropagation();
      });
      // 若需要兼容移动端触摸操作，额外添加touchstart事件拦截
      selectEl.addEventListener('touchstart', function(e) {
        e.stopPropagation();
      });
    }
  }
});

方案2：不需要事件编辑能力 #

如果你的场景不需要拖拽调整事件位置、修改事件时长等编辑功能，直接关闭日历的编辑配置即可：

var calendar = new FullCalendar.Calendar(calendarEl, {
  // 其他原有配置保持不变
  editable: false,
  eventStartEditable: false,
  eventDurationEditable: false
});

关闭编辑属性后，FullCalendar不会绑定事件拦截逻辑，内部的select元素即可正常响应点击操作。

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