Put The Events Calendar Month View on Your Homepage

Because I’ve been messing with The Events Calendar for the RVArts project, along came another conversation where that plugin seemed like a good answer. It answered all their needs except for one – the wanted to have the month view of events be the homepage for the site. I knew that didn’t happen natively but I figured I could do it.

The first step is to create a custom page template. There are a number of tutorials on how to do that. I usually just duplicate the page template for the theme I’m using as a parent and go from there. The one I’m using is below.
The Events Calendar has this nice function (tribe_show_month) which’ll pull the month’s data by default.

<?php
/**
 * Template Name: Month Page
 * The template for displaying the month view on the front page.
 *
 * @package _tk
 * @package TribeEventsCalendar
 */

get_header(); ?>

<?php $now = date_i18n( 'Y-m-01' ) ?> //get the date so we show the right month
<?php tribe_show_month( array( 'eventDate' => $now, 'tribe-events/month/content' ) )?> //get the events for the month
<?php get_template_part('page' ); ?> // you don't have to have this but I figured maybe we'll want to write something below the calendar 
		<?php comments_template( '', true ); ?>

<?php get_footer(); ?>

That’ll get you something that looks like below (depending on your theme).
Screen Shot 2016-01-21 at 9.19.36 AM

It’s the right content but it’s not applying the same CSS/JS that’s on the regular month view. You could go in and rewrite CSS and JS etc. but that would suck for this particular project.

It turns out you have to enqueue the right stuff and this post was so very helpful in telling what to enqueue. I updated it to the newer functions and presto everything worked just like the normal month events view. It goes into my child theme’s functions.php. This particular version only enqueues the script when the page is set to the homepage.

add_action('wp_enqueue_scripts', 'enqueue_month_view_scripts');
function enqueue_month_view_scripts() {
    if ( is_front_page() ) {
        Tribe__Events__Template_Factory::asset_package('ajax-calendar');
 Tribe__Events__Template_Factory::asset_package('events-css');
    }
}

Screen Shot 2016-01-21 at 9.19.51 AM

Make sure you’ve applied the page template to the page and set the page as the homepage or nothing will work.

Comments on this post

No comments.

Leave a Reply

Trackbacks and Pingbacks on this post

No trackbacks.

TrackBack URL