如何修改React-big-calendar中event组件的默认props并添加自定义属性

实现逻辑 #

react-big-calendar不会过滤你传入的event对象字段，所有自定义属性都会完整保留，直接从自定义Event组件的event prop中读取即可。

具体操作步骤 #

1. 构造带自定义属性的events数组
   你可以直接在每个event对象中追加你需要的3个自定义字段，不需要修改任何组件配置：

const events = [
  {
    // 原有必填内置属性
    title: '产品需求评审',
    start: new Date(2024, 5, 21, 14, 0),
    end: new Date(2024, 5, 21, 16, 0),
    allDay: false,
    resource: '产品组',
    // 你新增的3个自定义属性，示例如下，可自行修改字段名
    meetingRoom: '2号会议室',
    attendeeCount: 8,
    organizer: '李小明'
  }
]

2. 自定义Event组件读取自定义属性
   自定义的Event组件会接收包含完整event数据的prop，直接从event对象中取你新增的字段即可：

const CustomEventComponent = ({ event }) => {
  // 读取自定义属性
  const { meetingRoom, attendeeCount, organizer } = event
  return (
    <div className="custom-event-card">
      <div className="event-title">{event.title}</div>
      <div className="event-meta">
        <span>{meetingRoom}</span>
        <span>{attendeeCount}人参会</span>
        <span>组织者：{organizer}</span>
      </div>
    </div>
  )
}

3. 给Calendar组件传入自定义Event组件
   通过components属性将你写的自定义Event组件注入到日历中即可生效：

import { Calendar, momentLocalizer } from 'react-big-calendar'
import moment from 'moment'
import 'react-big-calendar/lib/css/react-big-calendar.css'

const localizer = momentLocalizer(moment)

function App() {
  return (
    <Calendar
      localizer={localizer}
      events={events}
      startAccessor="start"
      endAccessor="end"
      components={{
        // 传入自定义的Event组件
        event: CustomEventComponent
      }}
      style={{ height: 600 }}
    />
  )
}

TypeScript 适配说明 #

如果你使用TypeScript开发，只需要扩展Event的类型定义即可：

// 定义带自定义属性的Event类型
type MyCustomEvent = {
  title: string
  start: Date
  end: Date
  allDay?: boolean
  resource?: any
  // 追加你的自定义属性类型
  meetingRoom: string
  attendeeCount: number
  organizer: string
}

// 给Calendar组件指定泛型
<Calendar<MyCustomEvent>
  // 其他属性保持不变
  localizer={localizer}
  events={events}
  // ...
/>

内容的提问来源于stack exchange，提问作者steph-car