Hello, Breakdance Builders. I’ve been working with the Event Manager plugin to display a calendar on my site during migration from Beaver Builder to Breakdance.

Let me show you how it looks on Beaver Builder and walk you through the process on Breakdance. There’s a known issue many have discussed in the Facebook group. I’ve found a simpler and more elegant solution that’s easier to execute and more flexible.

I took a screenshot to demonstrate. When you insert the Event Manager calendar shortcode as is, it loads the calendar without any CSS. Our goal is to achieve the appearance of the live site calendar. On the development site, it currently looks like this. My solution involves using the WP Code Light plugin for its conditional logic capabilities. This allows for loading CSS only on necessary pages, aligning with Breakdance’s aim for clean code and fast loading times.

In Code Snippets, I’ll add a new custom snippet titled ‘Events Calendar.’ Then, I’ll go to the automatically generated events page. By right-clicking and viewing the page source, you can find the necessary CSS and JavaScript. Search for ‘TEC’ or ‘Tribe’ to locate it. Copy all the CSS from ‘TEC Variables’ to just before ‘meta robots,’ and then paste it. Next, locate the three CSS sheets and two JavaScript sheets needed, skipping any meta information and content inside the body tag.

Once all the code is in place, set the location to the header and use site-wide header as default. In conditional logic, set it to show if the page URL contains the specific end of your URL. After updating and hard refreshing, you’ll see the calendar rendering correctly, similar to the live site. I’ll adjust the spacing to improve visibility.

This solution ensures the Event Manager plugin works correctly, and the code executes only on this page. You can now build it inside any page you want. I hope this helps! Feel free to reach out with any questions