javascriptjqueryfullcalendarfullcalendar-2

Filtering Events with Two or more separate filters in FullCalendar


I have a list of events in fullCalendar that are by certain users and for different clients. I want to filter by user and client, so that when one user is clicked, only his events will show. And while that user is clicked I click a client, only events with that client and user shows on the calendar.

https://codepen.io/anon/pen/Owmqwe?page=1&

In my example, when I click Jack and Petco, only Jack's Petco client's events should show. But the problem is, when I click Jack then Petco, ALL The petco events show up instead. It also does this vice versa, when I click Petsmart and then I click Jack. Jacks Petco event shows up, when only Jack's petsmart events should show up.

I believe the problem lies in line 96 of the JS, it has something to do with that eventRender return statement that I am not sure how to solve, I read through JQUERY docs but I am still inexperienced.

eventRender: function(event, element, view) {
          return $('input[type=radio][name=user_selector]:checked').val() === 'all' && $('input[type=radio][name=type_selector]:checked').val() === 'all'
                   || event.client.indexOf($("input[type=radio][name=type_selector]:checked").val()) >= 0
                   || event.user.indexOf($("input[type=radio][name=user_selector]:checked").val()) >= 0;

Another thing: I could filter users through event sources arrays. But the issue is: although my example was a static array, in practice I am getting events from database dynamically. That means I wont be able to filter events that have new users, I would have to constantly manually update the code. So, that wont work for me unless there's a workaround I can't think of.

Filter events by adding and removing multiple event sources


Solution

  • Incorrect usage of && and ||. I believe you want something like this:

    eventRender: function(event, element, view) {
          return ($('input[type=radio][name=user_selector]:checked').val() === 'all' || event.user.indexOf($("input[type=radio][name=user_selector]:checked").val()) >= 0)
              && ($('input[type=radio][name=type_selector]:checked').val() === 'all' || event.client.indexOf($("input[type=radio][name=type_selector]:checked").val()) >= 0);
        },