{"id":9397,"date":"2026-03-19T12:46:14","date_gmt":"2026-03-19T11:46:14","guid":{"rendered":"https:\/\/churchtools.academy\/?post_type=docs&#038;p=9397"},"modified":"2026-03-30T08:30:54","modified_gmt":"2026-03-30T07:30:54","password":"","slug":"how-to-hide-the-resources-in-an-embedded-calendar","status":"publish","type":"docs","link":"https:\/\/churchtools.academy\/en\/help\/churchtools-modules\/embedding-calendars\/how-to-hide-the-resources-in-an-embedded-calendar\/","title":{"rendered":"How to hide the resources in an embedded calendar"},"content":{"rendered":"\n<p>The calendars in ChurchTools are very helpful for organizing different range of tasks within the church and keeping track of appointments. Of course, it is even better if the calendars are also integrated on your own church website and display all relevant information there.<\/p>\n\n\n\n<p>However, there are times when certain appointment information should be displayed in ChurchTools but not be visible on the website. In this tutorial, we will show you how to hide appointment information in the embedded calendar using the example of resources.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Open system settings<\/h2>\n\n\n\n<p>You can customize your embedded calendar with CSS classes. You store these in advance in the system settings of your ChurchTools.<\/p>\n\n\n\n<p>To do this, open the <em>system settings<\/em> (1) and (2) and navigate to <em>Modules<\/em> (3) &gt; <em>Calendar<\/em> (4).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><a href=\"https:\/\/churchtools.academy\/wp-content\/uploads\/2024\/05\/System-settings_Modules_Calendar_2.png\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"507\" src=\"https:\/\/churchtools.academy\/wp-content\/uploads\/2024\/05\/System-settings_Modules_Calendar_2-1024x507.png\" alt=\"System settings -&gt; Modules -&gt; Calendar\" class=\"wp-image-41574\" style=\"width:766px;height:auto\" srcset=\"https:\/\/churchtools.academy\/wp-content\/uploads\/2024\/05\/System-settings_Modules_Calendar_2-1024x507.png 1024w, https:\/\/churchtools.academy\/wp-content\/uploads\/2024\/05\/System-settings_Modules_Calendar_2-300x149.png 300w, https:\/\/churchtools.academy\/wp-content\/uploads\/2024\/05\/System-settings_Modules_Calendar_2-768x381.png 768w, https:\/\/churchtools.academy\/wp-content\/uploads\/2024\/05\/System-settings_Modules_Calendar_2-1536x761.png 1536w, https:\/\/churchtools.academy\/wp-content\/uploads\/2024\/05\/System-settings_Modules_Calendar_2-2048x1015.png 2048w, https:\/\/churchtools.academy\/wp-content\/uploads\/2024\/05\/System-settings_Modules_Calendar_2-360x178.png 360w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p> &nbsp;<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>What is CSS?<\/strong><br>CSS stands for Cascading Style Sheets (https:\/\/de.wikipedia.org\/wiki\/Cascading_Style_Sheets) and is a core language of the internet. This style sheet language for electronic documents is used to customize the appearance of a website using commands.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\">Enter CSS command<\/h2>\n\n\n\n<p>To hide the resources stored in the event, enter the following CSS command in the field provided (1): <code>.event-resources { display:none }<\/code> . Then save your changes (2).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><a href=\"https:\/\/churchtools.academy\/wp-content\/uploads\/2024\/05\/System-settings_Calendar_CSS-for-hide-event-ressources-1.png\"><img decoding=\"async\" width=\"1024\" height=\"649\" src=\"https:\/\/churchtools.academy\/wp-content\/uploads\/2024\/05\/System-settings_Calendar_CSS-for-hide-event-ressources-1-1024x649.png\" alt=\"System settings -&gt; Calendar -&gt; CSS for embedded calendars\" class=\"wp-image-41584\" style=\"width:529px;height:auto\" srcset=\"https:\/\/churchtools.academy\/wp-content\/uploads\/2024\/05\/System-settings_Calendar_CSS-for-hide-event-ressources-1-1024x649.png 1024w, https:\/\/churchtools.academy\/wp-content\/uploads\/2024\/05\/System-settings_Calendar_CSS-for-hide-event-ressources-1-300x190.png 300w, https:\/\/churchtools.academy\/wp-content\/uploads\/2024\/05\/System-settings_Calendar_CSS-for-hide-event-ressources-1-768x487.png 768w, https:\/\/churchtools.academy\/wp-content\/uploads\/2024\/05\/System-settings_Calendar_CSS-for-hide-event-ressources-1-360x228.png 360w, https:\/\/churchtools.academy\/wp-content\/uploads\/2024\/05\/System-settings_Calendar_CSS-for-hide-event-ressources-1.png 1098w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<aside class=\"wp-block-group ct-box ct-box-blue has-background is-vertical is-layout-flex wp-container-core-group-is-layout-002f1c27 wp-block-group-is-layout-flex\" style=\"border-radius:8px;border-left-color:#22c55e;border-left-width:0.5rem;background-color:#dcfce7;margin-top:var(--wp--preset--spacing--60);margin-bottom:var(--wp--preset--spacing--60)\">\n<p style=\"margin-top:0.5rem;margin-right:0.5rem;margin-bottom:0rem;margin-left:0.5rem\"><strong>Tip<\/strong><\/p>\n\n\n\n<p style=\"margin-top:0rem;margin-right:0.5rem;margin-bottom:0.5rem;margin-left:0.5rem\">You can further customize your embedded calendar according to this pattern. We have put together an overview of other <a href=\"https:\/\/churchtools.academy\/en\/help\/churchtools-modules\/embedding-calendars\/13-embed-calendar-css-classes\/\" data-type=\"docs\" data-id=\"9382\">CSS classes<\/a> to make things easier for you.<\/p>\n<\/aside>\n\n\n\n<h2 class=\"wp-block-heading\">Check CSS command<\/h2>\n\n\n\n<p>Now navigate to the calendar module (1) and open the dialog box (2) to embed the calendar.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/churchtools.academy\/wp-content\/uploads\/2024\/05\/Calender_Embded-Calendar.png\"><img decoding=\"async\" width=\"1024\" height=\"502\" src=\"https:\/\/churchtools.academy\/wp-content\/uploads\/2024\/05\/Calender_Embded-Calendar-1024x502.png\" alt=\"Calender -&gt; Embded Calendar\" class=\"wp-image-41581\" srcset=\"https:\/\/churchtools.academy\/wp-content\/uploads\/2024\/05\/Calender_Embded-Calendar-1024x502.png 1024w, https:\/\/churchtools.academy\/wp-content\/uploads\/2024\/05\/Calender_Embded-Calendar-300x147.png 300w, https:\/\/churchtools.academy\/wp-content\/uploads\/2024\/05\/Calender_Embded-Calendar-768x377.png 768w, https:\/\/churchtools.academy\/wp-content\/uploads\/2024\/05\/Calender_Embded-Calendar-1536x753.png 1536w, https:\/\/churchtools.academy\/wp-content\/uploads\/2024\/05\/Calender_Embded-Calendar-2048x1004.png 2048w, https:\/\/churchtools.academy\/wp-content\/uploads\/2024\/05\/Calender_Embded-Calendar-360x176.png 360w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>The CSS command stored in the system settings to hide the resources is automatically applied.<\/p>\n\n\n\n<p>You can already see this in the preview (Display Old list view):<\/p>\n\n\n\n<p><strong>Resources displayed<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/churchtools.academy\/wp-content\/uploads\/2024\/05\/Calendar_Embed-Calendar_show-resources.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"575\" src=\"https:\/\/churchtools.academy\/wp-content\/uploads\/2024\/05\/Calendar_Embed-Calendar_show-resources-1024x575.png\" alt=\"Calendar -&gt; Embed Calendar -&gt; show resources\" class=\"wp-image-41590\" srcset=\"https:\/\/churchtools.academy\/wp-content\/uploads\/2024\/05\/Calendar_Embed-Calendar_show-resources-1024x575.png 1024w, https:\/\/churchtools.academy\/wp-content\/uploads\/2024\/05\/Calendar_Embed-Calendar_show-resources-300x169.png 300w, https:\/\/churchtools.academy\/wp-content\/uploads\/2024\/05\/Calendar_Embed-Calendar_show-resources-768x431.png 768w, https:\/\/churchtools.academy\/wp-content\/uploads\/2024\/05\/Calendar_Embed-Calendar_show-resources-1536x863.png 1536w, https:\/\/churchtools.academy\/wp-content\/uploads\/2024\/05\/Calendar_Embed-Calendar_show-resources-360x202.png 360w, https:\/\/churchtools.academy\/wp-content\/uploads\/2024\/05\/Calendar_Embed-Calendar_show-resources.png 1698w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p><strong>Resources hidden<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><a href=\"https:\/\/churchtools.academy\/wp-content\/uploads\/2024\/05\/Calendar_Embed-Calender_hide-resources.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"502\" src=\"https:\/\/churchtools.academy\/wp-content\/uploads\/2024\/05\/Calendar_Embed-Calender_hide-resources-1024x502.png\" alt=\"Calendar -&gt; Embed Calendar -&gt; hide resources\" class=\"wp-image-41587\" style=\"width:638px;height:auto\" srcset=\"https:\/\/churchtools.academy\/wp-content\/uploads\/2024\/05\/Calendar_Embed-Calender_hide-resources-1024x502.png 1024w, https:\/\/churchtools.academy\/wp-content\/uploads\/2024\/05\/Calendar_Embed-Calender_hide-resources-300x147.png 300w, https:\/\/churchtools.academy\/wp-content\/uploads\/2024\/05\/Calendar_Embed-Calender_hide-resources-768x377.png 768w, https:\/\/churchtools.academy\/wp-content\/uploads\/2024\/05\/Calendar_Embed-Calender_hide-resources-1536x754.png 1536w, https:\/\/churchtools.academy\/wp-content\/uploads\/2024\/05\/Calendar_Embed-Calender_hide-resources-360x177.png 360w, https:\/\/churchtools.academy\/wp-content\/uploads\/2024\/05\/Calendar_Embed-Calender_hide-resources.png 1700w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>You can find our full explanation on the different settings when embedding a calendar in our <a href=\"https:\/\/churchtools.academy\/en\/help\/churchtools-modules\/embedding-calendars\/13-how-to-embed-a-calendar-on-your-website\/\">guide<\/a>. It also explains how to add the calendar to your website.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Customize various calendars differently<\/h2>\n\n\n\n<p>Depending on how your website is structured, you may not want the resources to be hidden for every embedded calendar, but only for the calendar that you display on the homepage of your website, for example.<br>You can also implement this with ChurchTools by assigning your own CSS class.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Assign your own CSS classes<\/h3>\n\n\n\n<p>To do this, go back to the system settings of the calendar module (see above), set your own CSS class before the CSS command that hides the resources, e.g. <code>.mainpage<\/code> (1) and save your change. <strong>There must be a space between your CSS class and the following command!<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><a href=\"https:\/\/churchtools.academy\/wp-content\/uploads\/2024\/05\/System-settings_Calendar_Embed-Calendar_CSS.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"648\" src=\"https:\/\/churchtools.academy\/wp-content\/uploads\/2024\/05\/System-settings_Calendar_Embed-Calendar_CSS-1024x648.png\" alt=\"System settings -&gt; Calendar -&gt; Embed Calendar -&gt; CSS class\" class=\"wp-image-41594\" style=\"width:536px;height:auto\" srcset=\"https:\/\/churchtools.academy\/wp-content\/uploads\/2024\/05\/System-settings_Calendar_Embed-Calendar_CSS-1024x648.png 1024w, https:\/\/churchtools.academy\/wp-content\/uploads\/2024\/05\/System-settings_Calendar_Embed-Calendar_CSS-300x190.png 300w, https:\/\/churchtools.academy\/wp-content\/uploads\/2024\/05\/System-settings_Calendar_Embed-Calendar_CSS-768x486.png 768w, https:\/\/churchtools.academy\/wp-content\/uploads\/2024\/05\/System-settings_Calendar_Embed-Calendar_CSS-360x228.png 360w, https:\/\/churchtools.academy\/wp-content\/uploads\/2024\/05\/System-settings_Calendar_Embed-Calendar_CSS.png 1100w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p>The CSS command is now only applied if the corresponding CSS class is entered before embedding.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Enter CSS class<\/h3>\n\n\n\n<p>Switch back to the calendar module and open up the dialog window to embed the calendar (see above). In order for the CSS command for hiding the resources to be applied, you must enter your previously assigned CSS class here via <em>Display &gt; Advanced settings &gt; CSS class<\/em> (1).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><a href=\"https:\/\/churchtools.academy\/wp-content\/uploads\/2024\/05\/Calendar_Embed-Calendar_CSS-class.png\"><img loading=\"lazy\" decoding=\"async\" width=\"513\" height=\"1024\" src=\"https:\/\/churchtools.academy\/wp-content\/uploads\/2024\/05\/Calendar_Embed-Calendar_CSS-class-513x1024.png\" alt=\"Calendar -&gt; Embed Calendar -&gt; CSS-class\" class=\"wp-image-41598\" style=\"width:312px;height:auto\" srcset=\"https:\/\/churchtools.academy\/wp-content\/uploads\/2024\/05\/Calendar_Embed-Calendar_CSS-class-513x1024.png 513w, https:\/\/churchtools.academy\/wp-content\/uploads\/2024\/05\/Calendar_Embed-Calendar_CSS-class-150x300.png 150w, https:\/\/churchtools.academy\/wp-content\/uploads\/2024\/05\/Calendar_Embed-Calendar_CSS-class-256x512.png 256w, https:\/\/churchtools.academy\/wp-content\/uploads\/2024\/05\/Calendar_Embed-Calendar_CSS-class.png 556w\" sizes=\"(max-width: 513px) 100vw, 513px\" \/><\/a><\/figure>\n\n\n\n<p>You have now assigned your own CSS class for this embedded calendar, which is also visible in the embed link (2).<\/p>\n\n\n\n<p>Use those steps to set individual CSS commands for different calendars to customize the calendars on your website.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The calendars in ChurchTools are very helpful for organizing different range of tasks within the church and keeping track of appointments. Of course, it is even better if the calendars are also integrated on your own church website and display all relevant information there. However, there are times when certain appointment information should be displayed [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"doc_category":[470],"doc_tag":[],"knowledge_base":[224],"class_list":["post-9397","docs","type-docs","status-publish","hentry","doc_category-embedding-calendars","knowledge_base-churchtools-modules"],"pp_statuses_selecting_workflow":false,"pp_workflow_action":"current","pp_status_selection":"publish","acf":[],"year_month":"2026-04","word_count":482,"total_views":"2549","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Jasper Stehmeier","author_nicename":"jstehmeier","author_url":"https:\/\/churchtools.academy\/en\/author\/jstehmeier\/"},"doc_category_info":[{"term_name":"Embedding Calendars","term_url":"https:\/\/churchtools.academy\/en\/help\/churchtools-modules\/embedding-calendars\/"}],"doc_tag_info":[],"knowledge_base_info":[{"term_name":"Modules","term_url":"https:\/\/churchtools.academy\/en\/help\/churchtools-modules\/","term_slug":"churchtools-modules"}],"knowledge_base_slug":["churchtools-modules"],"_links":{"self":[{"href":"https:\/\/churchtools.academy\/en\/wp-json\/wp\/v2\/docs\/9397","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/churchtools.academy\/en\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/churchtools.academy\/en\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/churchtools.academy\/en\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/churchtools.academy\/en\/wp-json\/wp\/v2\/comments?post=9397"}],"version-history":[{"count":13,"href":"https:\/\/churchtools.academy\/en\/wp-json\/wp\/v2\/docs\/9397\/revisions"}],"predecessor-version":[{"id":55212,"href":"https:\/\/churchtools.academy\/en\/wp-json\/wp\/v2\/docs\/9397\/revisions\/55212"}],"wp:attachment":[{"href":"https:\/\/churchtools.academy\/en\/wp-json\/wp\/v2\/media?parent=9397"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/churchtools.academy\/en\/wp-json\/wp\/v2\/doc_category?post=9397"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/churchtools.academy\/en\/wp-json\/wp\/v2\/doc_tag?post=9397"},{"taxonomy":"knowledge_base","embeddable":true,"href":"https:\/\/churchtools.academy\/en\/wp-json\/wp\/v2\/knowledge_base?post=9397"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}