Avada includes built-in support for The Events Calendar, offering a powerful and unified experience. The integration allows you to display calendars and event listings with Avada-specific styling and builder elements.
Setup Steps
- Install and activate Avada theme and Avada Builder.
- Install and activate The Events Calendar.
- In any Avada layout (e.g., using Fusion Builder), add the Events Element. Review Avada documentation for all available elements.
Limitations & Workarounds
Avada may force The Events Calendar into its column/sidebars which aren’t always flexible. Some users recommend custom CSS or overriding layouts to match your vision.
Custom Styling Beyond Builder Defaults
Whether you’re using builder modules or default TEC pages, fine-tune appearance with CSS. For example:
.avada .tribe-events-calendar td.tribe-events-today {
background-color: #f0f8ff;
}
Recommendations
- Maintain Plugins: Ensure compatibility between The Events Calendar and Avada versions.
- Test Responsively: Check mobile layouts—builders often have unique mobile settings.
- Cache & Performance: Additional modules and styles can increase load time—minimize assets where possible.
- CSS & JS Compilers: The CSS and JS compiler under Avada> Options > Performance tab are tools for optimizing the CSS and JS that are dynamically generated from the various option settings on your site. In some cases, the selected method can conflict with The Events Calendar styling.