FullCalendar是否支持无需长按的Tap/Touch选择/创建事件？

默认FullCalendar在触控设备上得长按才能选择时间段，要改成轻触就触发和鼠标点击一样的效果，可以通过自定义触摸事件结合FullCalendar的API来实现，具体步骤如下：

• 先禁用默认的触摸长按选择行为，避免和自定义逻辑冲突
• 给日历的网格单元格绑定touchend事件，触发对应点击操作

具体代码示例：

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'timeGridWeek',
    editable: true,
    selectable: false, // 关闭默认选择，防止冲突
    // 你的其他日历配置...
  });

  calendar.render();

  // 给日历网格单元格绑定轻触事件
  const bindTouchEvents = () => {
    const gridCells = calendarEl.querySelectorAll('.fc-daygrid-day, .fc-timegrid-slot');
    gridCells.forEach(cell => {
      cell.addEventListener('touchend', function(e) {
        e.preventDefault();
        // 获取单元格对应的日期/时间范围
        const dateInfo = calendar.getDateInfo(this);
        // 触发选择操作，和点击效果一致
        calendar.select(dateInfo.start, dateInfo.end);
        // 如果需要触发dateClick回调，可手动调用：
        // calendar.trigger('dateClick', { date: dateInfo.start, jsEvent: e });
      }, { passive: false });
    });
  };

  bindTouchEvents();

  // 视图切换后重新绑定事件，适配动态视图场景
  calendar.on('viewDidMount', bindTouchEvents);
});

• 注意事项：
  • 必须在日历渲染完成后再绑定事件，否则无法获取到网格元素
  • 根据你使用的视图类型（如日视图、时间网格视图），调整选择器匹配对应的单元格
  • 视图切换后需要重新绑定事件，因此用viewDidMount钩子处理动态切换情况

官方文档虽未直接提供该配置，但通过自定义事件监听完全可以实现需求。

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