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>

FullCalendar - 通过jquery和AJAX更新事件

1 个答案: