{"id":1945851,"date":"2020-02-13T12:05:23","date_gmt":"2020-02-13T17:05:23","guid":{"rendered":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/?post_type=tribe-knowledgebase&p=1945851"},"modified":"2022-06-21T08:46:31","modified_gmt":"2022-06-21T12:46:31","slug":"working-with-view-classes","status":"publish","type":"post","link":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/working-with-view-classes\/","title":{"rendered":"Calendar View CSS Classes"},"content":{"rendered":"\n

The calendar views in The Events Calendar allow your themes to handle everything outside of the calendar views, and no body classes are added to the page. <\/p>\n\n\n\n

We’ll show you how to add some styling based on which view you are on below.<\/p>\n\n\n\n

If you really need to style a page outside of the calendar view, all of the views below add the same class to the body: .post-type-archive-tribe_events<\/code>. You can use this to target any of these views, along with .single-tribe_events<\/code> for single event pages.<\/p>\n\n\n\n

The calendar container classes<\/h2>\n\n\n\n

Each calendar view is wrapped in a div (<div><\/code>) that separates calendar content from other content on the page. This div shares many classes between the views, but each has one is specific to the current view as well.<\/p>\n\n\n\n

\"\"
The div around the calendar acts as a container that holds the calendar and all of the content inside of it.<\/figcaption><\/figure>\n\n\n\n
View<\/th>CSS Class<\/th><\/tr><\/thead>
Month View<\/td>.tribe-events-view--month { }<\/code><\/td><\/tr>
List View<\/td>.tribe-events-view--list { }<\/code><\/td><\/tr>
Day View<\/td>.tribe-events-view--day {}<\/code><\/td><\/tr>
Week View Pro<\/sup><\/td>.tribe-events-view--week { }<\/code><\/td><\/tr>
Map View Pro<\/sup><\/td>.tribe-events-view--map { }<\/code><\/td><\/tr>
Photo View Pro<\/sup><\/td>.tribe-events-view--photo { }<\/code><\/td><\/tr>
Summary View Pro<\/sup><\/td>.tribe-events-view--summary { }<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

These can then be combined with other classes to target specific elements in the view. For example, all of the views render events as <article><\/code> elements, with a class of .type-tribe_events<\/code>. So if you wanted to, say, change the background color of the individual events on the map view, you could use this:<\/p>\n\n\n

\n.tribe-events-view--map .type-tribe_events {\n  background-color: #ff2052;\n}\n<\/pre><\/div>","protected":false},"excerpt":{"rendered":"
The calendar views in The Events Calendar allow your themes to handle everything outside of the calendar views, and no body classes are added to the page. We’ll show you how to add some styling based on which view you are on below. If you really need to style a page outside of the calendar…<\/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],"stellar-product-taxonomy":[161],"class_list":["post-1945851","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-styling","tag-css","stellar-product-taxonomy-the-events-calendar"],"acf":[],"taxonomy_info":{"category":[{"value":116,"label":"CSS & Styling"}],"post_tag":[{"value":23,"label":"CSS"}],"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:\/\/staging.theeventscalendar.com\/knowledgebase\/author\/jaimetri-be\/"},"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":33,"filter":"raw","term_order":"0","cat_ID":116,"category_count":33,"category_description":"","cat_name":"CSS & 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":48,"filter":"raw","term_order":"0"}],"_links":{"self":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1945851","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/comments?post=1945851"}],"version-history":[{"count":1,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1945851\/revisions"}],"predecessor-version":[{"id":1956042,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1945851\/revisions\/1956042"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/media\/1955565"}],"wp:attachment":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/media?parent=1945851"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/categories?post=1945851"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/tags?post=1945851"},{"taxonomy":"stellar-product-taxonomy","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/stellar-product-taxonomy?post=1945851"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}