Dynamically Change The “View All X Events” URLs for the Events Calendar

Updated reading time

At the moment there is a bug going on in The Events Calendar that would need to be solved soon. Great plugin regardless! Since when clicking onto the Calendar and clicking another month — either previous or the next — would use AJAX to view the next or previous months, but the View All x Events link in each and every one of those next/prev months would not link properly.

To remedy this, the following code can be placed within the functions.php file of the theme, in a plugin, or within the Code Snippets plugin (preferred method):

/**
 * Dynamically change the "View All x Events" URLs for the calendar days
 * @since 4.6.25 The Events Calendar
 * @since 4.4.32 The Events Calendar PRO
 * @author Mic Sumner
 * @link https://smnr.co/30dzsz7
 */
function tribe_events_calendar_view_all_events() {
	if( tribe_is_month() ) {
		?>
		<script>
			jQuery(document).ajaxComplete(function() {
				if( jQuery('.tribe-events-month .tribe-events-viewmore a').length ) {
					jQuery('.tribe-events-month .tribe-events-viewmore a[href*="?"]').each(function() {
						var oldUrl = jQuery(this).attr('href');
						oldUrl = oldUrl.split('/');
						
						// get the index 4 in the oldUrl array
						var date = oldUrl[4];
						var url = document.location.origin + '/events/' + date + '/';
						jQuery(this).attr('href', url);
					});
				}
			});
		</script>
		<?php 
	}
}
add_action( 'wp_footer', 'tribe_events_calendar_view_all_events' );

What Does This Code Do?

As displayed within the add_action function, this would hook the tribe_events_calendar_view_all_events function to the wp_footer action, which in WordPress the wp_footer action would perform its actions most likely in the footer of the website. You can notice this when you look into your theme’s footer.php file (or similar) and search for the wp_footer(); most likely found before the closing body tag </body> in the theme file.

Looking into the function that is called, it simply outputs a script element to house the following JavaScript functionality. That when an AJAX call is completed, check whether there is a visible Calendar on the website, and update all of the links within the viewmore CSS class into a working one which in this case would be the website’s location origin / events / date /, for example https://www.micsumner.com/events/2019-08-19/.

When Do I Not Need This Code?

This code has been worked on using The Events Calendar 4.6.25 and The Events Calendar PRO 4.4.32, and the plugin authors Modern Tribe have stated that there will be some big changes coming up soon. So we can stay tuned for an official fix as well.

At the moment, this hotfix will sort things out for the meantime, and is not likely to break.

Tweaking the Plugin for Your Website

Please take note that the code listed above will have to be thoroughly understood so that you could get it tailored for your website. For example, the code above used the URL /events/ to depict the post type for All Events. However, this can change depending on the circumstances and setup of your website.