Calendar Color

Mrc

Go to folder MagicMirror/modules/default/calendar , edit calendar.js , change values colored and coloredSymbolOnly to “true”

sdetweil

@Mrc do NOT edit the module source files to change configuration.

put the settings in the config section for that. module in config.js

{
module:'calendar',
config:{
    colored:true,
    coloredSymbolsOnly:true
}
}

RJDaPirate

Any one know why all of the calendar entries are being assigned Mom’s color instead of their own?

module: "calendar",
			header: "Family Schedule",
			position: "top_center",
			config: {
				colored: true,
				calendars: [
					{
						symbol: "calendar-check",
						url: "webcal://www.calendarlabs.com/ical-calendar/ics/76/US_Holidays.ics"					
					},
					{
						 symbol: "Dad's Calender",
							url: "https://calendar.google.com/calendar/ical/basic.ics",
							color: '#6600CC'
					},
					{
						symbol: "Mom's Calender",
							url: "https://calendar.google.com/calendar/ical/basic.ics",
						color: '#ff0000'
					},
					{
						Symbol: "A's Calender",
							url: "https://calendar.google.com/calendar/ical/basic.ics",
						color: '#00ff00'
					},
					{
						symbol: "J's Calender",
							url: "https://calendar.google.com/calendar/ical/basic.ics",
						color: '#40E0D0'
					},
					{
						symbol: "L's Calender",
							url: "https://calendar.google.com/calendar/basic.ics",
						color: '#ffd700'
					}	
				]
			}
		},

sdetweil

@RJDaPirate

the code looks up the color using the url as a key…

all of your urls are the same so you will get results based on the url, where the name is stored last. M is higher than any other string, so the url will match that in the hash lookup

RJDaPirate

@sdetweil I deleted the personal settings within the urls. They are all different in the real config.js file.

sdetweil

@RJDaPirate the code does this

if (this.config.colored && !this.config.coloredSymbolOnly) {
				eventWrapper.style.cssText = "color:" + this.colorForUrl(event.url);
			}

	colorForUrl: function (url) {
		return this.getCalendarProperty(url, "color", "#fff");
	},

RJDaPirate

@sdetweil This is not visible in the config.js file. Earlier in the thread you instructed another user not the change settings in source instead of the config.js. Where are the setting you highlighted?

sdetweil

@RJDaPirate i am just showing the code that uses the settings from config.js… not changing it…

this.config.colored
u have colored: true, in config.js calendar config section

then it looks up color value by url…

if not found it return #fff as the color…

u have 6 digit color values…

RJDaPirate

@sdetweil Understand you did not “edit”. Do not understand what I have done wrong? Cannot find examples of Calendar Module Config.js with seperate colors for different url (google) calendars. Is there a knowledge document you’d recommend I read thru that covers those config: { colored:…

sdetweil

@RJDaPirate I wasn’t aware of color support myself til you mentioned it.

the online doc is all I am aware of