Filterung von Ereignissen onclick mit FullCalendar und der removeEvents-Methode

Question

Ich versuche FullCalendar zu verwenden, um meine Ereignisse aus einem JSON-Feed anzuzeigen. Es funktioniert gut mit dem folgenden Code:

$(document).ready(function() { 

// Initialize calendar 
$('#calendar').fullCalendar({ 
    header: { 
     left: 'prev', 
     center: 'title', 
     right: 'next' 
    }, 
    buttonText: { 
     prev: 'Previous month', 
     next: 'Next month' 
    }, 
    columnFormat: { 
     month: 'dddd' 
    }, 
    editable: false, 
    events: "events.json", 
    disableDragging: true,      
}); 

Ich versuche, eine Verbindung zu schaffen, die die Ereignisse filtern werden mit der removeEvents Methode (im Idealfall wäre es ein Auswahlmenü sein). Wenn ich die Methode verwende und eine ID übergebe, wird das Ereignis entfernt. Die Dokumentation besagt:

idOrFilter kann auch eine Filterfunktion sein, die ein Event Object Argument akzeptiert und True zurückgibt, wenn es entfernt werden sollte.

ich gelesen, dass die Filterfunktion jQuery grep Methode arbeiten sollte genau wie, aber ich verstehe nicht, wie es zu implementieren. Ich habe angefangen, das unten zu schreiben, aber ich bin unsicher, wie ich weitermachen soll. Irgendwelche Vorschläge oder Beispiele würden sehr geschätzt werden! im select und die Ereignisse im Kalender

... 

$('#filter').click(function() { 
    $('#calendar').fullCalendar ('removeEvents', filter(events)); 
} 

... 

function filter (events) { 
... 
} 

Answer 1

Wenn Sie ein select verwenden, dies zu erreichen, müssen Sie eine Möglichkeit, die option s assoziieren. Ich habe die option s hat ids gemacht, die die von den Ereignissen im Kalender anzeigen lassen:

JavaScript (mit der events Eigenschaft fullCalendar):

events: [ 
    { 
     id: 'event-1', 
     title: 'Christmas Eve', 
     start: '2010-12-24', 
     allDay: true 
    }, 
    { 
     id: 'event-2', 
     title: 'Christmas Day', 
     start: '2010-12-25', 
     allDay: true 
    }, 
    { 
     id: 'event-3', 
     title: 'Boxing Day', 
     start: '2010-12-26', 
     allDay: true 
    } 
] 

Ihre Quelle der Ereignisse nicht zu sein braucht Array, das ist nur für das Beispiel, das ich erstellt habe.

HTML:

<select id="filter"> 
    <option id="event-1">Christmas Eve</option> 
    <option id="event-2">Christmas Day</option>   
    <option id="event-3">Boxing Day</option>   
</select> 

nun die removeEvent Funktion, wie Sie beschrieben, nimmt ein Ereignis-Objekt und gibt einen Booleschen Wert, der angibt, ob das Ereignis entfernt werden sollte:

function filter(event) { 
    return $("#filter > option:selected").attr("id") === event.id; 
} 

Was Die filter-Funktion gibt True zurück, wenn die unter der Auswahl mit ID filter ausgewählte Option über eine ID verfügt, die mit der ID des Ereignisses übereinstimmt, das an sie übergeben wird. Diese Funktion kann wirklich alles sein, solange sie wahr oder falsch zurückgibt.

Die Art, wie es unter der Haube funktioniert, ist, dass wenn Sie removeEvent aufrufen und Ihre Funktion übergeben, jedes der im Kalender lebenden Ereignisse an diese Funktion übergeben wird und wenn true zurückgegeben wird, wird das Ereignis entfernt.

Ich habe ein funktionierendes Beispiel (http://jsfiddle.net/andrewwhitaker/QMyFu/) gemacht, das auch ein weiteres Beispiel für eine Filterfunktion und Auswahlelement enthält.

Hoffe, dass hilft!