How can I still show the calendar template if there are no events in that category?

I've added custom JavaScript to filter the calendar archive for different event categories and combinations of categories. However, if I filter to a category combination that has no events matching those categories the page reverts to the default template with no calendar and a default sidebar.

How can I make it so an empty calendar is shown instead of reverting to an empty page?

For example:

Shows calendar:
http://www.georgiancollege.ca/athletics/events/?eab_events_category=barrie+fitness

Doesn't show calendar (because there are no barrie, varsity events scheduled)
http://www.georgiancollege.ca/athletics/events/?eab_events_category=barrie+varsity

You can also use the buttons to apply some different filters to see it's quite jarring when it switches to a blank page with no calendar and you have to use the back button to return and select a different filter.

Thanks,
Thomas

  • aecnu

    Greetings Thomas,

    Thank you for your questions, they are greatly appreciated.

    I would have to suggest to add an even to the empty calendar even if it says no events scheduled.

    I apologize that due to the custom coding and our support mandate I am unable to enlist lead developer/coder assistance at this time - therefore my suggestion above.

    Please advise if my suggestion works or not.

    Cheers, Joe

  • Monika Bernolak

    Thanks for the reply Joe, I'm not quite sure what you mean by your suggestion, can you please elaborate?

    As well, all my custom coding is front end in order to interact with existing features of the events + plugin - I am not customizing it in anyway, therefore you should be able to bring in a developer to help out.

    All that my custom code does is change the URL in the browser to point to different events + archive pages but the way the plugin is set up is that if there are no archives rather than showing an empty calendar it reverts to an empty 'default' archive page instead of the calendar page that is supposed to replace the archive on the /events/ directory.

    For example, it is a normal feature in Events + to browse to a page such as: http://www.georgiancollege.ca/athletics/events/barrie+varsity/ this simply filters the calendar to only show 'barrie varsity' events - it is built in to events + and I did no custom code to achieve that - all my code is javascript that changes the URL depending on what categories the user selects to view.

    As you can see, I am still working within the stock feature set of Events + and this is a plugin issue, not custom code, so I'm hoping you can get a developer to help out on this one.

    Thanks,
    Thomas

  • oytamuah

    Wow those navigation buttons to filter through the calendar is really great. Any possibility to share how that was achieved. I really believe that should be included in the plugin itself as it's quite a standard feature in other events calendar plugins.

    Anyways I'm not too greedy, just want to make some buttons at the top of the monthly calendar that upon being clicked list the events based on the 'event category' - anyone can point me in the right direction for this?

  • Monika Bernolak

    Hey oytamuah,

    Thanks - it's not too difficult as it's all front end and doesn't actually modify the plugin at all. It is quite extensive - I'll try to capture all the steps here with good comments but I may miss anything. If so, you can get all the required code (minus a bit of PHP I've added a custom plugin which I'll post below) from viewing the source and using the inspector on the page - it's all JavaScript located in athletics.js on the page.

    First, create a custom plugin just to include the required - this step is optional but it's good to do as it will prevent the page from including and running the code under 2 circumstances, 1. events + is not active 2. the page being viewed is not an events page - this will save overhead on your other pages.

    In the plugin you'll want code similar to below with some modifications for your own specific site...

    //add filters to events page
      add_action( 'wp_head', 'AddEventFilters');
    	function AddEventFilters(){
        include_once( ABSPATH . 'wp-admin/includes/plugin.php' );
    
        //check if events+ is running
        if (is_plugin_active('events-and-bookings/events-and-bookings.php')){ //only run if events + is running
          //if (current_user_can('edit_posts')) { //comment out to go live for all users - uncomment to test for just logged in admin users - dont forget to comment/uncomment closing brace below as well
            //only run on athletics events pages
            $accepted_url = '/athletics/events'; //athletics events URL startswith
            $this_url = $_SERVER['REQUEST_URI']; //relative URL of the page
            $accept = strpos($this_url, $accepted_url); //is it an events page?
            if ($accept !== false){ // run filtering code
              wp_enqueue_script('athletics-scripts', WP_CONTENT_URL . '/plugins/georgian-custom-functions/athletics.js?v='.time()); //your plugin obviously have a different directory - you can also omit the .time() as I'm using that simply to avoid caching issues with the files
              wp_enqueue_style('athletics-styles', WP_CONTENT_URL . '/plugins/georgian-custom-functions/athletics.css?v='.time()); //your plugin obviously have a different directory - you can also omit the .time() as I'm using that simply to avoid caching issues with the files
            }
    
          //} //comment out to go live for all users - uncomment to test for just logged in admin users
        }
    	}

    That's it for the plugin.

    You'll also need to create the JavaScript and CSS files that are being enqueued in the plugin - I'll show you the JavaScript but I'll leave the CSS out, since you can style it however you please. I am using jQuery UI with a radios and a buttonset to create the button look - so without CSS the buttons will be radios for you.

    JavaScript - athletics.js

    jQuery(document).ready(function(){
    
      //intercept clicking of the 'next' and 'prev' buttons so we can append the filtered querystrings onto them so the next/prev month will still be filtered
      jQuery(".event-pagination > a").each(function(){
    
        var href = jQuery(this).attr("href"); //get the next/prev month link
        jQuery(this).attr("href", href + window.location.search); //append the filtering querystring to the link
    
      });
    
      //this part will look a little garbled to you - all it does is prepends the filtering buttons into the page - you can choose to prepend or append them wherever you please and change the IDs and classes to match your specific filters/categories
      jQuery("body.tax-eab_events_category div#wpmudevevents-wrapper, body.post-type-archive-incsub_event div#wpmudevevents-wrapper").prepend('<div id="filter-wrap"><div id="filter-campus"><p class="pFilter">Filter by Campus:</p><input id="rdoAnyCampus" type="radio" name="campus" value="" checked="checked"/><label for="rdoAnyCampus">Any</label><input id="rdoBarrie" type="radio" name="campus" value="barrie"/><label for="rdoBarrie">Barrie</label><input id="rdoOrillia" type="radio" name="campus" value="orillia"/><label for="rdoOrillia">Orillia</label><input id="rdoOwenSound" type="radio" name="campus" value="owen-sound"/><label for="rdoOwenSound">Owen Sound</label></div><div id="filter-type"><p class="pFilter">Filter by Type:</p><input id="rdoAnyType" type="radio" name="type" value="" checked="checked"/><label for="rdoAnyType">Any</label><input id="rdoFitness" type="radio" name="type" value="fitness"/><label for="rdoFitness">Fitness</label><input id="rdoRecreation" type="radio" name="type" value="recreation"/><label for="rdoRecreation">Recreation</label><input id="rdoVarsity" type="radio" name="type" value="varsity"/><label for="rdoVarsity">Varsity</label></div></div>');
      jQuery("#filter-campus, #filter-type").buttonset(); //turn the radios into jQuery UI buttonset
      jQuery("div.wpmudevevents-list div.event-pagination a").button(); //turn the events+ prev/next buttons into a jQuery UI button
    
      //check filters from querystring to filter the calendar when someone comes to the page via a link and never clicked any filters - such as when using the prev/next buttons
      var querystring = window.location.search;
    
      //'click' the radios that are in the querystring for location
      if (querystring.search('barrie') > 0) {
        jQuery("#rdoBarrie").click();
      } else if (querystring.search('orillia') > 0) {
        jQuery("#rdoOrillia").click();
      } else if (querystring.search('owen-sound') > 0) {
        jQuery("#rdoOwenSound").click();
      }
    
      //'click' the radios that are in the querystring for type
      if (querystring.search('fitness') > 0) {
        jQuery("#rdoFitness").click();
      } else if (querystring.search('varsity') > 0) {
        jQuery("#rdoVarsity").click();
      } else if (querystring.search('recreation') > 0) {
        jQuery("#rdoRecreation").click();
      }
    
      //whenever a radio is clicked call the filtering code
      jQuery("#filter-wrap input").live("change", function(){
        filterCalendar();
      });
    
    });
    
    //filtering code
    function filterCalendar(){
    
      //append cursor class to the body - css changes the cursor to the 'wait' cursor to signify it is processing the filter
      jQuery("body").addClass('cursor');
    
      //begin building the querystring
      var querystring = "?eab_events_category="; //append the events + category parameter
      var campus = jQuery("#filter-campus input:checked").val(); //get the campus filter that is selected
      var type = jQuery("#filter-type input:checked").val(); //get the type filter selected
      var joiner = ""; //if there is a + for multiple filters or nothing for only one filter
      if (campus != "" && type != "") { //if there is >1 filter use a plus
        joiner = "+";
      } else { //else, no joiner required
        joiner = "";
      }
    
      //redirect the page to the same page with the querystring appended to let events+ do the hard work of filtering the events by category
      window.location.href = window.location.href.replace(window.location.search, '') + querystring + campus + joiner + type;
    
    }

    That should give you a pretty good start.

    Cheers,
    Thomas

  • aecnu

    Greetings Thomas,

    Sorry for the delay here on a reply to this ticket.

    I looked at my last post and I need a break from the 14 hour shifts ... lol

    What I was intending to point out was to possibly create a fake event though I do not know if this is necessary with the newest version 1.4.1:

    - Exposing more hooks for extending and customization.
    - L10n improvements.
    - Removable multiple times.
    - Network-wide permalink fix.
    - Not forcing future dates only in the calendar selector.

    Though it does not directly address this of course.

    Please advise after the update and if the category still does not show, though it has no scheduled events, I will see if I can get the lead developers advice in here for us.

    Please advise.

    Cheers, Joe

  • oytamuah

    Thomas thanks for sharing this code with all of us, I'm sure it must have taken you alot of time to write it.

    Unfortunately I'm very green when it comes to php and javascript and have some really basic questions:

    The php file that needs to be created, what should it be named and where should it be uploaded?

    Also, don't we need to insert some code into the archive-incsub_event.php file so it knows where to display the buttons and such?

  • Monika Bernolak

    oytamuah,

    Create a folder called 'my-custom-plugin'

    In that folder make two files - my-custom-plugin.php and my-custom-js.js

    In the PHP file you'll have:

    <?php
    /**
     * Plugin Name: My Custom Functions
     * Plugin URI: http://www.yoursitehere.ca
     * Description: Custom functions used on the my website
     * Author: Thomas Dexter - customized by oytamuah
     * Author URI: http://tsdexter.com
     * Version: 0.1.0
     */
    
    //PHP code from yesterday goes here.
    
    ?>

    Then in the JavaScript file, put all the JavaScript code. You don't need to modify the plugin file because the JavaScript uses jQuery to insert the HTML for the buttons where it needs to go... If you look at the line:

    jQuery("body.tax-eab_events_category div#wpmudevevents-wrapper, body.post-type-archive-incsub_event div#wpmudevevents-wrapper").prepend('<!-- YOUR HTML FOR RADIO BUTTONS GOES HERE  -->');

    That line tells it to insert the radio buttons at the beginning (prepend) of the events calendar wrapper on both the current and archive pages. Then I just use some CSS styles to move them around and position them how'd I'd like... jQuery UI takes care of making them look like buttons instead of radios.

    If you want to include jQuery UI add this line to the php file:

    wp_enqueue_script('jquery-ui-button'); // include jQuery UI button

    right before this line:

    $accepted_url = '/athletics/events';

    Let me know if that works.

    Thomas Dexter
    http://www.tsdexter.com

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.