{"id":1896499,"date":"2019-10-18T13:19:16","date_gmt":"2019-10-18T17:19:16","guid":{"rendered":"https:\/\/theeventscalendar.com\/knowledgebase\/show-all-events-on-month-view-grid-days\/"},"modified":"2026-04-23T13:53:22","modified_gmt":"2026-04-23T17:53:22","slug":"customize-month-view","status":"publish","type":"post","link":"https:\/\/theeventscalendar.com\/knowledgebase\/customize-month-view\/","title":{"rendered":"Customizing Month View"},"content":{"rendered":"\n

Month View lays out your events on a traditional calendar grid. You may want to tailor how that grid looks and behaves \u2014 from what appears inside each day to how event tooltips are presented. This article collects a range of common Month View customizations.<\/p>\n\n\n\n

Customizations for The Events Calendar are usually implemented via code snippets or template overrides. Add snippets to your child theme’s functions.php<\/code> file or use the Code Snippets plugin. Template overrides should go in a child theme. If either approach is new to you, start with Using Code Snippets to Customize The Events Calendar<\/a> and Customizing The Events Calendar Templates<\/a> for a walkthrough of each.<\/p>\n\n\n\n

Show All Events For a Day in Month View<\/h2>\n\n\n\n

Sometimes you don’t want users to have to click a “View All” link in Month View to see all the events scheduled that day, but would rather have all the events presented outright. This is totally doable and requires a two-pronged approach: first, by adding a snippet to your functions.php file; and second, by eliminating the “View More” link from the calendar itself. <\/p>\n\n\n\n

For the snippet, simply add the code below to your theme’s functions.php file. The snippet sets the pages_per_post<\/code> to -1<\/code>, which WordPress takes as meaning enforce no limit.<\/p>\n\n\n

\nadd_filter( 'tribe_events_month_day_limit', 'tribe_remove_calendar_day_limit' );\n\nfunction tribe_remove_calendar_day_limit() { \n    return -1;\n}\n<\/pre><\/div>\n\n\n
Show Full Day of the Week Name<\/h2>\n\n\n\n
Instead of Mon, Tues, etc., you can have the Month View show the days of the week as the full day names (e.g. Monday, Tuesday, etc.). Here’s an example:<\/p>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
Perform a template override, by making a copy of ‘\/wp-content\/plugins\/the-events-calendar\/src\/views\/v2\/month\/calendar-header.php’ and place in the ‘\/tribe\/events\/v2\/month\/’ folder in your theme.<\/p>\n\n\n\n
Look for the following line:<\/p>\n\n\n
\n<?php echo esc_html( $wp_locale->get_weekday_abbrev( $day ) ); ?>\n<\/pre><\/div>\n\n\n

Then replace that with this new code:<\/p>\n\n\n
\n<?php echo esc_html( $day ); ?>\n<\/pre><\/div>\n\n\n

The template grabs the short form of the weekday via WordPress’s locale helpers, then uses that in the table header. Instead, we use the full day name.<\/p>\n\n\n\n
Change the Date Format<\/h2>\n\n\n\n
To change the date format to the month name, you can simply use the settings included with The Events Calendar<\/a>. To do this, head over to Events > Settings > Display<\/strong> > Date & Time<\/strong> and change the Month and Year format<\/strong> to F (instead of FY).<\/p>\n\n\n\n
If instead, you’d prefer to change the date format with some code, you can add the following snippet to your theme’s functions.php file to achieve the same effect. Note that this snippet is specific to Month View, due to the formatted_grid_date<\/code> section:<\/p>\n\n\n
\nadd_filter(\n    'tribe_events_views_v2_view_template_vars',\n    function( $template_vars, $view ) {\n\t\t\n\t\t\/\/ Month view only\n        if ( isset( $template_vars['formatted_grid_date_mobile'] ) ) {\n            $date = \\Tribe__Date_Utils::build_date_object( $template_vars['the_date'] );\n            $template_vars['formatted_grid_date_mobile'] = $date->format( 'F' );\n        }\n\t\t\n\t\treturn $template_vars;\n    },\n\t10,\n\t2\n);\n<\/pre><\/div>\n\n\n
Step 1: Copy the Template File<\/h4>\n\n\n\n
First, copy the original template from the plugin folder:<\/p>\n\n\n
\nwp-content\/plugins\/the-events-calendar\/src\/views\/v2\/month\/calendar-body\/day\/calendar-events\/calendar-event.php\n\n<\/pre><\/div>\n\n\n
Paste it into your theme (or child theme) at this location:<\/p>\n\n\n
\n[your-theme]\/tribe\/events\/v2\/month\/calendar-body\/day\/calendar-events\/calendar-event.php\n<\/pre><\/div>\n\n\n
Tip: Always use a child theme when making customizations so updates don\u2019t overwrite your changes.<\/p>\n\n\n\n
Step 2: Add the Thumbnail Code<\/h4>\n\n\n\n
Open the file you just copied. Around line 26, add the following snippet where you\u2019d like the thumbnail to appear:<\/p>\n\n\n
\n<?php if( isset ($event->thumbnail )): ?>\n\t<img\n\t\tclass="tribe-events-calendar-list__event-featured-image"\n\t\tsrc="<?php echo esc_url( $event->thumbnail->full->url ); ?>"\n\t\t<?php if ( ! empty( $event->thumbnail->srcset ) ) : ?>\n\t\t\tsrcset="<?php echo esc_attr( $event->thumbnail->srcset ); ?>"\n\t\t<?php endif; ?>\n\t\t<?php if ( ! empty( $event->thumbnail->alt ) ) : ?>\n\t\t\talt="<?php echo esc_attr( $event->thumbnail->alt ); ?>"\n\t\t<?php else : ?>\n\t\t\talt=""\n\t\t<?php endif; ?>\n\t\t<?php if ( ! empty( $event->thumbnail->title ) ) : ?>\n\t\t\ttitle="<?php echo esc_attr( $event->thumbnail->title ); ?>"\n\t\t<?php endif; ?>\n\t\t<?php if ( ! empty( $event->thumbnail->full->width ) && ! empty( $event->thumbnail->full->height ) ) : ?>\n\t\t\twidth="<?php echo esc_attr( $event->thumbnail->full->width ); ?>"\n\t\t\theight="<?php echo esc_attr( $event->thumbnail->full->height ); ?>"\n\t\t<?php endif; ?>\n\t\/>\n<?php endif; ?>\n\n<\/pre><\/div>\n\n\n
\"\"<\/figure>\n\n\n\n
Once added, your month view will display featured images for each event.<\/p>\n\n\n\n
Step 3: Handling Multiple Events in the Same Day<\/h4>\n\n\n\n
When two or more events with photos fall on the same day, the month view expands to show them stacked vertically. If you\u2019d like to keep things neat and prevent clutter, you can resize the images with some custom CSS.<\/p>\n\n\n\n
Add this under Appearance \u2192 Customize \u2192 Additional CSS<\/strong>:<\/p>\n\n\n
\n.tribe-events-calendar-month__events article img {\n  height: 5rem;\n  object-fit: cover;\n  object-position: center;\n}\n\n<\/pre><\/div>\n\n\n
Save, clear your browser cache, and check the calendar again.<\/p>\n\n\n\n
With a quick template override and optional CSS, you can enhance your calendar\u2019s month view by showing event photos. This helps events stand out visually while keeping the layout clean and easy to scan.<\/p>\n\n\n\n