Question

我试图在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);
};

});

这是有效的，直到我点击下一个或上一个按钮。然后我过滤的所有事件都以某种方式添加到＆＃34;背景＆＃34;：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/

Answer 1

您的代码并不能始终如一地运作，因为您使用了＆＃34;事件＆＃34;和＆＃34; eventSources＆＃34;可互换地，它们不是同一个概念。您还尝试删除具有错误ID的eventSource - 根据JSFiddle中的示例，当您致电var feed = $(this).find(':selected').data('feed');时，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/。

fullcalendar事件过滤器选择几乎正常工作

1 个答案: