Oxygen 3.6 is now available - see what's newlimited time special pricing available

How to Setup The Events Calendar with Oxygen

How to Setup The Events Calendar with Oxygen

Updated: 6th February 2020 for v5 of The Events Calendar.

In this tutorial, learn how to create a Single Event template and an Events Archive template with Oxygen.

To begin with, install The Events Calendar plugin.

Creating the Single Event Template

Create a new template called Single Event via Oxygen > Templates. If you have a template that contains your site header and footer, then select to inherit the design from that template. Set it to apply to Events via "Where does this template apply" > Singular > Events. If you have other templates that could apply to Events, set the priority to a higher number (such as 10).

Publish the template and click "Edit with Oxygen".

Add a Section element to your template via +Add > Basics > Section. Add a Code Block element to the Section via +Add > Basics > Code Block. Set the width of the Code Block to 100% via Advanced > Size & Spacing.

Add the following code to the PHP & HTML tab of the Code Block element:

Save your template.

Creating the Events Archive Template

Create a new template called Events Archive via Oxygen > Templates. As before, if you have a template that contains your site header and footer, then select to inherit the design from that template. Set it to apply to the tribe_events post type via "Where does this template apply" > Archive > Post Types > tribe_events. If you have other templates that could apply to archives, set the priority to a higher number (such as 10).

Add a Section element to your template via +Add > Basics > Section. Add a Code Block element to the Section via +Add > Basics > Code Block. Set the width of the Code Block to 100% via Advanced > Size & Spacing.

Add the following code to the PHP & HTML tab of the Code Block element:

Add the following code to the CSS tab of the Code Block element:

Save your template.

Finally, you need to set The Events Calendar to use the Default Events Template and updated calendar designs. You can do this via Events > Settings > Display. Set "Events template" to "Default Events Template" and select "Use updated calendar designs":

 

You should now be able to view your events calendar via /events and you should be able to view a single event by clicking the event name on the calendar.

Calendar view:

 

Event view:

 

If your event map isn't showing correctly, then you will need to get a Google Maps API Key. You can find further information via Events > Settings > APIs.

2 comments on “How to Setup The Events Calendar with Oxygen”

Leave a Reply

Your email address will not be published. Required fields are marked *

Author
Phe Simmonds
Phe Simmonds

Follow along with this tutorial

Create Test Install

Get Oxygen Today

Lifetime, unlimited site license

Need more help?

Copyright © 2020 Soflyy
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram