Fullcalendar.io issue in parsing events properties as function

Question

As per the docs of fullcalender.io, I am trying to call API everytime it triggers events like previous, next, month, day or list view. The event is totally working fine in my case. I can call the API and every event and collect the data in an array called sessionCalendar[]. After the API is called I can see the array has data.

    calendar_view_session: function(){

    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
      plugins: [ 'dayGrid', 'timeGrid', 'list', 'interaction' , 'momentTimezone' ],
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
      },
      defaultDate: '2019-04-12',
      navLinks: true, // can click day/week names to navigate views
      editable: false,
      eventLimit: true, // allow "more" link when too many events
      events:  function(info, successCallback,failureCallback) {
            console.log(info);

            var date1 = new Date(info.start.valueOf());
            var date2 = new Date(info.end.valueOf());

            var callData = {
                from_date:moment.tz(date1, timeZone).format('YYYY-MM-DD'),
                to_date: moment.tz(date2, timeZone).format('YYYY-MM-DD')
            }
            sessionCalendar = [];
            console.log(callData);
            $.ajax({
                  url:app.createApiPath(apiController_data,apiAction_data),
                  method:"POST",
                  dataType: "json",
                  data: {
                        callData: JSON.parse(JSON.stringify(callData)),
                        api_version: 1,
                        deviceType: 'web'
                    },
                  success: function(responseData){
                    console.log({responseData})
                    app.calendarParse(responseData.data.results);
                }
            })

          },
          //sessionCalendar
    });

    calendar.render();

},

This is where I am pushing all my results into array. Note I have minimize the code inorder to make it short as possible.

calendarParse: function(apiData){

        for(var i=0; i<apiData.length; i++){

            const { bookingId, course, customers, end_date_time, id, lm_firstname, lm_lastname,localmasterId, meeting_id, meeting_type, payout, request_payout_status, sessionDate, session_status, start_date_time, status,attributes }     = apiData[i];

            sessionCalendar.push(
                    {
                        title: `${course["course_name"]}`,
                        start: gbl.datetime_utc(start_date_time),
                        end: gbl.datetime_utc(end_date_time),
                        customers: customersName,
                        localmasterName: lm_firstname + " " + lm_lastname,
                        sessionStatus: session_status,
                        meetingType: meetingtype,
                        payoutStatus: request_payout_status,
                        sessionDate: sessionDate,
                        startTime: gbl.datetime(start_date_time),
                        endTime: gbl.datetime(end_date_time)
                    },
                )

        }


},

But I cannot see the event in calendar. What is wrong here. Before I was using event properties with array and it was working fine. Now when I am using event function it is not working.

All the days feilds are blank. Please help.

Have you tried `calendar.rerenderEvents()` after adding events to your array? — alexP, Apr 29 '19 at 09:33
Doesn't seem working. It says `calendar.rerenderEvents() not defined.` I placed it inside calendarParse function at the end after loop is closed. — Santosh, Apr 29 '19 at 09:39

score 2 · Accepted Answer · answered Apr 29 '19 at 09:42

you are not calling successCallback in success i made some changes please try this

events:  function(info, successCallback,failureCallback) {
        console.log(info);

        var date1 = new Date(info.start.valueOf());
        var date2 = new Date(info.end.valueOf());

        var callData = {
            from_date:moment.tz(date1, timeZone).format('YYYY-MM-DD'),
            to_date: moment.tz(date2, timeZone).format('YYYY-MM-DD')
        }
        sessionCalendar = [];
        console.log(callData);
        $.ajax({
              url:app.createApiPath(apiController_data,apiAction_data),
              method:"POST",
              dataType: "json",
              data: {
                    callData: JSON.parse(JSON.stringify(callData)),
                    api_version: 1,
                    deviceType: 'web'
                },
              success: function(responseData){
                console.log({responseData})
             successCallback(app.calendarParse(responseData.data.results));
            }
        })

      },



calendarParse: function(apiData){
        for(var i=0; i<apiData.length; i++){

            const { bookingId, course, customers, end_date_time, id, lm_firstname, lm_lastname,localmasterId, meeting_id, meeting_type, payout, request_payout_status, sessionDate, session_status, start_date_time, status,attributes }     = apiData[i];

            sessionCalendar.push(
                    {
                        title: `${course["course_name"]}`,
                        start: gbl.datetime_utc(start_date_time),
                        end: gbl.datetime_utc(end_date_time),
                        customers: customersName,
                        localmasterName: lm_firstname + " " + lm_lastname,
                        sessionStatus: session_status,
                        meetingType: meetingtype,
                        payoutStatus: request_payout_status,
                        sessionDate: sessionDate,
                        startTime: gbl.datetime(start_date_time),
                        endTime: gbl.datetime(end_date_time)
                    },
                )

        }
        return sessionCalendar;


},

Before I put question here, I had done similar. I return the array and call the successCallback function. But I had called that function after the $.ajax({}).successCallback `method and not inside it :D Thanks it worked. — Santosh, Apr 29 '19 at 09:51
welcome, i am working on full calendar. so i am familiar with full calendar issues :) — Shahid Islam, Apr 29 '19 at 09:55
Great!. Do you know why my calendar gets duplicated each time I click on bootstrap tabs ? This calendar is inside the tabs. — Santosh, Apr 29 '19 at 10:14
first destroy the calendar when calendar tab is active with this $('#calendar').fullCalendar('destroy'); . i used this in tab too . please give me point of the comment — Shahid Islam, Apr 29 '19 at 10:29
Hi Shahid, The above seems not working for me. I do tried with v4 code also. Can you please help me here. https://stackoverflow.com/questions/55902193/destroy-fullcalendar-on-bootstrap-tabs-click-before-new-calendar-is-initialized/55902250 — Santosh, Apr 29 '19 at 11:33

Fullcalendar.io issue in parsing events properties as function

1 Answers1