FullCalendar语言 - 通过jquery和AJAX更新事件

Question

到目前为止，我的jquery fullcalendar工作得很好，但是，我为用户添加了一些选项，以便能够过滤显示的事件。我使用的方法只是使用AJAX检索要在日历中使用的新数据，清空现有日历，并尝试用新数据重建日历。

现在发生的事情是，在页面加载时，日历正确地加载事件-当我单击过滤器时，它从日历中清空当前事件，但不加载任何新事件，即使我可以看到AJAX调用中返回的JSON包含正确格式的事件数据。

这里可能有一个明显的错误，或者使用内置方法更容易做到这一点。任何帮助非常感激!

                   // Store json encoded data in variable
                   var data = <?php echo $events_json ?>;
                   // Pass data to the calendar loader
                   loadCal(data);
                   // Filter event handler
                   $('ul#calendar_filters li a').click(function(){
                        // Retrieve data - have checked this is correctly formatted
                        new_data = $.get($(this).attr('href'));
                        // Empty the calendar of existing data
                        $('#calendar').empty();
                        // Reload calendar with new data set 
                        loadCal(new_data);

                        return false;
                    });
                    function loadCal(data)
                    {
                         $('#calendar').fullCalendar({
                            header: {
                                left: 'prev,next today',
                                center: 'title',
                                right: 'month,agendaWeek,agendaDay'
                            },
                            editable: true,
                            events: data,
                            eventRender: function(event, element) {
                                element.qtip({
                                    content: {
                                        text: formatEvent(event), 
                                        title: {
                                            text: event.title,
                                            button: true
                                        }
                                    },
                                    show: {
                                         event: 'click', // Show it on click...
                                         solo: true // ...and hide all other tooltips...
                                      },
                                    hide: false,
                                    style: {
                                        classes: 'ui-tooltip-light ui-tooltip-shadow ui-tooltip-rounded'
                                    }
                                });
                            }
                        });
                    }

Answer 1

我不确定您是否已经考虑过，但是您是否考虑过使用复选框来显示内容?

文档中有一个内置的方法可以帮助解决这个问题。http://arshaw.com/fullcalendar/docs/event_data/removeEventSource/

这是我的解决方案…

<input type="checkbox" class="selectit" />
<script>
$('.selectit').each(function(){this.checked = true}); //ensures that all boxes are checked
$('input[type:checkbox]').click(function(index){ // Looks at every checkbox when clicked
    $('input:checked').each(function(){ // if checked add the source
        $('#calendar').fullCalendar('addEventSources', 'URL_ARRAY_FUNCTION_OR_OBJECT');
    });
    $('input:not(:checked)').each(function(index){ // if not checked remove the source
         $('#calendar').fullCalendar('removeEventSources', 'URL_ARRAY_FUNCTION_OR_OBJECT');
    });
});
</script>