Display waste bins in color

[kusselin]

Hi very thanks to you for the css… but i will only that the text an the standard icon for calender like in my photo is in the color…you know what i mean? No fa-icon in the christmas look …

best regards

[ashishtank]

@kusselin Sorry I did not understand. do you want to have standard icons but with different color for icon and text ?

[kusselin]

@ashishtank said in Display waste bins in color:

Sorry I did not understand. do you want to have standard icons but with different color for icon and text ?

yes so is it!

[ashishtank]

@kusselin Sorry was occupied with something. The symbol is optional, if you do not provide it then it will take the default icon.
Below is my config and output, Notice the new year’s day.

customEvents: [
	 {
		"keyword": "Christmas Day",
		"symbol": "calendar-icon-christmas",
		"color": "red"
	 },
	 {
		"keyword": "New Year's Day",
		"color": "yellow"
	 },
	 {
		"keyword": "Easter Sunday",
		"symbol": "calendar-icon-easter",
		"color": "blue"
	 }
	]

[kusselin]

@ashishtank said in Display waste bins in color:

Sorry was occupied with something. The symbol is optional, if you do not provide it then it will take the default icon.
Below is my config and output, Notice the new year’s day.

Hi no problem … I want something … thank you very much.

But does the config have to be copied into the custom.css or the normal css?

EDIT: I have this copied in my costum .css but the colours are not displayed :-)

what make i wrong?

/*****************************************************
 * Magic Mirror                                      *
 * Custom CSS                                        *
 *                                                   *
 * By Michael Teeuw http://michaelteeuw.nl           *
 * MIT Licensed.                                     *
 *                                                   *
 * Add any custom CSS below.                         *
 * Changes to this files will be ignored by GIT. *
 *****************************************************/

 body {
   zoom: 70%;
   margin: 5px;
  position: absolute;
  height: calc(100% - 10px);
  width: calc(100% - 10px);
 }
 
customEvents: [
	 {
		"keyword": "Grüne Tonne plus",
		"color": "green"
	 },
	 {
		"keyword": "Biomüll",
		"color": "brown"
	 },
	 {
		"keyword": "Restmüll",
		"color": "gray"
	 }
	 {
		"keyword": "Glasbox",
		"color": "blue"
	 }
	]

Green bin plus and glass box, etc. are the names of the words in the Google Calendar

[ashishtank]

@kusselin The config is JSON and should never be added to css. you need to add this in config.json for calendars check below for new year’s day

{
	module: "calendar",
	header: "NL Holidays",
	position: "top_left",
	config: {
		calendars: [
			{
				symbol: "calendar-check",
				url: "webcal://www.calendarlabs.com/ical-calendar/ics/101/Netherlands_Holidays.ics"
			}
		],
		customEvents: [
			 {
				"keyword": "Christmas Day",
				"symbol": "calendar-icon-christmas",
				"color": "red"
			 },
			 {
				"keyword": "New Year's Day",
				"color": "yellow"
			 },
			 {
				"keyword": "Easter Sunday",
				"symbol": "calendar-icon-easter",
				"color": "blue"
			 }
		]
	}
},

[kusselin]

Can You help me please in the config.js…

here is my code but ist not show :

{
			module: "calendar",
			header: "Abfalltermine 2021",
			position: "top_left",
			config: {
				calendars: [
					{
						symbol: "calendar-check",
						url: "https://xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"		
					}
					
				],
				
				customEvents: [
	 {
		"keyword": "Grüne Tonne plus",
		"color": "green"
	 },
	 {
		"keyword": "Biomüll",
		"color": "brown"
	 },
	 {
		"keyword": "Restmüll",
		"color": "gray"
	 }
	 {
		"keyword": "Glasbox",
		"color": "blue"
	 }
	]
				
			}
		},  

[ashishtank]

@kusselin : looks like you are missing comma in your config.js

[kusselin]

@kusselin said in Display waste bins in color:

customEvents: [
{
“keyword”: “Grüne Tonne plus”,
“color”: “green”
},
{
“keyword”: “Biomüll”,
“color”: “brown”
},
{
“keyword”: “Restmüll”,
“color”: “gray”
}
{
“keyword”: “Glasbox”,
“color”: “blue”
}
]

now the code is so, but the colours are not displayed :-(

{
			module: "calendar",
			header: "Abfalltermine 2021",
			position: "top_left",
			config: {
				calendars: [
					{
						symbol: "calendar-check",
						url: "https://xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"		
					}
					
				],
				
				customEvents: [
	 {
		"keyword": "Grüne Tonne plus",
		"color": "green"
	 },
	 {
		"keyword": "Biomüll",
		"color": "brown"
	 },
	 {
		"keyword": "Restmüll",
		"color": "gray"
	 },
	 {
		"keyword": "Glasbox",
		"color": "blue"
	 }
	]
				
				
	}
},

[ashishtank]

@kusselin Can you check if your code is reaching here ?

1. Open dev tool using ctrl + shift + i
2. Go to sources tab
3. Press control + P to get the files list
4. Type calendar.js
5. Keep break point at below position and also few more breakpoints before it.
6. Press F5 to reload the Magic Mirror
7. If it hits break point, you can press F10 to step to each line and you can press F8 to continue execution (if it reaches to highlighted line then it should work)

Also check if there are any errors in console.