Change the view of the category filter.

Hello again for thoose who might need similar functionality i’ll post the solution i came up with.

We’ll use jquery and CSS. As i mentioned when <div data-term="***"> is outside the <div class="ai1ec-dropdown-menu"> the filter links are visible outside the dropdown.
Note that the div shoud be before #ai1ec-calendar or else the buttons won’t work.

Right order:

`<div id=”ai1ec-calendar” class=”timely ai1ec-calendar”>
<div data-term=”195″></div>
<div data-term=”278″>…..`

To moove the div’s i used jquery wich u can put in your header.php or include as external file.

<script>
$(function(){
  if ($('body').is('.page-id-7')) //filter the page i want to moove the divs
    {
        jQuery('.ai1ec-dropdown-menu > div'//this select all the divs after the class wich are actualy all the categories).insertBefore('.ai1ec-calendar-toolbar'//insert all the divs before this div class);
    }
});
</script>

Now u have your category buttons visible the only thing left is to style them.
as theese div’s have no id’s or classes u need to target them like this in your .css:

[data-term="195"] {
    /* Styles */ like this u can select the div
}

[data-term="195"]>a {
    /* Styles */ like this u can select the nested elements
}

This way i accoplished this:Filter the calendar categories whithout refresh the page
That’s it hope will help someone.
PS: This method makes the dropdown unusable so u’ll need to hide it’s button with display:none; or visibility:hidden;