React Big Calendar 事件自定义：如何为日历事件添加菜单按钮？

React Big Calendar支持自定义事件渲染，你可以通过替换默认的事件组件，在事件内部添加菜单按钮（编辑、删除等操作选项），具体实现步骤如下：

1. 核心思路 #

通过eventComponent属性自定义事件的渲染逻辑，在自定义组件中同时展示事件内容和操作菜单按钮，实现点击按钮触发对应的业务逻辑。

2. 实现代码示例 #

第一步：导入依赖模块 #

import { Calendar, momentLocalizer } from 'react-big-calendar';
import moment from 'moment';
import 'react-big-calendar/lib/css/react-big-calendar.css';

第二步：创建自定义事件组件 #

const CustomEvent = ({ event }) => {
  // 处理菜单按钮点击逻辑
  const handleAction = (actionType) => {
    switch (actionType) {
      case 'edit':
        // 这里编写编辑事件的逻辑，比如打开编辑弹窗
        console.log('开始编辑事件:', event);
        break;
      case 'delete':
        // 这里编写删除事件的逻辑
        console.log('开始删除事件:', event);
        break;
      default:
        break;
    }
  };

  return (
    <div className="rbc-event-content" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '0 8px' }}>
      {/* 展示事件标题 */}
      <span>{event.title}</span>
      {/* 操作菜单按钮组 */}
      <div className="event-actions">
        <button 
          onClick={() => handleAction('edit')}
          style={{ marginLeft: '6px', padding: '2px 6px', fontSize: '12px', cursor: 'pointer' }}
        >
          编辑
        </button>
        <button 
          onClick={() => handleAction('delete')}
          style={{ marginLeft: '6px', padding: '2px 6px', fontSize: '12px', cursor: 'pointer' }}
        >
          删除
        </button>
      </div>
    </div>
  );
};

第三步：在日历组件中使用自定义事件组件 #

const localizer = momentLocalizer(moment);

const MyCalendar = () => {
  // 示例事件数据
  const events = [
    {
      title: '团队会议',
      start: new Date(),
      end: new Date(new Date().setHours(new Date().getHours() + 1))
    },
    {
      title: '项目评审',
      start: new Date(new Date().setDate(new Date().getDate() + 1)),
      end: new Date(new Date().setDate(new Date().getDate() + 1)).setHours(15)
    }
  ];

  return (
    <div style={{ height: '600px', padding: '20px' }}>
      <Calendar
        localizer={localizer}
        events={events}
        startAccessor="start"
        endAccessor="end"
        eventComponent={CustomEvent} // 指定自定义事件组件
      />
    </div>
  );
};

export default MyCalendar;

3. 扩展优化 #

• 如果需要下拉式菜单，可以将按钮组替换为select标签或者使用第三方UI组件（如react-select）；
• 若要实现右键菜单，可以结合react-contextmenu库，在自定义事件组件中挂载右键菜单触发器；
• 可以通过CSS样式调整菜单按钮的外观，使其更贴合你的项目设计风格。

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