7

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

Anuj
  • 71
  • 1
  • 3
  • There is no callback provided by fullCalendar to expose clicks on these buttons. But why do you want to handle that click anyway? If you have set your event feed up correctly then fullCalendar will automatically fetch new events for you when the user changes the date – ADyson Jul 27 '19 at 16:20
  • Thanks ADyson for your response. Actually I need to fetch the data from the API. First I can fetch the response of current month and shows the events on calendar but need to fetch the data on changing the month of changed month. So, for this I need to get what month was going to display or what button was clicked(prev or next). I used https://fullcalendar.io/docs/react but didn't get the solution. Please help me for what I have to do for this. – Anuj Jul 27 '19 at 17:35
  • "need to fetch the data on changing the month of changed month" ...that's what https://fullcalendar.io/docs/events-json-feed (or https://fullcalendar.io/docs/events-function if you have more complex requirements) is for - like I said, if you've set your event feed up properly, then fullCalendar will automatically fetch the new data for you when the date changes. You can use this feature whether or not you are using React in your page – ADyson Jul 27 '19 at 23:15
  • Thanks ADyson, Now I can load the data on changing month not not able to show events on the calendar. – Anuj Jul 29 '19 at 07:34
  • Here is my code, events = {{ url: MyAPI', success: function(response){ return ( { title: 'Event1', start: '2019-07-29' } ) } }} How can I show events on calendar now? – Anuj Jul 29 '19 at 07:36
  • why did you override the "success" function? What is supposed to be the purpose of that? What does your API URL actually return? Have you checked it successfully returns valid data? Have you checked that fullCalendar is definitely trying to access the URL? I can't tell you why it doesn't work because you haven't provided any debugging information. All I can tell you is that if you specify it correctly, it should work. – ADyson Jul 29 '19 at 08:29
  • http://34.253.17.25:8080/admin/api/0.0/bookings/?start=2019-06-30T00%3A00%3A00%2B05%3A30&end=2019-08-11T00%3A00%3A00%2B05%3A30 This is my GET API I get the response from this API Will you please check the data – Anuj Jul 29 '19 at 08:37
  • er...it's not even vaguely in the format fullCalendar expects. 1) you need to return a simple array. 2) each event object within the array needs to contain certain properties (and in the case of dates, those properties must be in the correct format). Read https://fullcalendar.io/docs/event-parsing – ADyson Jul 29 '19 at 08:48
  • Ok Means [ { title : 'event1', start : '2010-01-01' }, { title : 'event2', start : '2010-01-05', end : '2010-01-07' }, { title : 'event3', start : '2010-01-09T12:30:00', allDay : false // will make the time show } ] API resonse directly should be in this form Right, ADyson? – Anuj Jul 29 '19 at 09:17
  • yes it should be directly in that format. If for any reason you cannot make the API return it directly in that format, then use the [events-as-function](https://fullcalendar.io/docs/events-function) pattern where you declare a callback function, and within the function you make your own AJAX request to the API, get the data, transform it to fullCalendar format and then pass it back to fullCalendar. – ADyson Jul 29 '19 at 09:22

2 Answers2

5

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);
  }
}
Ronald Araújo
  • 1,395
  • 4
  • 19
  • 30
0

You can also create custom buttons that look exactly like the default prev, next button.

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

And then go onto add an icon https://fullcalendar.io/docs/buttonIcons

inthematrix
  • 29
  • 1