Customizing the Calendar Header

The calendar header is shown at the top of all calendar views by default. It consists of two parts:

  1. A top part that includes keyword search and a view switcher
  2. A bottom part that includes pagination and a date picker
The keyword search and view switcher are above the pagination and date picker.

While we think it looks pretty great out of the box, there are certainly situations where you may find yourself wanting to customize the appearance of the calendar header. That’s what we’re going to cover in this article.

Customizing via settings

If you want to hide the search bar entirely, we’ve got a setting for that! You can find it on the Events → Settings → Display screen in the WordPress admin.

Screenshot of the Disable the Event Search Bar checkbox setting.
This is what what you want.

If you are using your own Google Maps API key, the top part of the header will also display an option to search by location.

If you don’t want to include the location search, select the “Hide location search” option on the Events → Settings → Display screen.

Screenshot of the Hide location search checkbox in the calendar settings.

Customizing via templates

There are some cases where customizations are needed beyond what the plugin settings offer. This requires customizing the template for the calendar header itself.

Here’s one example. If all of the calendar views included in The Events Calendar are enabled in the display settings, those views will be listed as options in the header.

But, if you have any of the additional calendar views that are included in Events Calendar Pro, then that horizontal list of views turns into a drop-down.

Let’s say you want that to always display as a drop-down. That’s where modifying the template comes into play.

This is the template we want to grab:

/wp-content/plugins/the-events-calendar/src/views/v2/components/events-bar/views.php

Make a copy of that file and place it in your theme to start customizing it. Please refer to our guide on customizing template files for more information.

This is the line we want to look for in the template file:

$is_tabs_style = empty( $disable_event_search ) && 3 >= count( $public_views );

Change 3 to 1 and the dropdown will always be there. Or, if we never want the dropdown, we could change the line to this:

$is_tabs_style = true;

In this specific case, there’s a little gotcha. If there’s only one active view, say list view, and no others. “List” will show as a button, but will essentially refresh the page when clicked.

We could hide the button with CSS — but that’s not great for accessibility. A better way to go about it is to disable the button, which we can do by customizing this template:

/wp-content/plugins/the-events-calendar/src/views/v2/components/events-bar/views/list.php to [your-theme]/tribe/events/v2/components/events-bar/views/list.php

All we need to do is change one line right, above the closing PHP tag (?>).

return; // hiding this!
?>

Now let’s say we have all calendar views enabled, but only want to show certain ones in the menu. We’ll copy and edit the same file we were just in but, instead, find the foreach in it that loops through the items. Here’s an example where we’re hiding list view from the options:

<?php foreach ( $public_views as $public_view_slug => $public_view_data ) : ?>
  <?php if( 'list' === $public_view_slug ) : ?>
    <?php continue; ?>
  <?php endif; ?>
  <?php $this->template(
    'components/events-bar/views/list/item',
    [ 'public_view_slug' => $public_view_slug, 'public_view_data' => $public_view_data ]
  ); ?>
<?php endforeach; ?>

Customizing with CSS

What if we just want to tweak the styles a bit? Well, we can certainly do that! Note, though, that all of the updated calendar views inherit styles from the WordPress Customizer settings.

That said, using the Customizer might be a little overkill in some cases, like if we’re simply changing the text color in the search bar of the calendar header. We could add something like this to the theme’s CSS file instead to make that happen:

#tribe-events-events-bar-keyword {
  color: blueviolet;
}
Screenshot showing text in the search bar in a violet color.

We can do lots of other things like this with CSS, like change font family to match your theme. Or even adding a border color.

.tribe-events-header__events-bar.tribe-events-c-events-bar.tribe-events-c-events-bar--border {
  border-color: blueviolet;
}
Screenshot showing the search bar with violet text and a violet border.

OK, one more. Let’s tweak that big ol’ button!

When you are using one of the more popular WordPress themes, such as the the default Twenty Twenty theme, it’s possible that the theme’s styles override the plugin’s styles. In this case, let’s say the search button text is black, making it tough to read.

Yuck. 🤢

Let’s make it white and change the background color to violet while we’re at it.

.tribe-common-c-btn.tribe-events-c-search__button {
  background-color: blueviolet;
  color: #fff;
}

Oh hey, that’s better!

In some cases, we’ve included CSS classes for specific themes that can be used to target those sorts of problems on a theme-by-theme basis. For example, here’s how we could have done that last example specifically for Twenty Twenty.

.tribe-theme-twentytwenty .tribe-common .tribe-common-c-btn {
  background-color: blueviolet;
  color: #000;
}

There you have it! Three ways to customize the calendar header.

Table of Contents

Details

Report an issue