Question

在某些ajax请求（过滤）之后更新日历事件时，我目前在FullCalendar v4上遇到了困难。

我的主日历完美地加载了默认事件。我正在尝试完成一个过滤框，人们可以在其中搜索日期或事件名称。

在我的ajax请求返回事件的新json之后，我无法更新甚至无法调用日历。我总是得到我的变量没有定义。

这是文档中所述的调用和构建日历的代码。

 document.addEventListener('DOMContentLoaded', function() {

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

    var the__calendar = new FullCalendar.Calendar(event__calendar, {
        plugins: [ 'dayGrid', 'moment', 'interaction' ],
        defaultView: 'dayGridMonth',
        header: {
            left:   'prev',
            center: 'title',
            right:  'next'
        },
        columnHeader: true,
        locale: 'fr',
        titleFormat: {
            month: 'long',
            year: 'numeric'
        },
        dateClick: function(info) {
            console.log('Date: ' + info.dateStr);
        },
        eventClick: function(info) {
            console.log(info.event.id);

            the__calendar.displayEvent(info.event.id);
        },
        events: function(info, successCallback, failureCallback) {

            var mydata = {
                action: "calendar_render_default",
            };

            $.ajax({
                url: ajaxurl,
                type: 'POST',
                data: mydata,
                dataType: 'json',
                success:function(results) {

                    console.log(results);

                    var events = [];

                    if(!!results){
                        $.map( results.data, function( r ) {
                            events.push({
                                id: r.id,
                                title: r.title,
                                start: r.start,
                                end: r.end,
                                classNames : r.classNames
                            });
                        });
                    }
                    successCallback(events);
                }
            })
        }
    });

    the__calendar.render();
});

此时一切都很好。

现在，我有了一个表单，可以将一些数据发送到另一个ajax函数以获取新事件。

目标：：从日历中删除所有事件，并从ajax函数返回的新json中添加新事件。

正在调用该函数的按钮 <button type="button" class="btn btn-primary" onclick="events__filters();">Filter</button>

和功能

function events__filters() {

    $('.event__calendar').toggleClass('loading');

    var form = document.querySelector('#event__filters_form');
    var formSerialized = serializeArray(form);

    var filter__data = {
        action: "calendar_filters",
        data: formSerialized
    };

    $.ajax({
        url: ajaxurl,
        type: 'POST',
        data: filter__data,
        dataType: 'json',
        success:function(results) {

            console.log(results.data);

            the__calendar.remove(); // Uncaught ReferenceError: the__calendar is not definded... at Object.success

            $('.event__calendar').toggleClass('loading');
        }
    });
}

我无法在v4文档中看到有关此类操作的任何信息。

https://fullcalendar.io/docs/EventSource-remove

当我检查Stackoverflow时，v3似乎以相同的方式工作，我记得使用此版本，一切都很好。

由于我想使用最新版本，所以我现在正在为此苦苦挣扎。

任何帮助或解决方案都将不胜感激。

EDIT1：：如果我删除var旁边的the__calendar，我将得到另一种错误，错误是Uncaught TypeError: the__calendar.remove is not a function.. at Object.success

在ajax返回后调用FullCalendar v4函数

0 个答案: