Calendar displays in mobile view on desktop/tablet screen sizes

Under certain circumstances, when viewing your events pages in the default Month View on standard-sized displays, you may notice that your calendar is rendered at a smaller size, with dots replacing the usual event titles on dates that contain events.

Calendar displayed in mobile view

To better understanding why this problem occurs and how to prevent it, it's helpful to understand how the visual styling for The Events Calendar is constructed in code. Let's take a closer look.

Responsive Design

The Events Calendar is built from the ground up with responsive design in mind, which means that its visual styling adapts to different screen sizes. On large screens, the calendar's Month View is a full grid that displays the event titles that we'd expect to see on a large calendar. When viewed on smaller screens, the calendar will automatically respond by switching to a smaller, more compact version. Instead of displaying all events, the calendar displays dots indicating days that contain events.

The calendar automatically switches from the large screen layout to the small screen layout if the space allotted for the calendar is less than 768 pixels wide. We call this the calendar's responsive breakpoint.

However, space allotted for calendars refers not to the size of your device or browser window but to the container holding the calendar. If the calendar is sitting in a container that is less than 768 pixels in width, the calendar will respond to the appropriate breakpoint.

Where we see this most often is when a sidebar is included on the same page as the calendar. The space the sidebar takes up subtracts from the calendar's 768 pixels of available space before the breakpoint strikes. The result is that the small screen version of the calendar is displayed where the large screen version might be expected.

Thankfully, there is a handy way around this problem. We can use the following snippet in our theme's functions.php file to change the width at which the responsive breakpoint is activated.

function customize_tribe_events_breakpoint() {
  return 600;
add_filter( 'tribe_events_mobile_breakpoint', 'customize_tribe_events_breakpoint' );

In this example, we're telling the calendar to hold off from changing to small screen mode until the container is less than 600 pixels in width. That's 168 more pixels of space to play with than we had before. If you'd prefer to use a different breakpoint, simply change the "600" in code to another value of your choice.

But let's say that we want to kill the small screen mode completely. We can do that using this snippet instead:

add_filter( 'tribe_events_kill_responsive', '__return_true');

Other methods for allotting more space to your calendars might include removing sidebars or adjusting their behavior to move above or below your calendar views on smaller displays. It's worth exploring different options to see which one works best for you and your users.

Still encountering mobile styling on your calendars that isn't resolved by the above suggestions? Read on!

Concatenation Issues

Problems with mobile styling being applied incorrectly may also be caused by a behavior known as concatenation, which is automatically performed by some WordPress caching and optimization plugins. Plugins that perform concatenation will often combine all CSS files requested by your WordPress theme and active plugins into a single file in an effort to improve page load times. The Events Calendar uses a separate CSS file for its mobile styling which is triggered only at specific display sizes, but concatenation plugins are able to bypass this logic, causing the more specific mobile styling to override your default calendar styling at all screen sizes.

If you're experiencing this issue on your calendar or events pages, you can determine whether your caching plugin is at fault by temporarily deactivating the plugin from your WordPress site's backend. Log in to your WordPress site, then click Plugins in the sidebar to bring up the list of installed plugins for your site. Click the Deactivate link below your caching plugin's title to deactivate the plugin and disable its behaviors.

Deactivate link for caching plugin

After clearing your browser's cache, try reloading your main calendar page to see if the problem persists. If your calendar displays with its standard styling in place once your caching plugin is disabled, you'll know that concatenation (or a similar compression method) is to blame.

The good news is that you can still make use of many of the optimization features of these caching plugins without negatively impacting your calendars or events--it's just a matter of applying these features selectively where possible. Our plugins are already developed with speed and efficiency in mind and employ a number of performance-oriented considerations, such as code minification, straight out of the box. (You can read more about performance as it relates to our plugins over on our minification article.) If your caching plugin allows for the enabling and disabling of features individually, simply disabling concatenation and minification should allow you to benefit from the speed improvements that caching offers without compromising the functionality of your plugins. This article provided by Tangerine Moons offers some further suggestions specifically related to the use of W3 Total Cache with The Events Calendar.

With these tips in mind, you should be well-equipped to continue working with our plugins alongside your preferred caching solution without affecting the look, feel, or functionality of your calendars. If you should continue to experience any issues with your calendar or if you should have any other questions, please don't hesitate to reach out to us over at our support help desk for further assistance! :)