如何为React FullCalendar事件项应用服务端返回的动态自定义样式

解决方案 #

你可以通过两种方案实现动态颜色绑定，都可以满足100+条数据的性能要求：

方案1：使用FullCalendar内置颜色字段（最优，无需自定义渲染） #

FullCalendar本身支持事件对象传入backgroundColor、borderColor、textColor等内置样式字段，会自动应用为行内样式，不需要额外写自定义渲染逻辑，性能最优：

1. 修改事件构造逻辑，直接传入内置的backgroundColor字段

const init = () => {
  const dts = dates.map(item => ({
    title: item.EventText,
    date: item.Event,
    className: 'calender-item', // 注意删除原有类名中的bg-dark，避免背景色覆盖
    backgroundColor: item.CustomHexColor,
    // 可选：配置文字颜色，也可以由服务端返回动态值
    textColor: '#fff'
  }))
  setUpcomingDates(dts)
}

2. 删掉代码中的eventContent={renderEventContent}配置，使用组件默认的事件渲染逻辑即可。

方案2：自定义事件内容渲染 #

如果你需要自定义事件的DOM结构，只需要调整自定义属性的存储路径：FullCalendar要求所有非内置的事件属性必须存放在extendedProps字段下才能被正常读取：

1. 修改事件构造逻辑，将自定义颜色放入extendedProps

const init = () => {
  const dts = dates.map(item => ({
    title: item.EventText,
    date: item.Event,
    className: 'calender-item',
    extendedProps: {
      customColor: item.CustomHexColor
    }
  }))
  setUpcomingDates(dts)
}

2. 修改renderEventContent中的取值路径

function renderEventContent(eventInfo) {
  return (
    <div style={{ 
      backgroundColor: eventInfo.event.extendedProps.customColor,
      padding: '2px 6px',
      borderRadius: '4px',
      color: '#fff'
    }}>
      <b>{eventInfo.timeText}</b>
      <i> {eventInfo.event.title}</i>
    </div>
  )
}

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