The Events Calendar in Oxygen

Updated on February 21, 2021

This tutorial provides the steps to set up templates for displaying archives and single event pages when using The Events Calendar plugin by Modern Tribe, Inc in Oxygen.

Sample screenshots:

Events archive page:

When an event is hovered:

A single event page:

Step 1

Install and activate The Events Calendar.

Step 2

Go to Events > Settings > APIs.

Click on the link to obtain a Google Maps API key and paste it in.

Note: In addition to Maps JavaScript API, you may also have to enable Geocoding API.

This is for the Google Map of the Venue (if you choose to show it) to be rendered.

Step 3

Go to Oxygen > Templates.

Add a new Template named say “Events Archive”.

Set it to inherit from your Main Template having the sitewide header and footer.

Apply it to tribe_events post type’s archive.

Give it a priority of 1 (or higher depending on how your Template for archives is setup).

Publish and Edit with Oxygen.

Add a Section.

[optional] Add a Heading that reads “Events”.

Add a Code Block inside the Section.

Advanced > Size & Spacing. Set Width to 100%.

PHP & HTML:

<?php
	use Tribe\Events\Views\V2\Template_Bootstrap;

	echo tribe( Template_Bootstrap::class )->get_view_html();
?>

CSS:

.ct-code-block .tribe-common--breakpoint-medium.tribe-events .tribe-events-l-container {
  padding: 0;
}

The preview will appear unstyled in the Oxygen editor but should be fine on the frontend.

Now visit yoursite.com/events to see the events archive.

Step 4

Now let’s create a Template for single events.

Add a new Template named say, “Single Event”.

Inherit from your Main Template, apply it to Singular > Events.

Give it a priority of 1 (or higher depending on how your Template for singular post types is setup).

Edit with Oxygen.

Add a Section.

Add a Code Block inside the Section.

Advanced > Size & Spacing: Width: 100%.

PHP & HTML:

<?php
$events_label_singular = tribe_get_event_label_singular();
$events_label_plural   = tribe_get_event_label_plural();

$event_id = get_the_ID();

?>

<div id="tribe-events-content" class="tribe-events-single">

	<p class="tribe-events-back">
		<a href="<?php echo esc_url( tribe_get_events_link() ); ?>"> <?php printf( '&laquo; ' . esc_html_x( 'All %s', '%s Events plural label', 'the-events-calendar' ), $events_label_plural ); ?></a>
	</p>

	<!-- Notices -->
	<?php tribe_the_notices() ?>

	<?php the_title( '<h1 class="tribe-events-single-event-title">', '</h1>' ); ?>

	<div class="tribe-events-schedule tribe-clearfix">
		<?php echo tribe_events_event_schedule_details( $event_id, '<h2>', '</h2>' ); ?>
		<?php if ( tribe_get_cost() ) : ?>
			<span class="tribe-events-cost"><?php echo tribe_get_cost( null, true ) ?></span>
		<?php endif; ?>
	</div>

	<!-- Event header -->
	<div id="tribe-events-header" <?php tribe_events_the_header_attributes() ?>>
		<!-- Navigation -->
		<nav class="tribe-events-nav-pagination" aria-label="<?php printf( esc_html__( '%s Navigation', 'the-events-calendar' ), $events_label_singular ); ?>">
			<ul class="tribe-events-sub-nav">
				<li class="tribe-events-nav-previous"><?php tribe_the_prev_event_link( '<span>&laquo;</span> %title%' ) ?></li>
				<li class="tribe-events-nav-next"><?php tribe_the_next_event_link( '%title% <span>&raquo;</span>' ) ?></li>
			</ul>
			<!-- .tribe-events-sub-nav -->
		</nav>
	</div>
	<!-- #tribe-events-header -->

	<?php while ( have_posts() ) :  the_post(); ?>
		<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
			<!-- Event featured image, but exclude link -->
			<?php echo tribe_event_featured_image( $event_id, 'full', false ); ?>

			<!-- Event content -->
			<?php do_action( 'tribe_events_single_event_before_the_content' ) ?>
			<div class="tribe-events-single-event-description tribe-events-content">
				<?php the_content(); ?>
			</div>
			<!-- .tribe-events-single-event-description -->
			<?php do_action( 'tribe_events_single_event_after_the_content' ) ?>

			<!-- Event meta -->
			<?php do_action( 'tribe_events_single_event_before_the_meta' ) ?>
			<?php tribe_get_template_part( 'modules/meta' ); ?>
			<?php do_action( 'tribe_events_single_event_after_the_meta' ) ?>
		</div> <!-- #post-x -->
		<?php if ( get_post_type() == Tribe__Events__Main::POSTTYPE && tribe_get_option( 'showComments', false ) ) comments_template() ?>
	<?php endwhile; ?>

	<!-- Event footer -->
	<div id="tribe-events-footer">
		<!-- Navigation -->
		<nav class="tribe-events-nav-pagination" aria-label="<?php printf( esc_html__( '%s Navigation', 'the-events-calendar' ), $events_label_singular ); ?>">
			<ul class="tribe-events-sub-nav">
				<li class="tribe-events-nav-previous"><?php tribe_the_prev_event_link( '<span>&laquo;</span> %title%' ) ?></li>
				<li class="tribe-events-nav-next"><?php tribe_the_next_event_link( '%title% <span>&raquo;</span>' ) ?></li>
			</ul>
			<!-- .tribe-events-sub-nav -->
		</nav>
	</div>
	<!-- #tribe-events-footer -->

</div><!-- #tribe-events-content -->

Step 5

If you want to assign Tags to your Events, you need to create a Template for the Tag archive pages.

Add a Section having a Heading and an Easy Posts element.

Double click on the Heading text, click on “Insert Data” button in the top toolbar, and click on “Archive Title”.

That’s it!

References:

/wp-content/plugins/the-events-calendar/src/views/v2/default-template.php

/wp-content/plugins/the-events-calendar/src/views/single-event.php