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请求中看到请求网址没有变化并保持为： /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;
    }
});

最重要的部分是删除事件源，然后添加新的事件源。

jQuery完整日历更新/过滤日历

1 个答案: