FullCalendar - 通过 jquery 和 AJAX 更新事件答案

【问题标题】：FullCalendar - updating events via jquery and AJAXFullCalendar - 通过 jquery 和 AJAX 更新事件
【发布时间】：2011-12-13 17:45:32
【问题描述】：

到目前为止，我的 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'
                                    }
                                });
                            }
                        });
                    }

【问题讨论】：

标签： jquery fullcalendar

【解决方案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>

【讨论】：