Plugin conflict: The Events Calendar

[pixelasticity]

Version information can be found in the lower right of most WP admin screens
WordPress Version: 6.5
Nebula Version: 11.8.10.395

Describe the Problem
There seems to be a plugin conflict between Nebula and The Events Calendar that causes the calendar to only ever display the mobile version.

Steps to Reproduce

1. Install Nebula and activate theme (or child theme if you prefer)
2. Install and activate The Events Calendar
3. View the monthly calendar in various browser sizes

Expected Behavior
The plugin should be able to switch to desktop view on larger screens.

Additional Information
Strangely, the problem doesn't seem to happen if you're logged in to WordPress.

[chrisblakley]

I took a peek at this tonight, but I don't seem to be able to reproduce the issue you're seeing.

This is the plugin I tested with: https://wordpress.org/plugins/the-events-calendar/

When I scale the window narrower and wider it seems to respond appropriately, but let me know if there are any more specifics to try to reproduce the issue– I tried in a few browsers. I did also try logged in and logged out as well as going extra wide.

Screen.Recording.2024-04-05.at.10.54.02.PM.mov

If you are familiar with the browser inspector, if you can provide any additional context related to the classes/CSS that may be conflicting that can also help narrow this down.

Also, any screenshots you can provide would also be great– is the entire monthly calendar disappearing or only partially?

[pixelasticity]

Hey there,

Thanks so much for looking into this issue.

The calendar isn't disappearing at all, it just stays in the mobile version at all times unless I'm logged in, in which case it doesn't have any issues.

I know The Events Calendar uses a function to change the calendar from one version to another (as opposed to CSS), but I don't get any errors in the console or anywhere. I thought it was my child theme, but if I make Nebula the active theme, it still doesn't work, and if I change the theme to a default one, it does work.

[chrisblakley]

Thanks for the clarification– can you also provide a screenshot of what it should look like at desktop size? I can look around myself as well, but if you happen to have that as a reference that would be great, thanks.

Also, you mentioned it may use a JavaScript function to trigger the swap– any chance you know that function name? I can see if there are any conflicts in there too.

[pixelasticity]

Please ignore the colors as I customized the CSS a bit, however, you can see that in the mobile view, it shows the date in m/d/yyyy format at the top, whereas in desktop view, it shows previous and next buttons, a "this month" button, and the name of the current month above the calendar. The mobile view also has single letters for the days of the week instead of three-letter abbreviations.

Mobile

Desktop

As for the function, I don't know the name of the one that does the swap, but there's a function called initBreakpoints() that's involved in the process. Inside that function, it's supposed to run window.tribe.events.views.breakpoints.setup( container );, which doesn't happen when you aren't logged in.

So I looked into that, and the Events Calendar JavaScript file isn't loading for non-logged-in users. All the CSS files from the plugin are loading perfectly fine, however.