如何在React-Big Calendar月视图单个单元格中渲染多个事件？

核心思路：自定义事件渲染组件 #

React-Big Calendar支持自定义事件渲染逻辑，我们可以通过重写事件组件，把同一单元格内的多个图标横向排列，替代默认的纵向堆叠模式，避免单元格高度被拉长。

具体实现步骤 #

• 自定义事件图标组组件
  创建一个组件接收事件数据，将多个图标横向排布：

  // 示例使用Font Awesome图标，可替换为项目内的图标组件
  import { FaCoffee, FaShoppingCart } from '@fortawesome/react-fontawesome';
  
  const CustomEventIcons = ({ event }) => {
    // event.data为预先合并的当前单元格所有图标事件集合
    return (
      <div style={{ display: 'flex', gap: '4px', padding: '2px 4px' }}>
        {event.data.map((item, idx) => (
          <span key={idx} style={{ fontSize: '16px', color: item.color || '#333' }}>
            {item.icon}
          </span>
        ))}
      </div>
    );
  };
  

• 配置日历组件
  在Calendar中替换默认事件组件，同时禁用默认的事件堆叠样式：

  import { Calendar } from 'react-big-calendar';
  import 'react-big-calendar/lib/css/react-big-calendar.css';
  
  const MyCalendar = ({ mergedEvents }) => {
    return (
      <Calendar
        events={mergedEvents}
        components={{ event: CustomEventIcons }}
        // 覆盖默认事件样式，避免纵向堆叠
        eventPropGetter={() => ({
          style: {
            border: 'none',
            background: 'transparent',
            padding: 0,
            height: 'auto'
          }
        })}
      />
    );
  };
  

• 合并同时间段事件
  提前将同一单元格的多个事件合并为一个对象，把图标数据存入自定义字段：

  // 原始事件数据，每个事件对应一个图标
  const rawEvents = [
    { 
      start: new Date('2024-05-20T10:00:00'), 
      end: new Date('2024-05-20T11:00:00'), 
      icon: <FaCoffee />,
      color: '#6f4e37'
    },
    { 
      start: new Date('2024-05-20T10:00:00'), 
      end: new Date('2024-05-20T11:00:00'), 
      icon: <FaShoppingCart />,
      color: '#2ecc71'
    }
  ];
  
  // 按时间段合并事件
  const mergedEvents = Object.values(
    rawEvents.reduce((acc, event) => {
      // 用时间段的时间戳作为合并key
      const key = `${event.start.getTime()}-${event.end.getTime()}`;
      if (!acc[key]) {
        acc[key] = { ...event, data: [] };
      }
      acc[key].data.push(event);
      return acc;
    }, {})
  );
  

• 样式微调
  覆盖默认CSS，确保图标布局正常：

  .rbc-event-content {
    display: flex !important;
    align-items: center;
    padding: 0;
  }
  .rbc-event {
    height: auto !important;
  }
  

额外优化建议 #

• 若图标数量过多，可在组件中做截断处理，超出数量显示+N标记
• 给图标添加hover事件，显示对应事件的详细信息

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