jQuery Full Calendar更新/過濾日歷

Question

我正在嘗試使用fullcalendar.js實現客戶端過濾。 我可以首先使用以下方式呈現日歷：

function getCalendar($venue) {

    $('#calendar').fullCalendar({

        eventSources: [
           {
              url: ajaxUrl,
              type: "GET",
              dataType: "json",
              data: {
                  action: 'loop_events_output',
                  venue: $venue,
              },

             beforeSend: function() {
                 $("#calendar").LoadingOverlay("show", {
                     color: "rgba(51,51,51,0.8)",
                 });    
             },
             complete: function() {                
                 $("#calendar").LoadingOverlay("hide");
             },

             error: function() {
                alert('there was an error while fetching events!');
             },
           }
        ]


    }); 
}

// execute on load
getCalendar('townsville');

現在，我希望能夠基於復選框輸入來更新日歷，這是代碼的第二部分：

// execute when using filters
$('.calendar-controls input').change(function(){
    if (this.checked) {
        var checkedVal = $(this).val();

        $("#calendar").fullCalendar('removeEvents');
        getCalendar(checkedVal);
        $('#calendar').fullCalendar('refetchEvents')
    }
});

但是我可以從XHR請求中看到請求的URL並未更改，並保持為：/wp-admin/admin-ajax.php?action=loop_events_output&venue=townsville&start=2016-07-31&end=2016-09-11&_=1472626202164

任何幫助表示贊賞。

Answer 1

好的，所以我最終弄明白了這一點。 從本質上講，fullcalendar的工作方式是加載事件對象，並在將來的渲染中繼續使用該對象，除非重置該對象。 所以他們這樣做的方式是將我的完整日歷功能更改為：

function getCalendar() {

    $('#calendar').fullCalendar({

        events: source,
        header: {
            left: 'prev,next today',
            center: 'title',
            right: ''
        },
        eventRender: function (event, element) {
            element.attr('href', '#');
        },
        loading: function( isLoading, view ) {
            if(isLoading) {// isLoading gives boolean value
                alert('loading');
            } else {
                alert('done');
            }
        }


    }); 
}

然后設置源：

var source = '/wp-admin/admin-ajax.php?action=loop_events_output&venue=townsville';

然后我根據用戶輸入更新了源：

// execute when using filters
$('.calendar-controls input').change(function(){
    if (this.checked) {
        var checkedVal = $(this).val();

        var newSource = '/wp-admin/admin-ajax.php?action=loop_events_output&venue=' + checkedVal;
        $('#calendar').fullCalendar('removeEventSource', source)
        $('#calendar').fullCalendar('refetchEvents')
        $('#calendar').fullCalendar('addEventSource', newSource)
        $('#calendar').fullCalendar('refetchEvents');
        source = newSource;
    }
});

最重要的部分是刪除事件源，然后在其中添加新的事件源。