How to Improve Calendar Loading Times by Optimizing Tooltip in Month View

When working with The Events Calendar, you might notice that the event tooltips in Month View load full-size featured images. While this ensures maximum quality, it can also add unnecessary weight to your page, slowing down calendar performance.

A simple way to improve load times is to use medium-sized images instead of full-size ones for tooltips. This keeps the images sharp while reducing file sizes significantly.

Locate the Template File

The tooltip’s featured image is controlled by a template inside the plugin. You’ll want to override it in your theme so updates to the plugin don’t overwrite your customization.

The original file is located at:

wp-content/plugins/the-events-calendar/src/views/v2/month/calendar-body/day/calendar-events/calendar-event/tooltip/featured-image.php

Step 2: Copy the File to Your Theme

Copy this file to your theme or child theme so it can safely be customized:

[your-theme]/tribe/events/v2/month/calendar-body/day/calendar-events/calendar-event/tooltip/featured-image.php

Update the Image Size

In your copied file, look for the line (around line 29) that defines the src attribute of the image.
Change it to use the medium thumbnail size:

src="<?php echo esc_url( $event->thumbnail->medium->url ); ?>"

Example Updated HTML

Here’s how your updated code should look:

<div class="tribe-events-calendar-month__calendar-event-tooltip-featured-image-wrapper">
	<img
		class="tribe-events-calendar-month__calendar-event-tooltip-featured-image"
		src="<?php echo esc_url( $event->thumbnail->medium->url ); ?>" 
		<?php if ( ! empty( $event->thumbnail->srcset ) ) : ?>
			srcset="<?php echo esc_attr( $event->thumbnail->srcset ); ?>"
		<?php endif; ?>
		<?php if ( ! empty( $event->thumbnail->alt ) ) : ?>
			alt="<?php echo esc_attr( $event->thumbnail->alt ); ?>"
		<?php else : ?>
			alt=""
		<?php endif; ?>
	/>
</div>

Why This Helps

By switching from full-size to medium thumbnails:

Images load faster, reducing page weight.
Tooltip performance improves, especially on slower connections.
Visitors still see clear, sharp images on the tooltip without the overhead of high-resolution files.

Tip: If you want even smaller images for tooltips, you can change medium to another registered size in WordPress, such as thumbnail or a custom size defined in your theme.

Knowledgebase