FullCalendar - 通過jQuery和AJAX更新事件

我有jquery fullcalendar目前工作相當好，但是，我已經添加了一些選項讓用戶能夠過濾顯示的事件。我使用的方法只是使用AJAX檢索要在日曆中使用的新數據，清空現有日曆並嘗試用新數據重建日曆。FullCalendar - 通過jQuery和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' 
            } 
           }); 
          } 
         }); 
        }

來源

2011-12-13 Harry F

我不確定它是否已經考慮過它，但是您是否考慮過使用複選框來顯示內容？

在文檔中有一個內置方法，對此有幫助。 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>

來源

2011-12-13 20:16:26

FullCalendar - 通過jQuery和AJAX更新事件

回答

相關問題