jquery fullcalendar filtrage d’événements

Existe-t-il une méthode permettant de filtrer de manière dynamic les événements côté client dans l’agenda complet? Lorsque je reçois des événements du serveur (json_encoded), j’assigne mon propre paramètre “school_id” à chaque événement. Une fois que fullcalendar est prêt, je souhaite filtrer les événements avec “select”.

J’ajoute l’élément “select” sur la page comme ceci:

 All schools school 1 school 2

Et dans le code javascript, j’ajoute:

 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? }); } });

Mais ça ne marche pas. Toute aide sera très utile.

Depuis la version 2 de fullCalendar, vous pouvez utiliser le rappel eventRender pour restituer un événement de manière sélective. Combinez cela avec un appel à la méthode rerenderEvents dans votre gestionnaire onChange , et vos événements devraient se mettre à jour automatiquement en fonction de l’option sélectionnée.

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

Il y a une solution. J’espère que cette aide à quelqu’un d’autre.

 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

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

Vous pouvez définir l’object puis appeler l’événement d’actualisation. De cette façon, il ne clignotera pas sur vous.

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

Test et éprouvé.

pour ajax son travail pour moi

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