Updated on February 06, 2020

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 Events > Settings > Display.

Set Events template to Default Events Template.

Tick “Use updated calendar designs”.

Step 4

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).

Edit with Oxygen.

Add a Section.

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 5

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 archives 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( '« ' . 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>«</span> %title%' ) ?></li>
                <li class="tribe-events-nav-next"><?php tribe_the_next_event_link( '%title% <span>»</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>«</span> %title%' ) ?></li>
                <li class="tribe-events-nav-next"><?php tribe_the_next_event_link( '%title% <span>»</span>' ) ?></li>
            </ul>
            <!-- .tribe-events-sub-nav -->
        </nav>
    </div>
    <!-- #tribe-events-footer -->

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

Step 6

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

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.

24 comments on “The Events Calendar in Oxygen”

  1. Dear Sridhar,

    When loading the php code on the archive page in a clode block, a spinning wheel appears and it doesn’t stop. What does this mean? Should I be worried about this? It seams something isn’t right… I can’t provide url, because it’s local.

    What do you think?

    Lara

    1. Dear Lara,

      I have updated the tutorial to add a new Step (#3).

      Can you implement that and try again?

      The spinning wheel will continue to appear in the Oxygen editor. You can safely ignore that.

      It should appear fine in the frontend.

      1. I have fixed – I didn’t have any events created which I think was causing the error – added an event and all appears to be fixed. Sorry to hassle you Sridhar.

  2. Ran into an unique issue and thought to post here to save anyone from the same headache I went through, ha. For anyone running into this issue where the Single Events are double-posting on the frontend, make sure to check:
    The Events Calendar Settings > Display > Events Template: Default Events Template.

    Then the code snippets above should run just fine.

  3. Is there a way to change the headings, so instead of Upcoming Events on events archive, it could say, NC Shows?

      1. It’s in the list view that says it but it would be nice to be able change the heading on the month view too

  4. Hello awesome tutorial.

    Question, how do would you set the events archive as the homepage. I created a homepage under the Pages and connected it to the events archive template but nothing appears.

    Thanks
    Kevin

    1. It says you have to use the Pro version if you want to use the shortcode on the homepage. You think that would work if I get the pro version?

  5. Did something change in Tribe events? Seems all templates I assign don’t get picked up.
    Catchall template set to full width but all (single) event template have a 1140 page width.
    assigning to events seems not working, even with high priority numbers.
    Had this before with other builders but seems fixed in Oxy 2.2 and the code here.

    1. I do not have the test site install with me anymore.

      Can you check in the plugin’s settings if that is an option that should be enabled?

  6. So, I went through this set up just like how you have it, and the events page is throwing me a 500 error and displaying ��]�s�6����+X�L�Θ�ٲ�X��4��ܻ�u�黹�;��,6�#);����o)�(Ŵ*�Ե����]߸��A�l62�Q���ݙ�Ea����f-��c�����ͬ��G?�{VtMz�3 ?}�9�����%������’�n�sGF�]����7|HX|�)>՝������c�i[�����0. The other archive and single events are not displaying the oxygen header and footer on the live pages, but they are displaying somewhat correctly inside the editor. Thoughts?

magnifiercross
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: