React Big Calendar自定义周四标签后事件消失的技术问询

问题原因 #

1. 重复定义event组件：你在components的根级别和month视图下都声明了event: MyMonthEvent，可能引发组件渲染冲突。
2. 自定义dateHeader破坏默认布局：自定义的MyMonthDateHeader组件未使用原有的类名和结构，导致日历布局样式错乱，事件区域被遮挡或无法正常渲染。

修复方案 #

1. 调整components配置 #

移除根级别的event定义，仅在对应视图下配置（如果仅月视图需要自定义事件组件）：

<Calendar
  selectable={true}
  localizer={newLocalizer}
  culture={'fa'}
  startAccessor='start'
  endAccessor='end'
  style={{ height: 500 }}
  formats={configs.formats}
  messages={configs.messages}
  views={configs.views}
  rtl={configs.rtl}
  events={events}
  onSelectSlot={handleSlotSelect}
  eventPropGetter={eventStyleGetter}
  components={{
    month: {
      dateHeader: MyMonthDateHeader,
      event: MyMonthEvent
    }
  }}
/>

2. 修改自定义dateHeader组件，保留默认样式类 #

React Big Calendar的dateHeader组件会传递className等props维持默认布局，需在自定义组件中使用这些类名：

import React from 'react'

function MyMonthDateHeader(props) {
  const dayOfWeek = props.date.getDay()
  const style = {
    color: dayOfWeek === 5 ? 'red' : 'black'
  }
  // 保留原有的className，确保布局结构正确
  return (
    <div className={props.className} style={style}>
      {props.label}
      {dayOfWeek === 4 && (
        <div>
          <p>gym day</p>
        </div>
      )}
    </div>
  )
}

export default MyMonthDateHeader

额外提示 #

如果MyMonthEvent组件需要在所有视图生效，可只保留根级别的event配置，移除month下的event定义，避免重复配置引发的渲染异常。

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