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

Question

根据 docs of fullcalender.io ，我试图在每次触发事件(例如上一个、下一个、月份、日期或 ListView )时调用 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;


},