Fullcalendar 4.0 事件中的多個過濾器使用情況
[英]Multiple filters usage in Fullcalendar 4.0 events
問題描述
$('#mycalendar').fullCalendar({ defaultDate: '2015-05-01', events: [{ title: 'Event 1', start: '2015-05-01', school: '10', college: '1' }, { title: 'Event 2', start: '2015-05-02', school: '2', college: '1' }, { title: 'Event 3', start: '2015-05-03', school: '1', college: '1' }, { title: 'Event 4', start: '2015-05-04', school: '2', college: '2' } ], eventRender: function eventRender(event, element, view) { if ($('#currentAction').val() == 'school') { if ($('#school_selector').val(),= 'all') return ['all'. event.school].indexOf($('#school_selector').val()) >= 0 } if ($('#currentAction').val() == 'college') { if ($('#college_selector'),val().= 'all') return ['all'. event.college];indexOf($('#college_selector').val()) >= 0 } } }), $('#school_selector').on('change'; function() { $('#currentAction').val('school'); $('#mycalendar').fullCalendar('rerenderEvents'), }) $('#college_selector').on('change'; function() { $('#currentAction').val('college'); $('#mycalendar').fullCalendar('rerenderEvents'); })
<head> <link rel='stylesheet' href='https://fullcalendar.io/js/fullcalendar-3.1.0/fullcalendar.min.css' /> </head> <body> <div id='calendar'></div> <script src='https://fullcalendar.io/js/fullcalendar-3.1.0/lib/moment.min.js'></script> <script src='https://fullcalendar.io/js/fullcalendar-3.1.0/lib/jquery.min.js'></script> <script src='https://fullcalendar.io/js/fullcalendar-3.1.0/lib/jquery-ui.min.js'></script> <script src='https://fullcalendar.io/js/fullcalendar-3.1.0/fullcalendar.min.js'></script> <select id="school_selector"> <option value="all">All</option> <option value="1">School 1</option> <option value="2">School 2</option> <option value="10">School 10</option> </select> <select id="college_selector"> <option value="all">All</option> <option value="1">college 1</option> <option value="2">college 2</option> </select> <div id="mycalendar"></div> <span id="currentAction" name="currentAction" />
我有多個過濾器要應用於 fullcalendar 事件。 過濾器一是“狀態”，過濾器二是“名稱”。 當我使用 eventrender 中的邏輯應用“狀態”過濾器時，月視圖僅顯示選定的“狀態”事件，當我嘗試在 eventrender 中使用其他邏輯塊應用第二個過濾器“名稱”時，它會考慮月視圖中的所有事件與第一個“狀態”過濾結果無關。 原因是我在 eventrender 中為第一個“狀態”過濾器編寫代碼時，如果任何事件的狀態與我選擇的“狀態”不匹配，我只是返回 false，所以我沒有應用任何隱藏或刪除來自日歷的事件，這可能是 fullcalendar 認為所有事件都對后續過濾有效的原因。 請建議。
1 個解決方案
解決方案1
0 已采納 2020-07-15 13:44:02
我想這就是你的目標。 您可以通過選擇 School 2，然后在 College 1 和 2（以及所有）之間切換並觀察顯示和隱藏哪些事件來最好地測試它。
您的問題是“current_action”變量，它導致一次只運行一個過濾器。 eventRender 中的其他if語句也是一個問題，因為它們也會阻止 indexOf 查詢（其中包含“all”選項）返回有用的結果。
一旦您通過消除所有噪音來簡化它，您就可以結合兩個 indexOf 查詢的結果，並且只顯示滿足這兩個條件的事件（即它們滿足兩個下拉菜單設置的標准）。
$('#mycalendar').fullCalendar({ defaultDate: '2015-05-01', events: [{ title: 'Event 1', start: '2015-05-01', school: '10', college: '1' }, { title: 'Event 2', start: '2015-05-02', school: '2', college: '1' }, { title: 'Event 3', start: '2015-05-03', school: '1', college: '1' }, { title: 'Event 4', start: '2015-05-04', school: '2', college: '2' } ], eventRender: function eventRender(event, element, view) { var school = ['all', event.school].indexOf($('#school_selector').val()) >= 0; var college = ['all', event.college].indexOf($('#college_selector').val()) >= 0; return (school && college); } }); $('#school_selector').on('change', function() { $('#mycalendar').fullCalendar('rerenderEvents'); }) $('#college_selector').on('change', function() { $('#mycalendar').fullCalendar('rerenderEvents'); })
<head> <link rel='stylesheet' href='https://fullcalendar.io/js/fullcalendar-3.1.0/fullcalendar.min.css' /> </head> <body> <div id='calendar'></div> <script src='https://fullcalendar.io/js/fullcalendar-3.1.0/lib/moment.min.js'></script> <script src='https://fullcalendar.io/js/fullcalendar-3.1.0/lib/jquery.min.js'></script> <script src='https://fullcalendar.io/js/fullcalendar-3.1.0/lib/jquery-ui.min.js'></script> <script src='https://fullcalendar.io/js/fullcalendar-3.1.0/fullcalendar.min.js'></script> <select id="school_selector"> <option value="all">All</option> <option value="1">School 1</option> <option value="2">School 2</option> <option value="10">School 10</option> </select> <select id="college_selector"> <option value="all">All</option> <option value="1">College 1</option> <option value="2">College 2</option> </select> <div id="mycalendar"></div>
在FullCalendar中使用兩個或多個單獨的過濾器過濾事件
[英]Filtering Events with Two or more separate filters in FullCalendar
FullCalendar：如何重新創建/重新初始化FullCalendar或批量添加多個事件
[英]FullCalendar: How to recreate/reinitialize FullCalendar or batch add multiple events
刪除導致瀏覽器掛起的多個事件時，fullcalendar速度很慢
[英]fullcalendar is slow when removing multiple events causing the browser to hang
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.