Fullcalendar.io在将事件属性解析为函数时出现问题

Question

根据docs of fullcalender.io，我试图在每次触发上一个，下一个，月，日或列表视图等事件时调用API。在我的情况下，该活动完全正常。我可以调用API和每个事件，并在名为sessionCalendar[]的数组中收集数据。调用API后，我可以看到数组有数据。

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

},

这是我将所有结果推送到数组的地方。注意我已尽量减少代码，以尽可能缩短代码。

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

        }


},

但是我无法在日历中看到这个事件。这里有什么问题。在我使用event properties with array之前它工作正常。现在，当我使用event function时，它无法正常工作。

所有日期字段都是空白的。请帮忙。

Answer 1

你没有成功调用successCallback我做了一些改变请试试这个

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;


},