js – filter fullcalendar events client side

Screenshot from 2017-10-04 14-18-42

we needed to filter the events on a fullcalendar. The fullcalendar retrieves the events from the server through a REST service like so

<div id="calendar"></div>
$scope.calendar.fullCalendar({
                header: ...,
                defaultView: 'agendaWeek',
                events: function (start, end, timezone, callback) {
                    Audiencia.findByDates({inicio: start.format('YYYY-MM-DD'), fin: end.format('YYYY-MM-DD')}, function (data) {
                        var events = data.map(function (audiencia) {
                            return {
                                start: moment(audiencia.inicio).tz('America/Mexico_City'),
                                end: moment(audiencia.fin).tz('America/Mexico_City'),
                                title: audiencia.nuc || (audiencia.sala ? audiencia.sala.nombre : 'Audiencia'),
                                audiencia: audiencia,
                                backgroundColor: audiencia.tipoAudiencia.color
                            };
                        });
                        callback(events);
                    });
                },

here we used a $resource called Audiencia which retrieves the events from the server. we have to map the properties in the Audiencia objects to the Event object expected by the fullcalendar, nothing special.
Then, when a select option is changed we need to filter the events accordingly, so we need to add the select control and bind the event.

<div class="row">
        <div class="col-sm-6">
            <div class="form-inline">
                <div class="form-group">
                    Juez 

                        TODOS

                </div>
            </div>
        </div>
    </div>
    <div id="calendar"></div>
$scope.filtro = {
                juez: null
            };

$scope.jueces = Juez.query();

$scope.refrescarAudiencias = function (juez) {
                $scope.calendar.fullCalendar('rerenderEvents');
            };

$scope.calendar.fullCalendar({
                header: ...,
                defaultView: ...,
                events: ...,
                eventRender: function (event, element) {
                    var audiencia = event.audiencia;
                    if ($scope.filtro.juez && !audiencia.jueces.reduce(
                            function (prev, current) {
                                return $scope.filtro.juez.id === prev.id || $scope.filtro.juez.id === current.id;
                            })) {
                        return false;
                    }
                },...

here the important part is the eventRender function that is called for each event and when it returns false, the event is not displayed, thus filtered.
In the example the object Audiencia contains an array of Juez and if the selected Juez matches any of the Juez in the audiencia it is shown, otherwise it is not. We used the reduce function which takes an array and produce a single value, boolean in this case. Notice that we added an extra option ‘TODOS’ to display all events, if it gets selected $scope.filtro.juez is null and thus is not filtered.

We could also have used the filter function like this

eventRender: function (event, element) {
                    var audiencia = event.audiencia;
                    var display = true;
                    if($scope.filtro.juez){
                        display = audiencia.jueces.filter(function(juez){
                            return $scope.filtro.juez.id === juez.id;
                        }).length > 0;
                    }
                    if(!display){
                        return false;
                    }
}...

it depends on your preference and the readability of the code.

sources:
https://stackoverflow.com/questions/6641355/jquery-fullcalendar-event-filtering
https://fullcalendar.io/docs/

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s