如何在FullCalendar.js中新建事件源后调用事件方法？

Question

我正试图为事件创建一个客户端过滤器，我采用了同样的方法，即 addEventSource. 我使用的是 events 方法来有条件地渲染事件。我只是想知道如何调用 events 方法，甚至重新定义它？

这是我用来渲染日历的初始代码。

        $('#calendar').fullCalendar({
            header: {                                                                                                                                          
                left: 'prev,next today',
                center: 'title',
                right: 'month,basicWeek,basicDay'
            },
            displayEventTime: false,
            navLinks: true, // can click day/week names to navigate views
            editable: true,
            eventLimit: true, // allow "more" link when too many events
            events: (start, end, timezone, callback) => {
                $.ajax({
                    url: 'get-events',
                    dataType: 'json',
                    data: {
                        // our hypothetical feed requires UNIX timestamps
                        start: start.unix(),
                        end: end.unix()
                    },
                    success: function (res) {
                        console.log(res)
                        var events = [];
                        res.map((value, index) => {
                            if (value.cadence != null) {
                                $("#allDropdown").append(`<a id="file-${value.dq_datafile_id}" onclick="selectThis(this)" href="#about">${value.data_file_name}</a>`)
                            }

                            if (value.cadence == "WEEKLY") {
                                if (value.dqfeed__file_status == "RECEIVED") {
                                    const data_file_name = value.data_file_name;
                                    let repeatDay = dow_handler.hasOwnProperty(data_file_name) ? dow_handler[data_file_name] : undefined

                                    events.push({
                                        title: `${value.data_file_name}`,
                                        start: '2020-04-13',
                                        dow: [repeatDay, 1],
                                        color: '#00ff00'
                                    });
                                }
                           });
                       });
                    });

这是我用来获取新事件或过滤事件的代码。

    const applyCalendarFilter = () => {
        var filter = {
            type: 'get',
            url: 'filter-events',
        }
        $("#calendar").fullCalendar('addEventSource', filter);
    }

我得到的错误是 Uncaught TypeError: Cannot read property 'hasTime' of undefined 因为返回的JSON没有一个 start_date 或 end_date

Answer 1

所以我发现 removeEvents 这将清除日历中的所有事件，并且 renderEvents 的选项参数 events 而这将渲染其余的事件。

所以这里是做这个的代码。

const applyCalendarFilter = () => {
    var filter = {
        type: 'get',
        url: 'filter-events',
    }
    $("#calendar").fullCalendar('removeEvents');
    $.ajax({
            url: 'filter-events',
            type: 'get',
            success: (res) => {
                let events = [];
                res.map((value, index) => {
                    if (value.cadence == "WEEKLY"){
                        events.push({
                            'title': value.title,
                            'start_date': value.start_date,
                            'end_date': value.end_date
                    }
                }) 
                $("#calendar").fullCalendar('renderEvents', events);
            }, error: (res) => {
                alert('cant get the data');
            }
    )};