{"id":1944967,"date":"2020-01-27T08:12:05","date_gmt":"2020-01-27T13:12:05","guid":{"rendered":"https:\/\/theeventscalendar.com\/knowledgebase\/?post_type=tribe-knowledgebase&p=1944967"},"modified":"2026-04-02T17:31:54","modified_gmt":"2026-04-02T21:31:54","slug":"display-custom-fields-in-the-month-view-tooltip","status":"publish","type":"post","link":"https:\/\/theeventscalendar.com\/knowledgebase\/display-custom-fields-in-the-month-view-tooltip\/","title":{"rendered":"Display Event Additional Fields in the Month View Tooltip"},"content":{"rendered":"\n

We have a feature in Events Calendar Pro called additional fields<\/a>, which allows customers to include fields into their Events to allow more information to be added to the Events.<\/p>\n\n\n\n

Our goal here is to create three custom fields using Events Calendar Pro, and make extra templates that display those fields after the event description in the tooltip for month view.<\/p>\n\n\n\n

\"Month
Month view tooltip<\/figcaption><\/figure>\n\n\n\n

Following the same pattern we used in “How to Include a New Template in a View”<\/a> you will create a new file in your child theme at this location:[your-theme]\/tribe\/events\/v2\/month\/tooltip-extra-fields.php:<\/code>\u00a0
<\/p>\n\n\n

\n<?php\n\/\/ Get the event ID.\n$event_id = get_the_ID();\n\n\/\/ Fetch from this Event all custom fields and their values.\n$fields = tribe_get_custom_fields( $event_id );\n?>\n\n<div class="theme-extra-event-fields">\n<?php if ( ! empty( $fields['Artist'] ) ) : ?>\n  <h4>Artist<\/h4>\n  <p>\n    <?php if ( ! empty( $fields['Artist Instagram'] ) ) : ?>\n    <a href="<?php echo esc_url( $fields['Artist Instagram'] ); ?>" target="_blank">\n      <?php endif; ?>\n      <?php echo esc_html( $fields['Artist'] ); ?>\n      <?php if ( ! empty( $fields['Artist Instagram'] ) ) : ?>\n    <\/a>\n    <?php endif; ?>\n  <\/p>\n<?php endif; ?>\n<?php if ( ! empty( $fields['VIP Confirmed'] ) ) : ?>\n  <?php $vips = explode( ',', $fields['VIP Confirmed'] ); ?>\n  <h4>VIPs confirmed<\/h4>\n  <ul>\n  <?php foreach ( $vips as $vip ) : ?>\n    <li><?php echo esc_html( $vip ); ?><\/li>\n  <?php endforeach; ?>\n  <\/ul>\n<?php endif; ?>\n<\/div>\n<\/pre><\/div>\n\n\n
The template above will make the appropriate checks to display the Artist Name and, if an Instagram URL was included, make that into a link, as well as creating a list of the VIPs confirmed for the event.<\/p>\n\n\n\n
Now you will need to include this new template to show after the tooltip for the month view, using the following code in your functions.php file:<\/p>\n\n\n
\n<?php \nadd_action( 'tribe_template_after_include:events\/v2\/month\/calendar-body\/day\/calendar-events\/calendar-event\/tooltip\/description',\n  function ( $file, $name, $template ) {\n    $template->template( 'month\/tooltip-extra-fields' );\n  }, \n10, \n3 \n);\n<\/pre><\/div>\n\n\n
Starting with version 5.0 of The Events Calendar\u2019s views, any non-default elements that you add will be unstyled, allowing you full freedom to customize their display without worrying about style conflicts.<\/p>\n\n\n\n
To style these newly added elements, we will need to include a couple of CSS rules into the styles.css<\/code> file\u2013or any CSS file that will be included on an Events page\u2013in our theme.<\/p>\n\n\n
\n.tooltipster-base.tribe-events-tooltip-theme .theme-extra-event-fields {\n  font-size: 13px;\n}\n\n.tooltipster-base.tribe-events-tooltip-theme .theme-extra-event-fields h4 {\n  font-size: 15px;\n  margin-bottom: 10px;\n  margin-top: 10px;\n  font-weight: bold;\n}\n\n.tooltipster-base.tribe-events-tooltip-theme .theme-extra-event-fields a {\n  color: rgb(17, 85, 204);\n  font-weight: bold;\n}\n\n.tooltipster-base.tribe-events-tooltip-theme .theme-extra-event-fields ul {\n  list-style: disc;\n}\n\n.tooltipster-base.tribe-events-tooltip-theme .theme-extra-event-fields ul li {\n  margin-left: 16px;\n}\n<\/pre><\/div>\n\n\n
When the steps above are complete, and you have an event with the correct fields you should be able to see the information on the tooltip.<\/p>\n\n\n\n
For this example, we made use of the additional fields from Events Calendar Pro, but you can modify the [your-theme]\/tribe\/events\/v2\/month\/tooltip-extra-fields.php<\/code> template to include any kind of customization that you wish.<\/p>\n\n\n\n