Full Calendar Prev - Next Button in React

Question

I'm using a full calendar in React and facing one problem i.e. I can't able to trigger an event on prev and next button at the header of the calendar. Please help me how can I able to add event(click) on prev and next button in React. Using Full Calendar v4

Answer 1

I was having the same problem and solves as follows:

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

And

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