Question

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

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

<select id='school_selector'>
      <option value='all'>All schools</option>
      <option value='1'>school 1</option>
      <option value='2'>school 2</option>
</select>

在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');
})

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="http://fullcalendar.io/js/fullcalendar-2.3.1/fullcalendar.min.js"></script>
<link rel="stylesheet" href="http://fullcalendar.io/js/fullcalendar-2.3.1/fullcalendar.min.css" />

<select id="school_selector">
  <option value="all">All</option>
  <option value="1">School 1</option>
  <option value="2">School 2</option>
</select>

<div id="mycalendar"></div>

上面，如果SELECT的值为'all'或与school对象的event属性匹配，则eventRender函数将返回true并显示事件。否则在渲染过程中将跳过它。

此方法优于将过滤参数传递到事件源，因为这需要多次往返服务器。您可以一次性加载所有事件，并使用eventRender 动态在显示时过滤它们。

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');

测试并证明。

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(
                $('<option/>')
                    .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 
    <div id='top'>
    <div  class='selector'>             
    <div id='script-warning'>
    <code>get-events</code> error.
    </div>      
    <div id='loading'>loading...</div>      
    </div>  

    <div  class='selector'>     
    <select id='locale-selector'></select>
    </div>  
    <div  class='selector'>             
    <select id='school_selector'>
    <option value='all'>all</option>
    <option value='1'>School  1</option>
    <option value='2'>School 2</option>
    </select>   
    </div>
    </div>";

Answer 5

ObjectId()

代码需要

$("#searchbtnfilter").click(function(){

    var valfiltermots=$('#filtermots').val();
    var valfilterpar=$('#filterpar').val();
    var valfiltercategorie=$('#filtercategorie').val();
    var valfilterdate1=$('#filterdate1').val();
    var valfilterdate2=$('#filterdate2').val();
    var valfilterdepdepartevent=$('#filterdepdepartevent').val();
    var valfilterdeparriveevent=$('#filterdeparriveevent').val();

    $('#calendar').fullCalendar('removeEventSources');
    $('#calendar').fullCalendar('refetchEvents');
    var start_source1 = {
            type:'POST',
            data: {filtermots:valfiltermots,filterpar:valfilterpar,filtercategorie:valfiltercategorie,filterdate1:valfilterdate1,filterdate2:valfilterdate2,filterdepdepartevent:valfilterdepdepartevent,filterdeparriveevent: valfilterdeparriveevent},
            url: "<?php echo url_for('agenda/listeevent'); ?>"
    };
    $('#calendar').fullCalendar('addEventSource', start_source1);
});

之后

$('#calendar').fullCalendar('refetchEvents');

并添加新事件

$('#calendar').fullCalendar('removeEventSources');

jquery fullcalendar事件过滤

5 个答案: