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.