jquery fullcalendar filtrage d'événements

Est il une méthode pour filtre dynamique des événements côté client dans fullcalendar?
Quand je reçois des événements à partir du serveur (json_encoded) - je céder mon propre paramètre "school_id" à chaque événement.
Après fullcalendar est prêt, je veux filtre dynamique des événements avec "select".

- Je ajouter ", sélectionnez" l'élément sur la page comme ceci:

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

Et dans le code javascript-je ajouter:

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 fonctionne pas.
Toute aide sera grande.merci.

InformationsquelleAutor Den Orlov | 2011-07-10

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

JS:

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

HTML:

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

Ci-dessus, si l'SÉLECTIONNEZ la valeur est soit 'all' ou correspond à la school propriété de la event objet, votre eventRender la fonction retourne true, et l'événement s'affiche. Sinon, il sera ignoré pendant le rendu.

Cette méthode est supérieure à passer le filtrage des paramètres de votre source de l'événement, depuis que nécessite plusieurs allers-retours au serveur. Vous pouvez charger tous vos événements à la fois et utiliser eventRender à dynamiquement filtre à eux au moment de l'affichage.

Moi aussi j'ai eu du mal avec le changement de SELECT et après l'application de ce que vous avez écrit, il fonctionne un régal!! 🙂 Merci
Grand, bon à entendre @539. Le fait crucial à prendre à partir de cet exemple est que eventRender() filtres chargé (et caché) des événements avant ils sont rendus. Comme un résultat que vous n'avez pas à charger d'autres événements pour modifier les critères de filtre. Et, bien sûr, vous pouvez faire la condition dans eventRender() aussi complexe que vous le souhaitez.
merci pour cette réponse, il fonctionne comme un charme 🙂
Merci! ce travail vraiment génial 🙂
Merci ça fonctionne pour moi 🙂

InformationsquelleAutor Andy Zarzycki

Il y a la solution. J'espère que cela contribuera à 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

il y a erreur dans le code. Désolé.
ce n'est pas côté client filtrage maintenant, est-il?? après tous les sélectionner, de leur sera un appel ajax pour récupérer filtré événements, ou ai-je raté quelque chose ??
Den Orlov j'ai fait la même comme vous l'avez suggéré, mais toujours pas de progrès

InformationsquelleAutor Den Orlov

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

Vous pouvez définir l'objet, puis appelez l'actualisation de l'événement. De cette façon, il l'habitude de scintillement sur vous.

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

Test et éprouvée.

InformationsquelleAutor Jonny

ajax pour 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(
$('<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>";

InformationsquelleAutor sirmagid

Vous devez vous connecter pour publier un commentaire.