Avada is an extremely popular WordPress theme and page builder. It also integrates nicely with The Events Calendar, but there are a few things you can do to make your calendar and the theme work more seamlessly together.

The default calendar is located at /events which can be changed in the plugin settings.

What you need

  • Avada: This core theme for the Avada product suite. It requires Avada Core and Avada Builder, which are bundled with the theme purchase.
  • The Events Calendar: The core plugin for calendar functionality.
  • Events Calendar Pro (optional): Additional calendar features and views.
  • Event Tickets (optional): The core plugin for creating tickets for events.

Installation

Download and install the theme and plugins as you would others in WordPress or via FTP. Avada requires two plugins in addition to the theme that enable the page builder and access to other features. Those instructions are provided below.

Setup

The next thing is to configure your calendar. The Events Calendar provides a lot of flexibility to customize your views and events, but Avada adds even more settings that help the calendar and theme work even more seamlessly together.

Using Avada pre-built website designs

Avada provides a number of pre-built, pre-designed sets of pages that are perfect starter templates for crafting a visually appealing website with a consistent look and feel throughout.

Three of the pre-built websites feature The Events Calendar:

Avada Church

View demo

Avada Beer

View demo

Avada University

View demo

You can use any of the websites by navigating to Avada → Websites from the WordPress dashboard.

Page title bar settings

Navigate to Avada → Global Options from the WordPress dashboard to access Avada customization settings. This is where you change the appearance of your site at the theme level. In particular, there is a setting to pay extra attention to when integrating with The Events Calendar.

Open the Page Title Bar settings. If your calendar is the front page of your site (Settings → Reading), then an incorrect page title and breadcrumbs are displayed above the calendar.

Showing the calendar month view with a light gray header that says Blog as the page title in a large font followed by breadcrumbs that display links to the site's Home and Blog.
The calendar is a custom post type archive, and the Avada theme mistakes it as the main blog archive when the calendar is set as the site’s front page in the WordPress settings. The page title bar is only an issue when the calendar is used as the front page of the site. It works properly in all other situations.

The easy fix is to remove the page title and breadcrumbs from view, which are options in the Avada Page Title Bar settings.

Select the “Hide” option in the Page Title Bar setting to remove the incorrect page title. Select the “None” option in the Breadcrumbs setting to remove the breadcrumbs.

The issue with this approach is that the calendar displays the same large header, just without any content in it, taking up lots of unused space. Plus, the change is applied globally, meaning every page on the site no longer displays the page title. It might make more sense to simply hide the entire page header just for the calendar page in this situation. Add this CSS snippet to the “Additional CSS” section of the WordPress Customizer to remove it:

.fusion-page-title-bar {
  display: none;
}

Another option? If you have Events Calendar Pro installed, you have access to various shortcodes that allow you to embed the calendar any page or post. Create a new page in WordPress and embed the calendar to make that page your main events calendar.

Calendar settings

Avada devotes an entire section of its Global Options settings to The Events Calendar. Access it by navigating to Avada → Options from the WordPress dashboard, then clicking on the “Events Calendar” option in the navigation.

The calendar settings are looted toward the very bottom of the options menu.

There are many settings available to customize your calendar directly from this screen, including the following:

  • Events Primary Color Overlay Text Color: Controls the color of text when primary color is the background.
  • Events Filter Bar Background Color: Controls the background color for the events calendar filter bar, when the Filter Bar premium add-on is installed.
  • Event Filter Bar Text Color: Controls the color of the event filter bar text when the Filter Bar premium add-on is installed.
  • Events Popover/Drop-down Background Color: Controls the color for the event popover/drop-down background in the calendar’s month and week views.
  • Events Popover/Drop-down Background Hover Color: Controls the hover color for the event popover/drop-down background in the calendar’s month and week views.
  • Events Popover/Drop-down Body Text Color: Controls the color of the popover/drop-down text in the calendar’s month and week views.
  • Events Border Color: Controls the various border colors around the calendar.
  • Events Featured Image Hover Type: Controls the hover type for event featured images.
  • Events Separator Heading Font Size: Controls the font size of the month and day separator headings on events archive pages. Enter value including any valid CSS unit (e.g. 18px).

Single event settings

The settings to customize event pages is directly beneath the “General Events Calendar” options. Use these settings to adjust the appearance of the template that displays individual events.

Showing the settings screen for event single posts. The menu for Avada's global settings is dark and located to the left and the Events Calendar item is highlighted in blue. The event post settings are located to the right of the menu again a white background, showing an option for social sharing.

The settings are divided into four subsections to modify specific aspects of the design.

Event single posts

  • Events Social Sharing Box: Turn on to display the social sharing box on single event posts.
  • Events Single Post Meta Layout: Sets the layout of the single events meta data.

Event single sidebar layout

Events Single Sidebar Width: Controls the width of the sidebar when only one sidebar is present. Enter value including any valid CSS unit (e.g: 32%).

Events dual sidebar layout

The following settings help adjust event pages that contain two sidebars in the page layout.

  • Events Dual Sidebar Width 1: Controls the width of sidebar 1 when dual sidebars are present. Enter value including any valid CSS unit (e.g: 21%).
  • Events Dual Sidebar Width 2: Controls the width of sidebar 2 when dual sidebars are present. Enter value including any valid CSS unit (e.g: 21%).

Events single post sidebar / meta content styling

These settings control the appearance of the sidebar that contains meta information about the event.

  • Events Sidebar / Meta Content Background Color: Controls the background color of the single event post sidebar / meta content.
  • Events Sidebar / Meta Content Padding: Controls the padding for the single event post sidebar(s) / meta content. Enter value including any valid CSS unit number (e.g. 4%).
  • Events Sidebar Widget / Meta Content Heading Font Size: Controls the size of the sidebar widget / meta content heading for single event posts. Enter value including CSS unit (in px, em, rem).
  • Events Sidebar Widget / Meta Content Title Background Color: Controls the background color of the sidebar widget/meta content title for single event posts.
  • Events Sidebar Widget / Meta Content 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 (in CSS pixels, e.g. 16px).
  • 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.

Creating events

Avada fully supports the Block Editor and it works for creating events as well. Where Avada really shines for creating events is the set of options that it offers to customize events individually. This way, you’re able to produce unique layouts and appearances on an event-by-event basis.

Showing the events calendar options that are available in the WordPress post editor. The options are in a container with a light gray borde. The various options are located in a vertical menu with a light gray background on the left of the container. The individual settings for the selected options are located to the right of the navigation.
The options are available at the bottom of the post editor.

The options include:

  • Layout: Settings for the event background color and whether the content is contained in a border.
  • Header: Settings for the event’s header at the top of the page, including the width and background color, as well as background images. There is an additional option to display a specific menu for the event, which is great for settings up larger events that might require more than a single page, like conferences that offer workshops.
  • Sliders: Embed any existing slider created in Avada’s settings to the event page and specify where it is located.
  • Page Bar Title: Settings to modify the appearance of the event title that’s contained in the page header. Change the text alignment, color, and formatting options, or hide the title completely.
  • Content: Settings for the content of the page, including size, background options, and social sharing.
  • Sidebars: Assign up to two sidebars to the page and specify how they display in various situations, like mobile and desktop screens.
  • Footer: Display widgets and copyright information, and the width of the bottom of the page.
  • Import / Export: Avada allows you to export the settings for an individual event to use on other events, or import the settings from a different event.

Fixing display issues

We maintain a close working relationship with Theme Fusion, the team behind Avada, to ensure the best possible compatibility between The Events Calendar, Avada, and all of our other plugins.

As such, there have been conflicts in the past that have since been fixed in more recent version of both the theme and the plugins. Those issues are documented below.

We recommend using the latest versions whenever possible. At the same time please test all updates in a safe environment before updating your live site. Both products are updated frequently and testing those changes on a staging or testing site first will help prevent possible compatibility issues.

If you do run into an issue using The Events Calendar with Avada, please let us know and we will work with Theme Fusion to correct it, or offer guidance for how to correct it.

Fixing the month view design

We are working with the Theme Fusion team to officially fix this issue, but for now, you can workaround this by adding the following to the “Additional CSS” section of the WordPress Customizer:

.tribe-events .tribe-events-calendar-month__day {
  height: auto;
}

July 2 2021 update: the Avada team confirmed this is going to be fixed in the next release (7.4.2).

Fixing the calendar’s icons

A known issue exists where the calendar’s updated icons in The Events Calendar 5.3 are either missing or improperly sized. This was fixed in Avada 7.2, so be sure to use that version or above when working with The Events Calendar 5.3 and above.

Fixing the calendar widget

Another issue that prevents embedding The Events Calendar widget on a site using the Avada theme was fixed in The Events Calendar 5.5.

Fixing the ticket form design

The ticket form in our Event Tickets plugin experienced a design issue that affected the plus (+) and minus (-) buttons that update the ticket quantity. This was fixed in Avada 6.2. However, if you are unable to update to a newer version of the theme, we have a CSS snippet you can use as a workaround.

#tribe-tickets .tribe-tickets__item .tribe-tickets__item__quantity button {
  border: none;
  box-shadow: none;
  color: black;
  font-weight: 600;
  background: none;
}

Additional resources

  • How to use The Events Calendar With Avada: Avada’s documentation for setting up the theme and plugin together, including demos.
  • Avada Events Element: Avada includes a calendar element to drop into any page or post. Showcase one or many events and customize it to suit your needs, from which events to include to what text is displayed.
  • Avada Facebook Group: A free Facebook Group for posting questions about Avada. It’s an excellent place to get advice from others and even search for existing answers to questions.
  • Avada Elements Video: This video looks at how to use the Events Element in Avada Builder.

Notify us of out of date information