Display Calendar in Homepage

Hey there!

There’s unfortunately no way to do this. ?? Sorry to disappoint!

The /events page can only exist in one location.

Please let me know if there’s anything else I can help with.

Cheers,
George

I found a solution to do this. I will leave it here in case it helps someone:

I overrode the template full width (the one using on homepage):

<?php /*Template Name: Full Width Template*/?>
<?php get_header();?>

<script type='text/javascript' src='https://your-url/wp-content/plugins/the-events-calendar/vendor/bootstrap-datepicker/js/bootstrap-datepicker.min.js?ver=3.2'></script>

<script type='text/javascript' src='https://your-url/wp-content/plugins/the-events-calendar/vendor/jquery-placeholder/jquery.placeholder.min.js?ver=2.0.7'></script>

<script type='text/javascript' src='https://your-url/wp-content/plugins/the-events-calendar/vendor/jquery-resize/jquery.ba-resize.min.js?ver=1.1'></script>

<script type='text/javascript'>
/* <![CDATA[ */
var tribe_js_config = {"permalink_settings":"\/%postname%\/","events_post_type":"tribe_events","events_base":"http:\/\/your-url\/"};
/* ]]> */
</script>

<script type='text/javascript' src='https://your-url/wp-content/plugins/the-events-calendar/src/resources/js/tribe-events.min.js?ver=4.1.3'></script>

<script type='text/javascript' src='https://your-url/wp-content/plugins/the-events-calendar/src/resources/js/tribe-events-bar.min.js?ver=4.1.3'></script>

<script type='text/javascript' src='https://your-url/wp-content/plugins/LayerSlider/static/js/greensock.js?ver=1.11.8'></script>

	<div class="container">
		<?php
			if(is_front_page() || is_page('home custom')) {
		?>
				<?php $now = date_i18n( 'Y-m-01' ) ?>
				<?php tribe_events_before_html(); ?>
				<?php tribe_show_month( array( 'eventDate' => $now ) )?>
				<?php tribe_events_after_html(); ?>

		<?php  }
		?>
	</div>

	<!-- ** Primary Section ** -->
	<section id="primary" class="content-full-width">

	<?php
		if( have_posts() ):
			while( have_posts() ):
				the_post();
				get_template_part( 'framework/loops/content-fullwidth', 'page' );
			endwhile;
		endif;?>
	</section><!-- ** Primary Section End ** -->

<script type="text/javascript">
    jQuery(document).ready(function($) {
               $("body").addClass("events-gridview events-archive tribe-events-style-full tribe-events-style-theme tribe-theme-parent-lms tribe-theme-child-lms-child page-template-tpl-events-php singular customize-support tribe-is-responsive");
    });
</script>
<?php get_footer(); ?>

After this just add this to your functions.php:

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');
    }
}

Cheers

Nice work, @mazyng!

We are indeed working on expanding shortcodes in our plugins and hope to have an easier means of doing this for you in the future:

https://tribe.uservoice.com/forums/195723-feature-ideas/suggestions/3926703-shortcode-ability-for-simple-implimentation-on-any

Cheers!
Geoff

I went the route of making it into a shortcode.
In order for this to work (all credits and thanks to mazyng above!!!)
, you also need this:
remove_all_filters('tribe_events_after_footer');
It just needs to be called BEFORE you execute tribe_show_month. As it causes an infinite loop when operating within a wordpress loop (ie a page).

So… functions.php…

function sc_custom_tribe_calendar( $atts ) {
    extract( $atts=shortcode_atts( array(
        'target_id'=> 'tribe_month_view', // container which will receive tribe css classes. Should contain the tribe calendar.
        'hostname_url'=>  $_SERVER['HTTP_HOST']// ex: "mywebsite.com"  -- for the hardlinks back to the calendar view that operates properly
    ), $atts, 'multilink' ) );

	global $post;
	$post->ATTR_TRIBE_CAL=$atts;

	remove_all_filters('tribe_events_after_footer');

	ob_start();
	get_template_part( 'template-parts/shortcode', 'tribe-events' );
	$output=ob_get_clean();

    return $output;
}
add_shortcode( 'custom_tribe_calendar', 'sc_custom_tribe_calendar' );

And then inside your theme:: /template-parts/shortcode-tribe-events.php

<?php global $post; ?>

<script type='text/javascript' src='https://your-url/wp-content/plugins/the-events-calendar/vendor/bootstrap-datepicker/js/bootstrap-datepicker.min.js?ver=3.2'></script>

<script type='text/javascript' src='https://your-url/wp-content/plugins/the-events-calendar/vendor/jquery-placeholder/jquery.placeholder.min.js?ver=2.0.7'></script>

<script type='text/javascript' src='https://your-url/wp-content/plugins/the-events-calendar/vendor/jquery-resize/jquery.ba-resize.min.js?ver=1.1'></script>

<script type='text/javascript'>
/* <![CDATA[ */
var tribe_js_config = {"permalink_settings":"\/%year%\/%monthnum%\/%day%\/%postname%\/","events_post_type":"tribe_events","events_base":"http:\/\/<?php echo $post->ATTR_TRIBE_CAL['hostname_url'];?>\/events\/"};
/* ]]> */
</script>

<script type='text/javascript' src='https://your-url/wp-content/plugins/the-events-calendar/src/resources/js/tribe-events.min.js?ver=4.1.3'></script>

<script type='text/javascript' src='https://your-url/wp-content/plugins/the-events-calendar/src/resources/js/tribe-events-bar.min.js?ver=4.1.3'></script>

<script type='text/javascript' src='https://your-url/wp-content/plugins/LayerSlider/static/js/greensock.js?ver=1.11.8'></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
	$("#<?php echo $post->ATTR_TRIBE_CAL['target_id'];?>").addClass("events-gridview events-archive tribe-events-style-full tribe-events-style-theme tribe-theme-parent-lms tribe-theme-child-lms-child page-template-tpl-events-php singular customize-support tribe-is-responsive");
});
</script>

<div class="container">
		<?php $now = date_i18n( 'Y-m-01' ) ?>
		<?php echo tribe_events_before_html(); ?>
		<?php
			//tribe_get_view();
			tribe_show_month( array( 'eventDate' => $now ) )
		?>
		<?php echo tribe_events_after_html(); ?>
</div>

Which means inside a post/page/w/e you can do this:

<div id="monthview">
		[custom_tribe_calendar target_id="monthview"]
  </div>

It will surely break with newer updates. And chances are, you’ll want to use the official shortcode via Pro version. But this is certainly a means to an end, a temporary solution for the free users out there.

Hi mazyng & ensemblebd,

Thanks for posting your solution.

Good news about that infinite loop is that will be fixed in 4.2 so you could remove this: remove_all_filters(‘tribe_events_after_footer’);

Thanks again for posting!

Thanks to everyone for this. So, just a question, in 4.2 we finally have a shortcode or function to show calendar everywhere? ??

Where is

And then inside your theme:: /template-parts/shortcode-tribe-events.php

???