If that first step did not work, find out what you are using for your Events Template in Events > Settings > Template. Make note of the setting here. If you\u2019ve got the “Default Events Template” option selected, then add the following code to your themes functions.php file and modify as needed to set the titles you want:<\/p>\n\n\n
\nadd_filter('tribe_get_events_title', 'my_get_events_title');\nfunction my_get_events_title($title) {\nif( tribe_is_month() && !is_tax() ) { \/\/ The Main Calendar Page\n return 'Events Calendar';\n} elseif( tribe_is_month() && is_tax() ) { \/\/ Calendar Category Pages\n return 'Events Calendar' . ' \u00bb ' . single_term_title('', false);\n} elseif( tribe_is_event() && !tribe_is_day() && !is_single() ) { \/\/ The Main Events List\n return 'Events List';\n} elseif( tribe_is_event() && is_single() ) { \/\/ Single Events\n return get_the_title();\n} elseif( tribe_is_day() ) { \/\/ Single Event Days\n return 'Events on: ' . date('F j, Y', strtotime($wp_query->query_vars['eventDate']));\n} elseif( tribe_is_venue() ) { \/\/ Single Venues\n return $title;\n} else {\n return $title;\n}\n}\n<\/pre><\/div>\n\n\nIf you\u2019ve got the Default Page Template selected, then first try opening up your theme’s page.php file and look for where the_title()<\/code> is executed. If you don’t see the_title()<\/code> in page.php<\/code>, try looking in header.php. It helps to do a find in the file instead of scanning it but I’ll leave that up to you.<\/p>\n\n\n\nIf you don’t find the_title()<\/code> in either of those files then it’s either in another template or added dynamically some other way in your theme and you’ll need to track it down. Try looking in your theme’s documentation and look up where the_title()<\/code> is executed. You may need to contact the theme author.<\/p>\n\n\n\nAs an example, in your theme you might find:<\/p>\n\n\n
\n<?php the_title(); ?>\n<\/pre><\/div>\n\n\nor:<\/p>\n\n\n
\n<?php echo get_the_title(); ?>\n<\/pre><\/div>\n\n\nOnce you\u2019ve found where the_title()<\/code> is executed, you\u2019ll want to use these conditional wrappers<\/a> to help you conditionally set the title for any of the event-related pages. You\u2019ll need to hard code the title for the Month View page similar to the following:<\/p>\n\n\n\nif( tribe_is_month() && !is_tax() ) { \/\/ The Main Calendar Page\n echo 'Events Calendar';\n} elseif( tribe_is_month() && is_tax() ) { \/\/ Calendar Category Pages\n echo 'Events Calendar' . ' \u00bb ' . single_term_title('', false);\n} elseif( tribe_is_event() && !tribe_is_day() && !is_single() ) { \/\/ The Main Events List\n echo 'Events List';\n} elseif( tribe_is_event() && is_single() ) { \/\/ Single Events\n echo get_the_title();\n} elseif( tribe_is_day() ) { \/\/ Single Event Days\n echo 'Events on: ' . date('F j, Y', strtotime($wp_query->query_vars['eventDate']));\n} elseif( tribe_is_venue() ) { \/\/ Single Venues\n echo get_the_title();\n} else {\n echo get_the_title();\n}\n<\/pre><\/div>\n\n\nPay attention to any specific code your theme may be using for the title too because you may want to wrap items in HTML and the like. Here is another example from a specific theme where the_title() would be wrapped in HTML markup:<\/p>\n\n\n
\n<div id="pageHead">\n <?php if( tribe_is_month() && !is_tax() ) { \/\/ The Main Calendar Page ?>\n <h1 class="home">The Main Calendar<\/h1>\n <?php } elseif( tribe_is_month() && is_tax() ) { \/\/ Calendar Category Pages ?>\n <h1 class="home">Calendar Category: <?php echo tribe_meta_event_category_name(); ?><\/h1>\n <?php } elseif( tribe_is_event() && !tribe_is_day() && !is_single() && !is_tax() ) { \/\/ The Main Events List ?>\n <h1 class="home">Events List<\/h1>\n <?php } elseif( tribe_is_event() && !tribe_is_day() && !is_single() && is_tax() ) { \/\/ Category Events List ?>\n <h1 class="home">Events List: <?php echo tribe_meta_event_category_name(); ?><\/h1>\n <?php } elseif( tribe_is_event() && is_single() ) { \/\/ Single Events ?>\n <h1><?php the_title(); ?><\/h1>\n <?php } elseif( tribe_is_day() ) { \/\/ Single Event Days ?>\n <h1><?php $title = 'Events on: ' . date('F j, Y', strtotime(get_query_var( 'eventDate' ))); ?><\/h1>\n <?php } elseif( tribe_is_venue() ) { \/\/ Single Venues ?>\n <h1><?php the_title(); ?><\/h1>\n <?php } else { ?>\n <h1><?php the_title(); ?><\/h1>\n <?php } ?>\n \n <?php $page_description = get_post_meta($post->ID, "_ttrust_page_description_value", true); ?>\n <?php if ($page_description) : ?>\n <p><?php echo $page_description; ?><\/p>\n <?php endif; ?>\n<\/div><!--end pageHead -->\n<\/pre><\/div>\n\n\nIf you have any questions about this, please open up a topic at our Help Desk<\/a>.<\/p>\n\n\n\nThe Mini Calendar Displays Instead of the Full Month View <\/h2>\n\n\n\n
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.<\/p>\n\n\n\n![\"\"](\"\/knowledgebase\/wp-content\/uploads\/2019\/10\/widget-calendar.png\")
<\/figure>\n\n\n\n<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
Responsive Design<\/h4>\n\n\n\n
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.<\/p>\n\n\n\n
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<\/em>.<\/p>\n\n\n\nHowever, space allotted for calendars refers not to the size of your device or browser window but to the container<\/em> holding the calendar. If the calendar is sitting in a container that is less than 768 pixels in width, the calendar will<\/em> respond to the appropriate breakpoint.<\/p>\n\n\n\nWhere 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.<\/p>\n\n\n\n
Thankfully, there is a handy way around this problem. We can use the following snippet in our theme’s functions.php<\/code> file to change the width at which the responsive breakpoint is activated.<\/p>\n\n\n\nfunction customize_tribe_events_breakpoint() {\n return 600;\n}\nadd_filter( 'tribe_events_mobile_breakpoint', 'customize_tribe_events_breakpoint' );<\/pre><\/pre>\n\n\n\nIn 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.<\/p>\n\n\n\n
But let’s say that we want to kill the small screen mode completely. We can do that using this snippet instead:<\/p>\n\n\n
\nadd_filter( 'tribe_events_kill_responsive', '__return_true');\n<\/pre><\/div>\n\n\nOther 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.<\/p>\n\n\n\n
Still encountering mobile styling on your calendars that isn’t resolved by the above suggestions? Read on!<\/p>\n\n\n\n
Concatenation Issues<\/h4>\n\n\n\n
Problems with mobile styling being applied incorrectly may also be caused by a behavior known as concatenation<\/strong>, 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.<\/p>\n\n\n\nIf 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<\/strong> in the sidebar to bring up the list of installed plugins for your site. Click the Deactivate<\/strong> link below your caching plugin’s title to deactivate the plugin and disable its behaviors.<\/p>\n\n\n\n![\"Deactivate](\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2017\/07\/caching_plugin_deactivate.png\")
<\/figure>\n\n\n\nAfter 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.<\/p>\n\n\n\n
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<\/em> 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<\/a>.) If your caching plugin allows for the enabling and disabling of features individually, simply disabling concatenation<\/strong> and minification<\/strong> should allow you to benefit from the speed improvements that caching offers without compromising the functionality of your plugins. This article<\/a> provided by Tangerine Moons<\/a> offers some further suggestions specifically related to the use of W3 Total Cache<\/a> with The Events Calendar.<\/p>\n\n\n\nWith 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\u00a0our support Help Desk<\/a> for further assistance!<\/p>\n\n\n\nIssues with the View Switcher or Navigation<\/h2>\n\n\n\n
When using The Events Calendar plugins, you may encounter an issue where the calendar view doesn’t change or you can’t paginate past the current month.<\/p>\n\n\n\n
If you do see one of these issues occur, there may be a simple fix.<\/p>\n\n\n\n
Testing for Conflicts<\/h4>\n\n\n\n
The simple answer is that there may be a conflict occurring with another plugin that is causing this issue. Often, this happens with security plugins, like Wordfence, or with a firewall like Modsec Firewall.<\/p>\n\n\n\n
The reason why this may occur is that security plugins tend to block the REST API. To see if this is what is causing the issue, go ahead and disable all security plugins and firewalls. You may need help from your hosting provider when it comes to any firewalls installed.<\/p>\n\n\n\n
Read more about testing for conflicts in our Knowledgebase article<\/a>.<\/p>\n\n\n\nGoogle Chrome Developer Tools<\/h4>\n\n\n\n
Another first step you can take when resolving this error is to utilize Google Chrome Developer Tools. You can usually find some good clues to help you see what is causing the issue there. To learn more about using Google Chrome Developer Tools, check out this Knowledgebase article<\/a>.<\/p>\n\n\n\n