jquery fullcalendar filtrage d'événements
existe t'il une méthode à filtre dynamique des événements côté client dans fullcalendar? Lorsque j'obtiens des événements à partir du serveur (json_encoded), j'attribue mon propre paramètre "school_id" à chaque événement. Après fullcalendar est prêt, je veux dynamique filtrer les événements avec "select".
j'ajoute l'élément" select " 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 j'ai ajouté:
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.grâce.
4 réponses
depuis la version 2 de fullCalendar vous pouvez utiliser le eventRender rappel de manière sélective le rendu d'un événement. Combinez cela avec un appel à rerenderEvents méthode dans votre gestionnaire onChange, et vos événements devraient être mis à 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');
})
<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 la valeur de SELECT est 'all' ou correspond à l' school propriété de l' event objet, votre fonction eventRender retournera vrai et l'événement s'affiche. Sinon, il sera sauté pendant le rendu.
cette méthode est supérieure à celle de passer des paramètres de filtrage à votre source d'événements, car cela nécessite plusieurs allers-retours vers le serveur. Vous pouvez charger tous vos événements à la fois et utiliser eventRender dynamiquement filtrer au moment de l'affichage.
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
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.
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(
$('<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>";