@sdetweil
Thank you again.

Solved with:

• Added 2 rows.
• Increased hw
• Increased region middle.center

Result:

For my Senior calendar I want to extend the Ext3Journal at position “middle_center” to use the full height.

I found a lot of informations about margins and gaps but cannot find the way how to extend this module.

How can this be done?

@sdetweil
Thank you.

Finally I solved it with:

eventTransformer: (ev) => {
							const customEvents = [
								{ keyword: "Mum", symbol: ["fa-solid fa-venus"], color: "yellow" },
								{ keyword: "Dad", symbol: ["fa-regular fa-mars"], color: "green" },
							]
							const found = customEvents.find((condition) => {
							return ev.title.search(condition.keyword) !== -1
						})
						if (found) {
							ev.icon = [ found.symbol ]
							ev.color = found.color
						}
						return ev
						},			
					}

I’m new to MM2 and tried to find a clear answer to my question but was not really able to find it.

The Goal is a Senior-Calender for my very old parents with dementia showing only those informations they need. The calender “Abfall” and “Feiertag” should have a white background, “Mom” should be yellow, dad should be “green”.

I used the standard calender app to define my calenders, set background colors but they don’t appear in Ext3Journal. I also tried to work over the eventTransformer function with symbol but this also didn’t work (maybe my syntax was wrong because everything appeared in the first defined color).

Attached my current config.js:

/* Config Sample
 *
 * For more information on how you can configure this file
 * see https://docs.magicmirror.builders/configuration/introduction.html
 * and https://docs.magicmirror.builders/modules/configuration.html
 *
 * You can use environment variables using a `config.js.template` file instead of `config.js`
 * which will be converted to `config.js` while starting. For more information
 * see https://docs.magicmirror.builders/configuration/introduction.html#enviromnent-variables
 */
let config = {
	address: "localhost",	// Address to listen on, can be:
							// - "localhost", "127.0.0.1", "::1" to listen on loopback interface
							// - another specific IPv4/6 to listen on a specific interface
							// - "0.0.0.0", "::" to listen on any interface
							// Default, when address config is left out or empty, is "localhost"
	port: 8080,
	basePath: "/",	// The URL path where MagicMirror² is hosted. If you are using a Reverse proxy
									// you must set the sub path here. basePath must end with a /
	ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1"],	// Set [] to allow all IP addresses
									// or add a specific IPv4 of 192.168.1.5 :
									// ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.1.5"],
									// or IPv4 range of 192.168.3.0 --> 192.168.3.15 use CIDR format :
									// ["127.0.0.1", "::ffff:127.0.0.1", "::1", "::ffff:192.168.3.0/28"],

	useHttps: false,			// Support HTTPS or not, default "false" will use HTTP
	httpsPrivateKey: "",	// HTTPS private key path, only require when useHttps is true
	httpsCertificate: "",	// HTTPS Certificate path, only require when useHttps is true

	language: "de",
	locale: "de-DE",   // this variable is provided as a consistent location
			   // it is currently only used by 3rd party modules. no MagicMirror code uses this value
			   // as we have no usage, we  have no constraints on what this field holds
			   // see https://en.wikipedia.org/wiki/Locale_(computer_software) for the possibilities

	logLevel: ["INFO", "LOG", "WARN", "ERROR"], // Add "DEBUG" for even more logging
	timeFormat: 24,
	units: "metric",

	modules: [
		{
			module: "alert",
		},
		{
			module: "updatenotification",
			position: "top_bar"
		},
		{
			module: "clock",
			position: "top_left"
		},
		{
			module: "weather",
			// position: "top_center",
			config: {
				weatherProvider: "openmeteo",
				type: "current",
				lat: ?,
				lon: ?
			}
		},
		{
			module: "weather",
			// position: "top_right",
			header: "Wetter Vorhersage",
			config: {
				weatherProvider: "openmeteo",
				type: "forecast",
				lat: ?,
				lon: ?			}
		},
		{
			module: "calendar",
			header: "Kalender",
			// position: "top_left",
			config: {
				coloredBackground: true,
				calendars: [
					{
						fetchInterval: 7 * 24 * 60 * 60 * 1000,
						symbol: "calendar-check",
						url: 'webcal://localhost:8080/modules/ical/Abfall2025.ics',
						name: "Abfall",
						bgColor: '#FFFFFF'
					},
					{
						symbol: "calendar-check",
						url: 'webcal://localhost:8080/modules/ical/feiertag.ics',
						name: "Feiertag",
						bgColor: '#FFFFFF'
					},
				    {
						fetchInterval: 1000 * 60 * 1,
						symbol: "fa-solid fa-venus",
						url: "google cal mom",
						name: "mom",
						bgColor: '#FFFF00'
					},
					{
						fetchInterval: 1000 * 60 * 1,
						symbol: "fa-solid fa-mars",
						url: "google cal dad",
						name: "dad",
						bgColor: '#00FF00'
					},
				]
			}
		},
		{
			module: "MMM-CalendarExt3Journal",
			position: "middle_center",
			config: {
						height: '50vh',
						width: '100%',
						locale: 'de-DE',
						staticWeek: false,
						staticTime: true,
						days: 7,
						hourLength: 12,
						beginHour:  8,
						dateHeaderOptions: {
							day: 'numeric', 
							weekday: 'long'
						},
						calendarSet: ["Abfall", "Feiertag", "mom", "dad"],
					}
		},			
	]
};

/*************** DO NOT EDIT THE LINE BELOW ***************/
if (typeof module !== "undefined") { module.exports = config; }

Perhaps someone can point me in the right direction?