Now is your last chance to buy a lifetime license before we switch to annual pricing. Existing licenses will be unaffected.
read more

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.

Author
Phe Simmonds
Phe Simmonds

Follow along with this tutorial

Create Test Install

Get Oxygen Today

Lifetime, unlimited site license

Need more help?

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