向 FullCalendar 添加自定义按钮反应

Question

我在我的 React 应用程序中使用

FullCalendar

。我想在 headerToolbar 中添加一个自定义按钮。我怎样才能做到这一点。

    <FullCalendar
      plugins={[dayGridPlugin, interactionPlugin, timeGridPlugin]}
      headerToolbar={{
        left: "prev, next, today",
        center: "title",
        right: "dayGridMonth, timeGridWeek, timeGridDay",
      }}
      allDaySlot={false}
      initialView="dayGridMonth"
      slotDuration={"01:00:00"}
      editable={true}
      selectable={true}
      selectMirror={true}
      weekends={true}
      nowIndicator={true}
      events={allEvents}
    />

Answer 1

您可以使用

customButtons

props

添加它

<FullCalendar 
  plugins = {[dayGridPlugin, interactionPlugin, timeGridPlugin]}
  customButtons={{
    testButton : {
      text: 'test!',
      click: function () {
        alert('Test button!');
      },
      }
  }}
  headerToolbar={{
    left: 'prev, next, today, testButton',
    center: 'title',
    right: 'dayGridMonth, timeGridWeek, timeGridDay'
  }}
  allDaySlot={false}
  initialView="dayGridMonth"
  slotDuration={"01:00:00"}
  editable={true}
  selectable={true}
  selectMirror={true}
  weekends={true}
  nowIndicator={true}
  events={allEvents}  
/>