MMM-CalendarExt3Journal - How to set colors for calendars?

nobbistyles · Mar 9, 2025, 1:56 PM

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?

sdetweil · Mar 9, 2025, 2:11 PM

@nobbistyles in MagicMirror calendar its just color, not bgColor. you are changing the color of the text, not the background

then Ext3 will pick that up

ext3 eventTransformer is a routine that gets passed every event

eventTransformer:  (evt)=>{
   if(evt.?????){ // check event field for needing to be changed
       //do something to this event
   }
  //return the modified evt
  return evt
}

nobbistyles · Mar 12, 2025, 6:26 PM

@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
						},			
					}

sdetweil · Mar 12, 2025, 6:52 PM

@nobbistyles cool