使用JQuery的FullCalendar双重事件

Question

Hello I am having a problem using the Full Calendar Library.

The events keep doubling ONLY when I hit my custom "Filter" button and change the month.

When I call the filter I am removing all events and repopulating with the filtered results. The issue looks like when I hit the left/right button it calls the event population again and adds the events. I would like to disable that or rework it.

Here is what is happening: enter image description here

Calendar Code:

function calendarView()
{
    //$('#calendar').fullCalendar('removeEvents')

    var url_str = "/Calendar/GetCalendarEvents"
    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next, today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },

        fixedWeekCount: true,
        eventLimit: 4,
        events: url_str,
        eventClick: function (calEvent, jsEvent, view)
        {
            editable: false;
            var currentDate = new Date();
            currentDate.setHours(0, 0, 0, 0);
            if (calEvent.start >= currentDate - 1)
                openEditVisit(calEvent.id)
        }
    });

};

Filter Button Call Code

$.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "/Calendar/GetCalendarEvents",
        data: j,
        async: false,
        dataType: 'json',
        success: function (data) 
        {
            $('#calendar').fullCalendar('removeEvents')
            $('#calendar').fullCalendar('addEventSource', data)

        },
        error: function (xhr, err) {
            alert("ERROR! - readyState: " + xhr.readyState + "<br/>status: " + xhr.status + "<br/>responseText: " + xhr.responseText);
        }
    });

Answer 1

You have a problem because since you already defined events as a JSON feed ( events: url_str ), whenever you change view it will fetch those events without the filter option. This is in addition to the filtered events which you previously added as a separate event source.

So a better solution you could use is to utilise the built-in the events-as-a-function feature, and have your custom function take the filter options from your UI into account and send them to the server along with the start/end dates supplied by fullCalendar. This would ensure that when you change the view or date, the returned results take your filtering into account, and also don't duplicate the events.

Your extra filter button could meanwhile just call "refetchEvents" when clicked, to refresh from the main event source, which is already defined and using the filter options.

See https://fullcalendar.io/docs/event_data/events_function/