Hi Barry,
How you doing?
Yep, another way! I was giving this some thought and decided to go back and check the calendar library docs, and I found what I was looking for: the calendar has a setEvents()
method that allows you to pass in a new collection and re-render the calendar.
Every time the user changes the category options, we can filter the events array and tell the calendar to re-render with just those events. This means that your logic within the template that displays the ellipses will update correctly.
All the filtering logic is now inside updateEventList()
:
function updateEventList() {
var categories = getSelectedCategories();
renderSelectedCategories(categories);
if (categories.length > 0) {
var filteredEvents = events.filter(function(event) {
return categories.indexOf(event.cat) > -1;
});
myCal.setEvents(filteredEvents);
} else {
myCal.setEvents(events);
}
}
Here’s the updated fiddle: http://jsfiddle.net/mtd7jhod/1/
One other thing I noticed: when you click the ‘x’ to remove a filter, there’s no need to remove the element from the page, as when updateEventList()
is called, it calls renderSelectedCategories()
which re-renders the list of selected categories anyway.