如何在react-big-calendar中实现点击编辑日历事件功能？

你提到的点击事件修改标题、日期的需求，完全可以通过react-big-calendar实现，无需更换其他库，只需要补充对应回调属性和编辑逻辑即可

实现方法 #

你只需要在原有的Calendar组件上新增对应的事件回调属性，搭配编辑弹窗/inline编辑组件即可完成需求，具体修改如下：

• 新增onSelectEvent属性绑定点击事件回调，触发后唤起编辑面板修改事件标题、日期
• 新增selectable、onEventDrop、onEventResize属性，支持直接拖拽调整事件的开始/结束日期
• 如果需要自定义事件块的渲染样式，可以搭配components属性实现inline编辑效果

修改后完整代码示例 #

import { useState } from 'react'
import { Calendar, momentLocalizer } from 'react-big-calendar'
import moment from 'moment'
// 以下编辑组件可替换为你项目在用的任意UI库组件
import { Modal, Input, DatePicker } from 'antd'
// 必须引入react-big-calendar样式
import 'react-big-calendar/lib/css/react-big-calendar.css'

const localizer = momentLocalizer(moment)

const MyCalendar = () => {
  // 事件列表数据
  const [allEvents, setAllEvents] = useState([
    { id: 1, title: '示例会议', start: new Date(), end: moment().add(2, 'hour').toDate() }
  ])
  // 编辑状态控制
  const [editVisible, setEditVisible] = useState(false)
  const [curEditEvent, setCurEditEvent] = useState(null)
  const [formData, setFormData] = useState({ title: '', start: null, end: null })

  // 点击日历事件触发编辑
  const handleEventClick = (event) => {
    setCurEditEvent(event)
    setFormData({
      title: event.title,
      start: event.start,
      end: event.end
    })
    setEditVisible(true)
  }

  // 拖拽调整事件日期后更新数据
  const handleEventDrop = ({ event, start, end }) => {
    setAllEvents(prev => prev.map(item => 
      item.id === event.id ? {...item, start, end} : item
    ))
  }

  // 保存编辑后的事件数据
  const handleSave = () => {
    setAllEvents(prev => prev.map(item => 
      item.id === curEditEvent.id ? {...item, ...formData} : item
    ))
    setEditVisible(false)
  }

  return (
    <>
      <Calendar
        localizer={localizer}
        events={allEvents}
        startAccessor="start"
        endAccessor="end"
        views={['month']}
        // 新增以下配置
        selectable={true}
        onSelectEvent={handleEventClick}
        onEventDrop={handleEventDrop}
        onEventResize={handleEventDrop}
      />
      {/* 编辑弹窗 */}
      <Modal
        title="编辑日历事件"
        open={editVisible}
        onOk={handleSave}
        onCancel={() => setEditVisible(false)}
      >
        <div style={{ marginBottom: 12 }}>
          <label>事件标题：</label>
          <Input 
            value={formData.title}
            onChange={e => setFormData({...formData, title: e.target.value})}
            style={{ marginTop: 6 }}
          />
        </div>
        <div style={{ marginBottom: 12 }}>
          <label>开始时间：</label>
          <DatePicker
            showTime
            value={moment(formData.start)}
            onChange={(date) => setFormData({...formData, start: date.toDate()})}
            style={{ marginTop: 6, width: '100%' }}
          />
        </div>
        <div>
          <label>结束时间：</label>
          <DatePicker
            showTime
            value={moment(formData.end)}
            onChange={(date) => setFormData({...formData, end: date.toDate()})}
            style={{ marginTop: 6, width: '100%' }}
          />
        </div>
      </Modal>
    </>
  )
}

export default MyCalendar

其他可选React日历库 #

如果后续有更复杂的日历需求，也可以选择以下成熟的开源组件：

• FullCalendar React版：功能覆盖非常全面，自带编辑、重复事件、多视图切换、资源调度等能力，生态完善
• DevExpress DX React Scheduler：企业级调度组件，支持复杂的权限控制、资源分配、自定义编辑逻辑等场景
• MUI X Calendar：适配MUI生态的日历组件，风格统一，简单场景使用成本低

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