React BigCalendar如何为所有事件设置不同颜色？

问题核心分析 #

你代码中backgroundColor返回undefined，大概率是两个原因：

1. rooms.filter(room => room.id === event.locationId)[0]没匹配到任何会议室（meetingRoom为undefined），但三元表达式本应返回#fff，说明可能存在数据类型不匹配导致全等判断失败；
2. 匹配到了meetingRoom，但该对象的color字段本身就是undefined。

具体解决步骤 #

1. 优化匹配逻辑与调试 #

把filter[0]换成更高效的find，同时添加日志排查数据问题，并用更安全的语法避免undefined：

<Calendar
  components={toolBarButtonActions()}
  defaultView='week'
  localizer={localizer}
  events={roomEvents}
  startAccessor="start"
  endAccessor="end"
  style={{ height: "100%", width: "100%", margin: "55px" }}
  eventPropGetter={event => {
    // 打印日志排查数据
    console.log('当前事件locationId:', event.locationId);
    console.log('会议室列表:', rooms);
    
    // 用find替代filter[0]，更高效
    const meetingRoom = rooms.find(room => room.id === event.locationId);
    console.log('匹配到的会议室:', meetingRoom);
    
    // 可选链+空值合并，确保不会返回undefined
    const backgroundColor = meetingRoom?.color ?? "#fff";
    return { style: { backgroundColor } };
  }}
/>

2. 统一数据类型匹配 #

如果event.locationId是字符串（比如"1"），而room.id是数字（比如1），全等判断===会失败，需统一类型后再匹配：

const meetingRoom = rooms.find(room => String(room.id) === String(event.locationId));

3. 提前预处理事件数据（可选） #

把颜色匹配逻辑移到组件外部，提前给每个事件添加color字段，简化组件内逻辑：

// 提前处理事件数据，注入对应颜色
const processedRoomEvents = roomEvents.map(event => {
  const targetRoom = rooms.find(room => room.id === event.locationId);
  return {
    ...event,
    eventColor: targetRoom?.color ?? "#fff"
  };
});

// 组件内直接使用预处理后的数据
<Calendar
  // ...其他属性
  events={processedRoomEvents}
  eventPropGetter={event => ({
    style: { backgroundColor: event.eventColor }
  })}
/>

4. 验证会议室数据完整性 #

确认rooms数组中每个对象都包含有效的color字段，值为合法的颜色格式（比如"#ff0000"、"blue"等），避免出现color为null或undefined的情况。

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