---
title: How to embedded calendars be customized with CSS
description: You can customize the appearance and displayed information of the embedded calendar on your website using CSS. To do this, enter CSS commands in the system settings of your ChurchTools system, which are then automatically taken into account when embedding.…
url: "https://staging.churchtools.academy/en/help/churchtools-modules/embedding-calendars/how-to-embedded-calendars-be-customized-with-css/"
updated: "2025-12-05"
category: Calendar / Embedding Calendars
tags:
  - Screenshot outdated
---

# How to embedded calendars be customized with CSS

You can customize the appearance and displayed information of the embedded calendar on your website using CSS.
To do this, enter CSS commands in the system settings of your ChurchTools system, which are then automatically taken into account when embedding.

## 1. Open system settings

[![open system settings](https://staging.churchtools.academy/wp-content/uploads/2025/10/open_system-settings.png)](https://staging.churchtools.academy/wp-content/uploads/2025/10/open_system-settings.png)

## 2. Select calendar module

[![System settings -> Modules -> Calendar](https://staging.churchtools.academy/wp-content/uploads/2025/10/System-settings_Modules_Calendar-1024x620.png)](https://staging.churchtools.academy/wp-content/uploads/2025/10/System-settings_Modules_Calendar.png)

## 3. Enter CSS commands

Here you can enter the CSS commands you want.
Don't forget to **save** your changes, before you close the system settings again.

[![System settings - calendar - CSS for embedded calendars](https://staging.churchtools.academy/wp-content/uploads/2025/10/System-settings_calendar_CSS-for-embedded-calendars-1024x662.png)](https://staging.churchtools.academy/wp-content/uploads/2025/10/System-settings_calendar_CSS-for-embedded-calendars.png)

**Note**

You can define when the CSS commands should be applied by creating your own ***CSS classes*** (1).
This allows you to set that a CSS command stored in the system settings is only applied if you also add the corresponding CSS class in the embed calendar dialog box (2). This provides the embedded calendar with its own CSS class.
![System settings -> calenar -> CSS for homepage](https://staging.churchtools.academy/wp-content/uploads/2025/10/System-settings_calenar_CSS-for-homepage.png)

![Calendar_Embed Calendar -> Advanced settings -> CSS-class](https://staging.churchtools.academy/wp-content/uploads/2025/10/Calendar_Embed-Calendar_Advanced-settings_CSS-class.png)

## Article to read more

- [Hide resources in the embedded calendar](https://staging.churchtools.academy/en/help/churchtools-modules/embedding-calendars/13-how-to-hide-the-resources-in-an-embedded-calendar/)
- [Embed calendar: CSS classes](https://staging.churchtools.academy/en/help/churchtools-modules/embedding-calendars/13-embed-calendar-css-classes/)
- [Embed calendar: URL parameter](https://staging.churchtools.academy/en/help/churchtools-modules/embedding-calendars/13-embed-calendar-url-parameters/)