jquery fullcalendar фильтрация событий

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

Начиная с версии 2 fullCalendar вы можете использовать обратный вызов eventRender для выборочной визуализации события. Объедините это с вызовом метода rerenderEvents в обработчике onChange, и ваши события должны автоматически обновляться в зависимости от выбранной опции.

$('#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'
};

Вы можете установить объект, а затем вызвать событие обновления. Таким образом, он не будет мерцать на вас.

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>";