Updated: March 28th, 2023, for v6 of The Events Calendar.

In this tutorial, learn how to set up The Events Calendar to work with Oxygen.

Setup:

To begin, install The Events Calendar plugin and Oxygen on a website.

Creating the Events Template:

After setting up both Oxygen and The Events Calendar, it is time to create an Events template. To do this, go to Oxygen > Templates in /wp-admin and create a new template. In this example, we'll call it "Events," but you can name it whatever you'd like.

Next, set the template to inherit your Main template, and then set the template to apply to the following scenarios:

• Singular > Events
• Archive > Post Types > tribe_events

Lastly, you may also need to set the priority to a higher number if any other templates could be applied to the event pages or events archive on the front end. You can read more about templating in our Templating Overview documentation.

With your template settings complete, save and publish the template. Then open it in Oxygen.

Editing the template in Oxygen:

After Oxygen is open, you'll need to add some custom code to the template to display information from The Events Calendar plugin. There are two ways to add this code, and you can choose either option.

Option 1 - Manually add the elements:

First, add a Section element to your template via +Add > Basics > Section. Now, add a Code Block inside the Section element via +Add > Basic > Code Block.

Next, select the Code Block element, go to the PHP & HTML tab, and add the following PHP to the Code Block element:

Option 2 - Cross-Site Copy the elements:

As an alternative to the steps mentioned above, if you're using Oxygen 4.1 or later, you can import the entire Section with the Code Block mentioned above by copying the JSON below and importing it into your site (how to use Cross-Site Copy and Paste in Oxygen):

Conclusion:

After you have added the necessary code using either option above, save your template. You should now see both the Single Event and Events archive pages.

Some users have also found that adding the following snippet using their preferred Code Snippets plugin is also required at times to get everything working correctly.