Display categories at top of Events Calendar

Hello!
Is there any way to display the category options at the top (or bottom) that would allow people to click on them to only show a certain category?

Right now it just shows the category colors but not a key as to which color represents what. Let me know,
Thanks so much!

  • Predrag Dubajic

    Hey Lauren,

    Hope you're doing well today :slight_smile:

    Something like this is not possible with E+ plugin out of the box, but we might create a custom solution for you.
    Can you tell me a bit more how did you want this to work, are you looking to add clickable links above/below the calendar that will show which color represents which category and once you click it it will open calendar with events only from that category?
    I have attached an example screenshot below.

    Looking forward to your response.

    Best regards,
    Predrag

  • Predrag Dubajic

    Hi Lauren,

    Sorry for the delay, this week started quite busy and we are trying to get back to everyone as soon as possible :slight_smile:

    Here is what you would need to do here, first thing is to create new page for each category you have and add calendar shortcode with calendar filter, for example for category with ID 5 add this to page:
    [eab_calendar category="5"]

    Now in your main calendar page add a code like this:

    <a href="URL_TO_CAT_ONE" class="wpmu_custom custom_category_one">Category One Name</a>
    <a href="URL_TO_CAT_TWO" class="wpmu_custom custom_category_two">Category Two Name</a>

    Duplicate each line for depending on number of categories, enter desired page URL, enter unique class for each link instead of custom_category_two and edit category name.

    Now we need to add the color box using some CSS like this:

    a.wpmu_custom:before {
        content: "";
        width: 25px;
        height: 20px;
        display: block;
        float: left;
        margin-top: 5px;
        margin-right: 10px;
    }
    
    a.custom_category_one:before {
        background: #fff;
    }
    
    a.custom_category_two:before {
        background: #000;
    }

    First part can stay intact and you need to update each custom_category_* part with the color of your category.

    Hope this helps and let me know if you need further help with this :slight_smile:

    Best regards,
    Predrag

  • Katie

    All of that has worked except when you click on a certain category, it is still not filtering out the other ones...This is the code I have been doing for the individual pages, let me know if something is off:

    [eab_calendar navigation="true" title_format="M Y"] [eab_calendar category="Charleston Area Events"]

    [eab_calendar navigation="true" title_format="M Y"] [eab_calendar category="Island Wide Events"]

    [eab_calendar navigation="true" title_format="M Y"] [eab_calendar category="Local Entertainment"]

    Thanks so much!