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

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

2 个答案: