如何根据活动类型修改日历中特定日期事件的颜色？

在该日历中，我希望根据活动类型修改事件的颜色，例如将长事件设置为绿色。

以下是后端返回的示例数据：

{
  'title': 'All Day Event very long title',
  'allDay': true,
  'start': new Date(2023, 1, 1),
  'end': new Date(2023, 1, 6),
  'event': 'regular'
},
{
  'title': 'Long Event',
  'start': new Date(2023, 1, 1),
  'end': new Date(2023, 1, 1),
  'event':'holiday',
}

Front.js代码如下：

<Calendar
  views={["day", "agenda", "work_week", "month"]}
  selectable
  localizer={localizer}
  defaultDate={new Date()}
  defaultView="month"
  events={eventsData}
  style={{ height: "95%" }}
  onSelectEvent={(event) => alert(event.title)}
  onSelectSlot={handleSelect}
/>

实现方法 #

可以利用react-big-calendar（你使用的Calendar组件属于该库）提供的eventPropGetter属性动态设置事件样式：

1. 定义颜色映射表：关联不同活动类型与对应颜色

const eventColorMap = {
  regular: '#2ecc71', // 绿色
  holiday: '#e74c3c', // 红色
  // 可根据需求新增更多类型的颜色配置
};

2. 编写样式获取函数：根据事件的event字段返回对应样式

const getEventProps = (event) => {
  // 无匹配类型时使用默认蓝色
  const bgColor = eventColorMap[event.event] || '#3498db';
  return {
    style: {
      backgroundColor: bgColor,
      borderColor: bgColor, // 保持边框与背景色一致
      color: '#fff' // 文字设为白色提升可读性
    }
  };
};

3. 给Calendar组件添加属性：将上述函数传入eventPropGetter

<Calendar
  views={["day", "agenda", "work_week", "month"]}
  selectable
  localizer={localizer}
  defaultDate={new Date()}
  defaultView="month"
  events={eventsData}
  style={{ height: "95%" }}
  onSelectEvent={(event) => alert(event.title)}
  onSelectSlot={handleSelect}
  eventPropGetter={getEventProps} // 新增属性
/>

这样就能根据活动类型自动为事件设置对应颜色，后续新增活动类型只需在eventColorMap中补充配置即可。

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