fullcalendar事件過濾器選擇幾乎工作

我試圖過濾全選範圍內的事件選擇變化幾乎工作。fullcalendar事件過濾器選擇幾乎工作

這是我的下拉

<select id="dropdown"> 
    <option value="All" data-feed="all-feed.php" selected>All</option> 
    <option value="This" data-feed="this-feed.php">This</option> 
    <option value="That" data-feed="that-feed.php">That</option> 
</select>

這是我的腳本

$(document).ready(function(){ 

var feed = $('#dropdown').find(':selected').data('feed'); 

$('#calendar').fullCalendar({ 
    locale: 'de', 
    editable: false, 
    firstDay: 1, 
    events: feed, 
    eventLimit: 3, 
    header: { 
     left: 'prev,next today', 
     center: 'title', 
     right: 'month,listWeek' 
    } 
}); 

$('#dropdown').change(onSelectChangeFeed); 

function onSelectChangeFeed() { 
    var feed = $(this).find(':selected').data('feed'); 
    $('#calendar').fullCalendar('removeEvents'); 
    $('#calendar').fullCalendar('addEventSource', feed); 
}; 

});

這工作，直到我點擊下一個或上一個按鈕。然後，我過濾的所有事件都以某種方式添加到「背景」中：https://streamable.com/qnqwd

我也試過這個功能，但是直接添加事件。

function onSelectChangeFeed() { 
    $('#calendar').fullCalendar('removeEventSource', feed); 
    $('#calendar').fullCalendar('refetchEvents'); 
    var feed = $(this).find(':selected').data('feed'); 
    $('#calendar').fullCalendar('addEventSource', feed);   
    $('#calendar').fullCalendar('refetchEvents'); 
};

繼承人小提琴https://jsfiddle.net/4j5s9yp2/5/

來源

2017-08-21 hes

而不是在啓動時使用'events：feed'，嘗試定義'eventSources：[feed]'。然後它從一開始就被定義爲事件源。在onSelectChangeFeed中，使用removeEventSource而不是removeEvents。如果我們只是使用eventSource概念，而不是混合事件/事件源，它可能會更可靠。我現在無法測試，但本能說最好保持一致。 – ADyson

感謝您的想法，但這和我的第二個功能一樣。我更新了我的問題，用小提琴 – hes

等待。 'var feed = $（this）.find（'：selected'）。data（'feed'）;'。這是_new_選擇的飼料價值。因此，它不會刪除_old_選擇的Feed，因爲它不是相同的值。正如我所建議的那樣，您也忘了將'events'改爲'eventSources'。這應該這樣做：https://jsfiddle.net/4j5s9yp2/6/ – ADyson

您的代碼完全不是那麼回事一致，因爲你用「事件」和「eventSources」互換，和他們是不一樣的概念。您還嘗試刪除帶有錯誤ID的eventSource - 按照JSFiddle中的示例，在您撥打var feed = $(this).find(':selected').data('feed');,feed設置爲新選擇的選定的Feed值時。因此，它無法將其與要刪除的日曆中的事件源相匹配，因爲當前定義的事件源是舊的饋送值。

這個版本解決了這兩個問題：

var selectedFeed = $('#dropdown').find(':selected').data('feed'); 

$('#calendar').fullCalendar({ 
    locale: 'de', 
    editable: false, 
    firstDay: 1, 
    displayEventTime: false, 
    eventSources: [ selectedFeed ], //event source, not "events" directly 
    eventLimit: 3, 
    header: { 
     left: 'prev,next today', 
     center: 'title', 
     right: 'month,listWeek' 
    }, 
    loading: function(bool) { 
      if (bool) { 
       $(this).parent().find('#loading').fadeIn("300"); 
      }else { 
       $(this).parent().find('#loading').fadeOut("300"); 
      } 
     } 
}); 

$('#dropdown').change(onSelectChangeFeed); 

function onSelectChangeFeed() { 
    var feed = $(this).find(':selected').data('feed'); 
    $('#calendar').fullCalendar('removeEventSource', selectedFeed); //remove _old_ feed value 
    $('#calendar').fullCalendar('addEventSource', feed); 
    selectedFeed = feed; //set currently selected feed to the new value 
};

的工作示例見https://jsfiddle.net/4j5s9yp2/6/。

來源

2017-08-22 13:21:01 ADyson

fullcalendar事件過濾器選擇幾乎工作

回答

相關問題