How To Use The Events Calendar With Avada

07/02/2019

The Events Calendar plugin developed by Modern Tribe is a plugin designed to create and manage events on your website with ease. The Events Calendar is 100% design integrated with the Avada WordPress theme.

The Events Calendar plugin offers a Pro version as well as a Free version. If you only want to use The Event Calendar plugin’s core features, then the free version will suffice. However, if you want to receive premium support and additional features, then you can purchase the Pro version. To see the list of features and differences for each version, and to purchase the Pro version, see this site.

You can also view the Avada Church Demo or the Avada Craft Beer Demo to see the Events Calendar plugin in action.

Events Element Example

Overview

How To Install The Events Calendar Plugin

Step 1 – Go to Avada > Plugins and locate The Events Calendar plugin.

Step 2 – Click the ‘Install’ button.

Step 3 – Once it’s finished installing successfully, it will be activated automatically. Click ‘Return to Required Plugins Installer’ link and you will now see it has the Active status.

Main Events Page

When you install The Events Calendar plugin, it creates and registers a slug to showcase your events at /events. You can view an Avada Demo example of this here.

It is important to understand that while the /events page on the front end appears to be a regular page, it is not an actual page you can edit in the WordPress backend. To learn how to change this slug, continue reading below.

How To Change The Main Events Page Slug

Step 1 – Navigate to the Events > Settings tab on your WordPress admin panel.

Step 2 – On the ‘General’ tab, locate the ‘Events URL Slug’ option. By default, it’s set to events. Simply change it to the slug you’d wish to use.

Step 3 – You can also change the ‘Single Event URL Slug’ option to change the slug for single event pages. By default, it’s set to event. Simply change it to the slug you’d wish to use. Ideally, the Events URL slug should be plural, and the Single Events URL slug singular.

Step 4 – Once done, click the ‘Save Changes’ button.

IMPORTANT NOTE: If the option is unavailable, it may be because your permalinks aren’t set correctly. Your permalinks must be set to any setting except Plain. You can customize your permalinks by going to the Settings > Permalinks on your WordPress admin panel.

Display Settings

There are a lot of settings for the Events Calendar, and they are mostly straightforward and well documented on the Events Calendar Support Site, but there are a couple of options in the Display Tab, that greatly affect how your events look and worth a quick look.

Firstly, there is a setting there called ‘Enable event views’. These are the different ways to view an event, and by default all three are chosen. The user can switch between the various views on the front end, and this limits what view they can see. Another important setting, directly under this one, is the ‘Default view’ setting. This controls which view is loaded initially by default. The views are all quite different, so test them to see which one suits your events the best.

Event Calendar Display Settings

Creating Events

At the heart of the Events Calendar plugin are the individual events. These are created from the WordPress dashboard at Events > Add New. After adding your event title, you can add the details of the event through the normal WordPress editor.

IMPORTANT NOTE: If you don’t see the option to use Fusion Builder on Events, make sure to check the Fusion Builder Settings and check that ‘Event’ has been ticked in the registered Post Types.

In the right hand sidebar, like a blog post, you can choose or create categories, and also add a featured image that will be used in the Event display. There are also a few Event options in this sidebar. But the remainder of the content comes from The Events Calendar box, immediately under the editor. Here you add the date and time for the event, as well as the organiser and the location for the event (which you can reuse). There is a link field for an external event website, and there is a place to add a cost for the event.

For additional functionality including recurring events, ticket sales, publicly submitted events, you might want to go for the Premium version and the additional add-ons available.

Events Calendar Fusion Theme Options

The main Avada Fusion Theme Options are divided into two sections, namely, the General Events Calendar section which contains general options and the Events Single Posts section that houses specific options for the events single posts only. There are also options to manage Events Calendar sidebars in the Theme Options > Sidebars > Events Calendar Posts section.

General Events Calendar Options

Display Events Page Title – Controls if the native page title for events calendar archive pages should be displayed above or below the filter bar, or if it should be disabled. Options are Above Below, & Disabled.

Events Primary Color Overlay Text Color – Controls the color of text when the primary color is the background.

Events Filter Bar Background Color – Controls the background color for the events calendar filter bar.

Events Filter Bar Text Color – Controls the color of the event filter bar text.

Events Monthly Calendar Heading Background Color – Controls the background color of the numbered heading in the calendar.

Events Monthly Calendar Background Color – Controls the background color of each day in the calendar.

Events Tooltip Background Color – Controls the background color for the event tooltip.

Events Tooltip Body Text Color – Controls the color of the tooltip body text.

Events Border Color – Controls the various border colors around the events calendar.

Events Featured Image Hover Type – Allows you to set the hover type for the event featured images. Choose between None, Zoom In, Zoom Out, or Lift Up.

Events Image Background Size For List View – Allows you to select if the event image displays auto or covered in the list view. Choose between Cover or Auto.

Events Separator Heading Font Size – Controls the font size of the month and day separator headings on events archive page.

Fusion Theme Options - General Events Calendar Tab

Events Single Post Options

Events Social Sharing Box – Allows you to turn the social sharing box on single events posts On or Off.

Events Single Post Meta Layout – Sets the layout of the single events meta data. You can choose from Sidebar, Below Content, or Disabled.

Events Single Sidebar Width – Controls the width of the sidebar when only one sidebar is present.

Events Dual Sidebar Width 1 – Controls the width of sidebar 1 when dual sidebars are present.

Events Dual Sidebar Width 2 – Controls the width of sidebar 2 when dual sidebars are present.

Events Sidebar / Meta Content Background Color – Controls the background color of the single event post sidebar(s) / meta content.

Events Sidebar / Meta Content Padding – Controls the sidebar padding for single event post sidebar(s) / meta content.

Events Sidebar / Meta Content Widget Heading Font Size – Controls the size of the sidebar widget heading for single event posts.

Events Sidebar / Meta Content Widget Title Background Color – Controls the background color of the sidebar widget / meta content title for single event posts.

Events Sidebar / Meta Content Widget Headings Color – Controls the color of the sidebar widget / meta content heading for single event posts.

Events Sidebar / Meta Content Text Font Size – Controls the size of the text in the single event post sidebar / meta content.

Events Sidebar / Meta Content Text Color – Controls the color of the text in the single event post sidebar / meta content.

Events Sidebar / Meta Content Link Color – Controls the color of the link text in the single event post sidebar / meta content.

Events Sidebar / Meta Content Divider Color – Controls the color of the dividers in the single event post sidebar / meta content.

Fusion Theme Options - Events Single Posts Tab

Events Calendar Sidebars

IMPORTANT NOTE: The Events Calendar sidebar settings are located in the Avada > Theme Options > Sidebars section.

Activate Global Sidebar For Events Calendar Posts – Allows you to turn global sidebars for Events Calendar posts On or Off.

Global Events Calendar Sidebar 1 – Allows you to select which widget area to display as the 1st sidebar on all Events Calendar posts and archives pages. Select None to hide the 1st sidebar.

Global Events Calendar Sidebar 2 – Allows you to select which widget area to display as the 2nd sidebar on all Events Calendar posts and archives pages. Sidebar 2 can only be used if sidebar 1 is selected. Select None to hide the 2nd sidebar.

Global Events Calendar Sidebar Position – Allows you to control the position of the 1st sidebar for all Events Calendar posts and archive pages. If a 2nd sidebar is selected, it will be displayed on the opposite side.

Fusion Theme Options - Sidebars - Events Calendar

Fusion Builder Events Calendar Element

The Events Calendar Element can be found within the Builder Elements when creating any page or post. Please see the Events Calendar Element document for more info!

Additional Plugin Resources

Below is a list of articles and resources that you can use to better learn how to use The Events Calendar plugin.