web-dev-qa-db-ja.com

jqueryフルカレンダーイベントフィルタリング

フルカレンダーでクライアント側のイベントを動的にフィルタリングする方法はありますか？サーバー（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?
        });
    }
 });

しかし、それは機能しません。どんな助けもgreat.thanksになります。

jqueryeventsfilterfullcalendar
25
Den Orlov

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を使用して動的に表示時にイベントをフィルタリングできます。

50
Andy Zarzycki

解決策があります。これが他の誰かに役立つことを願っています。

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
4
Den Orlov
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');

テストして実証済み。

3
Jonny
$("#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');

新しいイベントを追加します

$('#calendar').fullCalendar('addEventSource', start_source1);
0
cm b

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