{"id":1946043,"date":"2020-02-21T11:17:07","date_gmt":"2020-02-21T16:17:07","guid":{"rendered":"https:\/\/theeventscalendar.com\/knowledgebase\/?post_type=tribe-knowledgebase&p=1946043"},"modified":"2022-11-29T10:55:16","modified_gmt":"2022-11-29T15:55:16","slug":"customizing-the-calendar-header","status":"publish","type":"post","link":"https:\/\/theeventscalendar.com\/knowledgebase\/customizing-the-calendar-header\/","title":{"rendered":"Customizing the Calendar Header and Events Bar"},"content":{"rendered":"\n

The calendar header is shown at the top of all calendar views by default. It consists of two parts: <\/p>\n\n\n\n

    \n
  1. A top part that includes keyword search and a view switcher (we call this the “Events Bar”)<\/li>\n\n\n\n
  2. A bottom part that includes pagination and a date picker<\/li>\n<\/ol>\n\n\n\n
    \"customizing
    The keyword search and view switcher are above the pagination and date picker.<\/figcaption><\/figure>\n\n\n\n

    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.<\/p>\n\n\n\n

    Customizing via settings<\/h2>\n\n\n\n

    If you want to hide the search bar entirely, we’ve got a setting for that! You can find it on the Events \u2192 Settings \u2192 Display<\/strong> \u2192<\/strong> Calendar Display<\/strong> screen in the WordPress admin.<\/p>\n\n\n\n

    \"Screenshot
    This is what you want.<\/figcaption><\/figure>\n\n\n\n

    If you are using your own Google Maps API key,<\/a> the top part of the header will also display an option to search by location.<\/p>\n\n\n\n

    \"customizing<\/figure>\n\n\n\n

    If you don’t want to include the location search, select the “Hide location search” option on the Events \u2192 Settings \u2192 Display \u2192<\/strong> Calendar Display<\/strong> screen.<\/p>\n\n\n\n

    \"Screenshot<\/figure>\n\n\n\n

    Customizing via templates<\/h2>\n\n\n\n

    There are some cases where customizations are needed beyond what the plugin settings offer. This requires customizing the template<\/a> for the calendar header itself.<\/p>\n\n\n\n

    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.<\/p>\n\n\n\n

    \"showing<\/figure>\n\n\n\n

    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.<\/p>\n\n\n\n

    \"using<\/figure>\n\n\n\n

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

    This is the template we want to grab:<\/p>\n\n\n

    \n\/wp-content\/plugins\/the-events-calendar\/src\/views\/v2\/components\/events-bar\/views.php\n<\/pre><\/div>\n\n\n
    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<\/a> for more information.<\/p>\n\n\n\n
    This is the line we want to look for in the template file:<\/p>\n\n\n
    \n$is_tabs_style = empty( $disable_event_search ) && 3 >= count( $public_views );\n<\/pre><\/div>\n\n\n
    Change 3<\/code> to 1<\/code> and the dropdown will always be there. Or, if we never want the dropdown, we could change the line to this:<\/p>\n\n\n
    \n$is_tabs_style = true;\n<\/pre><\/div>\n\n\n
    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. <\/p>\n\n\n\n
    We could hide the button with CSS \u2014 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:<\/p>\n\n\n
    \n\/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\n<\/pre><\/div>\n\n\n
    All we need to do is change one line right, above the closing PHP tag (?><\/code>).<\/p>\n\n\n
    \nreturn; \/\/ hiding this!\n?>\n<\/pre><\/div>\n\n\n
    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<\/code> in it that loops through the items. Here’s an example where we’re hiding List View from the options:<\/p>\n\n\n
    \n<?php foreach ( $public_views as $public_view_slug => $public_view_data ) : ?>\n  <?php if( 'list' === $public_view_slug ) : ?>\n    <?php continue; ?>\n  <?php endif; ?>\n  <?php $this->template(\n    'components\/events-bar\/views\/list\/item',\n    [ 'public_view_slug' => $public_view_slug, 'public_view_data' => $public_view_data ]\n  ); ?>\n<?php endforeach; ?>\n<\/pre><\/div>\n\n\n
    Customizing with CSS<\/h2>\n\n\n\n
    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<\/a>. <\/p>\n\n\n\n
    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:<\/p>\n\n\n
    \n#tribe-events-events-bar-keyword {\n  color: blueviolet;\n}\n<\/pre><\/div>\n\n\n
    \"Screenshot<\/figure>\n\n\n\n
    We can do lots of other things like this with CSS, like changing the font family to match your theme. Or even adding a border color.<\/p>\n\n\n
    \n.tribe-events-header__events-bar.tribe-events-c-events-bar.tribe-events-c-events-bar--border {\n  border-color: blueviolet;\n}\n<\/pre><\/div>\n\n\n
    \"Screenshot<\/figure>\n\n\n\n
    OK, one more. Let’s tweak that big ol’ button!<\/p>\n\n\n\n
    When you are using one of the more popular WordPress themes, such as 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.<\/p>\n\n\n\n
    \"Change
    Yuck. ?<\/figcaption><\/figure>\n\n\n\n
    Let’s make it white and change the background color to violet while we’re at it.<\/p>\n\n\n
    \n.tribe-common-c-btn.tribe-events-c-search__button {\n  background-color: blueviolet;\n  color: #fff;\n}\n<\/pre><\/div>\n\n\n
    Oh hey, that’s better!<\/p>\n\n\n\n
    \"Changing<\/figure>\n\n\n\n
    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.<\/p>\n\n\n
    \n.tribe-theme-twentytwenty .tribe-common .tribe-common-c-btn {\n  background-color: blueviolet;\n  color: #000;\n}\n<\/pre><\/div>\n\n\n
    \n\n\n\n
    There you have it! Three ways to customize the calendar header.<\/p>\n","protected":false},"excerpt":{"rendered":"
    The calendar header is shown at the top of all calendar views by default. It consists of two parts: 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…<\/p>\n","protected":false},"author":5,"featured_media":1955565,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_swpsp_post_exclude":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"ep_exclude_from_search":false,"footnotes":""},"categories":[116,84],"tags":[23,25,58],"stellar-product-taxonomy":[161],"class_list":["post-1946043","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-styling","category-theming-overview","tag-css","tag-customizations","tag-php","stellar-product-taxonomy-the-events-calendar"],"acf":[],"taxonomy_info":{"category":[{"value":116,"label":"CSS & Styling"},{"value":84,"label":"Templating & Layout"}],"post_tag":[{"value":23,"label":"CSS"},{"value":25,"label":"Customizations"},{"value":58,"label":"PHP"}],"stellar-product-taxonomy":[{"value":161,"label":"The Events Calendar"}]},"featured_image_src_large":["https:\/\/images.theeventscalendar.com\/kb\/uploads\/2023\/02\/social-share-1024x538.png",1024,538,true],"author_info":{"display_name":"Leah","author_link":"https:\/\/theeventscalendar.com\/knowledgebase\/author\/leahk\/"},"comment_info":0,"category_info":[{"term_id":116,"name":"CSS & Styling","slug":"css-styling","term_group":0,"term_taxonomy_id":116,"taxonomy":"category","description":"","parent":24,"count":40,"filter":"raw","term_order":"0","cat_ID":116,"category_count":40,"category_description":"","cat_name":"CSS & Styling","category_nicename":"css-styling","category_parent":24},{"term_id":84,"name":"Templating & Layout","slug":"theming-overview","term_group":0,"term_taxonomy_id":84,"taxonomy":"category","description":"","parent":24,"count":59,"filter":"raw","term_order":"0","cat_ID":84,"category_count":59,"category_description":"","cat_name":"Templating & Layout","category_nicename":"theming-overview","category_parent":24}],"tag_info":[{"term_id":23,"name":"CSS","slug":"css","term_group":0,"term_taxonomy_id":23,"taxonomy":"post_tag","description":"","parent":20,"count":33,"filter":"raw","term_order":"0"},{"term_id":25,"name":"Customizations","slug":"customizations","term_group":0,"term_taxonomy_id":25,"taxonomy":"post_tag","description":"","parent":0,"count":102,"filter":"raw","term_order":"0"},{"term_id":58,"name":"PHP","slug":"php","term_group":0,"term_taxonomy_id":58,"taxonomy":"post_tag","description":"","parent":20,"count":78,"filter":"raw","term_order":"0"}],"_links":{"self":[{"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1946043","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/comments?post=1946043"}],"version-history":[{"count":1,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1946043\/revisions"}],"predecessor-version":[{"id":1956032,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1946043\/revisions\/1956032"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/media\/1955565"}],"wp:attachment":[{"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/media?parent=1946043"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/categories?post=1946043"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/tags?post=1946043"},{"taxonomy":"stellar-product-taxonomy","embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/stellar-product-taxonomy?post=1946043"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}