jquery fullcalendar事件过滤

在fullcalendar中是否有任何方法在客户端动态过滤事件？ 当我从服务器（json_encoded）获取事件时，我将自己的参数“school_id”分配给每个事件。 在fullcalendar准备好之后，我想用“select”动态过滤事件。

我在页面上添加“select”元素，如下所示：

 All schools school 1 school 2  

在javascript代码中我添加：

 jQuery("#school_selector").change(function(){ filter_id = $(this).val(); if (filter_id != 'all') { var events = $('#mycalendar').fullCalendar( 'clientEvents', function(event) { if((filter_id == 'all') ) { return true; }else{ //what I need to write here to dynamic filter events on calendar? }); } }); 

但它不起作用。 任何帮助都会很棒。谢谢。

Answer 1

从fullCalendar的第2版开始，您可以使用eventRender回调来有选择地呈现事件。 将此与onChange处理程序中的rerenderEvents方法调用相结合，您的事件应根据所选选项自动更新。

 $('#mycalendar').fullCalendar({ events: [ { title: 'Event 1', start: '2015-05-01', school: '1' }, { title: 'Event 2', start: '2015-05-02', school: '2' }, { title: 'Event 3', start: '2015-05-03', school: '1' }, { title: 'Event 4', start: '2015-05-04', school: '2' } ], eventRender: function eventRender( event, element, view ) { return ['all', event.school].indexOf($('#school_selector').val()) >= 0 } }); $('#school_selector').on('change',function(){ $('#mycalendar').fullCalendar('rerenderEvents'); }) 

      All School 1 School 2  
 

Answer 2

有解决方案。 我希望这对别人有帮助。

 jQuery("#school_selector").change(function(){ filter_id = $(this).val(); if (filter_id == 'all') { $("#eventwrapper").fadeOut(); $('#mycalendar').fullCalendar ('removeEvents'); var start_source1 = { type:'POST', data: {school_id:'all',filter:'false'}, url: '../../ajax/calendar/get_high_season_events.php', backgroundColor: 'red' }; var start_source2 = { type:'POST', data: {school_id:'all',filter:'false'}, url: '../../ajax/calendar/get_middle_season_events.php', backgroundColor: 'orange' }; var start_source3 = { type:'POST', data: {school_id:'all',filter:'false'}, url: '../../ajax/calendar/get_low_season_events.php', backgroundColor: 'green' }; $('#mycalendar').fullCalendar('addEventSource', start_source1); $('#mycalendar').fullCalendar('addEventSource', start_source2); $('#mycalendar').fullCalendar('addEventSource', start_source3); }else{ $("#eventwrapper").fadeIn(); $('#mycalendar').fullCalendar ('removeEvents'); var start_source1 = { type:'POST', data: {school_id:$("#school_selector").val(),filter:'true'}, url: '../../ajax/calendar/get_high_season_events.php', backgroundColor: 'red' }; var start_source2 = { type:'POST', data: {school_id:$("#school_selector").val(),filter:'true'}, url: '../../ajax/calendar/get_middle_season_events.php', backgroundColor: 'orange' }; var start_source3 = { type:'POST', data: {school_id:$("#school_selector").val(),filter:'true'}, url: '../../ajax/calendar/get_low_season_events.php', backgroundColor: 'green' }; $('#mycalendar').fullCalendar('addEventSource', start_source1); $('#mycalendar').fullCalendar('addEventSource', start_source2); $('#mycalendar').fullCalendar('addEventSource', start_source3); }//if 

Answer 3

 var eventData = { type:'POST', data: { filter1: "", filter2: "" }, url: '../../ajax/calendar/get_high_season_events.php', backgroundColor: 'red' }; 

您可以设置对象，然后调用refresh事件。 这样它就不会闪烁在你身上。

 eventData.data.filter1 = "searchcriteria1"; eventData.data.filter2 = "searchcriteria2"; $.fullcalendar('refetchEvents'); 

测试并certificate。

Answer 4

为ajax它的工作对我来说

  // get time in php file var set_calendar_time = $('#calendar_time').val(); var initialLocaleCode = 'en'; $('#calendar').fullCalendar({ header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay,listMonth' }, isJalaali : true, defaultDate: set_calendar_time,//'2018-03-12', locale: initialLocaleCode, buttonIcons: false, // show the prev/next text weekNumbers: true, navLinks: true, // can click day/week names to navigate views editable: false, eventLimit: false, // allow "more" link when too many events events: { url: 'http://127.0.0.1/get-events.php', error: function() { $('#script-warning').show(); }, success: function(){ // not clear } }, loading: function(bool) { $('#loading').toggle(bool); }, eventRender: function eventRender( event, element, view ) { return ['all', event.school].indexOf($('#school_selector').val()) >= 0 // (event.nameitem) } }); $('#school_selector').on('change',function(){ $('#calendar').fullCalendar('rerenderEvents'); }) // build the locale selector's options $.each($.fullCalendar.locales, function(localeCode) { $('#locale-selector').append( $('') .attr('value', localeCode) .prop('selected', localeCode == initialLocaleCode) .text(localeCode) ); }); // when the selected option changes, dynamically change the calendar option $('#locale-selector').on('change', function() { if (this.value) { $('#calendar').fullCalendar('option', 'locale', this.value); $('#calendar').fullCalendar('option', 'isJalaali', (this.value == 'fa' ? true : false)); } }); // HTML 
 
 
 get-events error. 
 
loading...
 
 
  
 
  all School 1 School 2  
 
";