{"id":1945649,"date":"2020-02-10T17:32:31","date_gmt":"2020-02-10T22:32:31","guid":{"rendered":"https:\/\/theeventscalendar.com\/knowledgebase\/?post_type=tribe-knowledgebase&#038;p=1945649"},"modified":"2026-04-15T18:11:30","modified_gmt":"2026-04-15T22:11:30","slug":"styling-month-view","status":"publish","type":"post","link":"https:\/\/theeventscalendar.com\/knowledgebase\/styling-month-view\/","title":{"rendered":"Styling the Month View Calendar with CSS"},"content":{"rendered":"\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/GCbnsy1PFlc?si=ppA5MR_-dPmsQgsi\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen><\/iframe>\n\n\n\n<p>The month view is an essential part of The Events Calendar and one of the most commonly used views. Here is a list of CSS class selectors that you can use to format the different days in the grid. We&#8217;ve also included a couple of example attributes for each.<\/p>\n\n\n\n<p>If you haven&#8217;t yet &#8211; please read <a href=\"https:\/\/theeventscalendar.com\/knowledgebase\/k\/customizing-mobile-css\/\" target=\"_blank\" rel=\"noreferrer noopener\">Customizing Mobile Styles<\/a> for clarity on what we mean when we say &#8220;mobile&#8221; or &#8220;desktop&#8221; &#8211; it&#8217;s not the screen size, but the container size that counts!<\/p>\n\n\n\n<p class=\"has-text-color\" style=\"color:#141827\"><strong>Notice a pattern? Our CSS selectors follow a pattern that makes it easier to figure out what they&#8217;re for when you see them in the stylesheet. The pattern we use is a modified version of <a href=\"http:\/\/getbem.com\/\">BEM<\/a>.<\/strong><\/p>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\"><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-styling-cells\">Styling cells<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2022\/05\/Screen-Shot-2022-05-20-at-7.16.57-AM.png\" alt=\"A single date in month view is called a &quot;cell&quot;\" class=\"wp-image-1952932\"\/><figcaption class=\"wp-element-caption\">A single date in month view is called a &#8220;cell&#8221; (highlighted in red).<\/figcaption><\/figure>\n\n\n\n<p class=\"has-dark-gray-color has-text-color has-small-font-size\">A &#8220;cell&#8221; is the square background of a single day on the month view grid where the events for a day are listed. Think of it as a single cell in a large grid of cells.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-general-styling-class\">General styling class<\/h3>\n\n\n\n<p class=\"has-small-font-size\">The following is a general class that can be used to style any date on the month view grid, whether it&#8217;s past, present, or current.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.tribe-events-calendar-month__day-cell { \n    background-color: #fff; \/* to change the background color *\/\n    border-color: #000;\/* To change the border color *\/\n}\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-styling-cells-on-small-screens\">Styling cells on small screens<\/h3>\n\n\n\n<p class=\"has-small-font-size\">The following class can be used to adjust the styling of a month view cell on screens that are 768px and below, like tablets and mobile smaller mobile devices.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.tribe-events-calendar-month__day-cell--mobile {\n  background-color: #fff; \/* Change the background color *\/\n  border-color: #000;\/* Change the border color *\/\n}\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-styling-cells-on-large-screens\">Styling cells on large screens<\/h3>\n\n\n\n<p class=\"has-light-gray-color has-text-color has-small-font-size\">The following class can be used to adjust the styling of a month view cell on screens that are 768px and above, like desktop computer screens.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.tribe-events-calendar-month__day-cell--desktop {\n  background-color: #fff; \/* Changes the background color *\/\n  border-color: #000;\/* Changes the border color *\/\n}\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-styling-days-in-the-past\">Styling days in the past<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2022\/05\/Screen-Shot-2022-05-20-at-7.19.48-AM.png\" alt=\"Styling days in the past in Month View\" class=\"wp-image-1952934\"\/><\/figure>\n\n\n\n<p class=\"has-small-font-size\">This affects both this month&#8217;s past days, including days from the previous month.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.tribe-events-calendar-month__day--past {\n  background-color: #fff; \/* Changes the background color *\/\n  border-color: #000;\/* Changes the border color *\/\n}\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-styling-the-current-date\">Styling the current date<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2022\/05\/Screen-Shot-2022-05-20-at-7.21.13-AM.png\" alt=\"styling the current date\" class=\"wp-image-1952935\"\/><\/figure>\n\n\n\n<p class=\"has-small-font-size\">The following class can be used to style the month view cell that contains the current date.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.tribe-events-calendar-month__day--current {\n  background-color: #fff; \/* Changes the background color *\/\n  border-color: #000;\/* Changes the border color *\/\n}\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-combining-style-classes\">Combining style classes<\/h3>\n\n\n\n<p>You can combine these. Be sure to always call the time first, then screen size (and don&#8217;t forget the space between classes).<\/p>\n\n\n\n<p>For example, this is styling cells that are in the past on desktop screens:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.tribe-events-calendar-month__day--past .tribe-events-calendar-month__day-cell--desktop {\n  background-color: #fff; \/* to change the background color *\/\n  border-color: #000;\/* To change the border color *\/\n}\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"h-styling-cell-sections\">Styling cell sections<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2022\/05\/Screen-Shot-2022-05-20-at-7.24.03-AM.png\" alt=\"The day number (h3) cell section\" class=\"wp-image-1952936\"\/><figcaption class=\"wp-element-caption\">A section includes the day number (<code>&lt;h3&gt;<\/code>) and a list of events taking place that day (<code>&lt;div&gt;<\/code>).<\/figcaption><\/figure>\n\n\n\n<p>A day cell is divided into two sections: a Heading 3 (<code>&lt;h3&gt;<\/code>) element that contains the day number, and a container (<code>&lt;div&gt;<\/code>) element that contains the events taking place on that date. These can also be targeted via CSS. However, both are modified by the cell classes (as are their contents), so they&#8217;ll need to be combined with the above to be really effective!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-styling-the-date-heading\">Styling the date heading<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2022\/05\/Screen-Shot-2022-05-20-at-7.26.48-AM.png\" alt=\"Styling the date heading\" class=\"wp-image-1952937\"\/><\/figure>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.tribe-events-calendar-month__day-date {}\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-styling-the-events-container\">Styling the events container<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2022\/05\/Screen-Shot-2022-05-20-at-7.30.41-AM.png\" alt=\"styling the events container\" class=\"wp-image-1952938\"\/><\/figure>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.tribe-events-calendar-month__events {}\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"h-styling-events-in-a-date-cell\">Styling events in a date cell<\/h2>\n\n\n\n<p>Inside the events section are the events themselves. Each event on the calendar is an article (<code>&lt;article&gt;<\/code>) element. Inside that element, you&#8217;ll find the date and time of the event, the event title, and a tooltip that displays when the event is hovered.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-the-single-event-container\">The single event container<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.tribe-events-calendar-month__calendar-event { }\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-styling-the-event-date-and-time\">Styling the event date and time<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.tribe-events-calendar-month__calendar-event-datetime { }\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-styling-the-event-title\">Styling the event title<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.tribe-events-calendar-month__calendar-event-title a { }\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"h-styling-recurring-events\">Styling recurring events<\/h2>\n\n\n\n<p>Of course, recurring events be styled on their own!<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-styling-recurring-event-instances\">Styling recurring event instances<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.tribe-recurring-event { }\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-styling-multi-day-events\">Styling multi-day events<\/h3>\n\n\n\n<p>Events that span multiple days? Yep, they can be styled, too! Note that you&#8217;ll need to use the <code>tribe-events-calendar-month__multiday-event-bar-inner<\/code> class to style the background color of the event.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n\/* We can add a border around the entire event. *\/\n.tribe-events-calendar-month__multiday-event-bar {\n  border: 1px solid #20c2ff;\n}\n\n\/* We can change the background color of the event. *\/\n.tribe-events-calendar-month__multiday-event-bar-inner {\n  background-color: #20ff5e;\n}\n\n\/* We can change the color of the event title. *\/\n.tribe-events-calendar-month__multiday-event-bar-title {\n  color: #20ff5e;\n}\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"h-style-combinations\">Style combinations<\/h2>\n\n\n\n<p>You can combine any of these to achieve some pretty sweet styles.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-past-event-and-event-section\">Past event and event section<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.tribe-events-calendar-month__day--past .tribe-events-calendar-month__calendar-event{ }\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-current-event-and-recurring-event\">Current event and recurring event<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.tribe-events-calendar-month__day--current .tribe-events-calendar-month__multiday-event-bar-inner{ }\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-current-event-and-recurring-event-in-mobile-views\">Current event and recurring event in mobile views<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-cell--mobile .tribe-events-calendar-month__multiday-event-bar-inner { }\n<\/pre><\/div>\n\n\n<p class=\"has-small-font-size\">If you are trying to customize month view in The Events Calendar 4 and earlier, here is a <a href=\"https:\/\/theeventscalendar.com\/knowledgebase\/k\/css-classes-for-the-month-view-grid\/\">set of separate instructions<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-disclaimer\">Disclaimer<\/h3>\n\n\n\n<p>As with all of our recipes, please note that we share this in the hope it will be useful <strong>but without any guarantees or commitments<\/strong>. If you wish to use it, it is <em>your <\/em>responsibility to test it first of all and adapt it to your needs (or find someone who can do so on your behalf). We are unable to provide further support in relation to this recipe.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The month view is an essential part of The Events Calendar and one of the most commonly used views. Here is a list of CSS class selectors that you can use to format the different days in the grid. We&#8217;ve also included a couple of example attributes for each. If you haven&#8217;t yet &#8211; please&#8230;<\/p>\n","protected":false},"author":3,"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],"tags":[23,25],"stellar-product-taxonomy":[161],"class_list":["post-1945649","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-styling","tag-css","tag-customizations","stellar-product-taxonomy-the-events-calendar"],"acf":[],"taxonomy_info":{"category":[{"value":116,"label":"CSS &amp; Styling"}],"post_tag":[{"value":23,"label":"CSS"},{"value":25,"label":"Customizations"}],"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":"Jaime Marchwinski","author_link":"https:\/\/theeventscalendar.com\/knowledgebase\/author\/jaimetri-be\/"},"comment_info":0,"category_info":[{"term_id":116,"name":"CSS &amp; Styling","slug":"css-styling","term_group":0,"term_taxonomy_id":116,"taxonomy":"category","description":"","parent":24,"count":19,"filter":"raw","term_order":"0","cat_ID":116,"category_count":19,"category_description":"","cat_name":"CSS &amp; Styling","category_nicename":"css-styling","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":13,"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":55,"filter":"raw","term_order":"0"}],"_links":{"self":[{"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1945649","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\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/comments?post=1945649"}],"version-history":[{"count":7,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1945649\/revisions"}],"predecessor-version":[{"id":1969133,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1945649\/revisions\/1969133"}],"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=1945649"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/categories?post=1945649"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/tags?post=1945649"},{"taxonomy":"stellar-product-taxonomy","embeddable":true,"href":"https:\/\/theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/stellar-product-taxonomy?post=1945649"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}