{"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-05-28T07:42:09","modified_gmt":"2026-05-28T06:42:09","password":"","slug":"hide-resources-in-the-embedded-calendar","status":"publish","type":"docs","link":"https:\/\/churchtools.academy\/en\/help\/churchtools-modules\/embedding-calendars\/hide-resources-in-the-embedded-calendar\/","title":{"rendered":"Hide resources in the embedded calendar?"},"content":{"rendered":"\n<p>The calendars in ChurchTools are very helpful for organizing various areas within the congregation 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 event details are displayed in ChurchTools but should not be visible on the website. In this tutorial, we\u2019ll show you how to use a CSS command to hide event details in the embedded calendar, using resources as an example.<\/p>\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><strong>What is CSS?<\/strong><\/strong><\/p>\n\n\n\n<p style=\"margin-top:0rem;margin-right:0.5rem;margin-bottom:0.5rem;margin-left:0.5rem\">CSS stands for <a href=\"https:\/\/de.wikipedia.org\/wiki\/Cascading_Style_Sheets\">Cascading Style Sheets<\/a> and is one of the core languages of the internet. This stylesheet language for electronic documents is used to customise the appearance of a website using commands.<\/p>\n<\/aside>\n\n\n\n<h2 class=\"wp-block-heading\">Open the system settings for the calendar module<\/h2>\n\n\n\n<p>You can customise your embedded calendar using CSS classes. You need to set these up in advance in your ChurchTools system settings.<br>To do this, open the System Settings (1) and (2) and navigate to the Calendar module (3) (4). Under Embed Calendar (5), enter your CSS code.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/churchtools.academy\/wp-content\/uploads\/2026\/03\/System-settings_Modules_Calender_Embed-Calendar.png\"><img fetchpriority=\"high\" decoding=\"async\" width=\"2432\" height=\"1258\" src=\"https:\/\/churchtools.academy\/wp-content\/uploads\/2026\/03\/System-settings_Modules_Calender_Embed-Calendar.png\" alt=\"Screenshot System settings Modules Calender Embed Calendar\" class=\"wp-image-64358\" srcset=\"https:\/\/churchtools.academy\/wp-content\/uploads\/2026\/03\/System-settings_Modules_Calender_Embed-Calendar.png 2432w, https:\/\/churchtools.academy\/wp-content\/uploads\/2026\/03\/System-settings_Modules_Calender_Embed-Calendar-300x155.png 300w, https:\/\/churchtools.academy\/wp-content\/uploads\/2026\/03\/System-settings_Modules_Calender_Embed-Calendar-1024x530.png 1024w, https:\/\/churchtools.academy\/wp-content\/uploads\/2026\/03\/System-settings_Modules_Calender_Embed-Calendar-768x397.png 768w, https:\/\/churchtools.academy\/wp-content\/uploads\/2026\/03\/System-settings_Modules_Calender_Embed-Calendar-1536x795.png 1536w, https:\/\/churchtools.academy\/wp-content\/uploads\/2026\/03\/System-settings_Modules_Calender_Embed-Calendar-2048x1059.png 2048w, https:\/\/churchtools.academy\/wp-content\/uploads\/2026\/03\/System-settings_Modules_Calender_Embed-Calendar-360x186.png 360w\" sizes=\"(max-width: 2432px) 100vw, 2432px\" \/><\/a><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><\/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 associated with the event, enter the following CSS code in the field provided (6): .event-resources { display:none }. Then save your changes (7).<\/p>\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 customise your embedded calendar using this template. To make things easier for you, we\u2019ve put together an overview of additional <a href=\"https:\/\/churchtools.academy\/help\/churchtools\/kalender-einbetten\/17-kalender-einbetten-css-klassen\/\">CSS classes<\/a>.<\/p>\n<\/aside>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><a href=\"https:\/\/churchtools.academy\/wp-content\/uploads\/2026\/03\/System-settings_Modules_Calender_Embed-Calendar_CSS-for-embedded-calendars.png\"><img decoding=\"async\" width=\"928\" height=\"588\" src=\"https:\/\/churchtools.academy\/wp-content\/uploads\/2026\/03\/System-settings_Modules_Calender_Embed-Calendar_CSS-for-embedded-calendars.png\" alt=\"Screenshot System settings Modules Calender Embed Calendar CSS for embedded calendars\" class=\"wp-image-64361\" style=\"aspect-ratio:1.5782205753258907;width:560px;height:auto\" srcset=\"https:\/\/churchtools.academy\/wp-content\/uploads\/2026\/03\/System-settings_Modules_Calender_Embed-Calendar_CSS-for-embedded-calendars.png 928w, https:\/\/churchtools.academy\/wp-content\/uploads\/2026\/03\/System-settings_Modules_Calender_Embed-Calendar_CSS-for-embedded-calendars-300x190.png 300w, https:\/\/churchtools.academy\/wp-content\/uploads\/2026\/03\/System-settings_Modules_Calender_Embed-Calendar_CSS-for-embedded-calendars-768x487.png 768w, https:\/\/churchtools.academy\/wp-content\/uploads\/2026\/03\/System-settings_Modules_Calender_Embed-Calendar_CSS-for-embedded-calendars-360x228.png 360w\" sizes=\"(max-width: 928px) 100vw, 928px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Check CSS command<\/h2>\n\n\n\n<p>Now navigate to the Calendar module (8) and select \u2018Embed Calendar\u2019 from the module\u2019s context menu (9 and 10). There, you can preview how the CSS command is applied.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/churchtools.academy\/wp-content\/uploads\/2026\/03\/Calendar_Embed-Calendar.png\"><img decoding=\"async\" width=\"2436\" height=\"590\" src=\"https:\/\/churchtools.academy\/wp-content\/uploads\/2026\/03\/Calendar_Embed-Calendar.png\" alt=\"Screenshot Calendar Embed Calendar\" class=\"wp-image-64366\" srcset=\"https:\/\/churchtools.academy\/wp-content\/uploads\/2026\/03\/Calendar_Embed-Calendar.png 2436w, https:\/\/churchtools.academy\/wp-content\/uploads\/2026\/03\/Calendar_Embed-Calendar-300x73.png 300w, https:\/\/churchtools.academy\/wp-content\/uploads\/2026\/03\/Calendar_Embed-Calendar-1024x248.png 1024w, https:\/\/churchtools.academy\/wp-content\/uploads\/2026\/03\/Calendar_Embed-Calendar-768x186.png 768w, https:\/\/churchtools.academy\/wp-content\/uploads\/2026\/03\/Calendar_Embed-Calendar-1536x372.png 1536w, https:\/\/churchtools.academy\/wp-content\/uploads\/2026\/03\/Calendar_Embed-Calendar-2048x496.png 2048w, https:\/\/churchtools.academy\/wp-content\/uploads\/2026\/03\/Calendar_Embed-Calendar-360x87.png 360w\" sizes=\"(max-width: 2436px) 100vw, 2436px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Customize different 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 Home page of your website, for example.<br>You can also implement this with ChurchTools Website 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 for the calendar module, add your own CSS class \u2013 for example, .startpage \u2013 before the CSS command that hides the resources, and save your changes. It is important to ensure there is a space between your CSS class and the command that follows.<\/p>\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<figure class=\"wp-block-image size-full is-resized\"><a href=\"https:\/\/churchtools.academy\/wp-content\/uploads\/2026\/03\/System-settings_CSS-for-embedded-calendars.png\"><img loading=\"lazy\" decoding=\"async\" width=\"932\" height=\"590\" src=\"https:\/\/churchtools.academy\/wp-content\/uploads\/2026\/03\/System-settings_CSS-for-embedded-calendars.png\" alt=\"Screenshot System settings CSS for embedded calendars\" class=\"wp-image-64372\" style=\"aspect-ratio:1.5796748946824148;width:566px;height:auto\" srcset=\"https:\/\/churchtools.academy\/wp-content\/uploads\/2026\/03\/System-settings_CSS-for-embedded-calendars.png 932w, https:\/\/churchtools.academy\/wp-content\/uploads\/2026\/03\/System-settings_CSS-for-embedded-calendars-300x190.png 300w, https:\/\/churchtools.academy\/wp-content\/uploads\/2026\/03\/System-settings_CSS-for-embedded-calendars-768x486.png 768w, https:\/\/churchtools.academy\/wp-content\/uploads\/2026\/03\/System-settings_CSS-for-embedded-calendars-360x228.png 360w\" sizes=\"(max-width: 932px) 100vw, 932px\" \/><\/a><\/figure>\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 the dialogue box to embed the calendar. To ensure that the CSS command for hiding the resources is applied, you must enter the CSS class you assigned earlier under Display &gt; Advanced Settings &gt; CSS Class.<\/p>\n\n\n\n<p>You have now assigned a custom CSS class to this embedded calendar, which is also visible in the embed link. This allows you to customise which CSS styles are applied to which calendars on your website.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><a href=\"https:\/\/churchtools.academy\/wp-content\/uploads\/2026\/03\/Calendar_Embedded-Calendar_Advanced-settings.png\"><img loading=\"lazy\" decoding=\"async\" width=\"504\" height=\"692\" src=\"https:\/\/churchtools.academy\/wp-content\/uploads\/2026\/03\/Calendar_Embedded-Calendar_Advanced-settings.png\" alt=\"Screenshot Calendar Embedded Calendar Advanced settings\" class=\"wp-image-64380\" style=\"width:372px;height:auto\" srcset=\"https:\/\/churchtools.academy\/wp-content\/uploads\/2026\/03\/Calendar_Embedded-Calendar_Advanced-settings.png 504w, https:\/\/churchtools.academy\/wp-content\/uploads\/2026\/03\/Calendar_Embedded-Calendar_Advanced-settings-218x300.png 218w, https:\/\/churchtools.academy\/wp-content\/uploads\/2026\/03\/Calendar_Embedded-Calendar_Advanced-settings-360x494.png 360w\" sizes=\"(max-width: 504px) 100vw, 504px\" \/><\/a><\/figure>\n\n\n\n<aside class=\"wp-block-group ct-artikel-zum-weiterlesen has-background is-layout-constrained wp-container-core-group-is-layout-89fd719a wp-block-group-is-layout-constrained\" style=\"border-radius:8px;background-color:#f9fafb;margin-top:24px;margin-bottom:24px;padding-top:32px;padding-right:24px;padding-bottom:32px;padding-left:24px\">\n<h2 class=\"wp-block-heading has-medium-font-size\">Read more<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/churchtools.academy\/en\/help\/churchtools-modules\/embedding-calendars\/how-to-embed-a-calendar-on-your-website\/\" data-type=\"link\" data-id=\"https:\/\/churchtools.academy\/de\/help\/churchtools-module\/kalender-einbetten\/wie-bette-ich-kalender-in-einer-webseite-ein\/\">How to embed a calendar in a website?<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/churchtools.academy\/en\/help\/churchtools-modules\/embedding-calendars\/how-to-embedded-calendars-be-customized-with-css\/\">How can embedded calendars be customised using CSS?<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/churchtools.academy\/en\/help\/churchtools-modules\/embedding-calendars\/13-embed-calendar-css-classes\/\">Embedding a calendar: CSS classes<\/a><\/li>\n<\/ul>\n<\/aside>\n","protected":false},"excerpt":{"rendered":"<p>The calendars in ChurchTools are very helpful for organizing various areas within the congregation 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 event details are displayed in ChurchTools but [&hellip;]<\/p>\n","protected":false},"author":7,"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","pp_force_visibility":null,"pp_subpost_visibility":null,"pp_inherited_force_visibility":null,"pp_inherited_subpost_visibility":null,"acf":[],"year_month":"2026-06","word_count":429,"total_views":"2757","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Victoria Weidemann","author_nicename":"vweidemann","author_url":"https:\/\/churchtools.academy\/en\/author\/vweidemann\/"},"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\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/churchtools.academy\/en\/wp-json\/wp\/v2\/comments?post=9397"}],"version-history":[{"count":38,"href":"https:\/\/churchtools.academy\/en\/wp-json\/wp\/v2\/docs\/9397\/revisions"}],"predecessor-version":[{"id":64391,"href":"https:\/\/churchtools.academy\/en\/wp-json\/wp\/v2\/docs\/9397\/revisions\/64391"}],"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}]}}