如何配置React FullCalendar实现鼠标左右键滚动与日期选择功能？

需求说明 #

需要实现两个核心效果：

• 左键拖拽平滑滚动：按住左键拖拽日历区域，实现视图的上下/左右平滑滚动
• 右键点击选日期：右键点击日历的日期区域，触发日期选择功能

所需配置及代码修改 #

你需要在现有代码基础上添加/调整以下属性：

1. 开启左键拖拽平滑滚动
   添加 dragScroll={true} 属性，该属性由 interactionPlugin 提供，允许按住左键拖拽日历视图实现平滑滚动。

2. 配置右键触发日期选择
   保留 selectable={true}，新增 selectAllow 回调函数，仅允许右键点击时触发选择；同时保留 selectMirror={true} 维持选择时的视觉反馈。

修改后的完整代码如下：

<FullCalendar 
  schedulerLicenseKey="xxx" 
  plugins={[ resourceTimelinePlugin, interactionPlugin ]}
  initialView='resourceTimelineWeek'
  height='auto'
  stickyFooterScrollbar
  editable={true}
  selectable={true}
  selectMirror={true}
  // 开启左键拖拽滚动
  dragScroll={true}
  // 仅允许右键触发选择（button=2 对应鼠标右键）
  selectAllow={(info) => info.jsEvent.button === 2}
  scrollTime='00:00'
  resources={[
    { id: 'a', building: '460 Bryant', title: 'Auditorium A' },
    { id: 'b', building: '460 Bryant', title: 'Auditorium B' },
    { id: 'c', building: '460 Bryant', title: 'Auditorium C' },
    { id: 'd', building: '460 Bryant', title: 'Auditorium D' },
    { id: 'e', building: '460 Bryant', title: 'Auditorium E' },
  ]}
  resourceGroupField='building'
/>

补充优化 #

如果右键选择时需要屏蔽浏览器默认的右键菜单，可添加全局事件监听：

document.addEventListener('contextmenu', (e) => {
  // 判断点击区域是否在日历内
  if (e.target.closest('.fc-scrollgrid')) {
    e.preventDefault();
  }
});

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