在 React 中创建 FullCalendar 自定义按钮

Question

我正在使用 React 实现 FullCalendar，并且想要添加自定义按钮。FullCalendar 文档涵盖了自定义按钮，但不适用于 React。

我已经尝试了文档中显示的自定义按钮代码的不同变体，但我无法在 React 中使用任何内容。我已将自定义按钮放入数组中。我尝试将自定义按钮代码移出渲染方法。

export default class DemoApp extends React.Component {

  calendarComponentRef = React.createRef()
  state = {
    calendarWeekends: true,
    calendarEvents: [ // initial event data
      { title: 'Event Now', start: new Date() }
    ]
  }

  render() {
    return (
      <div className='demo-app'>
        <div className='demo-app-top'>
          <button onClick={ this.toggleWeekends }>toggle weekends</button>&nbsp;
          <button onClick={ this.gotoPast }>go to a date in the past</button>&nbsp;
          (also, click a date/time to add an event)
        </div>
        <div className='demo-app-calendar'>
          <FullCalendar
            customButtons: {
                myCustomButton: {
                    text: 'custom!',
                    click: function() {
                        alert('clicked the custom button!');
                        }
                    }
            },
            defaultView="dayGridMonth"
            header={{
              left: 'prev,next today',
              center: 'title, myCustomButton'
              right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
            }}
            plugins={[ dayGridPlugin, timeGridPlugin, interactionPlugin ]}
            ref={ this.calendarComponentRef }
            weekends={ this.state.calendarWeekends }
            events={ this.state.calendarEvents }
            dateClick={ this.handleDateClick }
            />
        </div>
      </div>
    )
  }

我收到一条错误消息，告诉我 myCustomButton 未定义。

Answer 1

将以下属性添加到FullCalendarReact 组件：

<FullCalendar
    ...
    customButtons={{
        myCustomButton: {
            text: 'custom!',
            click: function() {
                alert('clicked the custom button!');
            },
        },
    }},
    header={{
        left: 'prev,next today myCustomButton',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
    }}
    ...
/>