Different Calendars in different colors

amanzimdwini

I looked through the dox but could not find any hints… we have 8 different calendars (spouse / children / carpools / etc). Can they be color coded individually? Would be a great feature…

broberg

@amanzimdwini

You can alter the styling of each calendar yes if you are running multiple instances of the calendars. By using the custom.css file.

depending on which order you put them in the config they are configured like this :

#module_7_calendar {
color: red}
#module_8_calendar {
color: blue}
#module_9_calendar {
color: pink}
#module_10_calendar {
color: green}

The number of the modules starts with 0 which in most cases are the alert module in the config. ( #module_0_alert )

amanzimdwini

@broberg COOL!!! (Was I supposed to have been able to figure that out from the documentation?) Working on it now. Close topic

yawns

@amanzimdwini
No, this is not mentioned in the readme. The css styles are a bit “hackish” ;)

As broberg said you have to add multiple calendar instances. So instead of

{
	module: 'calendar',
	position: 'top_left',   // This can be any of the regions. Best results in left or right regions.
	config: {
		calendars: [
		{
			url: 'http://www.calendarlabs.com/templates/ical/US-Holidays.ics',
			symbol: 'calendar',
        },
		{
			url: 'whatever',
			symbol: 'calendar',
        }
    ]
	}
}

you go for

{
	module: 'calendar',
	position: 'top_left',   // This can be any of the regions. Best results in left or right regions.
	config: {
		calendars: [
		{
			url: 'http://www.calendarlabs.com/templates/ical/US-Holidays.ics',
			symbol: 'calendar',
        }
    ]
	}
},
{
	module: 'calendar',
	position: 'top_left',   // This can be any of the regions. Best results in left or right regions.
	config: {
		calendars: [
		{
			url: 'whatever',
			symbol: 'calendar',
        }
    ]
	}
}

Downside is, that you don’t see recent entries of all calendars next to each other, because every calendar instance is sorting on its own

amanzimdwini

@yawns Argh. THAT is a downside, explains the results I got) - and brings back the original request.

But it did give me other good ideas Re: custom.css (which is, indeed, and bit “hackish”)

Thanks,

strawberry 3.141

@amanzimdwini in the upcoming version there will be color support https://github.com/MichMich/MagicMirror/tree/develop/modules/default/calendar#calendar-configuration

amanzimdwini

@strawberry-3.141
I’m going beta later today :) This is great.