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.
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.
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.
Thanks for this tutorial 🙂
Please consider also making one like this for Modern Events Calendar.
Antal
Thanks for the tutorial! This helped me out!