How to show events by category using fullCalendar - fullcalendar

Question

I am using fullCalendar 3.9.0 to list activities and events for a membership org. They categorize their events as Social, Workshop and Project
These events are displayed with the Month view.
FYI, I am using Adobe BC
Events are defined as an array e.g.
Pulled in as a list with these tags
{id:{tag_bookingid}, groupid: "Social Event",title: "{tag_name_nolink}", url: "{tag_url}", start: "{tag_bookingyear}-{tag_bookingmonthnumeric}-{tag_bookingday}", color:"#5f7bc0"},
Is there a way to customize the calendar to show only events of one category at a time and using tabs or buttons in the header to switch between categories?
Examples would be appreciated.

Answer 1

Here is a function that I use to toggle event data:
it also uses cookies to remember the selection between visits; you would use a different function on page load to check for the cookie and set the event lists there.
function toggleEventList(obj) {
var group = $(obj).data('group');
if ( $(obj).data('active') === 'yes' ) {
$(obj).data('active', 'no');
$('#calendar').fullCalendar('removeEventSource', '/cal-data-group?group='+group);
var elCookie = $.cookie('calendarEventList');
if (elCookie) {
elCookie = $.parseJSON(elCookie);
var idx = elCookie.indexOf(group);
if ( idx > -1 ) {
elCookie.splice(idx, 1);
}
}
$.cookie('calendarEventList', JSON.stringify(elCookie), {expires:7, path:'/'});
} else {
$(obj).data('active', 'yes');
$('#calendar').fullCalendar(
'addEventSource',
{ url: '/cal-data-group?group='+group, color: 'gray', textColor: 'black' }
);
var elCookie = $.cookie('calendarEventList');
if (elCookie) {
elCookie = $.parseJSON(elCookie);
var idx = elCookie.indexOf(group);
if ( idx == -1 ) {
elCookie.push(group);
}
} else {
elCookie = [group];
}
$.cookie('calendarEventList', JSON.stringify(elCookie), {expires:7, path:'/'});
}
$(obj).parent().toggleClass('active');
}