--- title: Hide resources in the embedded calendar? description: 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… url: "https://staging.churchtools.academy/en/help/churchtools-modules/embedding-calendars/hide-resources-in-the-embedded-calendar/" updated: "2026-05-28" category: Calendar / Embedding Calendars --- # Hide resources in the embedded calendar? 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 should not be visible on the website. In this tutorial, we’ll show you how to use a CSS command to hide event details in the embedded calendar, using resources as an example. ****What is CSS?**** CSS stands for [Cascading Style Sheets](https://de.wikipedia.org/wiki/Cascading_Style_Sheets) 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. ## Open the system settings for the calendar module You can customise your embedded calendar using CSS classes. You need to set these up in advance in your ChurchTools system settings. 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. [![Screenshot System settings Modules Calender Embed Calendar](https://staging.churchtools.academy/wp-content/uploads/2026/03/System-settings_Modules_Calender_Embed-Calendar.png)](https://staging.churchtools.academy/wp-content/uploads/2026/03/System-settings_Modules_Calender_Embed-Calendar.png) > ## Enter CSS command 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). **Tip** You can further customise your embedded calendar using this template. To make things easier for you, we’ve put together an overview of additional [CSS classes](https://staging.churchtools.academy/help/churchtools/kalender-einbetten/17-kalender-einbetten-css-klassen/). [![Screenshot System settings Modules Calender Embed Calendar CSS for embedded calendars](https://staging.churchtools.academy/wp-content/uploads/2026/03/System-settings_Modules_Calender_Embed-Calendar_CSS-for-embedded-calendars.png)](https://staging.churchtools.academy/wp-content/uploads/2026/03/System-settings_Modules_Calender_Embed-Calendar_CSS-for-embedded-calendars.png) ## Check CSS command Now navigate to the Calendar module (8) and select ‘Embed Calendar’ from the module’s context menu (9 and 10). There, you can preview how the CSS command is applied. [![Screenshot Calendar Embed Calendar](https://staging.churchtools.academy/wp-content/uploads/2026/03/Calendar_Embed-Calendar.png)](https://staging.churchtools.academy/wp-content/uploads/2026/03/Calendar_Embed-Calendar.png) ## Customize different calendars differently 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. You can also implement this with ChurchTools Website by assigning your own CSS class. ### Assign your own CSS classes To do this, go back to the system settings for the calendar module, add your own CSS class – for example, .startpage – 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. The CSS command is now only applied if the corresponding CSS class is entered before embedding. [![Screenshot System settings CSS for embedded calendars](https://staging.churchtools.academy/wp-content/uploads/2026/03/System-settings_CSS-for-embedded-calendars.png)](https://staging.churchtools.academy/wp-content/uploads/2026/03/System-settings_CSS-for-embedded-calendars.png) ### Enter CSS class 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 > Advanced Settings > CSS Class. 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. [![Screenshot Calendar Embedded Calendar Advanced settings](https://staging.churchtools.academy/wp-content/uploads/2026/03/Calendar_Embedded-Calendar_Advanced-settings.png)](https://staging.churchtools.academy/wp-content/uploads/2026/03/Calendar_Embedded-Calendar_Advanced-settings.png) ## Read more - [How to embed a calendar in a website?](https://staging.churchtools.academy/en/help/churchtools-modules/embedding-calendars/how-to-embed-a-calendar-on-your-website/) - [How can embedded calendars be customised using CSS?](https://staging.churchtools.academy/en/help/churchtools-modules/embedding-calendars/how-to-embedded-calendars-be-customized-with-css/) - [Embedding a calendar: CSS classes](https://staging.churchtools.academy/en/help/churchtools-modules/embedding-calendars/13-embed-calendar-css-classes/)