Calendar widget: How to change category filters without reloading (using ajax)

[Christian Voigt]

Hi, I need to combine a calendar widget with a list of categories the user can activate/deactivate. This should be possible without reloading the page. The calendar widget already does ajax calls for the “previous month” and “next month” links. The category filter list should behave in the same way.

I took a look at frontend.js. Can I overwrite or extend the default functionality in any way? Everytime the user adds or removes a category, the calendar should be reloaded with an ajax call, so that the new categories can be applied to the calendar widget shortcode.

Another small thing I would like to add would be to highlight the day of the currently active archive page in the widget (if the widget is embedded on a archive/month/day page and the month of the selected day is currently visible). Should I add this as a feature request to Github? Or is there any workaround to add this? I could add this with a custom javascript file, but the problem is that the user can reload the calendar with ajax, and then the changes would have to be re-applied.

[Stephen Harris]

The plug-in uses client side ‘hooks’, so you can do this with a bit of javascript (loaded separately, but will need to be after the plug-in scripts):

wp.hooks.addFilter( 'eventorganiser.fullcalendar_render_event', function( bool, event, element, view ){

   //if event should be hidden return false
   //if event should be visible return true
   //if you want to leave the event visibility unchanged return bool;

   //event will contain the event categories.

   return bool;
}, 4 );

That hook will filter which events are visible on the calendar, so can remove those which aren’t in the desired categories.

When a user changes which categories are selected you’ll want to reload the calendar:

$('.eo-fullcalendar').fullcalendar('rerenderEvents');

[Christian Voigt]

I just found out that you already answered my question (I expected to get notified by mail from this forum, but did not receive a notification).

Thank you for your help! The client side hooks are what I was looking for.

[Christian Voigt]

Ok, I looked into the client side hooks. You were talking about the full calendar, not the widget calendar, right?

In my code the filter is not called for the widget calendar. If I understand frontend.js right, clicking on “next month” will simply use $.getJson’s callback to change the widget’s content without applying any filters.

Is there any other way to add this functionality for the widget calendar?

[Stephen Harris]

Hi Christian,

Yes that’s for the fullcalendar, unfortunately there are no plans to add hooks for the widget calendar.

[Author]

Posts