{"id":1951561,"date":"2022-01-11T08:16:30","date_gmt":"2022-01-11T13:16:30","guid":{"rendered":"https:\/\/theeventscalendar.com\/knowledgebase\/?post_type=tribe-knowledgebase&#038;p=1951561"},"modified":"2026-04-23T15:10:16","modified_gmt":"2026-04-23T19:10:16","slug":"customize-calendar","status":"publish","type":"post","link":"https:\/\/theeventscalendar.com\/knowledgebase\/customize-calendar\/","title":{"rendered":"Ways to Customize The Events Calendar"},"content":{"rendered":"\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/7ThXc_QwTtQ\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen=\"\"><\/iframe>\n\n\n\n<p>This guide outlines several different methods you can use to customize your Events Calendar pages.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-style-default is-layout-flow wp-block-quote-is-layout-flow\"><p><strong>Note<\/strong>: Some of these methods require coding knowledge.<\/p><\/blockquote>\n\n\n\n<p>Please also note, helping with customizations is beyond the scope of support our team can provide. However, we will do our best to get you pointed in the right direction if you are stuck.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-the-customizer\"><strong>The Customizer<\/strong><\/h4>\n\n\n\n<p>The quickest and easiest way to change the styling of your Events Calendar pages is to use the <a href=\"https:\/\/theeventscalendar.com\/knowledgebase\/k\/wordpress-customizer-2\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress Customizer<\/a>.<\/p>\n\n\n\n<p>In your admin bar click on <strong>Customize, <\/strong>and once the customizer opens scroll down to the <strong>Events Calendar<\/strong> section.<br><br>Here you will find some options for <strong>Global settings<\/strong>, as well as <strong>Events Bar<\/strong>, <strong>Month View <\/strong>and the <strong>Single Event<\/strong> page.<br><br>You can use these settings to modify basic styling settings like font color, size, family, and some other things like background colors.<\/p>\n\n\n\n<p><a href=\"https:\/\/theeventscalendar.com\/knowledgebase\/k\/wordpress-customizer-2\/\" target=\"_blank\" rel=\"noreferrer noopener\">Read more<\/a><\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Display Settings<\/strong><\/h4>\n\n\n\n<p>If you navigate to <strong>Events <\/strong>&gt; <strong>Settings <\/strong>&gt; <strong>Display <\/strong>you will see a few options. If you really like CSS and want to just customize the heck out of our pages, you\u2019ll probably want to choose <strong>Skeleton Styles <\/strong>in the <strong>Default stylesheet used for events templates<\/strong> section. This applies the bare minimum CSS to our pages, and you can go ahead and style them however you like using some custom CSS.<\/p>\n\n\n\n<p>You also have some template options in the <strong>Events Template<\/strong> dropdown.<\/p>\n\n\n\n<p><a href=\"https:\/\/theeventscalendar.com\/knowledgebase\/k\/basic-template-settings\/\" target=\"_blank\" rel=\"noreferrer noopener\">Read more<\/a><\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>CSS<\/strong><\/h4>\n\n\n\n<p>If you\u2019re familiar with how CSS works, modifying the styling of our pages is fairly simple.<\/p>\n\n\n\n<p>If you right-click on an element on the page you want to modify, and click <strong>inspect <\/strong>you will be able to see the code. This will reveal the class or ID you need to target in order to modify that element.<\/p>\n\n\n\n<p>You can add your custom CSS to the WordPress Customizer in the Custom CSS section, or you can use a third party CSS plugin. Some themes even have a custom CSS section for such things.<\/p>\n\n\n\n<p><a href=\"https:\/\/theeventscalendar.com\/knowledgebase\/k\/customizing-css\/\" target=\"_blank\" rel=\"noreferrer noopener\">Read more<\/a> <\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Template Overrides<\/strong><\/h4>\n\n\n\n<p>Our template overriding system allows you to override our core plugin files without losing those changes the next time our plugin updates.<\/p>\n\n\n\n<p>This requires knowledge of HTML and PHP and probably some CSS as well. You\u2019ll also need access to your website\u2019s file system, either via your hosting provider\u2019s UI (like cPanel) or a file app like FileZilla.<\/p>\n\n\n\n<p>The basic idea behind the template override system is that you copy one of our core plugin files, to a specific folder in your theme\u2019s root folder and then modify that copy. That copy is then used instead of the core file.<\/p>\n\n\n\n<p><a href=\"https:\/\/theeventscalendar.com\/knowledgebase\/k\/customizing-template-files-2\/\" target=\"_blank\" rel=\"noreferrer noopener\">Read more<\/a><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p><strong>NOTE<\/strong>: You&#8217;ll want to use a child theme otherwise your template overrides will be lost the next time your theme updates. <\/p><\/blockquote>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Hooks<\/strong><\/h4>\n\n\n\n<p>Action hooks and filter hooks are another way that you can modify all sorts of things on your website. Hooks are a built-in WordPress feature that allows you to basically inject code into your own website. Action hooks let you run functions at certain times, and filter hooks let you modify existing code.<br><br>You can add your custom functions to the functions.php file of your child theme, or (and I personally recommend this) you can use a snippets plugin. Using the plugin means you won\u2019t have to re-do them if you decide to change themes later on, and it helps you organize your snippets and even allows you to turn individual snippets on\/off with the click of a button (this is very helpful when troubleshooting conflicts).<\/p>\n\n\n\n<p>Again, we don\u2019t offer support for these kinds of customizations (as in, we\u2019re likely not going to write hooks for you) and this definitely requires some moderate PHP knowledge to pull off correctly.<\/p>\n\n\n\n<p>That being said, here are a few resources you should find useful when using our hooks:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/docs.theeventscalendar.com\/\">https:\/\/docs.theeventscalendar.com\/<\/a><\/li><li><a href=\"https:\/\/developer.wordpress.org\/plugins\/hooks\/\">https:\/\/developer.wordpress.org\/plugins\/hooks\/<\/a><\/li><li><a href=\"https:\/\/kinsta.com\/blog\/wordpress-hooks\/\">https:\/\/kinsta.com\/blog\/wordpress-hooks\/<\/a><\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Existing customizations<\/strong><\/h4>\n\n\n\n<p>You might not be the first one thinking about a specific customization. We have a nice collection of snippets in our <a href=\"https:\/\/theeventscalendar.com\/knowledgebase\/category\/snippets\/\">knowledgebase<\/a> and I definitely recommend you to take a look at our <a href=\"https:\/\/theeventscalendar.com\/extensions\/\">library of free extensions<\/a>. You just might find the customization you are looking for, or they can inspire you to take it to the next level.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This guide outlines several different methods you can use to customize your Events Calendar pages. Note: Some of these methods require coding knowledge. Please also note, helping with customizations is beyond the scope of support our team can provide. However, we will do our best to get you pointed in the right direction if you&#8230;<\/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":[24,41,347],"tags":[],"stellar-product-taxonomy":[],"class_list":["post-1951561","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-customizing","category-getting-started","category-how-to"],"acf":[],"taxonomy_info":{"category":[{"value":24,"label":"Customizing"},{"value":41,"label":"Getting Started"},{"value":347,"label":"How To"}]},"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":24,"name":"Customizing","slug":"customizing","term_group":0,"term_taxonomy_id":24,"taxonomy":"category","description":"","parent":0,"count":67,"filter":"raw","term_order":"0","cat_ID":24,"category_count":67,"category_description":"","cat_name":"Customizing","category_nicename":"customizing","category_parent":0},{"term_id":41,"name":"Getting Started","slug":"getting-started","term_group":0,"term_taxonomy_id":41,"taxonomy":"category","description":"","parent":0,"count":42,"filter":"raw","term_order":"0","cat_ID":41,"category_count":42,"category_description":"","cat_name":"Getting Started","category_nicename":"getting-started","category_parent":0},{"term_id":347,"name":"How To","slug":"how-to","term_group":0,"term_taxonomy_id":347,"taxonomy":"category","description":"","parent":0,"count":109,"filter":"raw","term_order":"0","cat_ID":347,"category_count":109,"category_description":"","cat_name":"How To","category_nicename":"how-to","category_parent":0}],"tag_info":false,"_links":{"self":[{"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1951561","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=1951561"}],"version-history":[{"count":3,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1951561\/revisions"}],"predecessor-version":[{"id":1969895,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1951561\/revisions\/1969895"}],"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=1951561"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/categories?post=1951561"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/tags?post=1951561"},{"taxonomy":"stellar-product-taxonomy","embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/stellar-product-taxonomy?post=1951561"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}