Advanced filtering will display a series of checkboxes for different categories above your event list widget. This allows patrons to sort or filter the events displayed in the list based on categories you have defined for each event. Here's what an event list widget with advanced filters looks like:

Image Placeholder

Let's look at how to set up advanced filtering.

Create event categories

Firstly you need to set up different main categories and sub categories for each event you want to be filterable. You can learn more about doing that here: How to use event categories. The main categories will be column headings (as seen in the above picture), and the sub categories will become checkboxes that can be turned on or off to filter the event list. In VBO, go to Setup > Events > Event Categories.

Image Placeholder

From this screen you need to click the "Add" button at the top right to add your own main categories. After you add a new category, you need to click the small plus sign icon to the right of it and add sub categories.

Add filter options to each event

After you've added all your categories, head over to your open events screen and from the "select action" box choose "edit event info." On this screen you'll see a label called "Advanced Event Filters." Click the little plus sign icon to add a new filter. This will pop up a form where you must choose the main category and the sub category, then click "Add." Do this for each category you want this event to be associated with, and do this for each event you want to be a part of the filtering. Here's an example of what this looks like after adding some categories to the filter:

Image Placeholder

Enable advanced filters on your widget

Head over to your widgets area by going to Setup > White Label > Widgets. If you don't already have an event list widget created, do so by adding a new one: How to set up and use widgets

After you create your widget, click on the name to open the widget options. Here you'll find a checkbox called "Advanced Filters" you can check to enable it. Then save your widget. Here's what it looks like:

Image Placeholder

Embed on your website

Lastly, you'll want your advanced filter event list widget on your website. From the widget screen in VBO, click the gear icon next too the widget you want to embed. Then choose "view embed code." Be sure to copy the script code at the top in the first box. You do not need the code in the second box below that. Paste this code into your web page where you want it to appear.

Image Placeholder

Next, you probably want to make the widget look nice, just like in the example picture at the top of this article. On the widget screen in VBO, next to your event widget, click the "HTML" button. This opens an area where you need to add some HTML. Copy and paste the HTML below into that area and click "Save HTML."


<div class='event'>
<div class='eventwrapper'>
<div class='column-1'>{POSTER}</div>
<div class='column-2'>
<div class='event-name'>{EVENTNAMELINK}</div>
<div class='event-date'>{EVENTDATE}</div>

Then, click the "Edit CSS" button and copy the below CSS and paste it in this area. Click "Save CSS."


.event-filter { overflow: hidden; margin: 0 0 10px 0; }
.event-filterheader { clear: both; overflow: hidden; margin: 0 0 5px 0; font-family: 'Roboto', Arial, Helvetica, sans-serif; }
.event-filterheader .left { float:left; font-size: 24px; }
.event-filterheader .right { float:right; font-size: 24px; }
.icon-plus, .icon-minus { cursor: pointer; }
.icon-plus { display: none; }
.icon-minus { display: block; }
.filterwrapper { float: left; padding: 0 0 0 5px; margin: 0 10px 10px 0; width: 152px; height: 212px; border-right: 1px solid #f4f4f4; }
.filterwrapper:last-child { margin: 0 0 10px 0; border: none; }

.filterwrapper33 { width: 13%; }
.filterwrapper498 { width: 15%; }
.filterwrapper499 { width: 29%; }
.filterwrapper495 { width: 14%; }
.filterwrapper496 { width: 19%; }

.filterheader { padding: 5px 3px 5px 3px; font-size: 16px; font-weight: normal; }
.filterbody { margin: 0 0 10px 0; max-height: 170px; overflow: auto; scrollbar-width: thin; scrollbar-color: #dadada #fff; }
.filtercount { display: none; }
.upcoming-events, .event-filter { padding: 10px 10px; font-family: Segoe UI, Open sans, sans-serif; font-size: 14px; border: 1px solid #CCC; background-color: #FFF; }
.filtertags { overflow: hidden; clear: both; font-family: 'Roboto', Arial, Helvetica, sans-serif; font-size: 12px; color: #000;  }
.etag { display: block; float: left; padding: 2px 5px; margin: 0 5px 10px 0; background-color: #f4f4f4; border-radius: 2px; }
.cleartags { display: block; float: left; padding: 3px 10px 0 10px; background-color: #ccc; border-radius: 2px; cursor: pointer; }
.icon-clear { height: 16px; }

.eventwrapper { overflow: hidden; padding: 0 0 10px 0; margin: 0 0 10px 0; border-bottom: 1px solid #dadada; }
.column-1 { float: left; }
.column-2 { float: left; padding: 0 0 0 10px; max-width: 610px; }
.event-name { padding: 0 0 2px 0; font-size: 20px; font-weight: bold;}
.event-pic { width: 200px; }
a.event-link { display: block; padding: 5px; color: #666; border-bottom: 1px solid #CCC; text-decoration: none; }
a.event-link:hover, a.event-link:active { display: block; padding: 5px; color: #000; border-bottom: 1px solid #CCC; }
.event-info { font-weight: bold; }
.eventdate-info { font-size: 18px; }
.event-error { padding: 5px; color: #EE0000; }
.event-date { padding: 0 0 10px 0; font-size: 18px; }

@media only screen and (max-width: 630px) {
.filterwrapper { float: none; margin: 0 0 0 0; padding: 0 0 5px 0; width: 100%; height: auto; max-height: 108px; border-right: none; border-bottom: 1px solid #dadada; }
.filterbody { margin: 0 0 2px 0; max-height: 70px; }
.filter { padding: 0 0 0 3px; }
.filtercount { display: inline-block; }
.column-1 { float: none; }
.column-2 { float: none; padding: 10px 0 0 0; }
.event-pic { width: 100%; }
.event-date { padding: 0 0 0 0; }

That's it! You can edit the CSS to change colors and sizing if you like. You now have the Advanced Filter Event List plugin on your website.