完整日历上一个 - 反应中的下一个按钮

Question

>我在 React 中使用了一个完整的日历，并面临一个问题，即我无法在日历标题的上一个和下一个按钮上触发事件。请帮助我如何在 React 中的上一个和下一个按钮上添加事件(单击(。使用完整日历 v4

Answer 1

我遇到了同样的问题，并按如下方式解决：

<FullCalendar
    locale={ptBrLocale}
    defaultView="timeGridWeek"
    plugins={[dayGridPlugin, timeGridPlugin]}
    header={{
      left: 'prev, next',
      center: 'title',
      right: 'timeGridWeek'
    }}
    events={
      (fetchInfo, successCallback, failureCallback) => getCalendarData(fetchInfo, successCallback, failureCallback)
    }
    eventClick={(e) => openEvent(e)}
    forceEventDuration={true}
    eventTimeFormat={{
      hour: 'numeric',
      minute: 'numeric'
    }}
    titleFormat={{
      day: '2-digit', month: 'long'
    }}
    slotLabelFormat={{
      hour: '2-digit', minute: '2-digit'
    }}
    columnHeaderFormat={{
      weekday: 'short', day: 'numeric', omitCommas: true
    }}
    allDaySlot={false}
  />

和

async function getCalendarData(fetchInfo, successCallback) {
  try {
  let year = new Date().getFullYear();
  let month = new Date().getMonth() + 1;
  if (fetchInfo) {
    year = new Date(fetchInfo.start).getFullYear();
    month = new Date(fetchInfo.start).getMonth() + 1;
  }
  const response = await api.get(API, { year, month });
  successCallback(
    response.data.appointments.map(event => {
      return {
        id: event.id,
        title: event.name,
        start: event.datetime_start,
        end: event.datetime_finish,
      };
    })
  );
  } catch (error) {
    console.log(error);
  }
}

Answer 2

您还可以创建看起来与默认的"上一个，下一个"按钮完全相同的自定义按钮。

var calendar = new Calendar(calendarEl, {
  customButtons: {
    myCustomButton: {
      text: 'custom!',
      click: function() {
        alert('clicked the custom button!');
        // this will move the calendar backwards
        calendar.prev()
      }
    }
  },
  headerToolbar: {
    left: 'prev,next today myCustomButton',
    center: 'title',
    right: 'dayGridMonth,timeGridWeek,timeGridDay'
  }
});

然后继续添加一个图标 https://fullcalendar.io/docs/buttonIcons