Fullcalendar.io问题,将事件属性解析为函数

时间:2019-04-29 09:27:46

标签: javascript jquery fullcalendar fullcalendar-4

根据docs of fullcalender.io,我试图在每次触发诸如上一个,下一个,月,日或列表视图之类的事件时调用API。就我而言,该事件进行得很好。我可以调用API和每个事件,然后将数据收集到名为sessionCalendar[]的数组中。调用API后,我可以看到数组中有数据。

enter image description here

    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时,它不起作用。

所有日子都是空白。请帮忙。

1 个答案:

答案 0 :(得分:1)

您未成功拨打电话我成功进行了一些更改,请尝试此操作

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;


},