How to call events method after new event source in FullCalendar.js?

Question

I am trying to create a client side filter for events, I have gone with the same approach of addEventSource. I use the events method to conditionally render the events. I just wanna know how to call the events method or even redefine it?

This is the initial code I am using to render the the calendar

        $('#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'
                                    });
                                }
                           });
                       });
                    });

This is the code I am using to fetch new events or filtered events

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

The error I get is Uncaught TypeError: Cannot read property 'hasTime' of undefined because the JSON returned doesn't have a start_date or end_date

Answer 1

So I found removeEvents that will clear all the events from the calendar and renderEvents that takes an option argument events and this will render the rest of the events.

So here's the code that did this.

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');
            }
    )};