Creating FullCalendar Custom Buttons in React

Question

I am implementing FullCalendar using React and want to add custom buttons. The FullCalendar docs cover custom buttons but not for React.

I've tried different variations of the custom button code shown in the docs but I can't get anything to work in React. I've put the custom button in an array. I've tried moving the custom button code out of the render method.

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>
    )
  }

I am getting an error telling my that myCustomButton is undefined.

Answer 1

Add the following properties to the FullCalendar React component:

<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'
    }}
    ...
/>