The Events Calendar features a responsive design, which is a fancy way if saying it adjusts its layout according to the size of the screen it is being viewed on, like a smartphone or tablet. While it works smoothly in most cases, there may be situations where you want to adjust the responsiveness, say to accommodate a specific page template in your theme.<\/p>\n\n\n\n
The default breakpoint (i.e. the screen width where the layout adjusts) is is 768px. If the screen is narrower than 768px, then the calendar will adjust to a compact layout designed for smaller screens. If the screen is 768pc or wider, then the full-size layout is displayed.<\/p>\n\n\n\n
This breakpoint can be customized or completely removed with different filters. Let’s check that out.<\/p>\n\n\n\n
The plugin includes three different breakpoints, all of which can be customized:<\/p>\n\n\n\n
xsmall<\/code>: 500px<\/li>\n\n\n\nmedium<\/code>: 768px<\/li>\n\n\n\nfull<\/code>: 960px<\/li>\n<\/ul>\n\n\n\nTo customize these breakpoints, use the following filters:<\/p>\n\n\n\n
\ntribe_events_views_v2_view_breakpoints<\/code><\/strong>: Edits the breakpoints for all calendar views<\/li>\n\n\n\ntribe_events_views_v2_view_{view}_breakpoints<\/strong><\/code>: Edits breakpoints for the defined view, where {view}<\/code> is the slug of the view you want to adjust (i.e. month<\/code>, list<\/code>, etc.)<\/li>\n<\/ul>\n\n\n\nCustomizing Breakpoints for All Calendar Views<\/h2>\n\n\n\n
Let’s say we want to customize the medium<\/code> responsive breakpoint from 768px to 600px. Adding this snippet to the theme’s functions.php<\/code> file will do the trick:<\/p>\n\n\n\nfunction customize_tribe_events_v2_medium_breakpoint( $breakpoints ) {\n $breakpoints['medium'] = 600;\n\n return $breakpoints;\n}\n\nadd_filter( 'tribe_events_views_v2_view_breakpoints', 'customize_tribe_events_v2_medium_breakpoint' );\n<\/pre><\/div>\n\n\nNow let’s say we want to change the breakpoints for the xsmall<\/code> and full<\/code> breakpoints as well. We can customize all three in the same filter:<\/p>\n\n\n\nfunction customize_tribe_events_v2_breakpoints( $breakpoints ) {\n $breakpoints = [\n 'xsmall' => 480,\n 'medium' => 600,\n 'full' => 800,\n ];\n\n return $breakpoints;\n}\n\nadd_filter( 'tribe_events_views_v2_view_breakpoints', 'customize_tribe_events_v2_breakpoints' );\n<\/pre><\/div>\n\n\nCustomizing Breakpoints for a Specific Calendar View<\/h2>\n\n\n\n
Removing breakpoints doesn’t have to be an all-or-nothing sort of thing. Each view has a filter for each responsive breakpoint, allowing them to be customized for specific views:<\/p>\n\n\n\n
\n- List view:<\/strong>
tribe_events_views_v2_view_list_breakpoints<\/code><\/li>\n\n\n\n- Month view:<\/strong>
tribe_events_views_v2_view_month_breakpoints<\/code><\/li>\n\n\n\n- Day view:<\/strong>
tribe_events_views_v2_view_day_breakpoints<\/code><\/li>\n<\/ul>\n\n\n\n\/\/ Customizes the medium responsive breakpoint for month view from 768px to 600px\nfunction customize_tribe_events_v2_view_month_medium_breakpoint( $breakpoints ) {\n $breakpoints['medium'] = 600;\n\n return $breakpoints;\n}\n\nadd_filter( 'tribe_events_views_v2_view_month_breakpoints', 'customize_tribe_events_v2_view_month_medium_breakpoint' );\n<\/pre><\/div>\n\n\nRemoving Responsive Breakpoints<\/h2>\n\n\n\n
To completely remove all of the breakpoints use this filter in the theme’s functions.php<\/code> file:<\/p>\n\n\n\n\/\/ Removes all responsive breakpoints in every calendar view\nadd_filter( 'tribe_events_views_v2_view_breakpoints', '__return_empty_array' );\n<\/pre><\/div>\n\n\nAnd respectively to completely remove any breakpoints for a specific view, list view in this example:<\/p>\n\n\n
\n\/\/ Removes all responsive breakpoints in the calendar's list view\nadd_filter( 'tribe_events_views_v2_view_list_breakpoints', '__return_empty_array' );\n<\/pre><\/div>\n\n\nLet\u2019s say you want to customize the responsive breakpoint to be 600px. This following snippet filters the tribe_events_mobile_breakpoint<\/code> function to adjust the breakpoint from 768px to 600px, and can be added to your theme’s functions.php<\/code> file at the end:<\/p>\n\n\n\nfunction customize_tribe_events_breakpoint() {\n return 600;\n}\n\nadd_filter( 'tribe_events_mobile_breakpoint', 'customize_tribe_events_breakpoint' );\n<\/pre><\/div>\n\n\nNow let\u2019s say you want to remove the responsiveness altogether. That’s where the tribe_events_kill_responsive<\/code> filter comes into play. Add it to your functions.php<\/code> file and pass a value of __return_true<\/code> in there to remove the responsive breakpoint.<\/p>\n\n\n\nadd_filter( 'tribe_events_kill_responsive', '__return_true' );\n<\/pre><\/div>\n\n\nStyling Based on Responsiveness<\/h2>\n\n\n\n
The Events Calendar includes the following CSS classes, which are added to the <body><\/code> class, giving you control over the appearance of the calendar based on whether it is responsive or being viewed on a small screen.<\/p>\n\n\n\n\n.tribe-is-responsive<\/code><\/strong>: This class is always available, unless the breakpoint has been removed like we saw in the previous section. In other words, this class is removed when responsiveness is disabled.<\/li>\n\n\n\n.tribe-mobile<\/code><\/strong>: This class is automatically added when responsiveness is enabled and the calendar is viewed on a small screen, narrower than 768px, or a custom breakpoint, if you set one like we did in the previous section.<\/li>\n<\/ul>\n\n\n\n