<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[Calendar &#x2F; CalendarExt3 Font-Color and Symbol]]></title><description><![CDATA[<p dir="auto">Hello everyone,</p>
<p dir="auto">and once again a question about what I’m doing wrong… and I’m sure I’ve made a mistake somewhere.</p>
<p dir="auto">I want to change both the symbols and the color of the font for certain events in CalendarExp3. I thought I had found another tutorial that is easy to understand and I have taken over the data according to my ideas to change the symbols and font color in the Calendar module.<br />
But neither the color of the keywords nor the symbols change.</p>
<p dir="auto">Here is an excerpt from my Config.js. Where is the error? Or do I have to make the changes in custom.css? And if so, where and how?</p>
<pre><code>		{
			module: "calendar",
			header: "Kalender",
			//position: "top_left",	
			config: {
				calendars: [
					{
						fetchInterval: 7 * 24 * 60 * 60 * 1000,
						symbol: "arrow-right",
						coloredText: "true",
						maxTitleLength: "10",
						dateFormat: "M MM",
						timeFormat: "absolute",
						maximumEntries: "10",
						fade: "false",
						tableClass: "xsmall",
						customEvents: [{keyword: "Gelber Sack", symbol: "arrow-spin", color: "yellow"},
						{keyword: "Hausmüll", symbol: "trash-can", color: "green"}],
						url: "https://calendar.google.com/calendar/ical/vonhachtschulz%40gmail.com/private-17bde7ed8b91289108xxxxxxxxxxxxx/basic.ics"
					}
				]
			}
		},
</code></pre>
<p dir="auto">Thanks again in advance for your help</p>
]]></description><link>https://forum.magicmirror.builders/topic/18528/calendar-calendarext3-font-color-and-symbol</link><generator>RSS for Node</generator><lastBuildDate>Sat, 16 May 2026 08:46:31 GMT</lastBuildDate><atom:link href="https://forum.magicmirror.builders/topic/18528.rss" rel="self" type="application/rss+xml"/><pubDate>Wed, 21 Feb 2024 15:02:09 GMT</pubDate><ttl>60</ttl><item><title><![CDATA[Reply to Calendar &#x2F; CalendarExt3 Font-Color and Symbol on Sat, 24 Feb 2024 21:27:33 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/mmrize" aria-label="Profile: MMRIZE">@<bdi>MMRIZE</bdi></a> Awesome!!!</p>
<p dir="auto">It’s awesome!!! Thank you very very much. It works perfectly.<br />
Since I use both CalendarExt3 and CalendarExt3 Agenda, I have stored the key lines and if lines in both modules in the config.</p>
<p dir="auto">For all-day events, the symbols are displayed in the calendar, but not in the agenda. And only for all-day events. But I don’t care. I’m happy.<br />
Just in case you want to make an improvement here or I have made a mistake!!!</p>
<p dir="auto">So thank you very much. I will post my project soon in the forum under “Show my Mirror” incl. all information from the config and custom.<br />
Maybe someone will be interested… :-)</p>
]]></description><link>https://forum.magicmirror.builders/post/115869</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/115869</guid><dc:creator><![CDATA[svenpisa]]></dc:creator><pubDate>Sat, 24 Feb 2024 21:27:33 GMT</pubDate></item><item><title><![CDATA[Reply to Calendar &#x2F; CalendarExt3 Font-Color and Symbol on Fri, 23 Feb 2024 14:18:24 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/svenpisa" aria-label="Profile: svenpisa">@<bdi>svenpisa</bdi></a></p>
<p dir="auto">Original. (All these <code>test</code> events are from the same calendar)<br />
<img src="/assets/uploads/files/1708697523958-ffaa57a1-97e3-42b5-97a4-3d8bfffc40e8-image.png" alt="ffaa57a1-97e3-42b5-97a4-3d8bfffc40e8-image.png" class=" img-fluid img-markdown" /></p>
<pre><code class="language-js">eventTransformer: (ev) =&gt; {
	if (ev.title.search('Fitness') !== -1) {
		ev.symbol = [ 'fa-solid fa-dumbbell' ]
		if (!ev.isFullday) ev.title = ev.title.replace('Fitness', '&lt;font color="pink"&gt;Fitness&lt;/font&gt;')
	}
	return ev
}

</code></pre>
<p dir="auto">After.<br />
<img src="/assets/uploads/files/1708697792259-d05f254f-10a4-4774-9665-253af9dd4d3c-image.png" alt="d05f254f-10a4-4774-9665-253af9dd4d3c-image.png" class=" img-fluid img-markdown" /></p>
]]></description><link>https://forum.magicmirror.builders/post/115851</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/115851</guid><dc:creator><![CDATA[MMRIZE]]></dc:creator><pubDate>Fri, 23 Feb 2024 14:18:24 GMT</pubDate></item><item><title><![CDATA[Reply to Calendar &#x2F; CalendarExt3 Font-Color and Symbol on Fri, 23 Feb 2024 13:24:35 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/mmrize" aria-label="Profile: MMRIZE">@<bdi>MMRIZE</bdi></a>  Many thanks for the quick reply, but unfortunately that didn’t work either.</p>
<p dir="auto">This is how I stored it in Config.js</p>
<pre><code>		{
			module: "MMM-CalendarExt3",
			position: "bottom_bar",
			title: "Kalender",
			config: {
				mode: "week",
				useSymbol: true,
				eventTransformer: (ev) =&gt; {
						const customEvents = [
							{ keyword: "Gelber Sack", symbol: ["fa-solid fa-arrows-spin"], color: "yellow" },
							{ keyword: "Hausmüll", symbol: ["fa-regular fa-trash-can"], color: "green" },
							{ keyword: "Fitness", symbol: ["fa-solid fa-dumbbell"], color: "pink" },
						]
						const found = customEvents.find((condition) =&gt; {
							return ev.title.search(condition.keyword) !== -1
						})
						if (found) {
								ev.icon = [ found.symbol ]
								ev.color = found.color
						}
						return ev
				},
			}
		},
</code></pre>
<p dir="auto">result<br />
<img src="/assets/uploads/files/1708693735096-d2d16f9c-4869-49b6-92cd-47cd356ef3af-image.png" alt="d2d16f9c-4869-49b6-92cd-47cd356ef3af-image.png" class=" img-fluid img-markdown" /></p>
<p dir="auto">The all-day events are yellow and green.<br />
I can understand the colorful font, but then I’ll see how I can get it into the .CX3. Can you do it there only for the keywords or only completely? I just want Fitness to be pink but everything else to stay black or white.</p>
<p dir="auto">Unfortunately, the desired symbols are still not displayed.<br />
They still remain at "arrow-right as I set it in the module: “Calendar”.<br />
I have tried it in the config with [] and also without. Both here the same result.</p>
<p dir="auto">I’ll try the “replace” later. Thank you! :-)</p>
]]></description><link>https://forum.magicmirror.builders/post/115849</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/115849</guid><dc:creator><![CDATA[svenpisa]]></dc:creator><pubDate>Fri, 23 Feb 2024 13:24:35 GMT</pubDate></item><item><title><![CDATA[Reply to Calendar &#x2F; CalendarExt3 Font-Color and Symbol on Fri, 23 Feb 2024 13:11:17 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/svenpisa" aria-label="Profile: svenpisa">@<bdi>svenpisa</bdi></a></p>
<blockquote>
<p dir="auto">if I use ev.sybol = ‘trash-can’ my calendar module is no longer displayed, but if I use ev.symbol = [‘trash-can’] the entry is displayed without a symbol.</p>
</blockquote>
<p dir="auto">Broadcasted events information from default calendar module is not so well-formed. You should use like this.</p>
<pre><code>["fa-solid fa-trash-can"]
</code></pre>
<p dir="auto">I’m not sure somebody fix this issue, I reported long days ago. Anyway, until fix, use that way.</p>
<blockquote>
<p dir="auto">for “Fitness” I have selected the color “pink”. However, the “Fitness” entry is not colored pink, only the symbol. How do I make the font pink?</p>
</blockquote>
<p dir="auto">That was my intention. (I hate colored text. :D)</p>
<p dir="auto">If you really want <code>colored text</code>, append belows into your <code>css/custom.css</code></p>
<pre><code class="language-css">/* custom.css */
.CX3 .event.singleday .headline .title {
  color: var(--calendarColor);
}
</code></pre>
<blockquote>
<p dir="auto">If I abbreviate a birthday with “Geb.” and want to see the “birthday-cake” symbol instead of “Geb.”, how would I have to execute the “Replace” entry?</p>
</blockquote>
<p dir="auto">Maybe this… (not tested)</p>
<pre><code class="language-js">...
if (ev.title.search('Geb.') !== -1) {
  ev.title = ev.title.replace('Geb.', '')
  ev.symbol = ["fas fa-birthday-cake"]
}
...
</code></pre>
]]></description><link>https://forum.magicmirror.builders/post/115848</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/115848</guid><dc:creator><![CDATA[MMRIZE]]></dc:creator><pubDate>Fri, 23 Feb 2024 13:11:17 GMT</pubDate></item><item><title><![CDATA[Reply to Calendar &#x2F; CalendarExt3 Font-Color and Symbol on Fri, 23 Feb 2024 13:02:03 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/svenpisa" aria-label="Profile: svenpisa">@<bdi>svenpisa</bdi></a></p>
<pre><code class="language-js">{
	module: "MMM-CalendarExt3",
	position: "bottom_bar",
	config: {
		... // other configs...
		eventTransformer: (ev) =&gt; {
			const customEvents = [
				{ keyword: "Gelber Sack", symbol: "fas fa-arrows-spin", color: "yellow" },
				{ keyword: "Hausmüll", symbol: "fas fa-trash-can", color: "green" },
			]
			const found = customEvents.find((condition) =&gt; {
				return ev.title.search(condition.keyword) !== -1
			})
			if (found) {
				ev.icon = [ found.symbol ]
				ev.color = found.color
			}
			return ev
		},
	}
},
</code></pre>
<p dir="auto">PS. It was a somewhat late answer. For your new questions, I’ll reply again.</p>
]]></description><link>https://forum.magicmirror.builders/post/115844</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/115844</guid><dc:creator><![CDATA[MMRIZE]]></dc:creator><pubDate>Fri, 23 Feb 2024 13:02:03 GMT</pubDate></item><item><title><![CDATA[Reply to Calendar &#x2F; CalendarExt3 Font-Color and Symbol on Fri, 23 Feb 2024 09:16:44 GMT]]></title><description><![CDATA[<p dir="auto">Good morning,<br />
I worked on it again last night and the colors are now partially working… ;-).<br />
But I still can’t see any symbols.</p>
<p dir="auto">My Config.js now looks like this</p>
<pre><code>eventTransformer: (ev) =&gt; {
				if (ev.title.search("Gelber Sack") &gt; -1) ev.color = 'yellow' 
				if (ev.title.search("Gelber Sack") &gt; -1) ev.symbol = ['trash-can']
				if (ev.title.search("Blaue Tonne") &gt; -1) ev.color = 'blue'
				if (ev.title.search("Fitness") &gt; -1) ev.color = 'pink' 
				return ev
				}
</code></pre>
<p dir="auto">But now I get the following result</p>
<p dir="auto"><img src="/assets/uploads/files/1708678246623-f1536d33-a302-4f2c-8906-19754804eb5b-image.png" alt="f1536d33-a302-4f2c-8906-19754804eb5b-image.png" class=" img-fluid img-markdown" /></p>
<p dir="auto">The following problems occur.</p>
<ol>
<li>all-day event such as “Gelber Sack” is well colored yellow. Everything is fine.</li>
<li>if I use ev.sybol = ‘trash-can’ my calendar module is no longer displayed, but if I use ev.symbol = [‘trash-can’] the entry is displayed without a symbol.</li>
<li>for “Fitness” I have selected the color “pink”. However, the “Fitness” entry is not colored pink, only the symbol. How do I make the font pink?</li>
</ol>
<p dir="auto">And finally, one more question:</p>
<p dir="auto">If I abbreviate a birthday with “Geb.” and want to see the “birthday-cake” symbol instead of “Geb.”, how would I have to execute the “Replace” entry?</p>
]]></description><link>https://forum.magicmirror.builders/post/115845</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/115845</guid><dc:creator><![CDATA[svenpisa]]></dc:creator><pubDate>Fri, 23 Feb 2024 09:16:44 GMT</pubDate></item><item><title><![CDATA[Reply to Calendar &#x2F; CalendarExt3 Font-Color and Symbol on Thu, 22 Feb 2024 20:53:41 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/svenpisa" aria-label="Profile: svenpisa">@<bdi>svenpisa</bdi></a> no… similar but different</p>
<p dir="auto">in Ext3 is a function instead of a black of values</p>
<pre><code>eventTransformer: (ev) =&gt; {
  if (ev.title.search("Gelber Sack") &gt; -1) ev.color = 'yellow'  // you would need a line like this for each color thing u want to change
// and symbol
  return ev
}
</code></pre>
]]></description><link>https://forum.magicmirror.builders/post/115833</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/115833</guid><dc:creator><![CDATA[sdetweil]]></dc:creator><pubDate>Thu, 22 Feb 2024 20:53:41 GMT</pubDate></item><item><title><![CDATA[Reply to Calendar &#x2F; CalendarExt3 Font-Color and Symbol on Thu, 22 Feb 2024 20:48:55 GMT]]></title><description><![CDATA[<p dir="auto">Do you mean that what I have entered in the standard calendar module can simply be entered in the Ext3 module in Config.js? That simple?</p>
<pre><code>						customEvents: [{keyword: "Gelber Sack", symbol: "arrow-spin", color: "yellow"},
						{keyword: "Hausmüll", symbol: "trash-can", color: "green"}],
</code></pre>
]]></description><link>https://forum.magicmirror.builders/post/115832</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/115832</guid><dc:creator><![CDATA[svenpisa]]></dc:creator><pubDate>Thu, 22 Feb 2024 20:48:55 GMT</pubDate></item><item><title><![CDATA[Reply to Calendar &#x2F; CalendarExt3 Font-Color and Symbol on Thu, 22 Feb 2024 19:04:53 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/svenpisa" aria-label="Profile: svenpisa">@<bdi>svenpisa</bdi></a> the eventTransformer  goes in the Ext3 config.js, not in css. it is code.</p>
<p dir="auto">effectively the same code as in the default calendar.  check the subject and set the color and symbol if you want different than what calendar sends</p>
<p dir="auto">calendar sends the hard coded values from  config.js.</p>
]]></description><link>https://forum.magicmirror.builders/post/115828</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/115828</guid><dc:creator><![CDATA[sdetweil]]></dc:creator><pubDate>Thu, 22 Feb 2024 19:04:53 GMT</pubDate></item><item><title><![CDATA[Reply to Calendar &#x2F; CalendarExt3 Font-Color and Symbol on Thu, 22 Feb 2024 19:00:47 GMT]]></title><description><![CDATA[<p dir="auto">Hello you two,<br />
I spent at least 4 hours last night reading the readme and searching through other forum entries, but I still don’t really understand it and at some point I got pretty confused.</p>
<p dir="auto">Of course it is a normal standard entry if you are familiar with the language, but I am just trying to learn everything on my own, but I still need a lot of information and occasionally need to be told how the whole thing works</p>
<p dir="auto">Can you perhaps create an example entry for the Custom.css or show me what the entry should look like so that I get the entries in CalendarExt3 and Agenda as shown in the following picture?<br />
So that I can assign a color to a specific keyword and also create a separate symbol for the keyword?</p>
<p dir="auto">And the whole thing for several keywords that you want to color differently and provide with a symbol?</p>
<p dir="auto"><img src="/assets/uploads/files/1708628140017-88c3fe3f-d86d-42d8-80c4-ef45dd418be9-image.png" alt="88c3fe3f-d86d-42d8-80c4-ef45dd418be9-image.png" class=" img-fluid img-markdown" /></p>
<p dir="auto">The screenshot is from the standard calendar, but I would like to be able to enter the entries in your calendar <a class="plugin-mentions-user plugin-mentions-a" href="/user/mmrize" aria-label="Profile: MMRIZE">@<bdi>MMRIZE</bdi></a>  in exactly the same way.</p>
]]></description><link>https://forum.magicmirror.builders/post/115827</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/115827</guid><dc:creator><![CDATA[svenpisa]]></dc:creator><pubDate>Thu, 22 Feb 2024 19:00:47 GMT</pubDate></item><item><title><![CDATA[Reply to Calendar &#x2F; CalendarExt3 Font-Color and Symbol on Wed, 21 Feb 2024 20:52:38 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/svenpisa" aria-label="Profile: svenpisa">@<bdi>svenpisa</bdi></a><br />
The changed attributes by <code>customEvents</code> of default calendar module will not be broadcasted, so those changes will not be delivered to CX3. You may request that feature to volunteers who manage MagicMirror default modules.</p>
<p dir="auto">Or you can use <code>eventTransformer</code> feature of CX3. For that kind of inconvenience, I prepared that feature in CX3. Read the README.</p>
]]></description><link>https://forum.magicmirror.builders/post/115789</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/115789</guid><dc:creator><![CDATA[MMRIZE]]></dc:creator><pubDate>Wed, 21 Feb 2024 20:52:38 GMT</pubDate></item><item><title><![CDATA[Reply to Calendar &#x2F; CalendarExt3 Font-Color and Symbol on Wed, 21 Feb 2024 22:14:27 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/svenpisa" aria-label="Profile: svenpisa">@<bdi>svenpisa</bdi></a> you can’t change them from the default calendar… only ‘color’:xxx is sent in the broadcast message… so all same color to ext3.</p>
<p dir="auto">BUT ext3 has filters too, so you can do it over there…</p>
]]></description><link>https://forum.magicmirror.builders/post/115784</link><guid isPermaLink="true">https://forum.magicmirror.builders/post/115784</guid><dc:creator><![CDATA[sdetweil]]></dc:creator><pubDate>Wed, 21 Feb 2024 22:14:27 GMT</pubDate></item></channel></rss>