In this tutorial we will walk through the steps you need to take if you want to include the venue data in the Month view tooltip. The foundation for this can be found in the “Using Template Filters and Actions” article.
First, we will need to create a file that holds the venue data we want to display. Then we will need to use a template filter to include that file in the tooltip.
The File
Let’s create a new file in your child theme at this location:[your-theme]/tribe/events/v2/month/tooltip-event-venue.php
:
<?php
/**
* Get the venue ID.
* @var integer $venue_id
*
* @see https://docs.theeventscalendar.com/reference/functions/tribe_get_venue_id/
*/
$venue_id = tribe_get_venue_id();
if ( isset( $venue_id ) && $venue_id != 0 ) {
/**
* Retrieving the venue object.
* @var object $venue
*
* @see https://docs.theeventscalendar.com/reference/functions/tribe_get_venue_object/
*/
$venue = tribe_get_venue_object( $venue_id );
echo '<div class="tribe-events-calendar-month__calendar-event-tooltip-venue tribe-common-b3"><p>';
echo '<strong>Venue:</strong> ';
// Display venue name
echo $venue->post_title;
// Display venue address
if ( ! empty( $venue->address ) ) {
echo ', ' . esc_html( $venue->address );
}
// Display venue city
if ( ! empty( $venue->city ) ) {
echo ', ' . esc_html( $venue->city );
}
echo '</p></div>';
}
The template above checks if a venue for the event exists and if it does, then prints the venue name and the venue city.
It is possible to adjust or expand this information depending on what you would like to display. You can find all the venue-related information and variables in this developer documentation.
The Hook
To make all this information show up you will need to include this new template to show in the tooltip after (for example) the title for the month view. Copy the following code in your functions.php file:
add_action(
'tribe_template_after_include:events/v2/month/calendar-body/day/calendar-events/calendar-event/tooltip/title',
function ( $file, $name, $template ) {
$template->template( 'month/tooltip-event-venue' );
},
10,
3
);
A Detour
Of course, it is possible to put this information in a different place. For that, the appropriate hook needs to be used.
If you look at the hook closely you will discover that it mimics the location of the template files. Let’s dissect that a bit.
We are using this hook:
tribe_template_after_include:events/v2/month/calendar-body/day/calendar-events/calendar-event/tooltip/title
The “after_include” defines that what we are going to insert our new information after the named template. You could also use “before_include” if that’s what you need.
The long string “v2/month/…/title” actually refers to a PHP file in that folder of the plugin, namely:
wp-content/plugins/the-events-calendar/src/views/v2/month/calendar-body/day/calendar-events/calendar-event/tooltip/title.php
Let’s say you wanted to include the venue information after the event description. The description uses this template:
wp-content/plugins/the-events-calendar/src/views/v2/month/calendar-body/day/calendar-events/calendar-event/tooltip/description.php
So the corresponding hook would be:
tribe_template_after_include:events/v2/month/calendar-body/day/calendar-events/calendar-event/tooltip/description
Let’s get back on track now.
Customizing the Appearance
Starting with version 5.0 of The Events Calendar’s views, any non-default elements that you add will be unstyled, allowing you full freedom to customize their display without worrying about style conflicts.
The example above includes some basic classes for formatting. To further style the venue in the month view tooltip, we will need to include a couple of CSS rules into the styles.css
file–or any CSS file that will be included on an Events page–in our theme.
For this newly added venue I would give a bit more space to breathe at the bottom with the following CSS:
.tooltipster-base.tribe-events-tooltip-theme .tribe-events-calendar-month__calendar-event-tooltip-venue {
margin-bottom: var(--tec-spacer-0);
}
The Result
When the steps above are complete and you have an event with the correct fields you should be able to see the venue data in the month view tooltip.