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事件过滤器选择几乎工作

回答

相关问题